HTML 进阶（二）

本页对应 HTML 进阶，共 7 段视频，约 1 小时 10 分。

学习目标

1. 能使用常用快捷键完成复制、粘贴、剪切、保存、上下移动行、快速复制当前行、增减缩进和批量修改相同文本，并在编辑器中正确操作。
2. 能根据“表格套行、行套单元格”的结构手写四行四列表格，正确使用 table、tr、th、td，并说明 th 与 td 的显示差异。
3. 能使用 thead、tbody、tfoot 对表格进行头、主体、底部结构划分，并通过浏览器开发者工具检查结构是否正确。
4. 能按“确定合并目标—保留左上单元格—删除其余单元格—设置 rowspan/colspan”的步骤完成跨行或跨列合并，合并后行列数正确。
5. 能使用 input 的 type 创建文本框、密码框、单选按钮和复选框，使用相同 name 实现单选分组，并正确设置 placeholder 占位文本与 checked 默认选中。
6. 能识别并正确书写常见字符实体（如 <、>、 ），并能说出表格、表单相关语义化结构标签的作用。

知识点

表单的核心作用是收集用户信息，常见于登录页面、注册页面、搜索区域。下面按控件把“为什么需要→怎么想→怎么做→易错点”串起来。转写里容易听成 test、pasword、place hold，实际代码要写 text、password、placeholder。

input 标签与 type 属性

为什么需要：用户要输入姓名、密码等内容，页面必须提供输入控件。怎么想：同样是 input，外形和功能不同，靠 type 区分。怎么做：写 input，按需求改 type。易错点：type 值拼错，控件功能就会变；密码框不是另造标签，而是把 type 改成 password，输入内容才显示为隐藏状态。

<input type="..." >

占位文本 placeholder

为什么需要：输入框空着时，用户不知道填什么，需要提示信息。怎么想：提示文字放在框内，输入后消失，删除后回来。怎么做：给文本框、密码框加 placeholder。易错点：转写里的“place hold”不是代码，正确是 placeholder；它不是默认值，不会作为内容提交。

<input type="..." placeholder="提示信息">

单选框 radio 与默认选中

为什么需要：性别等场景只能多选一。怎么想：多个 radio 要成为同一组，必须给相同 name；想默认选中就加 checked。转写调试时，不加相同 name 时男女都能选，加上 name="gender" 后只能选一个。怎么做：

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

易错点：name 值要完全相同才是一组；checked 写在需要默认选中的那一项上。

文件上传与多选框

为什么需要：上传头像/附件需要文件控件；爱好等场景可以多选。怎么想：文件多选加 multiple；多选框用 checkbox，默认选中用 checked。怎么做：

<input type="file" multiple>
<input type="checkbox" checked> 敲前端代码

易错点：multiple 是文件多选，不是多选框；多选框值写 checkbox，不要写成 check box。

下拉菜单与文本域

为什么需要：选项较多时用下拉菜单更整齐；多行意见用文本域。怎么想：select 是整体，option 是每一项；默认选中用 selected。文本域用 textarea。怎么做：

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

<textarea>默认提示文字</textarea>

易错点：不写 selected 默认显示第一项；实际开发中用 CSS 设文本域尺寸，一般禁用右下角拖拽。

label 标签

为什么需要：文字和控件分离时，只点小圆圈不好点，label 可增大点击范围。怎么想：两种绑定方式：for 对应 id，或直接包裹控件。怎么做：

<input type="radio" id="man">
<label for="man">男</label>

<label><input type="radio"> 女</label>

易错点：写法一的 for 必须等于控件 id；写法二包裹后不需要属性。文本框、密码框、单选框、多选框、下拉菜单、文本域等都可受益。

按钮与 form 表单区域

为什么需要：提交、重置、普通按钮需要明确类型；数据要发送到地址，需要 form。怎么想：按钮配合 form 才有提交/重置功能；submit 提交、reset 重置、button 普通按钮。怎么做：

<button type="">按钮</button>

<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

易错点：省略 type 时按钮默认是提交；按钮脱离 form 时提交/重置功能无法按预期生效；action 是发送数据地址。

先分清：布局标签和内容标签

这一节的主题是“语义化”，但先要建立一个基本判断：标签有分工。转写稿里反复强调，列表主要用于让布局排列整齐，表格的主要作用是展示数据，并不是拿来布局；早期用表格布局“超级麻烦”，后来才有了更好的解法。这个思路迁移到页面布局上就是：划分网页区域，应该用布局标签；展示数据，才用表格这类内容标签。否则标签虽然能显示，结构和含义会混乱。

所以学习顺序是：先认识无语义的布局标签 div、span，再认识有语义的布局标签。怎么想？拿到一个页面，先问自己：这是在“划区域、摆内容”，还是在“表达一块区域是什么”。前者先想到布局标签；后者再看有语义标签。易错点是：不要把“能显示”当成“用对了”，也不要用表格去搭页面骨架。

