HTML知识点总结

合集下载

HTML知识点

HTML基础知识一、什么HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

二、HTML能干什么您可以使用HTML 来建立自己的WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

三、HTML长什么样子•<!DOCTYPE html>声明为HTML5 文档•<html>元素是HTML 页面的根元素•<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。

•<title>元素描述了文档的标题•<body>元素包含了可见的页面内容•<h1>元素定义一个大标题•<p>元素定义一个段落四、HTML都包含那些标签五、HTML实例1)我的第一个网页2)注释标签：对代码进行说明3)常用格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换行<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调文本</strong> 4)标题标签5)列表标签6)超链接:7)分隔窗口8)块级元素和行内元素块级元素：凡是默认自动占满网页整行的元素（自动换行），称为块级元素<hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...行内元素：不能占满网页整行的元素<font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...9)表格标签tr:行；td：单元格10)表单元素：11)多行文本域。

网页设计制作知识点

网页设计制作知识点1. 基础知识1.1 HTML（Hypertext Markup Language）HTML是用于构建网页的标记语言，通过使用各种标签和属性，可以定义网页的结构和内容。

常见的HTML标签包括<head>、<body>、<div>、<p>等。

1.2 CSS（Cascading Style Sheets）CSS用于控制网页的样式和布局，通过将样式属性应用于HTML元素，可以改变它们的颜色、字体、大小等外观特性。

常见的CSS属性包括color、font-family、margin、padding等。

1.3 JavaScriptJavaScript是一种用于增加网页交互性的脚本语言，可以通过在网页中嵌入JavaScript代码来实现动态效果、表单验证等功能。

2. 响应式设计响应式设计是指根据设备的屏幕尺寸和分辨率，自动调整网页的布局和内容，以确保在不同设备上都能正常显示和使用。

常见的响应式设计技术包括媒体查询（Media Queries）、流体布局（Fluid Layout）和弹性图片（Flexible Images）等。

3. 网页导航3.1 导航栏导航栏用于展示网站的主要导航链接，通常位于页面的顶部或侧边。

可以使用HTML和CSS创建导航栏，并为每个链接添加交互效果。

3.2 面包屑导航面包屑导航用于显示当前页面在网站结构中的位置，让用户可以方便地进行导航和返回。

可以使用HTML和CSS创建面包屑导航，并为每个链接添加合适的指向。

4. 网页布局4.1 盒子模型盒子模型是用于布局和定位网页元素的基础概念，每个HTML 元素都可以看作是一个矩形的盒子。

通过设置盒子的宽度、高度、内边距（padding）和外边距（margin），可以精确控制元素在网页中的位置和间距。

4.2 栅格系统栅格系统是一种用于创建响应式网页布局的技术，将页面划分为多个均等的列。

前端知识点总结文档

前端知识点总结文档前端开发是指构建Web站点或Web应用程序的过程。

在前端开发中，开发者主要负责设计和构建用户能够在浏览器中看到和交互的内容。

由于前端开发需要掌握多种技术，包括HTML、CSS、JavaScript等，因此需要不断学习和总结相关知识。

本文将总结前端开发中的一些重要知识点，希望对前端开发者有所帮助。

一、HTML（超文本标记语言）HTML是一种标记语言，用于创建Web页面。

开发者可以使用HTML来定义页面的结构和内容。

HTML由一系列标签组成，每个标签用来描述页面上的不同元素，如标题、段落、列表等。

在HTML中，也可以使用属性来为元素添加一些额外的信息，比如样式和链接地址。

以下是一些HTML中常用的标签：1. <div>：定义文档中的一个区域，通常用来组织代码和样式2. <p>：定义一个段落3. <a>：定义一个超链接4. <img>：定义图像5. <ul>：定义一个无序列表6. <li>：定义列表中的每一项二、CSS（层叠样式表）CSS用于为HTML文档添加样式，比如颜色、字体、布局等。

通过CSS，开发者可以控制页面元素的显示效果，从而让页面更加美观和易于阅读。

