列表基础应用：组织和呈现有序与无序信息

什么是 HTML 列表?

列表是 Web 页面中最常用的内容组织方式之一。无论是购物清单、导航菜单、步骤说明还是功能特性，列表都能让信息更清晰、更易读。

为什么需要列表?

想象一下如果没有列表会怎样:所有条目挤在一段文字中，用逗号分隔，读者需要费力地分辨每一项。列表的作用是:

清晰的视觉层次:每个项目独立成行，一目了然
逻辑组织:相关信息归类在一起
易于扫描:用户可以快速浏览和定位所需信息
语义化:告诉浏览器和搜索引擎这是一组相关项目

html

<!-- 没有列表:难以阅读 -->
<p>
  We offer cloud hosting, VPS hosting, dedicated servers, domain registration,
  SSL certificates, email hosting, and backup services.
</p>

<!-- 使用列表:清晰明了 -->
<h2>Our Services</h2>
<ul>
  <li>Cloud Hosting</li>
  <li>VPS Hosting</li>
  <li>Dedicated Servers</li>
  <li>Domain Registration</li>
  <li>SSL Certificates</li>
  <li>Email Hosting</li>
  <li>Backup Services</li>
</ul>

第二个例子明显更易读，用户可以快速扫描所有服务项目。

HTML 列表的三种类型

HTML 提供了三种列表类型，每种都有特定的用途和语义。

类型概览

html

<!-- 1. 无序列表(Unordered List) - 项目顺序不重要 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- 2. 有序列表(Ordered List) - 项目有明确顺序 -->
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- 3. 描述列表(Description List) - 术语和描述配对 -->
<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>

无序列表(ul)

基本用法

<ul> (unordered list)用于项目顺序不重要的列表:

html

<!-- 基本无序列表 -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- 实际应用:功能特性列表 -->
<h2>Premium Features</h2>
<ul>
  <li>Unlimited storage space</li>
  <li>24/7 customer support</li>
  <li>Advanced analytics dashboard</li>
  <li>Priority email support</li>
  <li>Custom domain mapping</li>
</ul>

什么时候使用无序列表?

html

<!-- ✅ 适合:购物清单(顺序不重要) -->
<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

<!-- ✅ 适合:功能列表 -->
<h2>App Features</h2>
<ul>
  <li>Real-time collaboration</li>
  <li>Cloud synchronization</li>
  <li>Offline mode</li>
  <li>Multi-platform support</li>
</ul>

<!-- ❌ 不适合:有明确顺序的步骤 -->
<ul>
  <li>Preheat oven to 350°F</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ul>
<!-- 应该用ol,因为步骤顺序重要 -->

无序列表的样式类型

虽然通常用 CSS 控制样式，但 HTML 也提供了type属性(已不推荐):

html

<!-- 默认:实心圆点 -->
<ul>
  <li>Item with disc bullet</li>
</ul>

<!-- 使用CSS控制样式(推荐) -->
<ul style="list-style-type: circle;">
  <li>Item with circle bullet</li>
</ul>

<ul style="list-style-type: square;">
  <li>Item with square bullet</li>
</ul>

<ul style="list-style-type: none;">
  <li>Item without bullet</li>
</ul>

<!-- 自定义项目符号 -->
<ul style="list-style-type: '✓ ';">
  <li>Completed task</li>
  <li>Another completed task</li>
</ul>

有序列表(ol)

基本用法

<ol> (ordered list)用于项目有明确顺序或优先级的列表:

html

<!-- 基本有序列表 -->
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<!-- 实际应用:步骤说明 -->
<h2>Installation Steps</h2>
<ol>
  <li>Download the installer from our website</li>
  <li>Run the installer file</li>
  <li>Follow the on-screen instructions</li>
  <li>Restart your computer</li>
  <li>Launch the application</li>
</ol>

什么时候使用有序列表?

html

<!-- ✅ 适合:操作步骤 -->
<h2>How to Reset Your Password</h2>
<ol>
  <li>Click "Forgot Password" on the login page</li>
  <li>Enter your email address</li>
  <li>Check your email for the reset link</li>
  <li>Click the link and enter new password</li>
  <li>Log in with your new password</li>
</ol>

<!-- ✅ 适合:排名列表 -->
<h2>Top 5 Programming Languages 2025</h2>
<ol>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Java</li>
  <li>TypeScript</li>
  <li>Go</li>
</ol>

