HTML 列表

这一课你将能做到

1. 用 ul/ol/li 搭建正确嵌套的多层级列表，知道两者语义区别
2. 用 dl/dt/dd 写出准确的「术语-解释」型列表，如 FAQ、配置说明
3. 通过 CSS list-style-type 改变项目符号样式，理解浏览器默认与自定义的差异

为什么要学

列表是网页中使用频率仅次于段落的文本结构：导航菜单、商品分类、文章目录、功能特性、API 参数说明……几乎每页都有。用对列表标签不仅影响视觉呈现，更直接影响屏幕阅读器的播报方式和搜索引擎对页面结构的解析——把一组并列项写成逗号分隔的字符串，机器读出来就是一锅粥。

人话：列表就像超市货架上的分类标签，告诉顾客「这些是同类商品」「这些有先后顺序」。不用标签，顾客只能在一堆商品里硬找。

先建立图像

三种列表的语义对比：

无序列表 ul：
  ● 功能特性（无优先级）
  ● 多选题选项
  ● 导航菜单

有序列表 ol：
  1. 操作步骤（有顺序）
  2. 排行榜（有排名）
  3. 目录（有层级）

定义列表 dl：
  术语 dt
      解释 dd
  术语 dt
      解释 dd

核心判断标准：有先后/序号意义用 ol，纯并列用 ul，名词+解释对用 dl。

跟着做

步骤 1：无序列表

新建 lists.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表演示</title>
</head>
<body>
    <h2>技术栈</h2>
    <ul>
        <li>Java</li>
        <li>Spring Boot</li>
        <li>MySQL</li>
        <li>Redis</li>
    </ul>
</body>
</html>

浏览器默认显示黑色实心圆点（disc）。注意：li 必须是 ul/ol 的直接子元素，中间不能插 div 或 p。

步骤 2：有序列表

<h2>部署步骤</h2>
<ol>
    <li>打包项目：mvn clean package</li>
    <li>上传服务器：scp target/app.jar root@host:/opt/</li>
    <li>启动服务：java -jar /opt/app.jar</li>
    <li>验证接口：curl http://localhost:8080/health</li>
</ol>

浏览器默认显示 1、2、3、4。改序号类型：

<ol type="A">
    <li>需求分析</li>
    <li>系统设计</li>
    <li>开发实现</li>
</ol>

type 可选值：1（默认数字）、a（小写字母）、A（大写字母）、i（小写罗马数字）、I（大写罗马数字）。

从指定数字开始：

<ol start="5">
    <li>第五条</li>   <!-- 显示 5 -->
    <li>第六条</li>   <!-- 显示 6 -->
</ol>

倒序：

<ol reversed>
    <li>最后一步</li>  <!-- 3 -->
    <li>中间一步</li>  <!-- 2 -->
    <li>第一步</li>    <!-- 1 -->
</ol>

步骤 3：嵌套列表

<h2>前端技术分类</h2>
<ul>
    <li>HTML
        <ul>
            <li>语义化标签</li>
            <li>表单</li>
        </ul>
    </li>
    <li>CSS
        <ul>
            <li>布局：Flexbox、Grid</li>
            <li>响应式</li>
        </ul>
    </li>
    <li>JavaScript
        <ol>
            <li>基础语法</li>
            <li>DOM 操作</li>
            <li>异步编程</li>
        </ol>
    </li>
</ul>