无语义的布局标签：div 和 span

为什么需要？ 网页要先分成一块一块的区域，再往里面放标题、图片、文字。div 和 span 就是最基础的两个“盒子”，本身不表达“这是头部”还是“这是主体”，只负责划分和包裹。

怎么想？ 大块区域、整行区域，优先想到 div；一行文字中的一小段、需要单独包起来的一小截，想到 span。转写稿里讲表格时一直强调“大盒子套小盒子”“先写行，再写单元格”，布局也是同样的思路：先搭大盒子，再往里面放小盒子。

怎么做？ 笔记里的代码要保留：

<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>

写的时候注意缩进对齐，像转写稿里说的“竖着看非常清楚，对得很齐”，结构才不容易看乱。

易错点： div 是独占一行，span 是不换行；不要把 span 当成万能大盒子，也不要把页面所有东西都堆成一堆 div。div 本身没有语义，类名要尽量表达用途，否则代码一多就不知道每块是干什么的。

有语义布局标签：让区域“名有所指”

为什么需要？ 如果整页都是 div，代码也能跑，但读代码的人看到一堆盒子，不知道哪块是页面头部、哪块是主体、哪块是底部。语义化布局标签的价值，就是让标签本身提示区域职责。转写稿讲表格结构时用“人有头、有身体、有脚”来划分表格的头部、主体、底部，目的就是让结构更清晰；页面布局的语义化也是同一个方向：先让结构清楚，再谈样式。

怎么想？ 不要一上来就写标签名，先看页面区域：这块是整页的开头、导航、主体内容，还是结尾？能对上语义，就用有语义的布局标签；对不上，再用 div 兜底。注意：转写稿里 thead、tbody、tfoot 是表格结构标签，不是页面布局标签，不能混用。

怎么做？ 本节笔记给了一张图，具体标签名以图中标注为准：

看图时不要只记形状，要按“区域职责 → 对应标签”的方式记。实际写页面时，可以先用语义标签搭骨架，再在内部用 div、span 摆内容。调试时像转写稿里检查表格结构那样，展开代码看层级，确认每一块有没有放错位置。

易错点： 语义标签不是用来替代 CSS 的，加了语义标签不代表自动变好看；不要为了“语义化”硬套标签，区域职责不明确时用 div 更稳妥；更不要把表格结构标签拿来当页面布局。记住本节底线：布局先用布局标签，语义标签让区域更清楚，表格负责展示数据。

先看本节要解决的问题

本节笔记标题是“05-字符实体”。字符实体不是新标签，而是 HTML 里用来“安全表示某些特殊字符”的写法。
说明一点：本节转写稿主要记录的是快捷键、表格、表单等内容，没有出现字符实体的课堂推导和调试过程。因此下面不虚构转写稿里不存在的操作，只围绕本节标题和图片讲清字符实体的核心用法；图片按要求保留。

为什么需要字符实体

HTML 里有些字符有语法含义。例如 < 会被浏览器当成标签开始，> 会被当成标签结束，& 会被当成实体开头。如果直接在页面里写这些字符，浏览器可能不按“文字”显示，而按“代码”解析。
另外，HTML 源码里连续多个空格通常会被折叠成一个空格显示；版权符号、注册商标符号等也不适合直接靠键盘输入。字符实体就是为解决这些问题：让特殊字符以“文本”的身份稳定显示出来。

怎么想：什么时候该想到字符实体

可以记一个判断：只要你想在页面上“原样显示”的字符，可能会被 HTML 误认，或者键盘不方便输入，就应该想到字符实体。
比如要展示一段 HTML 教学文字：<div>，你希望用户看到的是尖括号和 div 字样，而不是真的生成一个 div 元素，这时就要把 < 和 > 转成实体。
再比如要写版权信息 © 2024，可以用 ©；要保留一个明确的不换行空格，可以用  。
思路不是“到处都用实体”，而是“普通文字正常写，特殊字符按实体写”。

具体怎么做

字符实体常见写法是：&实体名称;，也可以使用数字形式：&#数字;。常用实体如下：

&lt;        <!-- 小于号 < -->
&gt;        <!-- 大于号 > -->
&amp;       <!-- 和号 & -->
&quot;      <!-- 双引号 " -->
&copy;      <!-- 版权符号 © -->
&nbsp;      <!-- 不换行空格 -->

例如要在页面上显示一段标签文字，可以这样写：

<p>学习 HTML 时，&lt;div&gt; 是一个常见的容器标签。</p>
<p>版权信息：&copy; 2024</p>

浏览器最终会把 <div> 显示成 <div>，但不会把它当成真正的 div 标签解析。
如果要在页面文字中显示 & 本身，应写 &，而不是直接写一个裸的 &，否则后面的内容可能被误认为实体名称。