<!-- ✅ 适合:优先级列表 -->
<h2>Project Priorities</h2>
<ol>
  <li>Security audit</li>
  <li>Performance optimization</li>
  <li>New feature development</li>
  <li>UI improvements</li>
</ol>

有序列表的编号类型

type 属性控制编号样式:

html

<!-- 数字(默认) -->
<ol type="1">
  <li>First item</li>
  <li>Second item</li>
</ol>

<!-- 大写字母 -->
<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
  <li>Option C</li>
</ol>

<!-- 小写字母 -->
<ol type="a">
  <li>Option a</li>
  <li>Option b</li>
  <li>Option c</li>
</ol>

<!-- 大写罗马数字 -->
<ol type="I">
  <li>Chapter I</li>
  <li>Chapter II</li>
  <li>Chapter III</li>
</ol>

<!-- 小写罗马数字 -->
<ol type="i">
  <li>Section i</li>
  <li>Section ii</li>
  <li>Section iii</li>
</ol>

start 属性 - 自定义起始编号

html

<!-- 从5开始编号 -->
<h3>Continuing from previous list...</h3>
<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
  <li>Seventh item</li>
</ol>

<!-- 实际应用:分段的步骤 -->
<h3>Part 1: Setup</h3>
<ol>
  <li>Install Node.js</li>
  <li>Install npm packages</li>
  <li>Configure environment</li>
</ol>

<h3>Part 2: Development</h3>
<ol start="4">
  <li>Create component files</li>
  <li>Write component logic</li>
  <li>Add styling</li>
</ol>

reversed 属性 - 倒序编号

html

<!-- 倒序列表:倒计时效果 -->
<h2>Top 5 Countdown</h2>
<ol reversed>
  <li>TypeScript - #5</li>
  <li>Java - #4</li>
  <li>C++ - #3</li>
  <li>Python - #2</li>
  <li>JavaScript - #1</li>
</ol>
<!-- 显示为: 5. TypeScript, 4. Java, ... -->

value 属性 - 单项自定义编号

html

<!-- 跳过某些编号 -->
<ol>
  <li>First task</li>
  <li>Second task</li>
  <li value="5">Fifth task (skipped 3 and 4)</li>
  <li>Sixth task</li>
  <li value="10">Tenth task</li>
</ol>
<!-- 显示为: 1, 2, 5, 6, 10 -->

描述列表(dl)

基本用法

<dl> (description list)用于术语和定义的配对:

html

<!-- 基本结构 -->
<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language - the standard markup language for web pages
  </dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets - used for styling web pages</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that enables interactive web pages</dd>
</dl>

描述列表的组成:

<dt> (description term): 术语或名称
<dd> (description details): 术语的描述或定义

实际应用场景

html

<!-- 1. 词汇表 -->
<h2>Web Development Glossary</h2>
<dl>
  <dt>API</dt>
  <dd>
    Application Programming Interface - a set of protocols for building software
    applications
  </dd>

  <dt>CDN</dt>
  <dd>
    Content Delivery Network - a geographically distributed network of servers
  </dd>

  <dt>SPA</dt>
  <dd>Single Page Application - a web app that loads a single HTML page</dd>
</dl>

<!-- 2. 产品规格 -->
<h2>Product Specifications</h2>
<dl>
  <dt>Model</dt>
  <dd>UltraBook Pro 2025</dd>

  <dt>Processor</dt>
  <dd>Intel Core i7-12700H</dd>

  <dt>RAM</dt>
  <dd>16GB DDR5</dd>

  <dt>Storage</dt>
  <dd>512GB NVMe SSD</dd>

  <dt>Display</dt>
  <dd>15.6" Full HD (1920x1080)</dd>

  <dt>Weight</dt>
  <dd>1.8kg</dd>
</dl>

<!-- 3. FAQ -->
<h2>Frequently Asked Questions</h2>
<dl>
  <dt>What is your refund policy?</dt>
  <dd>We offer a 30-day money-back guarantee on all purchases.</dd>

  <dt>How long does shipping take?</dt>
  <dd>
    Standard shipping takes 5-7 business days. Express shipping is 2-3 days.
  </dd>

  <dt>Do you ship internationally?</dt>
  <dd>Yes, we ship to over 50 countries worldwide.</dd>
</dl>

一个术语多个描述

html

<dl>
  <dt>JavaScript</dt>
  <dd>A high-level programming language</dd>
  <dd>Primarily used for web development</dd>
  <dd>
    Supports object-oriented, imperative, and functional programming styles
  </dd>

  <dt>TypeScript</dt>
  <dd>A typed superset of JavaScript</dd>
  <dd>Compiles to plain JavaScript</dd>
  <dd>Adds optional static typing to JavaScript</dd>