以下是一些CSS中常用的属性：1. color：定义文本的颜色2. font-size：定义文本的大小3. background-color：定义元素的背景颜色4. margin：定义元素的外边距5. padding：定义元素的内边距6. display：定义元素的显示方式三、JavaScriptJavaScript是一种动态脚本语言，用于为Web页面添加交互功能。

通过JavaScript，开发者可以操作页面的元素，响应用户的操作，以及与服务器进行数据交互等。

以下是一些JavaScript中常用的功能：1. DOM操作：通过JavaScript可以获取和修改页面上的元素，从而实现页面的动态效果2. 事件处理：通过JavaScript可以为页面上的元素绑定各种事件，比如点击、鼠标移入等3. AJAX：通过JavaScript可以向服务器发送请求并获取数据，用于实现页面的异步更新4. 前端框架：前端开发中常用的框架有React、Vue、Angular等，它们提供了一些组件和工具，用于简化开发流程四、响应式设计响应式设计是指设计和开发能够适应不同设备和屏幕尺寸的网站和应用程序。

web前端考试知识点总结

web前端考试知识点总结一、HTML知识点总结1. HTML基础知识- HTML的基本结构- HTML的常用标签- HTML的元数据标签- HTML的列表、表格、表单等相关标签2. HTML5新增的语义化标签- header、footer、nav、article、section、aside等3. HTML5新增的表单元素- input的各种类型- 新增的表单元素如datalist、keygen等4. HTML5新增的媒体元素- video、audio等5. HTML5新增的API- 本地存储、离线应用、地理定位等二、CSS知识点总结1. CSS基础知识- CSS的语法- CSS的选择器- CSS的样式属性2. CSS布局- 盒模型- 浮动- 定位- 弹性盒子布局- 栅格布局3. CSS3新增的样式- 边框、背景、文字、渐变、阴影等效果 - 过渡、变换、动画等4. 响应式设计- 媒体查询- 移动优先5. CSS预处理器- SASS、LESS等三、JavaScript知识点总结1. JavaScript基础知识- 数据类型- 运算符- 流程控制语句2. JavaScript函数- 函数的定义- 作用域- 闭包- 高阶函数3. JavaScript对象- 对象的创建- 原型链- 对象的继承4. DOM操作- 节点的增删改查- 事件处理5. AJAX与跨域- XMLHttpRequest对象- 跨域访问的解决方案6. ES6知识点- let、const- 箭头函数- 解构赋值- 模板字符串- Promise等四、Web前端知识点总结1. 前端框架- Vue.js、React、Angular等- 每个框架的基本原理和使用方法2. 前端工程工具- Webpack、Gulp、Grunt等- 理解构建工具的作用和配置3. 前端性能优化- 页面加载速度优化- 代码性能优化4. 前端安全- XSS、CSRF、点击劫持等- 前端安全常见问题和解决方案5. 前端测试- 单元测试- UI测试6. 前端工程化- 模块化开发- 前端构建流程综上所述，Web前端技术知识点之多之杂，要想在考试中取得好成绩，需要对各种知识点进行深入理解和掌握。

HTML初级知识点总结,最详细的总结

