第 3 章 · 列表、表格与表单
本章目标：用列表组织导航与大纲，用表格呈现课表；掌握 fieldset、datalist 与 HTML5 验证；在 academy-demo 完成完整「课程报名表」register.html。
学时建议：2.5 小时（含 50 分钟跟练与自检）
前置：第 1～2 章；academy-demo 已有 index、courses 页面。
3.1 无序、有序与定义列表
<ul>
<li>HTML 语义结构</li>
<li>CSS 布局</li>
<li>JavaScript 交互</li>
</ul>
<ol>
<li>填写报名表</li>
<li>邮件确认</li>
<li>开通权限</li>
</ol>
<dl>
<dt>DOM</dt>
<dd>将 HTML 表示为可编程树结构。</dd>
<dt>CLS</dt>
<dd>累计布局偏移，衡量视觉稳定性。</dd>
</dl>| 类型 | 标签 | 场景 |
|---|---|---|
| 无序 | ul+li | 导航、技能点 |
| 有序 | ol+li | 步骤、排名 |
| 定义 | dl+dt+dd | 术语表、FAQ |
3.2 表格 <table>
表格仅用于二维数据，禁止做页面布局。
<table>
<caption>前端开发入门 · 课表</caption>
<thead>
<tr>
<th scope="col">章节</th>
<th scope="col">主题</th>
<th scope="col">学时</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">ch01</th>
<td>HTML 文档结构</td>
<td>2h</td>
</tr>
<tr>
<th scope="row">ch02</th>
<td>文本、链接与多媒体</td>
<td>2h</td>
</tr>
</tbody>
</table>| 元素 | 作用 |
|---|---|
<caption> | 表格标题 |
th scope="col/row" | 标明表头行列关系 |
colspan/rowspan | 跨列/跨行 |
3.3 表单基础与 fieldset 分组
<form action="/api/register" method="post" novalidate>
<fieldset>
<legend>基本信息</legend>
<label for="email">邮箱</label>
<input id="email" name="email" type="email" required autocomplete="email">
</fieldset>
<fieldset>
<legend>感兴趣的方向</legend>
<label><input type="checkbox" name="interest" value="html"> HTML/CSS</label>
<label><input type="checkbox" name="interest" value="js"> JavaScript</label>
</fieldset>
<button type="submit">提交</button>
</form>| 属性 | 说明 |
|---|---|
action / method | 提交 URL；post 用于创建 |
enctype | 含文件时用 multipart/form-data |
novalidate | 关闭浏览器验证（配合 JS 自定义） |
fieldset+legend | 逻辑分组，读屏读出标题 |
可访问性：每个控件配 <label for="id">；必填 required；错误用 aria-describedby（JS 章深化）。
3.4 常用 input 与 datalist
| type / 控件 | 用途 | 验证 |
|---|---|---|
text | 单行文本 | minlength、pattern |
email / tel / url | 格式字段 | 内置格式校验 |
number / date | 数字/日期 | min、max、step |
radio / checkbox | 单选/多选 | 同 name 互斥或多值 |
select | 下拉 | 首项 value="" 防空提交 |
textarea | 多行 | maxlength |
file | 上传 | accept |
datalist（可输入可选，不同于 select）：
<label for="course">意向课程</label>
<input id="course" name="course" list="course-list" required>
<datalist id="course-list">
<option value="前端开发入门">
<option value="项目运维与部署">
<option value="企业级架构运维">
</datalist>HTML5 验证：required、pattern（如 ^1[3-9]\d{9}$）、minlength/maxlength、min/max；配合 title 写清错误提示。