</dl>

多个术语一个描述

html

<dl>
  <dt>Frontend</dt>
  <dt>Client-side</dt>
  <dd>The part of a website that users interact with directly</dd>

  <dt>Backend</dt>
  <dt>Server-side</dt>
  <dd>The part of a website that handles data processing and storage</dd>
</dl>

列表嵌套

无序列表嵌套

html

<!-- 两级嵌套 -->
<h2>Web Technologies</h2>
<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
  <li>
    Database
    <ul>
      <li>MySQL</li>
      <li>PostgreSQL</li>
      <li>MongoDB</li>
    </ul>
  </li>
</ul>

<!-- 三级嵌套 -->
<h2>Company Structure</h2>
<ul>
  <li>
    Engineering
    <ul>
      <li>
        Frontend Team
        <ul>
          <li>React Developers</li>
          <li>Vue Developers</li>
        </ul>
      </li>
      <li>
        Backend Team
        <ul>
          <li>Node.js Developers</li>
          <li>Python Developers</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Design
    <ul>
      <li>UI Designers</li>
      <li>UX Researchers</li>
    </ul>
  </li>
</ul>

有序列表嵌套

html

<!-- 多级步骤 -->
<h2>Website Launch Checklist</h2>
<ol>
  <li>
    Pre-launch
    <ol>
      <li>Complete development</li>
      <li>
        Testing
        <ol>
          <li>Unit tests</li>
          <li>Integration tests</li>
          <li>User acceptance testing</li>
        </ol>
      </li>
      <li>Content review</li>
    </ol>
  </li>
  <li>
    Launch
    <ol>
      <li>Deploy to production</li>
      <li>DNS configuration</li>
      <li>SSL certificate setup</li>
    </ol>
  </li>
  <li>
    Post-launch
    <ol>
      <li>Monitor performance</li>
      <li>Fix critical bugs</li>
      <li>Gather user feedback</li>
    </ol>
  </li>
</ol>

混合列表嵌套

html

<!-- ol中嵌套ul -->
<h2>Recipe: Chocolate Chip Cookies</h2>
<ol>
  <li>
    Gather ingredients:
    <ul>
      <li>2 cups flour</li>
      <li>1 cup butter</li>
      <li>1 cup sugar</li>
      <li>2 eggs</li>
      <li>2 cups chocolate chips</li>
    </ul>
  </li>
  <li>
    Prepare:
    <ol>
      <li>Preheat oven to 350°F</li>
      <li>Line baking sheet with parchment</li>
    </ol>
  </li>
  <li>
    Mix ingredients:
    <ol>
      <li>Cream butter and sugar</li>
      <li>Add eggs one at a time</li>
      <li>Mix in flour</li>
      <li>Fold in chocolate chips</li>
    </ol>
  </li>
  <li>Bake: 12-15 minutes until golden</li>
  <li>Cool and serve</li>
</ol>

列表的实际应用

导航菜单

html

<!-- 主导航 -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li>
      <a href="/services">Services</a>
      <ul>
        <li><a href="/services/web-design">Web Design</a></li>
        <li><a href="/services/development">Development</a></li>
        <li><a href="/services/seo">SEO</a></li>
      </ul>
    </li>
    <li><a href="/portfolio">Portfolio</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- 移动端菜单 -->
<nav class="mobile-menu">
  <ul>
    <li><a href="/">🏠 Home</a></li>
    <li><a href="/products">🛍️ Products</a></li>
    <li><a href="/cart">🛒 Cart</a></li>
    <li><a href="/account">👤 Account</a></li>
  </ul>
</nav>

内容目录

html

<nav aria-label="Table of contents">
  <h2>Contents</h2>
  <ol>
    <li><a href="#introduction">Introduction</a></li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ol>
        <li><a href="#installation">Installation</a></li>
        <li><a href="#configuration">Configuration</a></li>
      </ol>
    </li>
    <li>
      <a href="#basic-usage">Basic Usage</a>
      <ol>
        <li><a href="#creating-components">Creating Components</a></li>
        <li><a href="#state-management">State Management</a></li>
      </ol>
    </li>
    <li><a href="#advanced">Advanced Topics</a></li>
    <li><a href="#api-reference">API Reference</a></li>
  </ol>
</nav>

特性比较

html

<h2>Pricing Plans Comparison</h2>

