📋 第六章：列表与数据结构

组织内容的结构化方式

6.1 无序列表 (<ul>) 与有序列表 (<ol>)

无序列表 <ul>

使用项目符号（通常是圆点）标记的列表，项目之间没有特定顺序。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

🎯 无序列表演示

有序列表 <ol>

使用数字或字母标记的列表，项目有明确的顺序。

<ol>
    <li>第一步：准备工作</li>
    <li>第二步：开始实施</li>
    <li>第三步：检查验收</li>
</ol>

🎯 有序列表演示

  1. 第一步：准备工作
  2. 第二步：开始实施
  3. 第三步：检查验收

<ol> 的属性

属性 说明 示例
type 标记类型 "1"（数字）、"A"（大写字母）、"a"（小写字母）、"I"（大写罗马数字）、"i"（小写罗马数字）
start 起始编号 start="5" 从 5 开始
reversed 倒序排列 <ol reversed> 
<!-- 不同类型的有序列表 -->
<ol type="A">
    <li>选项 A</li>
    <li>选项 B</li>
    <li>选项 C</li>
</ol>

<ol type="I" start="3">
    <li>第三项</li>
    <li>第四项</li>
</ol>

<ol reversed>
    <li>最后一步</li>
    <li>倒数第二步</li>
    <li>第一步</li>
</ol>

6.2 定义列表 (<dl>, <dt>, <dd>)

用于显示术语及其定义，常用于词汇表、FAQ 等场景。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页的标准标记语言。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于描述网页的外观和格式。</dd>
    
    <dt>JavaScript</dt>
    <dd>一种脚本语言，用于创建动态网页内容。</dd>
</dl>

🎯 定义列表演示

HTML
超文本标记语言，用于创建网页的标准标记语言。
CSS
层叠样式表，用于描述网页的外观和格式。
JavaScript
一种脚本语言，用于创建动态网页内容。
一个术语可以有多个定义： 
<dl>
    <dt>浏览器</dt>
    <dd>用于访问和浏览互联网上的网站的应用程序。</dd>
    <dd>常见的浏览器包括 Chrome、Firefox、Safari 等。</dd>
</dl>

6.3 列表嵌套实战

列表可以嵌套在其他列表中，创建层级结构。

<ul>
    <li>
        前端技术
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>
                JavaScript
                <ul>
                    <li>ES6+ 语法</li>
                    <li>DOM 操作</li>
                    <li>异步编程</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        后端技术
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

🎯 嵌套列表演示

6.4 表格 (<table>) 的现代用法

重要提醒：表格应该只用于展示表格数据，不应该用于页面布局！布局请使用 CSS Flexbox 或 Grid。

基本表格结构

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </tbody>
</table>

表格元素说明

元素 说明
<table> 表格容器
<thead> 表头区域
<tbody> 表体区域（数据主体）
<tfoot> 表尾区域（汇总信息）
<tr> 表格行（Table Row）
<th> 表头单元格（Table Header）
<td> 数据单元格（Table Data）
<caption> 表格标题
<colgroup> 列组，用于整列样式

完整表格示例

🎯 完整表格演示

2026 年第一季度销售报表
产品 一月 二月 三月 季度总计
产品 A ¥10,000 ¥12,000 ¥15,000 ¥37,000
产品 B ¥8,000 ¥9,000 ¥11,000 ¥28,000
产品 C ¥5,000 ¥6,000 ¥7,000 ¥18,000
总计 ¥23,000 ¥27,000 ¥33,000 ¥83,000

合并单元格

<!-- rowspan: 垂直合并（跨行） -->
<table>
    <tr>
        <th rowspan="2">合并两行</th>
        <td>数据 1</td>
    </tr>
    <tr>
        <td>数据 2</td>
    </tr>
</table>

<!-- colspan: 水平合并（跨列） -->
<table>
    <tr>
        <th colspan="2">合并两列</th>
    </tr>
    <tr>
        <td>数据 1</td>
        <td>数据 2</td>
    </tr>
</table>

🎯 合并单元格演示

姓名 成绩 总分
语文 数学
张三 85 90 175
李四 78 88 166

表格的可访问性

<!-- 使用 scope 属性明确单元格关系 -->
<table>
    <thead>
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">张三</th>
            <td>25</td>
        </tr>
    </tbody>
</table>

✏️ 动手练习

完成以下任务：

  1. 创建一个课程大纲，使用嵌套列表展示：
    • 课程模块（一级）
    • 每个模块包含的章节（二级）
    • 每章包含的知识点（三级）
  2. 创建一个产品规格对比表，包含：
    • 表头：产品名称、规格参数
    • 至少 3 个产品的对比
    • 使用 thead、tbody、tfoot 结构
    • 添加表格标题（caption）
  3. 创建一个 FAQ 页面，使用定义列表展示常见问题和答案
← 上一章：图像与多媒体 下一阶段：HTML5 语义化布局 →