何雨果的知识库

Appearance

HTML 列表与嵌套 ​

BeginnerHTML Structure

列表是网页中最常见的结构之一，从导航菜单到内容目录，几乎无处不在。

一、📋 列表类型 ​

1.1 无序列表（Unordered List） ​

用于项目之间 没有顺序关系 的场景，渲染为圆点符号：

html
<ul>
  <li>牛奶</li>
  <li>面包</li>
  <li>鸡蛋</li>
</ul>

渲染效果：

  • 牛奶
  • 面包
  • 鸡蛋

1.2 有序列表（Ordered List） ​

用于项目之间 有先后顺序 的场景，渲染为数字编号：

html
<ol>
  <li>预热烤箱</li>
  <li>混合面粉和糖</li>
  <li>放入烤箱烘烤</li>
</ol>

渲染效果：

  1. 预热烤箱
  2. 混合面粉和糖
  3. 放入烤箱烘烤

1.3 对比总结 ​

元素标签标记样式适用场景
无序列表<ul>圆点 (•)购物清单、功能列表
有序列表<ol>数字 (1, 2, 3...)步骤说明、排行榜
列表项<li>—必须嵌套在 <ul> 或 <ol> 内

1.4 有序列表属性 ​

<ol> 支持 start 属性，可以改变起始编号：

html
<ol start="5">
  <li>第五名</li>
  <li>第六名</li>
</ol>

二、🪆 嵌套（Nesting） ​

列表可以嵌套在另一个列表中，形成多级结构。

2.1 基本嵌套 ​

html
<ul>
  <li>A</li>
  <li>
    B
    <ul>
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li>C</li>
</ul>

渲染效果：

  • A
  • B
    • B1
    • B2
  • C

2.2 嵌套规则 ​

关键要点：当在列表项内嵌套子列表时，<li> 的闭合标签要放在子列表 之后：

html
<li>
  B              <!-- 列表项内容 -->
  <ul>           <!-- 子列表开始 -->
    <li>B1</li>
    <li>B2</li>
  </ul>          <!-- 子列表结束 -->
</li>            <!-- ← 闭合标签在子列表之后 -->

2.3 混合嵌套 ​

有序列表和无序列表可以互相嵌套：

html
<ul>
  <li>A</li>
  <li>
    B
    <ol>
      <li>B1</li>
      <li>
        B2
        <ul>
          <li>B2a</li>
          <li>B2b</li>
        </ul>
      </li>
      <li>B3</li>
    </ol>
  </li>
  <li>C</li>
</ul>

三、📐 缩进（Indentation） ​

3.1 为什么缩进重要 ​

缩进不影响浏览器渲染，但直接影响 代码可读性：

html
<!-- ❌ 无缩进：难以识别层级关系 -->
<ul>
<li>A</li>
<li>B
<ol>
<li>B1</li>
<li>B2</li>
</ol>
</li>
<li>C</li>
</ul>

<!-- ✅ 正确缩进：层级一目了然 -->
<ul>
  <li>A</li>
  <li>
    B
    <ol>
      <li>B1</li>
      <li>B2</li>
    </ol>
  </li>
  <li>C</li>
</ul>

3.2 VS Code 自动缩进 ​

VS Code 保存文件时（Cmd + S / Ctrl + S）会自动重新缩进代码。即使你的缩进混乱了，保存后也会自动修正。

3.3 利用缩进调试 ​

VS Code 会用竖线连接匹配的开闭标签。通过观察这些竖线，可以快速发现缺失的闭合标签等错误。

← 返回 Web 开发研究