HTML 列表

HTML 提供三种列表类型，覆盖所有常见的列表场景。

<ul> — 无序列表

项目之间没有顺序关系，使用圆点标记：

html 
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<ol> — 有序列表

项目有明确的先后顺序，使用数字或字母标记：

html 
<ol>
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>关上冰箱门</li>
</ol>

<ol> 的 type 属性

值标记样式
1数字（默认）
A大写字母
a小写字母
I大写罗马数字
i小写罗马数字

<ol> 的 start 属性

指定起始编号：

html 
<ol start="5">
  <li>这是第五项</li>
  <li>这是第六项</li>
</ol>

<ol> 的 reversed 属性

倒序编号：

html 
<ol reversed>
  <li>第三名</li>
  <li>第二名</li>
  <li>第一名</li>
</ol>

<dl> — 描述列表

用于术语和定义的配对，或键值对结构。由三部分组成：

  • <dl> — 描述列表容器
  • <dt> — 描述术语
  • <dd> — 描述内容
html 
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，构建网页结构</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，控制网页外观</dd>
  <dt>JavaScript</dt>
  <dd>网页脚本语言，实现交互逻辑</dd>
</dl>

一个术语可以有多个定义，反之亦然：

html 
<dl>
  <dt>前端开发</dt>
  <dt>Frontend Development</dt>
  <dd>指构建用户在浏览器中直接看到和交互的部分。</dd>
</dl>

嵌套列表

列表可以嵌套，形成多级结构：

html 
<ul>
  <li>前端技术
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端技术
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>Go</li>
    </ul>
  </li>
</ul>

嵌套列表时，内层 <ul> 或 <ol> 必须放在一个 <li> 内部，不能直接放在外层 <ul> 中。