Day03_HTML 列表、表格、表单完整指南(上)

HTML 列表、表格、表单完整指南

📚 课程知识图谱

40+ 示例
8+ 复杂表格
完整表单
HTML Day03

核心标签
列表 Lists
表格 Tables
表单 Forms
ul 无序列表

🔸 导航菜单

🔸 功能列表
ol 有序列表

🔢 操作步骤

🔢 排行榜
dl 定义列表

📖 术语表

📖 FAQ
基础结构

thead/tbody/tfoot
单元格合并

rowspan/colspan
应用场景

数据报表/课程表
输入控件

21种类型
验证机制

前端+后端
应用场景

🎯 学习路径

初学者进阶者高级列表 Lists 列表 Lists 初学者理解三种列表类型理解三种列表类型初学者掌握嵌套列表掌握嵌套列表初学者实战导航菜单实战导航菜单表格 Tables 表格 Tables 进阶者基础表格结构基础表格结构进阶者单元格合并技巧单元格合并技巧进阶者复杂表格实战复杂表格实战表单 Forms 表单 Forms 初学者认识表单控件认识表单控件进阶者表单验证机制表单验证机制进阶者完整表单设计完整表单设计综合实战综合实战高级注册表单设计注册表单设计高级数据表格展示数据表格展示高级最佳实践应用最佳实践应用 HTML 列表、表格、表单学习路径

一、HTML 列表详解

列表是网页中组织信息的基础结构，HTML 提供了三种主要的列表类型：无序列表、有序列表和定义列表。

📊 列表类型选择流程图

需要顺序
不需要顺序
是术语定义
普通列表
需要创建列表
是否需要显示顺序?
使用 ol 有序列表
是否为术语定义?
使用 dl 定义列表
使用 ul 无序列表
适用场景
适用场景
适用场景
操作步骤
排行榜
有序编号
导航菜单
功能列表
新闻列表
词汇表
FAQ问答
术语解释

1.1 无序列表（Unordered List）

语义： 表示一组相关但无顺序要求的项目，浏览器通常使用圆点（bullets）作为标记。

🎯 无序列表结构图

ul 无序列表容器
li 列表项1
li 列表项2
li 列表项3
ul 嵌套列表
li 子项1
li 子项2

💡 使用场景特点

特点	说明	典型应用
🔸 无序性	项目之间无先后关系	功能列表、特性介绍
🔸 并列性	所有项目处于同一层级	产品特点、服务项目
🔸 可嵌套	支持多级嵌套结构	导航菜单、分类目录
🔸 灵活性	可包含文本、链接、图片等	新闻列表、图片画廊

基本结构：

html 复制代码

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

常见应用场景：

示例 1：技术栈列表

html 复制代码

<h2>前端三大技术</h2>
<ul>
  <li>HTML 超文本标记语言</li>
  <li>CSS 层叠样式表</li>
  <li>JavaScript 浏览器端脚本语言</li>
</ul>

渲染效果：

HTML 超文本标记语言
CSS 层叠样式表
JavaScript 浏览器端脚本语言

示例 2：新闻列表（结合超链接）

html 复制代码

<h2>今日头条</h2>
<ul>
  <li>
    <a href="#">前端开发趋势：2026年最值得学习的技术栈</a>
  </li>
  <li>
    <a href="#">人工智能如何改变Web开发的未来</a>
  </li>
  <li>
    <a href="#">性能优化实战：让你的网站速度提升50%</a>
  </li>
  <li>
    <a href="#">从零开始学习响应式设计的完整指南</a>
  </li>
</ul>

示例 3：导航菜单（嵌套列表）

html 复制代码

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">论坛</a></li>
    <li>
      <a href="#">关于我们</a>
      <ul>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">加入我们</a></li>
        <li><a href="#">举报我们</a></li>
      </ul>
    </li>
    <li><a href="#">商城</a></li>
    <li><a href="#">博客</a></li>
  </ul>
</nav>

嵌套原理：

复制代码

