主题
HTML 进阶（一）
本页对应 HTML 进阶，共 7 段视频，约 1 小时 0 分。
学习目标
- 能区分无序列表、有序列表、定义列表的语义与典型使用场景，并根据页面效果选择正确的列表类型。
- 能独立编写
ul > li、ol > li、dl > dt + dd结构，并在浏览器中验证默认圆点、数字序号及定义列表的展示效果。 - 能说明列表嵌套规则：
ul/ol的直接子元素只能是li，li内可包含链接、标题、段落等标签，并能判断和改正错误嵌套。 - 能使用 Emmet 语法快速生成列表结构，如
ul>li*4、ol>li*4、dl>dt+dd*4>a，并完成对应内容填充。 - 能独立完成“友情链接”“四大名著”“小米底部自定义列表”等案例，保证结构清晰、内容排列符合效果图。
- 能概括列表、表格、表单在网页中的典型用途，并说明列表主要用于内容排列整齐的区域。
知识点
列表总览
列表用于布局内容排列整齐的区域。转写稿中反复强调：判断要不要用列表，先看内容是否“排列整齐”。列表分三类：无序列表、有序列表、定义列表。学习时先记结论：无序列表最常用，是重点；定义列表常用于网站底部；有序列表了解即可，实际页面中有些“看起来有序”的区域也可能用div或表格实现。
无序列表
为什么需要：页面上大量区域只需要排列整齐，并不要求规定先后顺序，例如导航、友情链接、商品分类。此时用无序列表最合适。转写稿中打开小米等页面检查结构，看到成排的ul和li，说明这是布局中的高频写法。
怎么想：先判断“有没有顺序”。没有顺序，就优先想ul包li；每个li是一个条目，条目内部还可以放标题、段落、链接等内容。
怎么做：标签是ul嵌套li，ul是无序列表，li是列表条目。
html
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>转写稿中的调试过程可这样理解：在编辑器输入ul后回车，内部生成li；在li中放h3和文字，保存后每个条目默认出现小圆点。快捷写法ul>li*4表示ul里包含4个li；若每个li里还要放链接，可写ul>li*4>a。案例“友情链接”要求写百度、新浪、搜狐、网易，结构应是li包a，不是a包li。
易错点：ul标签里面只能包裹li标签；li标签里面可以包裹任何内容。转写稿中的面试题提醒：ul里不能直接放p；a里不要再套a，因为一个链接应对应一个跳转地址。写案例时若把链接文字放错层级，要撤销并放回a中。
有序列表
为什么需要：当内容需要规定顺序，例如步骤、排名，才考虑有序列表。转写稿中说明：有序就是“谁在前谁就必须在前”，不能随意颠倒。
怎么想：先问“顺序是否影响含义”。影响含义，用ol；不影响，仍优先用ul。实际开发中有序列表使用相对少。
怎么做：标签是ol嵌套li，ol是有序列表，li是列表条目。
html
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>转写稿演示ol>li*4后保存，页面默认出现1、2、3、4序号。案例中“熊大、熊二、光头强、翠花”按顺序排列，说明有序列表会自带编号。
易错点：ol标签里面只能包裹li标签；li标签里面可以包裹任何内容。不要因为看到网页上有1234就断定一定是有序列表，转写稿中检查搜狐、微博热搜等区域时，发现有的用表格或div实现，所以结构判断要看源码，不能只看外观。
定义列表
为什么需要：当内容是一个标题下面带多个说明项时，无序和有序都不太合适。网站底部“购物指南、服务中心、关注我们”这类“标题+若干描述”的结构，用定义列表更贴切。
怎么想：先找“标题”和“描述”的对应关系。一个dt是定义列表的标题，多个dd是描述/详情；布局时不要把很多组硬塞进一个dl，转写稿建议拆成多个dl，后面用CSS排到一行更容易。
怎么做：标签是dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。
html
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
转写稿案例“购物指南”可写成dl>dt+dd*4>a：dt放“购物指南”，4个dd里分别放链接。写完后用Tab缩进、Shift+Tab反缩进整理结构；若链接文字放错位置，同样要撤销后放进a。
易错点：dl里面只能包含dt和dd；dt和dd里面可以包含任何内容。转写稿面试题中，dl里不能放li。一般一个dt可对应多个dd，dd个数不限；定义列表默认竖着独占一行，想横排要等CSS处理。
表格的用途与整体认识
网页中的表格与 Excel 表格类似，主要用来展示数据。为什么需要：当信息本身具有“行、列、表头、数据项”的关系时，用表格表达比一堆普通段落更清楚。怎么想：先看数据有几行几列，再判断第一行是不是表头，最后决定用 table、tr、td/th 搭建结构。怎么做：外层写 table，每一行写 tr，行里的单元格写 td；表头单元格可用 th。易错点：不要一上来就写 td，td/th 必须放在 tr 里，tr 再放在 table 里；表格默认没有边框线，需要按笔记提示用 border 属性加边框。
基本使用：table 嵌套 tr，tr 嵌套 td / th
标签关系是：table 嵌套 tr，tr 嵌套 td / th。
为什么需要：表格数据必须按“表格→行→单元格”的层级组织，浏览器才能正确排版。怎么想：转写稿里反复强调“先分析结构，结构要保证别乱”，表格也一样：先数行，再数每行单元格，表头用 th，普通数据用 td。怎么做：先写 table，里面按行写 tr，每个 tr 内写对应数量的 td 或 th；需要边框时加 border="1"。易错点：border 是笔记中用于演示边框的属性，不是表格内容标签；每行单元格数量要按数据对齐，否则表格会错位。
html
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>表格结构标签：thead、tbody、tfoot（了解）
为什么需要：用结构标签把表头、数据主体、表尾总结划分区域，让表格结构更清晰，语义更清晰。怎么想：表头区域放 thead，主要数据放 tbody，总结行放 tfoot；这些标签内部仍然要放 tr。怎么做：在 table 内分别包住对应的 tr 结构。易错点：笔记提示“表格结构标签可以省略”，但一旦使用，就要保持分区合理；后面合并单元格时不能跨 thead、tbody、tfoot 合并。
合并单元格：rowspan 与 colspan
为什么需要：当多行或多列表达的是同类信息时，合并单元格可以避免重复内容，让表格更简洁。怎么想：先明确合并目标，再判断是跨行还是跨列。怎么做：按笔记步骤——1. 明确合并目标；2. 保留最左最上的单元格，添加属性，取值是数字，表示需要合并的单元格数量；跨行合并保留最上单元格，加 rowspan；跨列合并保留最左单元格，加 colspan；3. 删除其他被合并的单元格。易错点：不能跨表格结构标签合并单元格，例如不能跨 thead、tbody、tfoot 合并；删除单元格时只删被合并掉的，保留带 rowspan/colspan 的那个。
html
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。
表单的作用与使用场景
作用：收集用户信息。转写稿里用“办银行卡填单子”类比：单子上能填写、能勾选，网页表单也是把输入框、单选框、多选框等控件收集到的信息交给服务器。转写稿还把“列表、表格、表单”并列提醒：表单不是用来排版的列表，而是输入/选择控件区域。
为什么需要：登录、注册、搜索都要让用户填信息；怎么想：先判断是否需要用户输入或选择，再选控件；怎么做：用 form 包住表单控件，常见于登录页、注册页、搜索区域；易错点：控件和按钮要放在表单区域内，按钮才有提交/重置行为。
input 标签与占位文本
input 标签的 type 属性值不同，功能不同。
为什么需要：一个标签要覆盖文本、密码、单选、文件等多种输入；怎么想：按“要收集什么数据”选 type；怎么做：写 input 并设置 type，占位文本用 placeholder 提示；易错点：placeholder 是提示信息，不是默认值，文本框和密码框都可使用。
html
<input type="..." >
<input type="..." placeholder="提示信息">单选框
为什么需要：性别等只能选一项；怎么想：一组互斥选项要归为一组；怎么做：同一组 radio 设置相同 name，checked 表示默认选中；易错点：name 不同会变成多组，可能都能选；name 属性值可自定义。
html
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女上传文件与多选框
为什么需要：上传文件、多选爱好等；怎么想：文件多选用 multiple，多选框默认选中用 checked；怎么做：按下面代码写；易错点：multiple 是文件多选，不是多选框；多选框也叫复选框。
html
<input type="file" multiple>
<input type="checkbox" checked> 敲前端代码下拉菜单
为什么需要：选项多时节省空间；怎么想：整体用 select，每一项用 option；怎么做：selected 实现默认选中；易错点：默认显示第一项，selected 一般只给一个选项。
html
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>文本域
为什么需要：多行输入文本；怎么想：多行内容不要用单行文本框；怎么做：用 textarea，标签内写默认提示文字；易错点：实际开发中用 CSS 设置尺寸，一般禁用右下角拖拽功能。
html
<textarea>默认提示文字</textarea>label 标签
为什么需要：让文字和表单控件关联，增大点击范围；怎么想：文字点不动时用 label 绑定控件；怎么做：写法一让 for 等于控件 id，写法二用 label 包裹文字和控件；易错点：for 值必须和 id 一致；包裹写法不需要属性。
html
<input type="radio" id="man">
<label for="man">男</label>
<label><input type="radio"> 女</label>按钮与 form 表单区域
为什么需要：提交、重置、普通按钮功能不同；怎么想：用 type 区分；怎么做：form 的 action 写发送数据地址，按钮放表单内；易错点：省略 type 默认是提交；按钮需配合 form 才能实现对应功能。
html
<button type="">按钮</button>html
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<!-- 如果省略 type 属性，功能是 提交 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>调试时可按笔记示例验证：点“提交”看是否触发表单提交，点“重置”看控件是否恢复；若按钮无反应，先检查按钮是否在 form 内。转写稿本节主要讲列表，未展开表单控件调试，这里不虚构额外步骤。
课件图示
代码示例
代码一：无序列表（四大名著案例）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>四大名著 - 无序列表</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; }
</style>
</head>
<body>
<!-- 上面一块：大标题 -->
<h3>四大名著</h3>
<!-- 下面一块：ul 嵌套 li，li 里再放 h3 + p -->
<ul>
<li>
<h3>水浒传</h3>
<p>作者：施耐庵</p>
</li>
<li>
<h3>三国演义</h3>
<p>作者：罗贯中</p>
</li>
<li>
<h3>西游记</h3>
<p>作者：吴承恩</p>
</li>
<li>
<h3>红楼梦</h3>
<p>作者：曹雪芹</p>
</li>
</ul>
</body>
</html>关键行与易错点
- 结构先拆两块：上面一个大标题（h1~h6 都行），下面一个
ul，ul里放 4 个li，每个li里再放h3（书名）和p（简介）。 - ul 里只能包裹 li，不能直接塞
p、div等其他标签；而 li 里面可以包裹任何内容，所以li > h3 + p完全合法。 dt/dd之外同理：这是"父子关系"，ul > li用大于号，h3和p在li里是"兄弟关系"。- Emmet 快捷写法：
ul>li*4>h3+p，>表示包含，*4表示生成 4 份，+表示并列。 - 无序列表默认每项前面有一个小圆点，且默认竖排、独占一行，想横排需要后面学 CSS 处理。
代码二：定义列表（网站底部"购物指南"）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定义列表 - 购物指南</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; }
</style>
</head>
<body>
<!-- 第一组 -->
<dl>
<dt>购物指南</dt>
<dd><a href="#">手机</a></dd>
<dd><a href="#">电视</a></dd>
<dd><a href="#">笔记本</a></dd>
<dd><a href="#">平板</a></dd>
</dl>
<!-- 第二组 -->
<dl>
<dt>服务中心</dt>
<dd><a href="#">售后</a></dd>
<dd><a href="#">线下门店</a></dd>
<dd><a href="#">服务网点</a></dd>
</dl>
<!-- 第三组 -->
<dl>
<dt>关注我们</dt>
<dd><a href="#">新浪微博</a></dd>
<dd><a href="#">官方微博</a></dd>
<dd><a href="#">联系我们</a></dd>
</dl>
</body>
</html>关键行与易错点
- 定义列表结构：
dl是定义列表整体，dt是定义标题，dd是描述/详情。dt 和 dd 是兄弟（并列）关系，谁都不包含谁。 - dl 里面只能包含 dt 和 dd，不能塞
li、p等其他标签；而 dt 和 dd 里面可以包含任何内容（本例 dd 里放的是a链接）。 - 是 dd 包 a，不是 a 包 dd，方向别套反。
- 网页底部这类"上面一个标题、下面一串说明"的效果，用
dl最合适，用ul/ol反而不合适（它们表达不了标题 + 描述的层级）。 - 布局时按"组"拆：页面上有几组就写几个
dl，一组里通常是一个 dt 配多个 dd，拆得越细后面写 CSS 越好排。 - 定义列表默认也是竖排、一行一个，想横排要等 CSS 阶段处理。
- 链接的跳转地址先用
#占位即可。
代码三：表格与合并单元格
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格 - 合并单元格</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; }
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
</body>
</html>关键行与易错点
- 表格是
table嵌套tr（行），tr嵌套td（普通单元格）/th（表头单元格）。 - 网页中表格默认没有边框线，必须加
border="1"属性才看得到线。 - 合并单元格三步：① 明确合并目标；② 保留最左最上的单元格并加属性；③ 删除被合并的其他单元格。
- 跨行合并：保留最上面的单元格，加
rowspan="数量"（本例数学成绩rowspan="2"，所以第二行对应的<td>100</td>要删掉/注释掉）。 - 跨列合并：保留最左边的单元格，加
colspan="数量"（本例"全市第一"占 3 列，所以后面两个<td>要删掉）。
- 跨行合并：保留最上面的单元格，加
- 属性值都是数字，表示要合并的单元格数量，不是"合并到第几列/行"。
- 结构标签
thead、tbody、tfoot用来划分区域，可以省略，但一旦使用，不能跨结构标签合并单元格。 - 写完一定要数一下每行的单元格总数是否一致，删漏一个整张表就会错位。
常见错误
ul 里直接塞 div、p 或纯文字 现象：浏览器照样能显示，但代码一检查就"脏"，后续用 CSS 排版时对不齐。 原因：把 ul 当成普通"盒子"用，忘了它只认 li。 修法：ul/ol 内只留 li，把要放的内容整体搬进某个 li 内部。
合并单元格后表格错位、行列对不上 现象：表格右侧多出空白格，或某行整体向左挤。 原因：加了 rowspan/colspan 却没删掉被合并掉的 td。 修法：先定位"最左/最上"那个单元格并加属性，再删掉其余被合并的 td，最后逐行核对"该行 td 数 + 被上方 rowspan 占掉的位置 = 总列数"。
跨 thead/tbody/tfoot 合并单元格 现象：合并后行高异常、边框断裂。 原因：结构标签是相互独立的分组，不能互相"吃"单元格。 修法：合并只在同一个结构标签内部做；需要整表合并时，就别拆结构标签。
一组单选框能同时选中两个 现象：男、女两个都能亮。 原因：两个 input 的 name 写成了不同的值，或其中一个漏写 name。 修法：同组单选的 name 必须完全一致，值可以不同。
点文字选不中控件（label 失效） 现象：点"男"字没反应，只能点小圆点。 原因：for 的值和控件的 id 不一致、控件根本没写 id，或者把 for 写成了 name。 修法：for = 控件的 id（一字不差）；或者改用
<label>直接把控件包起来，不写任何属性。按钮点了页面刷新 / 什么都不发生 现象：点"提交"整页重载，或点按钮毫无反应。 原因：按钮不在 form 内；或省略 type，默认就是提交。 修法：把控件和按钮一起放进 form，并显式写 type="submit|reset|button"。
下拉菜单默认选中不生效 现象：永远显示第一项，selected 好像没用。 原因：selected 写在了 select 上，或同一组 option 写了多个 selected。 修法：selected 写在目标 option 上，且只保留一个。
文本域里写 value 或用单标签闭合 现象：默认提示文字不显示，或后面的内容被吞掉。 原因：textarea 的值写在标签对之间，不是属性。 修法：写成
<textarea>提示文字</textarea>，内容放中间。
练习
练习 1（无序列表 · 结构 + 链接） 做"四大名著"块：一个标题 + 一个无序列表，列表四项分别是四大名著书名，每项内包含书名标题和一句简介，书名要能点击跳转。全程用 Emmet 一次性生成骨架，再替换文字。
练习 2（定义列表 · 仿站底部） 还原小米底部三组信息：购物指南、服务中心、关注我们。每组下面的每一条都要是链接（用 # 占位）。要求先说清楚"用几个 dl、每个 dl 里放什么"，再写代码。
练习 3（表格 · 合并单元格） 做一个成绩表：表头为姓名/语文/数学/总分，两行学生数据（数学成绩两人相同需跨行合并），最后一行"总结"跨列显示评语。要求带 thead/tbody/tfoot，并逐行数一遍 td 数量是否对得上。
练习 4（表单 · 综合） 做一个注册表单：用户名（占位文本提示）、密码、性别单选（默认选男）、爱好多选（默认勾一项）、城市下拉（默认选中某一项）、头像上传（可多选文件）、个人简介文本域，最后是提交和重置按钮。要求每个控件的说明文字都能点击选中控件。
练习 5（找错题） 下面这段代码有 4 处问题，找出来并说明理由、给出改法：
html
<ul>
<p>友情链接</p>
<li><a href="#">百度</a></li>
<li><a href="#">新浪</a></li>
</ul>
<input type="radio" name="gender" checked> 男
<label for="female">女</label><input type="radio" name="sex" id="female">
<textarea value="请输入简介"></textarea>原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 反馈复习和今日内容 | 08:47 |
| 2 | 无序列表 | 15:06 |
| 3 | 四大名著案例 | 06:42 |
| 4 | 四大名著实现 | 03:55 |
| 5 | 有序列表 | 09:22 |
| 6 | 定义列表 | 12:05 |
| 7 | 自定义案例 | 04:53 |
小结
- 选列表先问两个问题：要不要顺序（有序/无序）、是不是"标题 + 一堆说明"的关系（定义列表）。判据不清就写代码，一定返工。
- 无序列表是布局主力，有序列表实际使用场景很少，定义列表常见于页脚与分组信息——投入练习的时间按这个比例分配。
- 三种列表默认都竖排独占一行，横排是 CSS 的事，现在不要试图用标签解决。
- 表格的定位只有一条：展示数据。用表格搭页面结构是过时做法。
- 合并单元格的固定顺序是"定目标 → 最左最上留属性 → 删其余"，删那一步最容易漏，也最容易造成错位。
- 表单里两个关键属性各管一件事：name 管分组（单选能不能互斥）、id + for 管点击范围（label 有没有用），两者不能互相替代。
- 按钮必须待在 form 里才有功能，且 type 永远显式写，别依赖默认值。
- Emmet 只负责敲得快，结构分析在前、代码生成在后；先想清楚"谁包谁"，再敲
>和*。