<h3>Basic Plan - $9/month</h3>
<ul>
  <li>✓ 10GB Storage</li>
  <li>✓ Email Support</li>
  <li>✗ Custom Domain</li>
  <li>✗ Priority Support</li>
</ul>

<h3>Pro Plan - $29/month</h3>
<ul>
  <li>✓ 100GB Storage</li>
  <li>✓ Email Support</li>
  <li>✓ Custom Domain</li>
  <li>✓ Priority Support</li>
  <li>✓ Advanced Analytics</li>
</ul>

<h3>Enterprise - Custom Pricing</h3>
<ul>
  <li>✓ Unlimited Storage</li>
  <li>✓ 24/7 Phone Support</li>
  <li>✓ Multiple Custom Domains</li>
  <li>✓ Dedicated Account Manager</li>
  <li>✓ Custom Integrations</li>
  <li>✓ SLA Guarantee</li>
</ul>

时间线

html

<h2>Company Milestones</h2>
<dl class="timeline">
  <dt>2020</dt>
  <dd>Company founded in San Francisco by Sarah Chen and Michael Park</dd>

  <dt>2021</dt>
  <dd>
    <ul>
      <li>Launched first product</li>
      <li>Reached 1,000 customers</li>
      <li>Raised Series A funding</li>
    </ul>
  </dd>

  <dt>2023</dt>
  <dd>
    <ul>
      <li>Expanded to Europe</li>
      <li>10,000+ customers</li>
      <li>Launched enterprise platform</li>
    </ul>
  </dd>

  <dt>2025</dt>
  <dd>
    <ul>
      <li>50,000+ customers globally</li>
      <li>Opened offices in London and Tokyo</li>
      <li>Achieved profitability</li>
    </ul>
  </dd>
</dl>

复杂任务清单

html

<h2>Project Setup Checklist</h2>
<ol>
  <li>
    <input type="checkbox" id="task1" />
    <label for="task1">Initialize Project</label>
    <ol>
      <li>
        <input type="checkbox" id="task1-1" />
        <label for="task1-1">Create repository</label>
      </li>
      <li>
        <input type="checkbox" id="task1-2" />
        <label for="task1-2">Install dependencies</label>
      </li>
      <li>
        <input type="checkbox" id="task1-3" />
        <label for="task1-3">Configure build tools</label>
      </li>
    </ol>
  </li>
  <li>
    <input type="checkbox" id="task2" />
    <label for="task2">Setup Development Environment</label>
    <ol>
      <li>
        <input type="checkbox" id="task2-1" />
        <label for="task2-1">Install VS Code extensions</label>
      </li>
      <li>
        <input type="checkbox" id="task2-2" />
        <label for="task2-2">Configure ESLint</label>
      </li>
      <li>
        <input type="checkbox" id="task2-3" />
        <label for="task2-3">Setup Prettier</label>
      </li>
    </ol>
  </li>
</ol>

可访问性考虑

语义化使用

html

<!-- ✅ 正确:导航使用列表 -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- ❌ 错误:用div模拟列表 -->
<nav>
  <div class="nav-item">Home</div>
  <div class="nav-item">About</div>
  <div class="nav-item">Contact</div>
</nav>
<!-- 屏幕阅读器无法识别这是一个列表 -->

<!-- ✅ 正确:步骤使用有序列表 -->
<h2>How to Apply</h2>
<ol>
  <li>Fill out application form</li>
  <li>Submit required documents</li>
  <li>Wait for confirmation email</li>
</ol>

ARIA 标签增强

html

<!-- 为复杂列表提供标签 -->
<nav aria-label="Footer navigation">
  <h2>Sitemap</h2>
  <ul>
    <li>
      <h3>Products</h3>
      <ul aria-label="Product links">
        <li><a href="/cloud">Cloud Hosting</a></li>
        <li><a href="/vps">VPS</a></li>
      </ul>
    </li>
    <li>
      <h3>Resources</h3>
      <ul aria-label="Resource links">
        <li><a href="/docs">Documentation</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </li>
  </ul>
</nav>

<!-- 标记当前页面 -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services" aria-current="page">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

常见错误与解决方案

错误 1: 列表项外的内容

html

<!-- ❌ 错误 -->
<ul>
  Some text here
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- ✅ 正确 -->
<p>Some text here</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

错误 2: 空列表项

html

<!-- ❌ 避免 -->
<ul>
  <li></li>
  <li>Actual item</li>
</ul>

