标题标签

场景：在文章页面中，都离不开标题，用来突出显示文章的主题
代码：h系列标签

<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

语义：1~6级标题，重要程度依次递减
特点：
- 文字加粗
- 文字变大，h1->h6文字逐渐减小
- 独占一行

段落标签

场景：在文章页面中，用于分段显示
代码： <p>内容</p>
语义：段落
特点：
- 段落之间存在间隙
- 独占一行

换行标签

场景：让文字强制换行显示
代码： <br>
语义：换行
特点：
- 单标签
- 让文字强制换行

文本格式化标签

场景：需要让文字加粗，下划线，倾斜，删除线等效果
代码：
|标签|详细名称|说明|

b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除线

语义:突出重要性强调语境

图片标签

-场景：在网页中显示图片
代码： <img src="" alt="">
特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置
- 属性
  |属性|说明|

alt	单图片加载失败显示alt内容
title	当鼠标停留在图片时，才会显示title的内容（可用于其他标签）
width/height	图片的宽度和高度，当只设置一项的时候，图片会等比例缩放

水平线标签

场景：分割不同主题内容的水平线
代码： <hr>
语义：主题的分割转换
特点：
- 单标签
- 在页面中显示一条水平线

音频标签介绍

场景在页面插入音频
代码 <audio src="music.mp3" controls></audio>
属性
|属性名|功能|

src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意：
视频标签目前支持三种格式：MP3，Wav，Ogg

视频标签介绍

场景在页面插入音频
代码 <video src="music.mp4" controls></video>
属性
|属性名|功能|

src	音频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器支持需要配置muted）
loop	循环播放

注意：
视频标签目前支持三种格式：MP4，WebM，Ogg

超链接

场景点击之后，从一个页面跳到另一个页面
代码 <a href="目标网页">名字</a>
特点：
双标签，内部可以包裹内容
如果需要a标签点击后去指定页面，需要设置a标签的href属性
属性
属性名：target

属性值：目标网页的打开方式

取值	功能
_self	默认值,在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

代码：<a href="#" target="_blank">JaysonBLog</a>

列表标签

无序列表

场景：
在网页中表示一组无顺序的列表
代码：

<ul>
    <li>内容</li>
</ul>

标签组成：
|标签名|说明|

ul	表示无序列表的整体，用于包裹li标签
li	表示无序标签的每一项，用于包含每一行的内容

显示特点：
- 列表的每一项前默认显示圆点
注意点：
- url标签中只允许包含li标签
- li标签可以包含任意内容

有序列表

场景：
- 在网页中表示一组有顺序的列表
代码：

<ol>
    <li>内容</li>
</ol>

标签组成：
|标签名|说明|

ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一项的内容

显示特点：
- 列表的每一项前默认显示圆点
注意点：
- url标签中只允许包含li标签
- li标签可以包含任意内容

自定义列表

场景：
- 在网页的底部导航中通常会使用自定义列表
代码：

<dl>
    <dt>主题</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>

标签组成：
|标签名|说明|

dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

显示特点：

dd前会默认缩进效果

</li>

<li>注意点：
    <ul>
        <li>dl标签中只允许包含dt/dd标签</li>
        <li>dt标签可以包含任意内容</li>
    </ul>
</li>

表格标签

场景：在网页中以行+列表的单元格的方式整齐展示和数据
代码：

<table>
    <tr>
        <td>内容</td>
        <td>内容</td>
        <td>内容</td>
    </tr>

</table>

基本标签：
|标签名|说明|

table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

<dl>
<dt>注意点：</dt>
<dd>标签的嵌套关系：table > tr > td <dd>
</dl>

表格属性

场景：设置表格基本展示效果
常见相关属性：
代码：<table border="2" width="300" height="200">
|属性名|属性值|效果|

border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

<dl>
<dt>注意点：</dt>
<dd>实际开发时针对样式效果推荐用css设置<dd>
</dl>

表格标题和表头单元格标签

场景：在表格中表示整体大标题和小一列小标题
代码：

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
    </tr>
</table>

其他标签：
|标签名|名称|说明|

caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格的第一行，默认内部文字加粗并居中

<dl>
<dt>注意点：</dt>
<dd>caption标签书写在table标签内部<dd>
<dd>th标签书写在tr标签内部<dd>
</dl>

表格的结构标签（了解）

场景：让表格的内容结构分组，突出表格的不同部分（头部，主体，底部），使语义更加清晰
结构标签
|标签名|名称|

thead	表格头部
tbody	表格主体
tfoot	表格底部

<dl>
<dt>注意点：</dt>
<dd>表格结构标签内部用于包裹tr标签<dd>
<dd>表格结构标签可以省略<dd>
</dl>

合并单元格-代码实现

合并步骤：

明确合并哪几个单元格

通过左上原则，确定保留谁删除谁