ul (父列表)
  ├─ li (列表项)
  ├─ li (列表项)
  │   └─ ul (子列表 - 必须嵌套在 li 内)
  │       ├─ li (子列表项)
  │       └─ li (子列表项)
  └─ li (列表项)

注意： 嵌套列表必须放在 <li> 标签内部，不能直接放在 <ul> 或 <ol> 中！

示例 4：多级菜单（电商分类）

html 复制代码

<ul>
  <li>
    电子产品
    <ul>
      <li>手机</li>
      <li>笔记本电脑</li>
      <li>平板电脑</li>
    </ul>
  </li>
  <li>
    服装
    <ul>
      <li>衬衫</li>
      <li>裤子</li>
      <li>鞋子</li>
    </ul>
  </li>
  <li>
    食品
    <ul>
      <li>零食</li>
      <li>饮料</li>
      <li>水果</li>
    </ul>
  </li>
</ul>

1.2 有序列表（Ordered List）

语义： 表示一组有顺序要求的项目，浏览器通常使用数字编号。

🎯 有序列表结构图

ol 有序列表容器

li 第一项
li 第二项
li 第三项
ol 嵌套列表
a. li 子项
b. li 子项

💡 使用场景与编号样式

编号类型	CSS 设置	适用场景	示例
🔢 数字	`type="1"` 或 `list-style-type: decimal`	操作步骤、排名	1, 2, 3, 4...
🔤 小写字母	`type="a"` 或 `list-style-type: lower-alpha`	多个选项、分支步骤	a, b, c, d...
🔠 大写字母	`type="A"` 或 `list-style-type: upper-alpha`	重要章节、主要分类	A, B, C, D...
Ⅰ 小写罗马	`type="i"` 或 `list-style-type: lower-roman`	附录、引用	i, ii, iii, iv...
Ⅰ 大写罗马	`type="I"` 或 `list-style-type: upper-roman`	正式文档、法律条款	I, II, III, IV...

基本结构：

html 复制代码

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

常见应用场景：

示例 1：排行榜

html 复制代码

<h2>2026年度销售冠军榜</h2>
<ol>
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
  <li>赵六</li>
  <li>孙七</li>
</ol>

渲染效果：

张三
李四
王五
赵六
孙七

示例 2：操作步骤（制作三明治）

html 复制代码

<h2>如何制作花生酱果酱三明治</h2>
<ol>
  <li>准备两片面包</li>
  <li>在一片面包上涂抹花生酱</li>
  <li>在另一片面包上涂抹果酱</li>
  <li>将两片面包合在一起</li>
  <li>享用你的三明治！</li>
</ol>

示例 3：自定义起始编号

html 复制代码

<!-- 从第5项开始编号 -->
<ol start="5">
  <li>第五项内容</li>
  <li>第六项内容</li>
  <li>第七项内容</li>
</ol>

<!-- 倒序编号 -->
<ol reversed>
  <li>第一名</li>
  <li>第二名</li>
  <li>第三名</li>
</ol>

示例 4：嵌套的菜谱（混合有序和无序列表）

html 复制代码

<h2>烹饪步骤</h2>
<ol>
  <li>去除大蒜皮，粗略切碎</li>
  <li>去除辣椒的种子和茎，粗略切碎</li>
  <li>将所有食材放入食品加工器</li>
  <li>
    将所有食材加工成糊状
    <ul>
      <li>如果你想要粗糙的口感，加工时间短一些</li>
      <li>如果你想要光滑的口感，加工时间长一些</li>
    </ul>
  </li>
</ol>

1.3 定义列表（Definition List）

语义： 用于表示术语及其定义/描述的关联关系，类似词汇表或FAQ。

🎯 定义列表结构图

定义
定义
定义
dl 定义列表容器
dt 术语1
dd 描述1
dt 术语2
dd 描述2-1
dd 描述2-2

💡 定义列表的应用场景