HTML超文本标记语言，一种规范预定义,已经定义好的各种标记，只需要我们把对应的标记放到合适的位置一. HTML基本语法与基本结构(重点）标记的使用1、标记一般成对出现，包含开始标记和结束标记2、标记可以嵌套使用，但是不能交叉使用3、标记不区分大小写属性的使用（属性控制内容的格式,额外的格式）1、书写位置在开始标记中2、格式：属性名=“属性值",多个属性之间使用空格分割3、不同的标记属性可能相同也可能不同4、属性使用的标记中,只能对本标中的内容记产生影响5、属性不冲突时，效果叠加，属性冲突时，就近原则html的基本结构〈html>-—--声明网页〈head〉———-网页的头部信息<title〉标题〈/title〉—---网页的标题</head><body〉—---网页的主体，网页内容主要展示的部分网页的主要内容</body>〈/html〉二. 文本格式的应用1、标题标记<hn>,n的取值1-6,1级标题最大效果:加粗显示，带有自动换行属性:align控制标题的对齐方式，取值left（左对齐，默认值）|center(居中）｜right （右对齐）2、段落标记<p〉效果:把内容分段展示，自动换行属性:align，控制段落内容的对齐方式,取值left（左对齐，默认值）|center（居中）｜right(右对齐）3、换行符〈br /〉，单标记，不需要结束标记，换行但不分段空格符号: 表示一个空格强制换行符：<br /〉4、水平线标记<HR />，单标记效果：水平线,默认是一个粗细为2px（像素）的线条属性：size 控制水平线的粗细，取值为整数，单位为像素（px）width 控制水平线的长度,取值可以是像素单位,也可以是百分数（相对于浏览器窗口百分比)noshade设置水平线不带有阴影，该属性不需要取值color 设置水平线的颜色，取值可以是英文的颜色值，也可以是十六进制的颜色代码align 控制水平线的对齐方式，取值left(左对齐）｜center(居中，默认值）|right(右对齐）5、分节标记<div〉效果：把内容设置为一节，前后带有自动换行属性：align控制div中内容的对齐方式,取值left（左对齐，默认值）｜center（居中）|right（右对齐）6、居中标记符<center>效果：把center标记中的内容居中显示7、文本控制标记<font>效果:控制字体的各种显示样式属性：size 控制字体的大小，取值为绝对值时，1--7，数字越大字体越大，取相对值时,参考的是默认字体（3号），取值在-2-—+4之间color 控制字体的颜色face 控制字体的字体，取值可以是多个值，多个值之间使用逗号分割,取值时从左往右依次取值，找到合适的值为止，假如都不支持，使用默认格式显示8、字体的物理样式加粗：<b>斜体：〈i>下划线:〈u〉删除线：<s〉上标:<sup〉下标：〈sub>1、常用逻辑字符〈ADDRESS〉网页设计者或维护者的信息,通常显示为斜体<CITE> 表示文本属于引用,通常显示为斜体<CODE〉• 表示程序代码,通常显示为固定宽度字体<DFN> • 表示定义了的术语，通常显示为黑体或斜体〈EM> 强调某些字词，通常显示为斜体〈KBD〉表用户的键盘输入,通常显示为固定宽度字体〈SAMP> 表示文本样本,通常显示为固定宽度字体〈STRONG〉特别强调某些字词，通常显示为粗体<VAR> 表示变量，通常显示为斜体2、列表标记1、有序列表,〈ol〉，需要配合〈li>标记使用一个<li>标记对应一个选项ol的属性：type 控制列表的符号样式，取值1|A|a｜i|I，默认是1start 控制列表的起始值，取值为任意的整数li的属性:type控制选项自身的符号样式，取值1|A｜a|i|Ivalue控制选项本身的起始值，取值为任意整数，但是修改自身起始值之后,会对同一个列表中本选项之后的同级<li〉标记产生影响2、无序列表，<ul>，配合<li>标记使用一个<li>标记对应一个选项ul的属性:type 控制所有选项的符号样式，取值disc(实心圆，默认值）｜circle（空心圆）｜square（方块）li的属性：type控制选项本身的符号样式li标记用在ol中，type属性的取值跟ol的type属性取值走，用在ul中，跟着ul的type属性取值走3、定义列表，<dl〉，完成对定义列表的声明<dt>，术语标记，可以理解为类似于列表选项的标题使用〈dd>,描述标记，可以理解为类似于列表的选项使用三. 在网页中使用图片标记：〈img>,单标记，不需要结束标记属性: src 引入图片资源的路径绝对路径：资源在服务器上的位置，该位置是从盘符出发相对路径：资源在服务器上的相对位置，从网页本身出发.。

HTML文档的简单编辑知识点

HTML文档的简单编辑认识网页的实质；了解HTML文件的结构，掌握HTML文挡的编辑方法；能够读懂简单的HTML网页文件代码。

一、HTML(HyperText Markup Language,超文本标记语言)1.网页的实质：用HTML写成的文档，可以通过浏览器进行浏览。

2.HTML采用一组特定的标记来描述Web页面的元素结构、输出格式、图像显示和超级链接等。

二、HTML文档的结构<html> html文件开始<head>文件头开始……文件头</head> 文件头结束<body>文件体开始……文件体</body>文件体结束</html>html文件结束三、Html元素的表示方法1.<元素名>文件或超文本</元素名>2.<元素名属性名＝"属性值...">文本或超文本</元素名>3.<元素名>四、HTML的基本元素HTML元素含义和位置<html> </html>声明为一个html文件，在文件开头使用开始标记，结尾使用结束标记<head> </head>声明网页的头，紧跟在<html>开始标记之后<title> </title>声明网页的标题，在head开始和结束标记之间<body> </body>声明文件中包含的内容（所有的文本、图片及文档中其他标记）<a href=" "> </a>链接标记，用于定义超级链接来链接其他文件<img src=" ">插入一个图像文件<table> </table>插入一个表格，其内容还应有行与列的描述<br>换行标记<p> </p>段落标记，为文字、图片、表格等加一空行<font> </font>字体标记，设定字体、颜色和字号等<center></center>居中，使文字、图片、表格等居中显示<form></form>创建一个表单，定义表单的开始和结束位置<hr>插入一条水平分隔线HTML代码分析基本结构认识链接元素表单练习提示：查看→源文件知识拓展HTML语言教程思考与实践任务1.阅读教材114页任务1，教材115页任务2的程序代码2.实践练习:下载练习素材请使用Dreamweaver打开练习素材中的html-ex01.htm和html-ex02.htm文件，完善网页代码。

html5所有知识点

html5所有知识点HTML5是一种用于构建和呈现网页的标准技术。

它引入了很多新的元素和功能，使得开发者能够创建更强大、更丰富的网页应用程序。

下面是HTML5的一些重要知识点：1. 语义化标签：HTML5引入了一些新的语义化标签，如`<header>`、`<nav>`、`<article>`等，以提供更清晰的结构和含义，使搜索引擎更好地理解网页内容。

2. 视频和音频：HTML5提供了`<video>`和`<audio>`元素，使开发者可以直接在网页上嵌入视频和音频内容，无需使用第三方插件，提高了用户体验。

3. 画布(Canvas)：HTML5的`<canvas>`元素允许开发者使用JavaScript在网页上绘制图形、动画和游戏等交互式内容，为用户提供更多的视觉效果。

4. 本地存储：HTML5引入了新的本地存储API，如Web Storage和IndexedDB，使得网页应用能够在用户的浏览器中存储数据，提供离线访问和更好的性能。

5. 地理定位：HTML5通过Geolocation API提供了获取用户地理位置的能力，使得开发者可以为用户提供基于地理位置的个性化体验，比如找到附近的餐厅或提供导航服务。

6. Web Workers：HTML5的Web Workers允许开发者在浏览器后台运行脚本，以提高应用的性能和响应能力，从而更好地处理复杂的计算任务。

7. 响应式设计：HTML5为开发者提供了媒体查询和弹性布局等技术，使得网页可以根据设备的屏幕大小和分辨率进行自适应布局和样式调整，实现响应式设计。

8. 语义化表单：HTML5引入了一些新的表单元素和属性，如`<inputtype="email">`、`<input type="date">`、`<input type="range">`等，提供了更丰富、更语义化的表单输入类型。

第1章 HTML基础

表示页面所遵循的协议
表示页面对于文档类型的声明
14
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
在此情况下使用：需要干净的标记，避免表现上的混乱。请不层叠样式表配合使用。
15
HTML的编码觃范
1.标签闭合：HTML中的所有标签都必须是闭合的
2.标签名小写 : 用小写字母来拼写标签名
3.属性值包含在双引号内：除特殊情冴，我们一定要用双引号来包裹属性值。如： <div class=“myBox”></div> 4.标签的嵌套关系：有些标签属于其他标签的子标签，那么如果父标签丌存在，则子标签页丌应存在。如：<td>在没有 <table>出现的时候，是绝对丌应该出现的
网页制作工具：
EditPlus：方便快捷、有语法高亮、行号提示、HTML代码快捷插入
；缺点是无语法自动提示，丌能所见即所得。
Dreameweaver：传统网页制作主流工具，语法自动提示、自动完成，通过鼠标拖放可自动生成代码，所见即所得，但由于功能强大，
导致运行速度偏慢
32
我的第一个网页
制作你的第一个网页，内容随意例如：
通过 JavaScript，可以重构整个 HTML 文档，可以添加、移除、改变戒重排页面上的项目
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所
有元素迚行访问的入口。这个入口，连同对 HTML 元素迚行添加、移劢、改变戒移除的方法和属性，都是通过DOM来获得的

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

第一部分：HTML页面与基本标签1、URL:网址2、HTML：超文本标记语言扩展名：.html或.htm3、 HTML标记的基本格式：<标记>文件内容</标记>某些标记还可以包含一些属性：<标记名称属性1 属性2 属性3 ……>用来注释的标记3、<html></html> : HTML文档的开始和结束4、<head></head> : HTML头部分，用于显示标题和网页属性信息5、<title></title> : 文档标题6、<body></body> : HTML主体部分，用于放主要内容属性：bgcolor:设置背景颜色background:背景图片7、<br/>：换行标记（注意是单标记，没有结束标签）8、<p></p> : 段落标签, 会自动换行。

属性：align：对齐方式align=”left”:左对齐align=”right”:右对齐align=”center”: 居中对齐9、<h></h>：标题标签，字号越大, 字体越小<h1></h1>,<h2></h3> …<h6></h6>属性：align: 对齐方式 --- 对齐方式跟段落标记一样。

10、  : 表示空格 (了解)11、<font></font> : 字体标记属性：face：设置文字的字形size：设置文字的大小，1号最小，7号最大，默认字号为3color：设置文字的颜色12、字体的物理风格：(了解)<b></b>把字体加粗<i></i>斜体<u></u>下划线<s></s>删除线字体的逻辑风格：(了解)<sup></sup>上标<sub></sub>下标<strong></strong>粗体字<small></small>文本以小体字显示<big></big>文本以大号字显示13、<hr> : 水平线标签(注意：它是单标记，没有结束标记)属性：align:对齐方式---同上size:高度width:宽度color: 颜色14、<img> : 图像标记(注意：它是单标记，没有结束标记)属性: src: 设置图片的路径width和height:设置图片的宽和高, 一般要么都不写，显示的是图片的真实大小，要么只是宽或者高，让图片等比例缩放，避免失真。

border : 设置图像的边框，以像素为单位。

（了解）align ：(了解)用来调整图片的位置：top：偏上方middle：中间bottom：底部left：左right:右15、<ol></ol> : 有序列表<ul></ul> : 无序列表<li></li> : 有序和无序列表的内容16、<a></a>: 超链接标记属性： href : 设置超链接的访问地址，可以是网址，邮箱，html文件target: (了解)设置打开链接的方式target="_blank":在新窗口打开mailto:超链接到邮箱地址<a href="" target="_blank">我要去百度</a><a href="mailto:124880184@">我要去邮箱</a>16、<pre></pre>: 预排版标记<pre>标记允许保留你在原代码中输入的空格和回车。

15、<marquee></marquee> : 滚动字符(了解)direction设置活动字幕的滚动方向，可以是up、down、left、right behavior设置滚动的方式，可以是scroll(一端滚动到另一端)、slide(一端快速滑动到另一端，且不再重复)、alternate(在两端之间来回滚动)height设置滚动字幕的高度。

17、注意：1、HTML不区分大小写，大写小写都可以2、有内容的标签，必须要成对出现第二部分：HTML表格应用1、<table></table> : 表格的开始和结束属性：width: 用来设置表格的宽度height: 用来设置表格的高度border: 用来设置表格边框尺寸大小bordercolor: 用来设置表格边框颜色bgcolor : 设置表格的背景颜色align: 水平对齐方式 left: 左对齐center: 居中对齐right: 右对齐background：属性用来设置表格的背景图片cellspacing：属性用来设置表格单元格间距cellpadding：属性用来设置表格单元格填充2、<tr></tr>：表示行属性：bgcolor : 设置行的背景颜色align: 水平对齐方式valign: (了解)垂直对齐方式 top : 顶端对齐middle: 居中对齐bottom : 底端对齐3、<td></td> : 表示列属性：rowspan: 跨行colspan: 跨列width：用来设置单元格的宽度height：用来设置单元格的高度bgcolor : 设置单元格的背景颜色align: 水平对齐方式valign: (了解)垂直对齐方式第三部分：浮动窗口1、<iframe></iframe>标记，又称为浮动帧标记，可以用来将一个HTML文档嵌套在另外一个HTML文档中显示。

语法：<iframesrc="iframe.html" width="400" height="300" scrolling="auto"frameborder="1"></iframe>属性：src:设置文件的路径width和height:分别设置浮动窗口的宽和高scrolling:设置是否出现滚动条，可选值有auto(自动)、yes(出现)、no(不出现)frameborder:设置是否出现边框，可选值有1(出现)、0(不出现)2、iframe的name属性和超链接<a>的target属性配合使用，可以做出导航栏的效果。

3、<fieldset></fieldset>：分组标签<legend></legend>: 分组标签的标题第四部分：表单与页面控件1、<form></form>：表单标签name属性：表单的名称action属性：表单提交的地址2、<input> :用户输入信息标签语法：<input type=“”>type属性常用的值可以是：text(文本框)、password(密码框)、checkbox(复选框)、radio(单选框)、button(按钮)、submit(提交按钮)、reset(重置按钮)注意：1)单选按钮的name属性必须要写，并且name的值必须相同。