上下合并 --> 保留最上面的单元格，删除其他的单元格

    <tr>
        <td>小哥哥</td>
        <td rowspan="2">上下合并的单元格</td>
        <td>小哥哥真帅气</td>
    </tr>
    <tr>
        <td>小姐姐</td>
        <td>小姐姐真漂亮</td>
    </tr>

左右合并 --> 保留最左面的单元格，删除其他的单元格

<tr>
    <td>总结</td>
    <td colspan="2">左右合并的单元格</td>
</tr>

给保留的其他单元格设置：
- 跨行合并（rowspan）
- 跨列合并（colspan）
  |属性名|属性值|说明|

rowspan	合并单元格个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格个数	跨列合并，将多列的单元格水平合并

<dl>
<dt>注意点：</dt>
<dd>只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）<dd>
</dl>

表单标签

input系列标签基本介绍

场景：在网页中显示收集用户信息的表单效果
标签名：input
- input标签可以通过type属性值的不同，展现的不同效果
type属性值：
|标签名|type属性值|类型|说明|

|---|
|input|text|文本框|用于输入单行文本|
|input|password|密码框|用于输入密码|
|input|radio|单选框|用于多选一|
|input|checkbox|多选框|用于多选多|
|input|file|文件选择|用于上传文件|
|input|submit|提交按钮|用于提交|
|input|reset|重置按钮|用于重置|
|input|button|普通按钮|默认无功能，之后配合js添加功能|

input系列标签-文本框

场景：在网页中显示输入的单行文本的表格控件
type属性值：text/password
代码：<input type="text/password" placeholder="显示内容">
常用属性：
|属性名|说明|

placeholder

占位符，提示用户输入的内容

input系列标签-单选框

场景：在网页中显示多选一的单选表单控件
type属性值：radio
代码：

 <body>
    <input type="radio" name="rex">
    <input type="radio" name="rex">
</body

常用属性：
|属性名|说明|

name	通过name进行分组，有相同的name属性值的单选框为一组，一组中同时只能有一个被选中
checked	默认选中(checkbox也适用)

<dl>
<dt>注意点：</dt>
<dd>name属性值对于单选框有分组功能<dd>
<dd>有相同的name属性值的单选框为一组，一组中只能同时有一个被选中<dd>
</dl>

input系列标签-文件选择

场景：在网页中显示文件选择的表单控件
type属性：file
代码：<input type="file" multiple>
常用属性：
|属性名|说明|

multiple

多文件选择

input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件
type属性值：
|标签名|type属性值|类型|说明|

input	submit	提交按钮	点击之后提交数据给后端服务器
input	reset	重置按钮	点击之后恢复表单默认值
input	button	普通按钮	默认无任何功能，之后搭配js添加功能

<dl>
<dt>注意点：</dt>
<dd>如果需要实现以上按钮功能，需要配合form标签使用<dd>
<dd>form使用方法：用form标签把表单标签一起包裹起来<dd>
</dl>

button按钮标签

场景：在网页中显示用户点击的按钮
标签名：button
type属性值（同input的按钮一样）：
|标签名|type属性值|类型|说明|

button	submit	提交按钮	点击之后提交数据给后端服务器
button	reset	重置按钮	点击之后恢复表单默认值
button	button	普通按钮	默认无任何功能，之后搭配js添加功能

<dl>
<dt>注意点：</dt>
<dd>谷歌浏览器中的button默认是提交按钮<dd>
<dd>button标签是双标签，便于包裹其他内容：文字，图片等<dd>
</dl>

select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单控件
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性：
- selected：下拉菜单的默认选中

textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件
标签名： textrea
常见属性
|属性名|说明|

cols	规定了文本域内可见宽度
rows	规定了文本域内可见行数

<dl>
<dt>注意点：</dt>
<dd>右下角可以拖拽改变大小<dd>
<dd>实际开发时针对于样式效果推荐css设置<dd>
</dl>

label标签

场景：常用于绑定内容与标签关系
标签名：label
使用方法①：
1. 使用label标签把内容（如文本）包裹起来
2. 在表单标签添加id属性
3. 在label标签的for属性中设置对应的id值

<body>
    <input type="radio" name="hex" id="1"><label for="1">内容</label>
    <input type="radio" name="hex" id="2"><label for="2">内容</label>
</body>

使用方法②：
1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2. 需要把label标签和for标签删掉即可

<body>
    <label>
        <input type="radio" name="sex">内容
    </label>
    <hr>
    <label>
        <input type="radio" name="sex">内容
        <hr>
    </label>
</body>

语义化标签

没有语义化布局标签-div和span

场景：实际开发网页会大量频繁使用div和span这两个没有语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

有语义化的布局标签

场景：在html5新版本中，推出了一些有语义的布局标签供开发者使用（手机端使用）
标签：
|标签名|语义|

header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

<dl>
<dt>注意点：</dt>
<dd>以上标签显示特点和div一致，但是比div多了不同语义<dd>
</dl>

字符实体

常见字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代
结构：&英文;
常见字符实体：
|显示结果|描述|实体名称|

" "	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
'	撇号	`'(IE不支持)`