课时10：有序列表与无序列表¶

学习目标：掌握无序列表（ul）和有序列表（ol）的语义用法、嵌套规则及在实际网页布局中的应用场景。

一、无序列表（Unordered List）¶

1.1 定义与标签组成¶

无序列表用于表示没有先后顺序、权重平等的项目集合。由两个核心标签组成：

标签	全称	语义	标签类型
`<ul>`	Unordered List	无序列表容器	双标签、容器级
`<li>`	List Item	列表项	双标签、容器级

1.2 基础语法¶

<ul>
    <li>西游记</li>
    <li>红楼梦</li>
    <li>水浒传</li>
    <li>三国演义</li>
</ul>

浏览器默认渲染效果： - 每个 <li> 前显示项目符号（实心圆点 ●） - 各项之间无优先级之分，仅按书写顺序排列 - 列表项垂直堆叠，左对齐

1.3 语义本质¶

无序列表的核心语义是"集合关系"而非"顺序关系"：

各项目之间逻辑平等
调换项目顺序不影响语义表达
典型场景：导航菜单、功能列表、属性集合

二、有序列表（Ordered List）¶

1.1 定义与标签组成¶

有序列表用于表示具有先后顺序、排名逻辑的项目集合。核心标签：

标签	全称	语义	标签类型
`<ol>`	Ordered List	有序列表容器	双标签、容器级
`<li>`	List Item	列表项（与无序列表共用）	双标签、容器级

1.2 基础语法¶

<ol>
    <li>排名第一：三班</li>
    <li>排名第二：一班</li>
    <li>排名第三：二班</li>
</ol>

浏览器默认渲染效果： - 每个 <li> 前自动显示数字序号（1, 2, 3...） - 序号体现明确的先后顺序或排名逻辑 - 调换项目顺序会改变语义表达

1.3 语义本质¶

有序列表的核心语义是"序列关系"：

项目之间存在明确的顺序、等级或时间先后
顺序改变会影响信息的准确传达
典型场景：排行榜、操作步骤、时间线、目录大纲

三、列表嵌套规则¶

3.1 严格嵌套规范¶

<!-- 正确：ul 内部只能直接嵌套 li -->
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
</ul>

<!-- 错误：ul 内部不能直接嵌套其他标签（如 p、div） -->
<ul>
    <p>错误嵌套</p>    <!-- 不符合规范 -->
</ul>

3.2 灵活的 li 内部嵌套¶

<li> 作为容器级标签，内部可以嵌套任意内容，包括：

文字、段落（<p>）
标题（<h1> ~ <h6>）
图片（<img>）
链接（<a>）
甚至新的列表（实现多级嵌套）

3.3 多级列表嵌套¶

<ul>
    <li>四大名著
        <ul>
            <li>西游记
                <ul>
                    <li>孙悟空</li>
                    <li>猪八戒</li>
                    <li>沙僧</li>
                </ul>
            </li>
            <li>红楼梦</li>
            <li>水浒传</li>
            <li>三国演义</li>
        </ul>
    </li>
</ul>

嵌套视觉效果： - 外层列表：实心圆点（●） - 第一层嵌套：空心圆点（○） - 第二层嵌套：实心方块（■） - 通过缩进和不同符号区分层级，形成清晰的树状结构

四、实际应用场景¶

4.1 无序列表的典型应用¶

场景	实现说明	案例
门户网站新闻列表	`<ul>` 包裹多个 `<li>`，每个 `<li>` 内部包含图片、标题、摘要	腾讯网热点精选
导航菜单	`<ul>` 作为菜单容器，`<li>` 作为菜单项	网站顶部导航栏
功能模块区	结构相同但无顺序要求的内容块	产品特性展示

案例分析（腾讯网热点精选）：

<ul>
    <li>
        <img src="news1.jpg" alt="新闻配图">
        <a href="news1.html">新闻标题</a>
        <span>分享按钮</span>
    </li>
    <!-- 更多 li... -->
</ul>

每个 <li> 内部包含图片、链接、分享按钮等复杂结构，利用 <li> 的容器特性实现灵活布局。

4.2 有序列表的典型应用¶

场景	实现说明	案例
音乐排行榜	`<ol>` 包裹榜单歌曲，数字序号体现排名	九酷音乐排行榜
操作步骤	按先后顺序排列的步骤说明	教程文档
成绩/销售排名	数字体现名次先后	数据报表

案例分析（音乐排行榜）：

<ol>
    <li>歌曲名 - 歌手A</li>
    <li>歌曲名 - 歌手B</li>
    <li>歌曲名 - 歌手C</li>
</ol>

虽然序号样式可通过 CSS 自定义，但 HTML 结构上使用 <ol> 能准确表达语义上的顺序关系，有利于搜索引擎理解内容结构。