场景类型	关系模式	适用内容	示例
📖 词汇表	1对1	专业术语解释	HTML → 超文本标记语言
❓ FAQ	1对1	常见问题解答	问题 → 答案
📋 属性说明	1对多	API文档、配置项	参数 → 多个说明
🏷️ 元数据	1对1	作者、日期、版本	作者 → 张三
📚 目录索引	1对多	章节与小节	第一章 → 1.1, 1.2, 1.3

基本结构：

html 复制代码

<dl>
  <dt>术语</dt>
  <dd>术语的描述</dd>
</dl>

结构原理：

复制代码

dl (定义列表容器)
  ├─ dt (Definition Term - 术语)
  └─ dd (Definition Description - 描述)

示例 1：一对一关系（术语解释）

html 复制代码

<h2>前端技术栈</h2>
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言（HyperText Markup Language），用于创建网页结构</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表（Cascading Style Sheets），用于设置网页样式</dd>
  
  <dt>JavaScript</dt>
  <dd>浏览器端脚本语言，用于实现网页交互功能</dd>
</dl>

示例 2：一对多关系（一个术语多个描述）

html 复制代码

<h2>如何掌握一个 HTML 标签？</h2>
<dl>
  <dt>掌握标签的三要素</dt>
  <dd>1. 该标签的语义功能</dd>
  <dd>2. 该标签的属性以及属性值如何设置</dd>
  <dd>3. 该标签是单标签还是双标签</dd>
</dl>

示例 3：FAQ 列表（无障碍访问）

html 复制代码

<section aria-labelledby="faq-heading">
  <h2 id="faq-heading">常见问题</h2>
  <dl role="list">
    <dt role="listitem">什么是 HTML？</dt>
    <dd>HTML（超文本标记语言）是创建网页的标准标记语言</dd>
    
    <dt role="listitem">如何学习 HTML？</dt>
    <dd>从基础标签开始，练习构建简单页面，逐步添加 CSS 和 JavaScript</dd>
    
    <dt role="listitem">HTML 是编程语言吗？</dt>
    <dd>不是，HTML 是用于结构化内容的标记语言，而不是执行逻辑的编程语言</dd>
  </dl>
</section>

示例 4：术语表（多个含义）

html 复制代码

<dl>
  <dt>爱</dt>
  <dd>将世界凝聚在一起的粘合剂</dd>
  
  <dt>鸡蛋</dt>
  <dd>将蛋糕凝聚在一起的粘合剂</dd>
  
  <dt>咖啡</dt>
  <dd>让世界在早晨运转起来的饮料</dd>
  <dd>一种淡褐色的颜色</dd>
</dl>

1.4 列表标签总结表

标签名	功能和语义	属性	单/双标签	使用场景
`<ul>`	无序列表容器	-	双标签	导航菜单、功能列表、新闻列表
`<ol>`	有序列表容器	`start`, `reversed`, `type`	双标签	排行榜、操作步骤、编号列表
`<li>`	列表项	-	双标签	必须放在 `<ul>` 或 `<ol>` 内
`<dl>`	定义列表容器	-	双标签	术语表、FAQ、元数据
`<dt>`	定义列表术语	-	双标签	术语名称
`<dd>`	定义列表描述	-	双标签	术语的具体描述

🎨 列表样式对比

列表样式
无序列表 ul
disc 实心圆点
circle 空心圆
square 实心方块
none 无标记
有序列表 ol
decimal 数字
lower-alpha 小写字母
upper-alpha 大写字母
lower-roman 小写罗马
upper-roman 大写罗马
定义列表 dl
默认左对齐
dt加粗显示
dd缩进显示

关键注意事项：

✅ <li> 必须被 <ul> 或 <ol> 直接包裹
✅ 嵌套列表要放在 <li> 内部
✅ <dt> 和 <dd> 必须放在 <dl> 内部
❌ 不要单独使用 <li>，也不要直接在列表中嵌套列表

🚀 实战技巧总结

列表实战技巧
语义化
可访问性
性能优化
选择合适类型
避免滥用div
使用ARIA标签
键盘导航支持
避免深层嵌套
虚拟滚动大列表

二、HTML 表格详解

表格用于展示二维数据，如用户信息、课程表、价格对比等。

