第一章：列表标签
第二章：表格标签
第三章：表单标签
第四章：语义化标签
- 4.1 没有语义的布局标签（ div 和 span）
- 4.2 有语义化的标签（了解）
第五章：字符实体
- 5.1 HTML 中的空格合并现象
- 5.2 常见的字符实体

第一章：列表标签

1.1 列表标签的应用场景

场景：在网页中按照 行 展示关联的内容，如：新闻列表、排行榜、账单等。
特点：按照行的方式，整齐显示内容。
种类：无序列表、有序列表、自定义列表。

1.2 无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
标签组成： | 标签名 | 说明 | | —- | —- | | ul | 表示无序列表的整体，用于包裹 li 标签 | | li | 表示无序列表的每一项，用于包含每一行的内容 |

显示特点：列表的每一项前默认显示圆点标识。

注意：

ul 标签中只允许包含 li 标签。
li 标签可以包含任意内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <h2>水果列表</h2>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>
</body>
</html>

1.3 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜。
标签组成： | 标签名 | 说明 | | —- | —- | | ol | 表示有序列表的整体，用于包裹 li 标签 | | li | 表示有序列表的每一项，用于包含每一行的内容 |

显示特点：列表的每一项前默认显示序号表示。

注意：

ol 标签中只允许包含 li 标签。
li 标签可以包含任意内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <h2>成绩排行榜</h2>
    <ol>
        <li>张三：100分</li>
        <li>李四：80分</li>
        <li>王五：65分</li>
    </ol>
</body>
</html>

1.4 自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现。
标签组成： | 标签名 | 说明 | | —- | —- | | dl | 表示自定义列表的整体，用于包裹 dt 和 dd 标签 | | dt | 表示自定义列表的主题 | | dd | 表示自定义列表针对主题的每一项内容 |

显示特点：dd 前默认显示缩进效果。

注意：

dl 标签只允许包含 dt 和 dd 标签。
dt 和 dd 标签可以包含任意内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
</body>
</html>

1.5 总结

无序列表 最常用 ，有序列表 偶尔用 ，自定义列表 底部导航用 。

第二章：表格标签

2.1 表格的基本标签

场景：在网页中以行和列的单元格的方式整齐展示数据，如：学生成绩表。
基本标签： | 标签名 | 说明 | | —- | —- | | table | 表格整体，可以用于包裹多个 tr | | tr | 表格每行，可以用于包裹 td | | td | 表格单元格，可用于包裹内容 |

注意：标签的嵌套关系是 table > tr > td 。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的基本标签</title>
</head>
<body>
    <h2>学生成绩表</h2>
    <table>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>非常好</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>50</td>
            <td>还行</td>
        </tr>
    </table>
</body>
</html>

2.2 表格相关属性（了解）

场景：设置表格基本展示效果。
常见相关属性： | 属性名 | 属性值 | 效果 | | —- | —- | —- | | border | 数字 | 边框宽度 | | width | 数字 | 表格宽度 | | height | 数字 | 表格高度 |

注意：实际开发的时候，针对样式效果推荐使用 CSS 来设置。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的基本标签</title>
</head>
<body>
    <h2>学生成绩表</h2>
    <!-- 
        border：边框宽度。
        width：边框宽度。
        height：边框高度。
    -->
    <table border="1" width="200" height="100">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>非常好</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>50</td>
            <td>还行</td>
        </tr>
    </table>
</body>
</html>

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

场景：在表格中表示整体大标题和一列小标题。
其他标签： | 标签名 | 名称 | 说明 | | —- | —- | —- | | caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 | | th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |

注意：

caption 标签书写在 table 标签内部。
th 标签书写在 tr 标签内部，用于替换 td 标签。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标题和表头单元格标签</title>
</head>
<body>
    <table border="1" width="300" height="200">
        <!-- 表格标题：用于表示表格整体大标题。 -->
        <caption>学生成绩表</caption>
        <tr>
            <!-- 表头单元格：表示一列小标题。 -->
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>非常好</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>50</td>
            <td>还行</td>
        </tr>
    </table>