<!-- ✅ 正确 -->
<ul>
  <li>Actual item</li>
</ul>

错误 3: 滥用列表

html

<!-- ❌ 不要为了样式而使用列表 -->
<ul>
  <li>This is actually a paragraph, not a list item</li>
</ul>

<!-- ✅ 使用适当的元素 -->
<p>This is actually a paragraph, not a list item</p>

<!-- ❌ 不要用列表包裹单个元素 -->
<ul>
  <li>Only one item</li>
</ul>

<!-- ✅ 单个项目不需要列表 -->
<p>Only one item</p>

CSS 样式化(简介)

虽然详细的 CSS 不在本文范围,但了解基本样式概念很有帮助:

html

<style>
  /* 移除默认样式 */
  ul.custom {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  /* 自定义项目符号 */
  ul.checkmarks {
    list-style-type: "✓ ";
  }

  /* 横向列表(导航) */
  ul.horizontal {
    display: flex;
    gap: 1rem;
    list-style: none;
  }

  /* 编号样式 */
  ol.roman {
    list-style-type: upper-roman;
  }

  /* 描述列表网格布局 */
  dl.specs {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0.5rem;
  }

  dl.specs dt {
    font-weight: bold;
  }
</style>

<!-- 应用样式 -->
<ul class="checkmarks">
  <li>Completed task</li>
  <li>Another task</li>
</ul>

<nav>
  <ul class="horizontal">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

最佳实践总结

选择正确的列表类型:
- 顺序不重要 → <ul>
- 顺序重要 → <ol>
- 术语-定义配对 → <dl>
语义化使用:不要为了样式而选择列表类型,应该根据内容的实际语义
正确嵌套:子列表必须放在 <li> 元素内部
避免空列表项:每个 <li> 都应该有实际内容
可访问性:
- 导航菜单使用列表结构
- 为复杂列表添加 ARIA 标签
- 标记当前页面(aria-current)
描述性文本:列表项的文本应该清晰、完整
避免过度嵌套:三层以上的嵌套会让内容难以理解
使用 CSS 控制样式:不要依赖 HTML 的type属性,用 CSS 更灵活
考虑响应式:在移动设备上,复杂的嵌套列表可能需要不同的展示方式
测试可访问性:使用屏幕阅读器测试列表是否易于导航

通过正确使用列表元素,你可以创建结构清晰、易于理解、对搜索引擎和辅助技术友好的 Web 内容。列表是组织信息最基本也最有效的方式之一。

列表基础应用：组织和呈现有序与无序信息 ​

什么是 HTML 列表? ​

为什么需要列表? ​

HTML 列表的三种类型 ​

类型概览 ​

无序列表(ul) ​

基本用法 ​

无序列表的样式类型 ​

有序列表(ol) ​

基本用法 ​

有序列表的编号类型 ​

start 属性 - 自定义起始编号 ​

reversed 属性 - 倒序编号 ​

value 属性 - 单项自定义编号 ​

描述列表(dl) ​

基本用法 ​

实际应用场景 ​

一个术语多个描述 ​

多个术语一个描述 ​

列表嵌套 ​

无序列表嵌套 ​

有序列表嵌套 ​

混合列表嵌套 ​

列表的实际应用 ​

导航菜单 ​

内容目录 ​

特性比较 ​

时间线 ​

复杂任务清单 ​

可访问性考虑 ​

语义化使用 ​

ARIA 标签增强 ​

常见错误与解决方案 ​

错误 1: 列表项外的内容 ​

错误 2: 空列表项 ​

错误 3: 滥用列表 ​

CSS 样式化(简介) ​

最佳实践总结 ​

列表基础应用：组织和呈现有序与无序信息

什么是 HTML 列表?

为什么需要列表?

HTML 列表的三种类型

类型概览

无序列表(ul)

基本用法

无序列表的样式类型

有序列表(ol)

基本用法

有序列表的编号类型

start 属性 - 自定义起始编号

reversed 属性 - 倒序编号

value 属性 - 单项自定义编号

描述列表(dl)

基本用法

实际应用场景

一个术语多个描述

多个术语一个描述

列表嵌套

无序列表嵌套

有序列表嵌套

混合列表嵌套

列表的实际应用

导航菜单

内容目录

特性比较

时间线

复杂任务清单

可访问性考虑

语义化使用

ARIA 标签增强

常见错误与解决方案

错误 1: 列表项外的内容

错误 2: 空列表项

错误 3: 滥用列表

CSS 样式化(简介)

最佳实践总结