📊 表格设计决策流程

是
否
需要
不需要
需要
不需要
需要
不需要
需要展示数据
数据是二维的?
使用 table 表格
使用列表或其他布局
需要区分头部?
添加 thead
仅使用 tbody
需要合计行?
添加 tfoot
完成基础结构
需要单元格合并?
使用 rowspan/colspan
使用标准单元格

2.1 表格的基本结构

完整结构层次：

复制代码

table (表格容器)
  ├─ caption (表格标题 - 可选)
  ├─ thead (表格头部 - 可选但推荐)
  │   └─ tr (行)
  │       ├─ th (表头单元格)
  │       └─ th (表头单元格)
  ├─ tbody (表格主体 - 可选但推荐)
  │   └─ tr (行)
  │       ├─ td (数据单元格)
  │       └─ td (数据单元格)
  └─ tfoot (表格脚注 - 可选)
      └─ tr (行)
          └─ td (单元格)

🎯 表格结构可视化

table 表格容器
caption 表格标题
thead 表头区域
tbody 表体区域
tfoot 表脚区域
tr 表头行
th 表头单元格
th 表头单元格
tr 数据行1
tr 数据行2
td 单元格
td 单元格
td 单元格
td 单元格
tr 总计行
td 总计单元格

示例 1：基础用户信息表

html 复制代码

<table border="1">
  <!-- 表格标题 -->
  <caption>用户信息表</caption>
  
  <!-- 表格头 -->
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>电话</th>
      <th>地址</th>
    </tr>
  </thead>
  
  <!-- 表格体 -->
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>男</td>
      <td>13378652389</td>
      <td>某市某区</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>男</td>
      <td>13378652388</td>
      <td>某市某区</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>男</td>
      <td>13378652387</td>
      <td>某市某区</td>
    </tr>
    <tr>
      <td>4</td>
      <td>赵六</td>
      <td>男</td>
      <td>13378652386</td>
      <td>某市某区</td>
    </tr>
  </tbody>
  
  <!-- 表格脚 -->
  <tfoot>
    <tr>
      <td colspan="5">共计 4 条记录</td>
    </tr>
  </tfoot>
</table>

为什么要使用 thead、tbody、tfoot？

✅ 语义化： 清晰表明表格结构
✅ 打印优化： 打印时可以在每页重复显示表头
✅ 可访问性： 屏幕阅读器能更好地理解表格结构
✅ 样式控制： 方便对不同区域应用不同样式

💡 表格使用场景对比

2.2 表格整体样式设置

table 标签的常用属性：

属性	作用	示例值
`border`	设置边框宽度	`border="1"`
`width`	设置表格宽度	`width="600"` 或 `width="80%"`
`height`	设置表格最小高度	`height="400"`
`cellspacing`	设置单元格之间的间距	`cellspacing="0"`
`cellpadding`	设置单元格内边距（边框与内容的距离）	`cellpadding="10"`

示例：完整样式表格

html 复制代码

<table 
  width="800" 
  height="400" 
  cellspacing="0" 
  cellpadding="15" 
  border="1">
  <caption>销售数据统计表</caption>
  <thead>
    <tr>
      <th>月份</th>
      <th>销售额（万元）</th>
      <th>增长率</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>150</td>
      <td>+12%</td>
    </tr>
    <tr>
      <td>2月</td>
      <td>180</td>
      <td>+20%</td>
    </tr>
    <tr>
      <td>3月</td>
      <td>165</td>
      <td>+10%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>495</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

cellspacing vs cellpadding 对比图：

复制代码

cellspacing="10"（单元格间距）
┌─────┐  ┌─────┐
│     │10│     │
└─────┘  └─────┘

cellpadding="10"（单元格内边距）
┌─────────────┐
│   ↕10      │
│ →内容←     │
│   ↕10      │
└─────────────┘

2.3 单元格宽高设置

设置原则：

