注释
HTML注释语法：
快捷键：ctrl+/
用途：
1.在源代码中添加描述性的提示信息，便于我们阅读代码。
2.对于 HTML 纠错也大有帮助，可以通过注释某一行 HTML 代码，以便检索错误的位置。
3.暂时注释掉一部分不用的代码，便于后期恢复代码
标题
<h1>定义最大的标题，<h6>定义最小的标题。
<h1>-<h6> 标签都是双标签，且是容器级标签。
注意：
1.标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。样式是由css设定的
2.标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的 上一级标题 3.标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推
在整个HTML中的权重非常高，__内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个_**<h1>**_，反而降低权重，__一个页面中只会出现一个
段落
通过
标签进行定义
<p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等
注意：
1.<p>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。换行的效果是由css决定的
<p>标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的<p>标签进行定义
文本格式化
HTML只负责搭建结构，css负责格式化样式
在HTML4.0版本规范后，结构和样式进行了分离。在HTML4.01和XHTML1.0的transitional版本中依旧可以使用
文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字| 标签 | 描述 |
|---|---|
| b | 定义粗体文本，bold |
| big | 定义大号字 |
| em | 定义着重文字，emphasis，自带斜体效果 |
| i | 定义斜体字，italic |
| small | 定义小号字 |
| strong | 定义加重语气，自带加粗效果 |
| sub | 定义下标字 |
| sup | 定义上标字 |
| ins | 定义插入字，自带下划线效果 |
| del | 定义删除字 |
| s | 不赞成使用，使用del代替 |
| strike | 不赞成使用，使用del代替 |
| u | 定义下划线，不赞成使用，使用css中样式代替 |
图像
<img>标签是单标签，本身相当于一个特殊的文本。作用是在指定的位置插入一张图片。
只能通过属性进行相关的图像设置
| 属性名 | 描述 |
|---|---|
| src | 表示图片的路径； |
| width | 表示图片的宽度(单位px)； 如果不设置两个属性，会以图片的原始尺寸加载。 如果设置属性：只设置了其中一个，另一个会等比例变换； 如果两个都设置，按照设置值加载。 |
| height | 表示图片的高度(单位px)； |
| border | 边框属性；它的值可以设置边框的厚度； |
| title | 设置提示文本；鼠标悬停时的提示文本 |
| alt | 设置图像没有找到时候的替换文本；尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化 |
图片格式
DPG图片压缩技术
京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。
webp 图片格式
谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。
JPG
是我们最常见的一种图片保存格式。
jpg:可压缩的，有损图片质量的格式。
特点:文件小、色彩丰富。
劣势:不能保存透明背景图片。
用途:插入图，大篇幅的整个的背景图。本身不要求太清晰，保证文件加载够快
png
png:不可压缩的，可以保存图层，质量比较大。
特点:支持透明和半透明。
用途:透明和半透明的精灵图、背景图，颜色单一、尺寸较小的图片。
gif
gif:本身跟压缩无关，颜色色值较少，256种、128种、2种。
特点:可以保存透明，不支持半透明，可以保存动图。
用途:透明背景图，动图。
SRC和路径
src：全称source资源，属性值是图片查找的路径。
路径：指的是寻找文件时所历经的线路
路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同
（1）相对路径(不能跨盘符)——（**同级. 子级/ 上级../**）
相对路径查找文件时，需要从HTML文件**<u>本身</u>**出发，根据相对的位置进行查找，包含三种方向。**同级查找**：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；
子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。
上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法利用../表示跳出一级，如果跳出多级书写多次../，直到找到文件。
上级查找与子级查找常混合使用，../一般只出现在开始位置。
（2）绝对路径
绝对路径查找文件时，<u>不需要从HTML文件出发</u>，而是直接**<u>从电脑的盘符出发</u>**进行查找，或者**<u>使用网址形式</u>**查找。盘符出发：例如从c盘或者d盘出发查找图片，书写时**<u>以c:/开头</u>**，后续类似子级查找写法直至找到目标文件。
网址形式：要查找的文件是来自网络资源，路径写法以http://开头。
从盘符出发的绝对路径的缺点：
a.盘符出发的路径<u>不可移植，不可移动</u>。b.盘符出发的路径<u>容易出现中文字符</u>，中文的路径容易出现错误。实际应用：a.建议多使用相对路径，可以适当使用网址形式的绝对路径。b.使用相对路径<u>必须将图片或文件与HTML同时上传</u>，而且<u>需要保持相对位置不变</u>。
音频
audio双标签
使用src属性设置查找音频的路径，支持的格式包括mp3.ogg.wav
音频控制条属性
音频加载后不会自动显示控制音频的进度条，需使用controls属性进行设置，属性值也是controls
<audio src=“audio.MP3” controls=“controls”></audio>视频
vedio双标签
使用src属性设置查找音频的路径，支持的格式包括mp3.ogg.webm
音频控制条属性
视频加载后不会自动显示控制视频的进度条，需使用controls属性进行设置，属性值也是controls
<video src=“audio.MP3” controls=“controls”></video>超级链接
超链接可以是一个字或词，，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。<a>为双标签。
作用：在指定的位置添加超级链接，提供用户进行点击和跳转。
<a>标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。
href**属性**
href全称_hypertext reference，超文本引用_，用于规定链接的目标地址。属性值：链接目标的路径地址。可以使用<u>相对路径或网址形式的绝对路径</u>
target**属性**
使用target 属性，可以定义被链接的文档在何处跳转显示。属性值有两种：**_self**：默认值，表示跳转的页面在**<u>当前窗口</u>**打开，不会打开新的窗口。**_blank**：空白的，表示跳转的页面在**<u>新窗口</u>**打开。
title**属性**
title设置的是鼠标悬停时的提示文本属性值：自定义的文字内容。该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。
页面内锚点跳转
从某个位置跳转到同页面的另一个位置
制作方法：
第一步：设置锚点，也就是设置目标位置，有两种设置方式。
①**<u>在目标位置</u>**找到任意一个标签，给它添加**id属性**，id的属性值必须是**<u>唯一</u>**的。id的属性值定义规则：<u>必须以字母开头</u>，后面可以有字母、数字、下划线和横线，区分大小写。
②在目标位置添加一个空的`<a>`标签，只设置一个**name属性**，name属性值设置方式与id相同，**<u>也必须是唯一的</u>**。
其中，id和name的属性值可以自定义。
第二步：链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。
跨页面锚点跳转
制作方法：
第一步：设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name属性。
第二步：链接到锚点，**添加超级链接时href属性需要更改，属性值写为**页面的路径#id 。
列表
将内容相关、结构相似、样式相近的内容使用列表结构进行搭建
无序列表
1.作用：定义一个没有顺序的列表的结构、语义。
2.无序列表需要两个标签参与，分别是`<ul>`和`<li>`。ul：unordered list，表示定义一个无序列表的大结构。li：list item，列表项，定义的是无序列表内的某一项。3.注意 ：`<ul>`内部只能嵌套`<li>`，`<li>`标签不能脱离`<ul>`单独书写。快捷键：<font style="color:#1890FF;">ul>li</font>
<font style="color:#000080;"><li></li></font>
4.`<ul>`内部可以**<u>嵌套任意多个</u>**`<li>`标签。快捷键：<font style="color:#1890FF;">ul>li*4</font>
<font style="color:#000080;"><li></li></font><font style="color:#000080;"><li></li></font><font style="color:#000080;"><li></li></font><font style="color:#000080;"><li></li></font>
5.<li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表结构.
6.无序列表的列表项<li>之间，没有顺序的先后之分，它们的重要程度是相同的。
7.无序列表的作用只是**<u>搭建列表结构</u>**，**<u>没有添加样式</u>**前缀的功能，样式是由css负责。
有序列表
有序列表的语法与无序列表非常类似，只是在语义上有差异。1.作用：定义一个有先后顺序的列表结构、语义。
2.有序列表由两个标签组成，分别是 `<ol>`和`<li>`。ol：ordered list，表示定义一个有序的列表的大结构。li：list item，定义的是有序列表的每一项。3. `<ol>`内部只能嵌套`<li>`标签，而`<li>`不能脱离`<ol>`单独书写。4.`<ol>`标签内部可以嵌套多个`<li>`标签。5.`<li>`标签也是一个经典的**<font style="color:#F5222D;">容器级</font>**标签，内部可以放置任意内容，甚至可以放ol>li
6.有序列表的列表项<li>之间，存在顺序先后之分，根据内容的顺序需要合理调整书写位置。
7.有序列表的前面的**<u>数字排序样式不是 </u>**`**<u><ol></u>**`**<u>标签的作用</u>**，而是css负责的。
自定义列表
1.作用：定义一个自定义内容及主题的列表、语义。
2.由三个标签组成完整的结构，包含 `<dl>`、`<dt>`和`<dd>`。dl：definition list，表示定义一个自定义列表的大结构。dt：definition term，表示定义自定义列表中的一个主题或者术语。dd：definition description，定义解释项，表示描述或解释前面的定义主题。
3.<dl>内部只能嵌套<dt>和<dd>，**<u><dt></u>**与**<u><dd></u>**是同级关系。
快捷键：**<font style="color:#1890FF;">dl>dt+dd</font>**
<font style="color:#000080;"><dt></font>主题<font style="color:#000080;"></dt></font><font style="color:#000080;"><dd></font>解释项<font style="color:#000080;"></dd></font>
5.每个dt后面可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt。
4.dl内部可以放**<u>多组</u>**dt和dd，每个dd解释说明的是**<u>前面的距离最近</u>**的一个dt。
6.dt和dd标签也是容器级标签，内部可以放置任意内容。
7.定义列表中的缩进样式由css负责，标签只负责搭建语义结构。
8.配合着css布局效果，最好每个dl中只添加一组dt和dd，便于后期添加css样式。如有需要可在其内部再添加 **<u><p></u>**标签。
布局
<div>和<span>标签常用作布局工具，我们俗称盒子
`<div>`和`<span>`都是没有具体语义的。div：全称division，分割、区域、跨度的意思。俗称大盒子。`<div>`是<font style="color:#F5222D;">双</font>标签，是最经典的**<font style="color:#F5222D;">容器级</font>**标签，内部可以放置任意内容。作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用`<div>`包裹起来，整体设置<u>大的布局效果</u>。span：小区域、小跨度的意思。俗称小盒子。`<span>`也是<font style="color:#F5222D;">双</font>标签，**<font style="color:#F5222D;">容器级</font>**标签。作用：在不改变整体效果的情况下，可以辅助进行<u>局部调整</u>。
表格
创建一个简单的表格至少有三个双标签组成，
table：表格，定义的是整个的表格大结构。
解决边框塌陷：
引申：如果要绘制表头，使用标签
tr：table rows，表格的行，定义的是表格由多少行组成。td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格<u>（相当于列）</u>。三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。
<th>，table head data，表头单元格，在表格中绘制的时候，替换的是<td>的位置。
<th>标签中自带默认的css样式效果，文字显示粗体居中。
合并单元格
表格的单元格可以进行合并，通过<tr>和<td>的两个属性可以进行合并设置。
**rowspan**：跨行和并。上下的合并。**colspan：**跨列合并。左右的合并。属性值：数字，数字是几表示跨几行或跨几列合并。
制作方法：
1.先书写所有行**<u><tr></u>**，以最小单元格为标准
2.再添加每一行的**<u><td></u>**或**<u><th></u>**单元格，
3.划分单元格时，顶边对齐的属于同一行
4.将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。
表格分区
分为四个大的区域：表格标题、表格头部、表格主体、表格页脚。
四个分区标签，他们都是双标签
caption：表格的标题，内部书写标题文字。
thead：table head，表格的头部。内部嵌套tr>th。tbody：table body，表格的主体。内部嵌套tr>td。tfoot：table foot，表格的页脚。内部嵌套tr>td。四个分区**<u>可以选择性的进行组合</u>**。注意：不论书写顺序如何颠倒，浏览器中的**<u>加载顺序都是自动按照caption、thead、tbody、tfoot执行的</u>**。
表单
用于搜集不同类型的用户输入
组成：表单域、提示信息和表单控件（也称为表单元素）
功能：表单域：容纳所有表单控件和提示信息，定义表单数据所用程序的url地址和数据提交到服务器的方法·
提示信息：说明性的文字，提示用户进行填写和操作表单控件：具体的表单功能项，如单行文本输入框，密码输入框，单选框和复选框，复选框，普通按钮，提交和重置按钮等功能项。
表单域
使用<form>标签进行定义。
`<form>`标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个`<form>`标签之内。`<form>`标签为<font style="color:#F5222D;">双</font>标签，<font style="color:#F5222D;">容器级</font>标签。`<form>`标签通过对应属性规定提交数据的方法和提交位置。
提示信息及表单控件书写位置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| action | url | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 自定义名称 | 规定表单的名称 |
表单元素
**<input>**标签
<input>标签是最重要的一个表单元素。
`<input>`标签为<font style="color:#F5222D;">单</font>标签，本身相当于一个特殊的文本。`<input>`标签需要通过标签属性实现各种功能。其中，type属性的值不同，决定了`<input>`标签的形态不同。`<input>`标签常用属性：
注意：
1.单选框一般都是成组出现，多个单选框组成一组选择的情况。
同一组单选框之间**<u>必须是互斥</u>**的关系，通过给同一组单选框都**<u>设置相同的name属性值</u>**实现。
同一组复选框最好也设置相同的name属性。
2.单选框和复选框都可以提前设置默认选中项。
<input type=“radio” name=“sex” checked=“checked” /> 男
`<input>`标签有一个**checked**属性，如果不设置表示默认没有选中。属性值如果设置为"checked"，表示该项默认被选中。在h5中可以直接书写checked属性名，不书写属性值，也可以实现选中效果
3.password 字段中的字符会被做掩码处理（显示为星号或实心圆）
4.普通按钮 button：没有任何特殊功能。
重置按钮 **reset**：将同一个`<form>`中填写的表单内容清空，恢复成默认。提交按钮 **submit**：第一个作用是能将填写数据提交到`<form>`中指定的后台服务器，第二个作用是<u>重置清空</u>`<form>`中填写的信息。图片按钮 **image**:默认为提交按钮的效果，使用的图片需要利用src属性查找正确路径。如果是图片按钮的value，表示图片查找失败时的替换文本内容
5.使用input的multiple属性，可以决定是否可以选择多个文件。
文本域textarea
制作可以输入多行文本的区域
为双标签，本身相当于一个特殊的文字。
<textarea>有两个重要属性，可以设置显示区域大小。
rows：行，属性值是数字，数字是几，表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条。
cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。
文本域可以设置默认输入的文字，在双标签之间书写默认文字。
下拉菜单
下拉菜单需要至少两个标签完成结构：
`<select>`：选择，表示定义下拉菜单整体结构。`<option>`：选项，表示定义下拉菜单的每一项。两个标签都是<font style="color:#F5222D;">双</font>标签，**<font style="color:#F5222D;">文本级</font>**标签。关系：select>option*4默认情况下，选中的是第一项。
下拉菜单可以通过给<option>标签设置selected属性，更改默认选中项。
如果想选中哪一项，给对应的`<option>`设置selected属性的属性值为selected。
下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。
可以使用 `<optgroup>`标签对选项进行分组，`<optgroup>`是一个<font style="color:#F5222D;">双</font>标签。关系：select>optgroup>option`<optgroup>`可以设置一个label属性，表示给这一组选项添加一个标签名，分组标签`<optgroup>`是<u>不能被点击选择</u>的。
**<label>**双**标签**
所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个<label>标签。
`<label>`标签的作用是帮表单元素定义标注（标记）。如果将表单控件与提示内容使用 `<label>`进行绑定后，当用户鼠标点击`<label>`内的提示内容时，浏览器就会自动将焦点转到和标签相关 的表单控件上。<font style="color:#F5222D;">绑定方法：</font>①给表单元素 <u>设置id属性</u>，然后将需要绑定的其他内容用 `<label>`标签包裹，给`<label>`标签<u>设置for属性</u>，属性值为绑定的表单的id属性值。
②第二种：如果绑定内容和表单元素写在一起，可以化简绑定写法，直接使用 `<label>`标签将绑定内容与表单元素一起进行嵌套。
水平分割线
<hr>标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。`<hr>`为<font style="color:#F5222D;">单</font>标签，实际在HTML4.0以后已经被废弃，水平线的效果可以使用css中的边框制作。了解hr的常用属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| align | left center right | 设置hr的对齐方式 |
| noshade | noshade | 设置 hr 的颜色呈现为纯色。 |
| color | 颜色值或颜色名 | 设置hr的颜色 |
| size | 像素值 | 设置水平线的高度 |
| width | 像素值、百分比 | 设置水平线的宽度 |
换行
<br>（breaking）标签是HTML中一个简单的换行符。
`<br>`标签是一个<font style="color:#F5222D;">单</font>标签。在需要换行的位置可以使用 `<br>`标签书写，但是`<br>`与`<p>`不同，`<br>`没有建立新的段落的语义，只是简单的进行<u>强制换行</u>。
字符实体
在普通文字书写时，有一些特殊符号不能直接书写（例如连续的空格），或者符号具有特殊功能也不能直接书写（例如<>符号）， 可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。规则：所有的字符实体和实体编号都是以&开头，以；结尾的。
建议使用实体名称，好处是名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。注意：实体名称**<u>对大小写敏感</u>**！建议：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名称即可，其他可以通过手册进行查询。
参考文献：
常用的字符实体列表：
w3school中文参考手册：[https://www.w3school.com.cn/](https://www.w3school.com.cn/)
若有收获，就点个赞吧
0 人点赞