</body>
</html>

2.4 表格的结构标签（了解）

场景：让表格的内容结构分组，突出表格的不同部分（头部、主题、底部），使得语义更加清晰。
结构标签： | 标签名 | 说明 | | —- | —- | | thead | 表格头部 | | tbody | 表格主体 | | tfoot | 表格底部 |

注意：

表格结构标签内部用于包裹 tr 标签。
表格的结构标签可以省略。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的结构标签</title>
</head>
<body>
    <table>
        <caption>
            <h2>学生成绩表</h2>
        </caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>100</td>
                <td>非常好</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>50</td>
                <td>还行</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总分</td>
                <td>150</td>
                <td>可以</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

2.5 合并单元格

场景：将 水平或垂直 多个单元格合并成 一个单元格 。
分类：
- 跨行合并（垂直合并成一个）。
- 跨列合并（水平合并成一个）。
合并单元格的步骤：
- ① 明确合并哪几个单元格。
- ② 通过左上原则，确定保留谁删除谁：
  - 上下合并 —> 只保留最上的，删除其他。
  - 左右合并 —> 只保留最左的，删除其他。
- ③ 给保留的单元格设置：跨行合并（rowspan）和跨列合并（colspan）。

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody 和 tfoot）。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签之跨行合并</title>
</head>
<body>
    <table border="1" width="300" height="200">
        <!-- 表格标题：用于表示表格整体大标题。 -->
        <caption>
            <h2>学生成绩表</h2>
        </caption>
        <tr>
            <!-- 表头单元格：表示一列小标题。 -->
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <!-- 跨行合并 -->
            <td rowspan="2">100</td>
            <td>非常好</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>还行</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>200</td>
            <td>还行</td>
        </tr>
    </table>
</body>
</html>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签之跨列合并</title>
</head>
<body>
    <table border="1" width="300" height="200">
        <!-- 表格标题：用于表示表格整体大标题。 -->
        <caption>
            <h2>学生成绩表</h2>
        </caption>
        <tr>
            <!-- 表头单元格：表示一列小标题。 -->
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100</td>
            <td>非常好</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>50</td>
            <td>还行</td>
        </tr>
        <tr>
            <td>总分</td>
            <td colspan="2">150</td>
        </tr>
    </table>
</body>
</html>

第三章：表单标签

3.1 input 系列标签

3.1.1 input 系统标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页。
标签名：input（input 标签可以通过 type 属性值的不同，展示不同的效果）。
type 属性值： | 标签名 | type 属性值 | 说明 | | —- | —- | —- | | input | text | 文本框，用于输入单行文本 | | input | password | 密码框，用于输入密码 | | input | radio | 单选框，用于多选一 | | input | checkbox | 多选框，用于多选多 | | input | file | 文件选择，用于上传文件 | | input | submit | 提交按钮，用于提交 | | input | reset | 重置按钮，用于重置 | | input | button | 普通按钮，默认无功能，需要配合 js 实现功能 |

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input 标签的基本使用</title>
</head>
<body>
    <!-- 写什么就显示什么 -->
    文本框：<input type="text" name="" id=""> <br>
    <!-- 书写的内容都会变成点点显示 -->
    密码框：<input type="password" name="" id=""> <br>
    单选框：<input type="radio" name="sex" id=""> 男 
           <input type="radio" name="sex" id=""> 女 <br>
    多选框：<input type="checkbox" name="interest" id=""> 睡觉 
           <input type="checkbox" name="interest" id=""> 吃饭
           <input type="checkbox" name="interest" id=""> 打豆豆 <br>
    上传：<input type="file" name="" id=""> <br>       
</body>
</html>

3.1.2 input 系列标签 — 文本框

场景：在网页中显示 输入单行文本 的表单控件。
type 属性值：text 。
常用属性： | 属性名 | 说明 | | —- | —- | | placeholder | 占位符，提示用户输入内容的文本 |

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单占位符</title>
</head>
<body>
    <input type="text" name="" id="" placeholder="请输入用户名"> <br>