易错点

第一，实体末尾的分号不能丢。&lt 不是规范写法，容易造成解析不符合预期。
第二，注意 & 的使用。想显示 & 时写 &，不要写成 & 后直接接文字。
第三，实体名称区分大小写，不要随意改成大写。
第四，  可以用来占一个不换行空格，但不要大量用它做排版缩进。页面布局应交给 CSS，实体只解决字符显示问题。
第五，实体在文本和属性值中都可能出现，写属性值时同样要注意引号和 & 的转义。
第六，不要把字符实体当成标签使用。它显示出来仍然是文字，不会生成元素。

小结

字符实体的学习重点不是背很多表，而是建立判断：特殊字符、可能被 HTML 误解析的字符、键盘不方便输入的符号，用 &名称; 或 &#数字; 表示。写的时候先想“这个字符会不会被浏览器当成语法”，再选对应实体；检查时重点看分号、大小写和 & 是否正确。

课件图示

代码示例

示例一：基础表单（文本框、密码框、占位文本、按钮）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单基础</title>
</head>
<body>
  <!-- form 表单区域 -->
  <!-- action="" 发送数据的地址 -->
  <form action="">
    用户名：<input type="text" placeholder="请输入姓名">
    <br><br>
    密码：<input type="password" placeholder="请输入密码">
    <br><br>

    <!-- 如果省略 type 属性，功能是 提交 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
  </form>
</body>
</html>

关键行与易错点

• type 属性值不同，input 的功能就不同：text 是文本框，password 是密码框（输入内容显示为小圆点）。
• placeholder 是占位文本，文本框和密码框都能用：有内容时消失，删掉内容又回来。
• 按钮必须配合 form 标签才能实现提交/重置功能，单独写在外面没有效果。
• button 省略 type 属性时，默认功能就是“提交”，这是最容易忽略的一点。

---

示例二：单选框、多选框、默认选中、label 绑定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>单选与多选</title>
</head>
<body>
  <form action="">
    <!-- 写法一：label 只包裹内容，for 属性值 = 表单控件的 id 属性值 -->
    <input type="radio" name="gender" id="man" checked>
    <label for="man">男</label>

    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>

    <br><br>

    <!-- 写法二：label 包裹文字和表单控件，不需要属性 -->
    <label><input type="checkbox" checked> 敲前端代码</label>
    <label><input type="checkbox"> 听歌</label>
    <label><input type="checkbox"> 看电影</label>
  </form>
</body>
</html>

关键行与易错点

• 单选框 type="radio" 必须给一组相同的 name 属性值才能实现“多选一”；name 值写不一样，就会变成两组，男和女能同时选中。
• checked 实现默认选中：页面一刷新就处于选定状态。属性名和属性值一样时可以简写，只写 checked 即可。
• 多选框也叫复选框，用 type="checkbox"，可以同时勾选多个。
• label 的作用是绑定文字和表单控件，增大点击范围；写法一的 for 值必须和控件的 id 值一模一样，写错就点不动。

---

示例三：下拉菜单、上传文件、文本域

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>下拉菜单与文本域</title>
  <style>
    /* 实际开发中，使用 CSS 设置文本域的尺寸 */
    textarea {
      width: 300px;
      height: 100px;
      /* 一般禁用右下角的拖拽功能 */
      resize: none;
    }
  </style>
</head>
<body>
  <form action="">
    城市：
    <select>
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
      <option selected>武汉</option>
    </select>
    <br><br>

    上传文件：<input type="file" multiple>
    <br><br>

    <textarea>默认提示文字</textarea>
  </form>
</body>
</html>

关键行与易错点

• 下拉菜单是 select 嵌套 option：select 是整体，option 是每一项；默认显示第一项，用 selected 实现默认选中。
• input type="file" 默认只能上传一个文件，加 multiple 属性才能多选。
• textarea 是双标签，标签中间写的文字就是默认提示文字，不能像 input 那样自闭合。
• 文本域的尺寸交给 CSS 设置，并用 resize: none 禁用右下角拖拽，避免用户拖动把布局拉乱。

常见错误

1. 单选框能同时选中多个

• 现象：性别栏里"男""女"两个都能点亮。
• 原因：两个 input 没写 name，或 name 值写得不一样（sex / gender 混用），浏览器把它们当成互不相干的两组。
• 修法：同组单选必须 name 完全相同（含大小写），一组一个名字。

2. 点 label 文字没反应

• 现象：点"男"字没勾选，只有点小圆圈才行。
• 原因：for 的值和对应控件的 id 拼写/大小写不一致，或 id 重复、或压根没写 id。
• 修法：for 与 id 一一对应且全页唯一；嫌麻烦就用包裹写法 <label><input> 男</label>，不再需要属性。