给 <td> 或 <th> 设置 width
- 相当于设置整列的宽度
- 该列所有单元格都会受影响
给 <td> 或 <th> 设置 height
- 相当于设置该行的最小高度
- 实际高度 = 设置的高度 + 上下 cellpadding
给 <tr> 设置 height
- 直接设置该行的总高度

示例：精确控制尺寸

html 复制代码

<table border="1" cellspacing="0" cellpadding="10">
  <thead>
    <tr>
      <th width="100">ID</th>
      <th width="200">姓名</th>
      <th width="300">备注</th>
    </tr>
  </thead>
  <tbody>
    <tr height="60">
      <td>001</td>
      <td>张三</td>
      <td>优秀员工</td>
    </tr>
    <tr>
      <td height="80">002</td>
      <td>李四</td>
      <td>新入职员工</td>
    </tr>
  </tbody>
</table>

效果说明：

第一列宽度固定为 100px
第二列宽度固定为 200px
第三列宽度固定为 300px
第一行总高度为 60px
第二行总高度取决于 <td height="80">

2.4 单元格内容对齐方式

2.4.1 横向对齐（align 属性）

可设置的元素： <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>

可选值：

left - 左对齐
center - 居中对齐
right - 右对齐

优先级： td/th > tr > thead/tbody/tfoot

html 复制代码

<table border="1" cellspacing="0" cellpadding="10">
  <!-- thead 级别：所有表头单元格居中 -->
  <thead align="center">
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
    </tr>
  </thead>
  
  <!-- tbody 级别：所有数据单元格左对齐 -->
  <tbody align="left">
    <!-- tr 级别：覆盖 tbody 的设置 -->
    <tr align="center">
      <td>苹果</td>
      <td>5.00</td>
      <td>10</td>
      <!-- td 级别：优先级最高 -->
      <td align="right">50.00</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>3.00</td>
      <td>15</td>
      <td align="right">45.00</td>
    </tr>
  </tbody>
</table>

2.4.2 纵向对齐（valign 属性）

可设置的元素： <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>

可选值：

top - 顶部对齐
middle - 居中对齐（默认值）
bottom - 底部对齐

html 复制代码

<table border="1" cellspacing="0" cellpadding="10">
  <tr>
    <td height="100" valign="top">顶部对齐</td>
    <td height="100" valign="middle">居中对齐</td>
    <td height="100" valign="bottom">底部对齐</td>
  </tr>
</table>

2.5 单元格跨行和跨列（重点！）

核心属性：

colspan - 跨列（横向合并）
rowspan - 跨行（纵向合并）

🎯 跨行跨列原理图

横向合并
纵向合并
双向合并
单元格合并需求
合并方向?
使用 colspan
使用 rowspan
同时使用 colspan + rowspan
删除被合并的右侧单元格
删除被合并的下方单元格
删除右侧和下方单元格
重新计算列数
验证: 每行逻辑列数必须相等

合并原理图：

复制代码

原始表格：
┌───┬───┬───┐
│ A │ B │ C │
├───┼───┼───┤
│ D │ E │ F │
├───┼───┼───┤
│ G │ H │ I │
└───┴───┴───┘

colspan="2"（A 跨2列）：
┌───────┬───┐
│   A   │ C │
├───┼───┼───┤
│ D │ E │ F │
├───┼───┼───┤
│ G │ H │ I │
└───┴───┴───┘
删除 B 单元格！

rowspan="2"（A 跨2行）：
┌───┬───┬───┐
│   │ B │ C │
│ A ├───┼───┤
│   │ E │ F │
├───┼───┼───┤
│ G │ H │ I │
└───┴───┴───┘
删除 D 单元格！

示例 1：跨列（colspan）- 总计行

html 复制代码

<table border="1" cellspacing="0" cellpadding="10">
  <thead>
    <tr>
      <th>科目</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数学</td>
      <td>95</td>
    </tr>
    <tr>
      <td>英语</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <!-- 合并2列 -->
      <td colspan="2">总分：183</td>
    </tr>
  </tfoot>
</table>

示例 2：跨行（rowspan）- 用户分类

html 复制代码