</body>
</html>

3.1.3 input 系列标签 — 密码框

场景：在网页中显示 输入密码 的表单控件。
type 属性值：password 。
常用属性（同文本框）： | 属性名 | 说明 | | —- | —- | | placeholder | 占位符，提示用户输入内容的文本 |

注意：type 属性值不要拼错或者多加空格，否则相当于设置了默认状态 text 。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单占位符</title>
</head>
<body>
    <input type="password" name="" id="" placeholder="请输入密码">
</body>
</html>

3.1.4 name 属性和 value 属性的介绍

name 属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义。
value 属性：用户输入的内容，提交之后会发送给后端服务器。

注意：后端接收到数据的格式是：name 的属性值 = value 的属性值。

3.1.5 input 系列标签 — 单选框

场景：在网页中显示 多选一的单选 表单控件。
type 属性值：radio 。
常用属性： | 属性名 | 说明 | | —- | —- | | name | 分组，有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中 | | checked | 默认选中 |

注意：

name 属性对于单选框有分组功能。
有相同 name 属性值的单选框为一组，一组中只能同时有一个被选中。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选框</title>
</head>
<body>
    性别：<input type="radio" name="gender" id="" value="男"> 男
         <input type="radio" name="gender" id="" value="女" checked> 女 
</body>
</html>

3.1.6 input 系列标签 — 多选框

场景：在网页中显示 多选多的多选 表单控件。
type 属性值：checkbox。 | 属性名 | 说明 | | —- | —- | | checked | 默认选中 |

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选框</title>
</head>
<body>
    兴趣：<input type="checkbox" name="hobby" id="" value="吃饭"> 吃饭
         <input type="checkbox" name="hobby" id="" value="睡觉" checked> 睡觉
         <input type="checkbox" name="hobby" id="" value="学习"> 学习
</body>
</html>

3.1.7 input 系列标签 — 文件选择

场景：在网页中显示 文件选择 的表单控件。
type 属性值：file 。 | 属性名 | 说明 | | —- | —- | | multiple | 多文件选择 |

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件选择</title>
</head>
<body>
    <!-- multiple 表示一次可以上传多个 -->
    上传：<input type="file" name="file" id="" multiple>
</body>
</html>

3.1.8 input 系列标签 — 按钮

场景：在网页中 显示不同功能的按钮 的表单控件。
type 属性值： | 标签名 | type 属性值 | 说明 | | —- | —- | —- | | input | submit | 提交按钮，点击之后提交数据到后端服务器。 | | input | reset | 重置按钮，点击之后恢复表单默认值。 | | input | button | 普通按钮，默认无功能，需要配置 js 实现功能。 |

注意：

如果需要实现以上按钮功能，需要配合 form 标签使用。
form 使用方法：使用 form 标签将表单标签包裹起来即可。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input-按钮</title>
</head>
<body>
    <form action="#" method="POST">
        用户名：<input type="text" name="username" id="" placeholder="请输入用户名"> <br>
        密码：<input type="password" name="password" id="" placeholder="请输入密码"> <br>
        <!-- 按钮 -->
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="普通按钮">
    </form>
</body>
</html>

3.2 button 按钮标签

场景：在网页中显示用户点击的按钮。
标签名：button 。
type 属性值： | 标签名 | type 属性值 | 说明 | | —- | —- | —- | | button | submit | 提交按钮，点击之后提交数据到后端服务器。 | | button | reset | 重置按钮，点击之后恢复表单默认值。 | | button | button | 普通按钮，默认无功能，需要配置 js 实现功能。 |

注意：

Chrome 浏览器中的 button 默认是提交按钮。
button 标签是双标签，更便于包裹其他内容，如：文字、图片等。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>button</title>
</head>
<body>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
</body>
</html>

3.3 select 下拉菜单标签

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
</head>
<body>
    所属城市：<select name="city" id="">
               <option value="北京">北京</option>
               <option value="天津">天津</option>
               <option value="南京" selected>南京</option>
               <option value="广州">广州</option>
            </select>