3. "普通按钮"一点页面就刷新

• 现象：点 <button>普通按钮</button> 页面重载、输入内容清空。
• 原因：省略 type 时默认就是 submit，在 form 里等于提交。
• 修法：三个按钮一律显式写 type="submit" / "reset" / "button"，不靠默认值。

4. 把 placeholder 当默认值用

• 现象：输入框看着有字，一提交/一取值全是空。
• 原因：placeholder 只是占位提示，不是数据，光标一进去就消失。
• 修法：要真实默认数据用 value（文本域则写在标签内容里）；placeholder 只写"请输入…"这类提示语。

5. 想取消默认选中，写成 checked="false"

• 现象：明明写了 false，刷新后还是选中。
• 原因：checked、selected、multiple、disabled 都是布尔属性，只要出现就生效，值写什么都算"有"。
• 修法：要选中就写 checked（简写即可），不要选中就把整个属性删掉。

6. 下拉菜单默认选中用了 checked

• 现象：<option checked> 无效果，永远显示第一项。
• 原因：option 的默认选中属性是 selected，checked 只属于 input。
• 修法：<option selected>武汉</option>；文件多选同理，是 multiple 而不是 checked。

7. 文本域默认文字写成属性

• 现象：<textarea value="请输入"></textarea> 里什么都不显示。
• 原因：textarea 是双标签，初始内容来自标签体，不认 value。
• 修法：<textarea>默认提示文字</textarea>；尺寸和右下角拖拽交给 CSS，别用 rows/cols 硬撑。

练习

1. 改错题

<form action="">
  性别：<input type="radio"> 男 <input type="radio"> 女
  爱好：<input type="checkbox" checked="false"> 写代码
  <button>提交</button> <button>重置</button>
</form>

指出至少 3 处问题并改正。

2. 注册表单 写一个 form，包含：用户名（占位"请输入用户名"）、密码（占位"请输入密码"）、性别单选（默认选中"女"）、爱好多选（默认选中"写代码"）、城市下拉（默认选中"武汉"）、个性签名文本域、文件上传（可多选），以及提交/重置/普通三个按钮。要求所有说明文字都能点击选中对应控件。

3. 语义化判断 下面的结构分别该用什么标签？ ① 页面顶部导航区 ② 主体内容区 ③ 一篇独立的文章 ④ 侧边栏 ⑤ 页脚版权信息 ⑥ 纯布局用的一个块级容器。

4. 字符实体 要在页面上原样显示这段文字：在 HTML 中，<div> 是一个块级标签，A & B 之间要留两个空格。写出对应的 HTML。

5. 找茬

<label for="pwd">密码</label>
<input type="password" placeholder="请输入密码">
<select><option checked>北京</option></select>

说明这段代码中两处"看似正常实则无效"的写法及原因。

参考答案要点

1. 单选缺 name；checked="false" 仍生效应删除；两个 button 缺 type（会都变提交）；提交按钮的 type="submit" 建议显式写出。
2. 关键点：<label for> 与 id 配对；单选同名 name="gender" 且"女"加 checked；复选"写代码"加 checked；<option selected>；<input type="file" multiple>；三个按钮分别 submit/reset/button。
3. ① header ② main ③ article ④ aside ⑤ footer ⑥ div。
4. <div> 写作 <div>，& 写作 &，连续空格用   。
5. ① for="pwd" 找不到对应 id="pwd" 的控件，点"密码"无反应；② option 不认 checked，应改 selected。

原视频对照

#	视频	时长
1	常用快捷键	08:07
2	表格	16:59
3	表格结构	06:12
4	合并单元格	11:08
5	表单1	15:30
6	上午小结	05:56
7	占位符和默认选中	06:20

小结

1. 表单的完整链路是四段：form 框范围 → 控件收集 → label 说明 → button 提交/重置，缺任何一段都会在真实使用时出问题。
2. name 是表单里最重要的属性：单选的"分组"靠它，数据提交也靠它；只写控件不写 name，等于白填。
3. 布尔属性（checked、selected、multiple、disabled）只有"有/无"两态，写值反而制造 bug，能用简写就用简写。
4. "提示"与"数据"必须分清：placeholder 是提示、value 和标签体内容才是数据，混用会导致取值拿不到。
5. 交互细节靠属性，外观细节靠 CSS：textarea 尺寸与拖拽、input 边框、表格边框，都不该由 HTML 属性承担。
6. label 的两种写法等价，选一种团队内统一；包裹写法天然免 id，适合批量场景，for/id 写法适合结构分离的场景。
7. 语义化标签解决的是"这段内容是什么"，不是"它长什么样"；换成语义标签视觉不变，收益在可读性、可维护性和无障碍。
8. 字符实体是"想显示被解析的字符"时的唯一解，页面渲染异常时先怀疑 <、&、连续空格这三类。