<table border="1" cellspacing="0" cellpadding="10">
  <caption>用户信息表</caption>
  <thead>
    <tr>
      <th>分类</th>
      <th>序号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>电话</th>
      <th>地址</th>
    </tr>
  </thead>
  <tbody>
    <!-- 普通用户：跨4行 -->
    <tr>
      <td rowspan="4">普通用户</td>
      <td>1</td>
      <td>张三</td>
      <td>男</td>
      <td>13378652389</td>
      <td>某市某区</td>
    </tr>
    <tr>
      <!-- 注意：第一个 td 被合并了，所以这里只有5个 td -->
      <td>2</td>
      <td>李四</td>
      <td>男</td>
      <td>13378652388</td>
      <td>某市某区</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>男</td>
      <td>13378652387</td>
      <td>某市某区</td>
    </tr>
    <tr>
      <td>4</td>
      <td>赵六</td>
      <td>男</td>
      <td>13378652386</td>
      <td>某市某区</td>
    </tr>
    
    <!-- VIP用户：跨3行 -->
    <tr>
      <td rowspan="3">VIP用户</td>
      <td>1</td>
      <td>孙七</td>
      <td>男</td>
      <td>13378652385</td>
      <td>某市某区</td>
    </tr>
    <tr>
      <td>2</td>
      <td>周八</td>
      <td>男</td>
      <td>13378652384</td>
      <td>某市某区</td>
    </tr>
    <tr>
      <td>3</td>
      <td>吴九</td>
      <td>男</td>
      <td>13378652383</td>
      <td>某市某区</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <!-- 跨6列 -->
      <td colspan="6">共计 7 条数据！</td>
    </tr>
  </tfoot>
</table>

关键要点：

⚠️ 使用 rowspan 时，被合并的单元格在后续行中不要再写
⚠️ 使用 colspan 时，被合并的单元格在同一行中不要再写
✅ 合并后，其他单元格会自动调整位置

示例 3：复杂表格 - 课程表（同时使用 rowspan 和 colspan）

html 复制代码

<table border="1" cellspacing="0" cellpadding="10" width="800">
  <caption><h2>一周课程表</h2></caption>
  <thead>
    <tr>
      <!-- 跨2行 -->
      <th rowspan="2">时间</th>
      <!-- 跨5列 -->
      <th colspan="5">星期</th>
    </tr>
    <tr>
      <!-- 第一个 th 被上面的 rowspan 占用了 -->
      <th>一</th>
      <th>二</th>
      <th>三</th>
      <th>四</th>
      <th>五</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8:00-9:00</td>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>物理</td>
      <td>化学</td>
    </tr>
    <tr>
      <td>9:10-10:10</td>
      <td>数学</td>
      <td>语文</td>
      <td>历史</td>
      <td>体育</td>
      <td>音乐</td>
    </tr>
    <tr>
      <td>10:20-11:20</td>
      <td>英语</td>
      <td>体育</td>
      <td>数学</td>
      <td>语文</td>
      <td>美术</td>
    </tr>
    <tr>
      <!-- 午休跨5列 -->
      <td>11:30-13:00</td>
      <td colspan="5" align="center">午休时间</td>
    </tr>
    <tr>
      <td>13:00-14:00</td>
      <td>物理</td>
      <td>化学</td>
      <td>生物</td>
      <td>地理</td>
      <td>政治</td>
    </tr>
  </tbody>
</table>

示例 4：工时统计表（真实业务场景）

html 复制代码