2)checked="checked"：默认选中一个选框3)复选框如果写了name属性，name可以相同，也可以不同4) select和textarea不属于输入标签3、<select></select>:下拉列表的开始<option></option>:显示下拉列表的目录内容selected="selected" : 写在option标签里，表示默认选中那个目录内容4、<textarea></textarea>: 多行文本标签cols: 有多少列rows：有多少行第五部分：CSS样式定义与应用1、C SS：层叠样式表2、1)css使用规则选择器定义样式，一般写在style标记里<style type="text/css"></style>2)style标记一般写在head里。

3、标签选择器：语法：标签名称1,标签名称2…{属性:值;属性:值;属性:值; ....}注意：1、标签选择器都是以标签开头的，以,号来分割,可以写多个标签2、字体大小单位px，必须要写3、属性一般用–进行连接。

4、css样式用/**/进行注释。

4、类选择器:语法：.自定义名称{属性:值;属性:值;属性:值; ....}注意：1、必须以 .开头2、必须要在标签里写class=”自定义名称”;5、I D选择器：语法：#自定义名称{属性:值;属性:值;属性:值; ....}注意：1、必须以 # 开头。

2、必须要在标签里写：id="自定义名称"3、ID选择器是唯一的，只能唯一的给一个标签使用。

6、注意：任何标签都有class和id属性。

7、常用的样式属性：font-size：字体大小font-family：字体类型color：设置文本的颜色vertical-align：文本垂直对齐方式text-align：文本水平对齐方式8、超链接的样式属性：text-decoration 属性规定添加到文本的修饰。

none默认。

定义标准的文本。

underline：定义文本下的一条线。

overline：定义文本上的一条线。

注意：超链接样式顺序：a:link a:visited a:hover a:active 可以简单记忆为：爱哈 LoVe HA（每个的首字母）为什么要使用这个顺序呢？因为如果顺序乱写的话，超链接的样式可能会不生效或者出问题。

9、背景样式的使用：10、样式表的使用：内嵌样式表包括：标签选择器，类选择器，ID选择器内嵌样式表的优先级为：ID选择器>类选择器>标签选择器行内样式表的作用范围：仅限当前的标签。

语法为：<p style=”属性：值; 属性：值;…”></p>注意：任何标签都具有style属性。