</body>
</html>

3.4 textarea 文本域标签

场景：在网页中提供可输入多行文本的表单控件。
标签名：textarea。
常见属性：
- rows：规定了文本域内可见行数。
- cols：规定了文本域内可见宽度。

注意：

右小角可以拖拽改变大小。
实际开发的时候，针对样式效果推荐使用 CSS 设置 。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本域</title>
</head>
<body>
    留言：<textarea rows="3" cols="60"></textarea>
</body>
</html>

3.5 label 标签

场景：常用于绑定内容和表单标签的关系。
标签名：label 。
使用方式 ① ：
- 使用 label 标签将内容（如：文本）包裹起来。
- 在标签标签上添加 id 属性。
- 在 label 标签的 for 属性中设置对应的 id 属性值。
使用方式 ② ：
- 直接使用 label 标签将内容（如：文本）和表单标签一起包裹起来。
- 需要将 label 标签的 for 属性删除。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label 标签</title>
</head>
<body>
    性别：
    <input type="radio" name="gender" id="male" value="男"> <label for="male">男</label>
    <input type="radio" name="gender" id="female" value="女" checked> <label for="female">女</label>

    <br>
    <br>

    性别： 
    <label>
        <input type="radio" name="gender" id="" value="男"> 男
    </label>
    <label>
        <input type="radio" name="gender" id="" value="女" checked> 女 
    </label>

</body>
</html>

第四章：语义化标签

4.1 没有语义的布局标签（ div 和 span）

场景：实际开发网页的时候，会大量频繁的使用到 div 和 span 标签。
div 标签：一行只显示一个（独占一行）。
span 标签：一行可以显示多个。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div 和 span 标签</title>
</head>
<body>
    普通文字
    <div>这是 div 标签</div>
    <div>这是 div 标签</div>

    普通文字
    <span>这是 span 标签</span>
    <span>这是 span 标签</span>
</body>
</html>

4.2 有语义化的标签（了解）

场景：在 HTML5 版本中，推出了一些有语义的布局标签供开发者使用。
标签： | 标签名 | 语义 | | —- | —- | | header | 网页头部 | | nav | 网页导航 | | footer | 网页底部 | | aside | 网页侧边栏 | | section | 网页区块 | | article | 网页文章 |

注意：以上标签显示特点和 div 一致，但是比 div 多了不同的语义。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有语义化的标签</title>
</head>
<body>
    <header>网页头部</header>
    <nav>网页导航</nav>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>
    <footer>网页底部</footer>
</body>
</html>

第五章：字符实体

5.1 HTML 中的空格合并现象

场景：如果在 html 代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 中的空格合并现象</title>
</head>
<body>
    <!-- 网页不认识多个空格，只认识一个 -->
    这是 HTML 文档，现在要学               习字符实体。
</body>
</html>

5.2 常见的字符实体

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

Java学科

HTML 基础

第一章：列表标签

1.1 列表标签的应用场景

1.2 无序列表

1.3 有序列表

1.4 自定义列表

1.5 总结

第二章：表格标签

2.1 表格的基本标签

2.2 表格相关属性（了解）

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

2.4 表格的结构标签（了解）

2.5 合并单元格

第三章：表单标签

3.1 input 系列标签

3.1.1 input 系统标签的基本介绍

3.1.2 input 系列标签 — 文本框

3.1.3 input 系列标签 — 密码框

3.1.4 name 属性和 value 属性的介绍

3.1.5 input 系列标签 — 单选框

3.1.6 input 系列标签 — 多选框

3.1.7 input 系列标签 — 文件选择

3.1.8 input 系列标签 — 按钮

3.2 button 按钮标签

3.3 select 下拉菜单标签

3.4 textarea 文本域标签

3.5 label 标签

第四章：语义化标签

4.1 没有语义的布局标签（ div 和 span）

4.2 有语义化的标签（了解）

第五章：字符实体

5.1 HTML 中的空格合并现象

5.2 常见的字符实体