<table border="1" cellspacing="0" cellpadding="8">
  <caption>项目工时统计表（2026年4月）</caption>
  <thead>
    <tr>
      <!-- 跨2行 -->
      <th rowspan="2">项目</th>
      <th rowspan="2">任务</th>
      <!-- 跨5列 -->
      <th colspan="5">工作日（小时）</th>
    </tr>
    <tr>
      <!-- 前两个被 rowspan 占用 -->
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
      <th>周四</th>
      <th>周五</th>
    </tr>
  </thead>
  <tbody>
    <!-- 项目A跨2行 -->
    <tr>
      <td rowspan="2">计费门户</td>
      <td>发票导出</td>
      <td>1.5</td>
      <td>2</td>
      <td>1</td>
      <td>0.5</td>
      <td>0</td>
    </tr>
    <tr>
      <!-- 第一个 td 被合并 -->
      <td>审计日志</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>0.5</td>
      <td>1</td>
    </tr>
    
    <!-- 项目B跨2行 -->
    <tr>
      <td rowspan="2">移动应用</td>
      <td>推送通知</td>
      <td>1</td>
      <td>0</td>
      <td>0.5</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>崩溃分类</td>
      <td>0</td>
      <td>0.5</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <!-- 跨2列 -->
      <td colspan="2">每日总计</td>
      <td>2.5</td>
      <td>3.5</td>
      <td>4.5</td>
      <td>2</td>
      <td>1</td>
    </tr>
  </tfoot>
</table>

计算单元格数量的技巧：

复制代码

第一行：rowspan=2 的 th × 1 + colspan=5 的 th × 1 = 6 个实际列
第二行：被 rowspan 占用 2 列 + 5 个 th = 7 个逻辑列（实际只写5个）

规则：每行的逻辑列数必须一致！

2.6 表格标签总结

标签名	功能和语义	常用属性	单/双标签
`<table>`	表格容器	`border`, `width`, `height`, `cellspacing`, `cellpadding`	双标签
`<caption>`	表格标题	-	双标签
`<thead>`	表格头部	`align`, `valign`	双标签
`<tbody>`	表格主体	`align`, `valign`	双标签
`<tfoot>`	表格脚注	`align`, `valign`	双标签
`<tr>`	表格行	`height`, `align`, `valign`	双标签
`<th>`	表头单元格（加粗居中）	`width`, `height`, `align`, `valign`, `rowspan`, `colspan`	双标签
`<td>`	数据单元格	`width`, `height`, `align`, `valign`, `rowspan`, `colspan`	双标签

🎨 表格属性优先级图

最高
高
中
低
表格样式优先级
td/th 单元格级
tr 行级
thead/tbody/tfoot 区域级
table 表格级
直接应用

💡 表格实战场景总结

场景类型	推荐结构	关键技术	典型应用
📊 数据报表	thead + tbody + tfoot	rowspan/colspan 合并	财务报表、销售统计
📅 日程表	完整结构 + 跨列标题	colspan 标题合并	课程表、会议安排
💰 价格对比	thead + tbody	列宽控制	产品对比、套餐对比
📋 表单数据	简单 tbody	对齐方式控制	用户列表、订单列表
📈 矩阵图	完整结构	rowspan + colspan	项目进度、工时统计

三、HTML 表单详解

表单是网页与用户交互的核心方式，用于收集用户输入的数据并提交到服务器。

📊 表单设计全景图

表单设计
表单容器 form
输入控件
提交方式
验证机制
action 提交地址
method GET/POST
enctype 编码类型
文本类 text/email/tel
选择类 radio/checkbox/select
特殊类 file/date/color
同步提交传统方式
异步提交 AJAX/Fetch
HTML5 原生验证
JavaScript 自定义
后端验证必需

3.1 表单的整体设置

<form> 标签的作用：

定义数据收集的范围
指定数据提交的目标地址
控制数据提交的方式

基本结构：

html 复制代码

<form action="提交地址" method="提交方式" target="打开方式">
  <!-- 表单控件 -->
</form>

常用属性：

属性	作用	常用值
`action`	数据提交地址（URL）	`/api/submit`, `http://www.example.com/register`
`method`	提交方式	`GET`（默认，数据在URL中）、`POST`（数据在请求体中）
`target`	响应页面的打开方式	`_self`（当前页面）、`_blank`（新标签页）
`enctype`	数据编码方式	`application/x-www-form-urlencoded`（默认）、`multipart/form-data`（上传文件必需）

示例 1：百度搜索表单

html 复制代码

<form action="http://www.baidu.com/s" target="_blank">
  <input type="text" name="wd" placeholder="请输入搜索关键词">
  <button>百度一下</button>
