HTML基础教程（二十）列表：HTML列表，从呆瓜到大神，只差这篇神文！

原创于 2025-09-06 11:13:08 发布 · 398 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML基础教程专栏收录该内容

37 篇文章

订阅专栏

一、列表？不就是项目符号吗？少年你太天真了！

当我们谈论HTML列表时，很多初学者嘴角会泛起一丝不屑的微笑："不就是几个带点带数字的项目吗？"——朋友，如果你这么想，那你可能错过了网页语义化中最重要的武器之一。

想象一下：你走进一家超市，发现所有商品胡乱堆在地上（对，就像你用一堆<div>硬撸的列表）。然后你走进另一家超市，商品按类别整齐摆在货架（<ul>），生鲜区有明确的温度标识（<li>），优惠商品按优先级排列（<ol>）。哪种体验更好？HTML列表就是为内容建立秩序的核心工具，它远不止是"几个符号"那么简单。

在HTML5的语义化宇宙中，列表三巨头各有使命：

<ul> (Unordered List)：负责自由散漫的团体，比如导航菜单、功能清单
<ol> (Ordered List)：掌管讲究先后的队伍，比如烹饪步骤、排行榜
<dl> (Definition List)：打理名值对的双人舞，比如术语表、元数据展示

搜索引擎看到正确使用的列表时会眼前一亮："哇，这站点的内容结构真清晰！"——然后默默给你加分。屏幕阅读器遇到规范的列表时会温柔提示用户："以下是无序列表，共8个项目..."—— accessibility（可访问性）分数轻松到手。

二、无序列表<ul>：网页界的万金油

基础语法示范：

<ul>
  <li>吃鸡腿不吐鸡骨头</li>
  <li>喝咖啡不撒键盘上</li>
  <li>写代码不忘写注释</li>
</ul>

输出效果：

吃鸡腿不吐鸡骨头
喝咖啡不撒键盘上
写代码不忘写注释

但<ul>的真正威力在于语义化包装。举个实际案例：很多人在制作网站导航时习惯写：

<div class="nav">
  <div><a href="#">首页</a></div>
  <div><a href="#">产品</a></div>
  <div><a href="#">关于</a></div>
</div>

而语义化正确的写法应该是：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

第二种写法的结构化数据更清晰，对SEO和可访问性更友好。

高级玩法：自定义列表标记
通过CSS，我们可以让<ul>变得花枝招展：

ul.custom {
  list-style-type: none; /* 干掉默认样式 */
  padding: 0;
}

ul.custom li {
  padding-left: 1.5em;
  position: relative;
}

ul.custom li::before {
  content: "🐶"; /* 用emoji做标记 */
  position: absolute;
  left: 0;
}

/* 或者用Font Awesome图标 */
ul.icon-list li::before {
  content: "\f105"; /* Unicode */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.5em;
}

三、有序列表<ol>：强迫症患者的福音

基础语法示范：

<ol>
  <li>把大象放进冰箱</li>
  <li>关上冰箱门</li>
  <li>接受动物保护组织的批评</li>
</ol>

输出效果：

把大象放进冰箱
关上冰箱门
接受动物保护组织的批评

<ol>的隐藏技能在于**自定义计数系统**。通过start、reversed和type属性，可以玩出各种花样：

<ol start="10">
  <li>第十名：张三</li>
  <li>第十一名：李四</li>
</ol>

<ol type="I">
  <li>第一章</li>
  <li>第二章</li>
</ol>

<ol reversed>
  <li>这是第三步</li>
  <li>这是第二步</li> 
  <li>这是第一步</li>
</ol>

CSS计数器高级用法：

ol.advanced {
  counter-reset: custom-counter; /* 初始化计数器 */
  list-style-type: none;
}

ol.advanced li::before {
  counter-increment: custom-counter; /* 计数器自增 */
  content: "步骤 " counter(custom-counter) ": ";
  color: #ff4400;
  font-weight: bold;
}

四、定义列表<dl>：被低估的语义化大佬

这是最被低估的列表类型，完美适合表示键值对：

<dl>
  <dt>CSS</dt>
  <dd>让网页从丑小鸭变白天鹅的神奇技术</dd>
  
  <dt>JavaScript</dt>
  <dd>让网页从静态画报变成交互体验的魔法语言</dd>
</dl>

输出效果：
CSS
: 让网页从丑小鸭变白天鹅的神奇技术

JavaScript
: 让网页从静态画报变成交互体验的魔法语言

在现代网页设计中，<dl>非常适合用于元数据展示：

<dl class="product-info">
  <dt>产品名称</dt>
  <dd>量子波动速度阅读眼镜</dd>
  
  <dt>价格</dt>
  <dd>￥998（限时优惠）</dd>
  
  <dt>功能</dt>
  <dd>一分钟读完整本《战争与和平》</dd>
  <dd>附带防撞墙功能</dd>
</dl>

五、列表嵌套：俄罗斯套娃的艺术

合理的嵌套列表可以构建清晰的信息层次：

<ol>
  <li>前端技术
    <ul>
      <li>HTML
        <dl>
          <dt>版本</dt>
          <dd>HTML5</dd>
        </dl>
      </li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端技术
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ol>

导航菜单的多级嵌套示例：

<nav>
  <ul class="multi-level-nav">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul>
        <li><a href="#">Web应用</a></li>
        <li>
          <a href="#">移动应用</a>
          <ul>
            <li><a href="#">iOS</a></li>
            <li><a href="#">Android</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

六、CSS样式化：让列表穿上炫酷外衣

横向导航菜单制作：

.nav-horizontal {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

.nav-horizontal li {
  float: left;
}

.nav-horizontal li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-horizontal li a:hover {
  background-color: #111;
}

卡片式布局：

ul.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
}

ul.card-list li {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

七、SEO与可访问性：列表的隐藏超能力

为屏幕阅读器优化：

<nav aria-label="主导航">
  <ul>
    <li><a href="#main">跳至主要内容</a></li>
    <li><a href="/">首页</a></li>
  </ul>
</nav>

结构化数据标记：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "十大前端框架第一名"
    },
    {
      "@type": "ListItem", 
      "position": 2,
      "name": "十大前端框架第二名"
    }
  ]
}
</script>

八、常见坑爹陷阱与最佳实践

陷阱1：滥用div代替列表

<!-- 糟糕的写法 -->
<div class="list">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
</div>

<!-- 正确的写法 -->
<ul class="list">
  <li class="item">项目1</li>
  <li class="item">项目2</li>
</ul>

陷阱2：忘记重置默认样式

/* 总是重置默认样式 */
ul, ol {
  margin: 0;
  padding: 0;
  list-style-position: inside; /* 避免标记对齐问题 */
}

最佳实践清单：

根据内容语义选择列表类型
复杂导航使用<nav>包装列表
多级嵌套不要超过4层
使用ARIA属性增强可访问性
利用CSS计数器创建复杂编号系统

看完这篇长文，你是否还对HTML列表保持最初的"轻视"？这些看似简单的标签，实则是构建语义化网页的基石。从现在开始，告别<div>滥用，让列表回归它们应有的荣耀地位吧！

思考题：你能用<dl>标签创建一个现代产品卡片的布局吗？挑战一下！