</form>

提交后的 URL：

复制代码

http://www.baidu.com/s?wd=HTML教程

示例 2：京东搜索表单

html 复制代码

<form action="http://www.jd.com/search" method="get">
  <input type="text" name="keyword" placeholder="搜索商品">
  <button type="submit">搜索</button>
</form>

提交后的 URL：

复制代码

http://www.jd.com/search?keyword=手机

示例 3：用户注册表单（POST 方式）

html 复制代码

<form action="/api/register" method="post" target="_self">
  <label>用户名：</label>
  <input type="text" name="username" required>
  
  <label>密码：</label>
  <input type="password" name="password" required>
  
  <label>邮箱：</label>
  <input type="email" name="email" required>
  
  <button type="submit">注册</button>
</form>

数据提交方式对比：

复制代码

GET 方式：
- 数据显示在 URL 中：?username=user001&password=123456
- 适用于搜索、筛选等非敏感数据
- 可以被收藏、分享
- 数据长度受限（约2KB）

POST 方式：
- 数据在请求体中，URL 不可见
- 适用于登录、注册等敏感数据
- 数据长度无限制
- 更安全（但仍需HTTPS加密）

3.2 表单控件类型详解

🎯 表单控件分类图

表单控件
文本输入类
text 单行文本
password 密码
email 邮箱
tel 电话
url 网址
search 搜索
textarea 多行文本
数字日期类
number 数字
range 滑动条
date 日期
time 时间
datetime-local 日期时间
month 月份
week 周
选择类
radio 单选框
checkbox 复选框
select 下拉选择
文件上传类
file 文件选择
颜色类
color 颜色选择器
按钮类
submit 提交按钮
reset 重置按钮
button 普通按钮
特殊类
hidden 隐藏域

Day03_HTML 列表、表格、表单完整指南(上)

HTML 列表、表格、表单完整指南

📚 课程知识图谱

🎯 学习路径

目录

一、HTML 列表详解

📊 列表类型选择流程图

1.1 无序列表（Unordered List）

🎯 无序列表结构图

💡 使用场景特点

示例 1：技术栈列表

示例 2：新闻列表（结合超链接）

示例 3：导航菜单（嵌套列表）

示例 4：多级菜单（电商分类）

1.2 有序列表（Ordered List）

🎯 有序列表结构图

💡 使用场景与编号样式

示例 1：排行榜

示例 2：操作步骤（制作三明治）

示例 3：自定义起始编号

示例 4：嵌套的菜谱（混合有序和无序列表）

1.3 定义列表（Definition List）

🎯 定义列表结构图

💡 定义列表的应用场景

示例 1：一对一关系（术语解释）

示例 2：一对多关系（一个术语多个描述）

示例 3：FAQ 列表（无障碍访问）

示例 4：术语表（多个含义）

1.4 列表标签总结表

🎨 列表样式对比

🚀 实战技巧总结

二、HTML 表格详解

📊 表格设计决策流程

2.1 表格的基本结构

🎯 表格结构可视化

示例 1：基础用户信息表

💡 表格使用场景对比

2.2 表格整体样式设置

示例：完整样式表格

2.3 单元格宽高设置

示例：精确控制尺寸

2.4 单元格内容对齐方式

2.4.1 横向对齐（align 属性）

2.4.2 纵向对齐（valign 属性）

2.5 单元格跨行和跨列（重点！）

🎯 跨行跨列原理图

示例 1：跨列（colspan）- 总计行

示例 2：跨行（rowspan）- 用户分类

示例 3：复杂表格 - 课程表（同时使用 rowspan 和 colspan）

示例 4：工时统计表（真实业务场景）

2.6 表格标签总结

🎨 表格属性优先级图

💡 表格实战场景总结

三、HTML 表单详解

📊 表单设计全景图

3.1 表单的整体设置

示例 1：百度搜索表单

示例 2：京东搜索表单

示例 3：用户注册表单（POST 方式）

3.2 表单控件类型详解

🎯 表单控件分类图