HTML 列表

HTML 列表

HTML 提供了几种元素来创建列表，这对于分组和构建相关项目至关重要。

常见列表类型：

• 无序列表 (<ul>)：用于项目顺序不重要的场合。通常显示为项目符号。
• 有序列表 (<ol>)：用于项目顺序很重要的场合。通常显示为数字或字母。
• 定义列表 (<dl>)：用于术语及其对应描述的配对（类似于词典或键值对）。

HTML 无序列表 (<ul>)

无序列表以 <ul> 标签开始，每个列表项以 <li>（list item，列表项）标签开始。

示例：

<!DOCTYPE html>
<html lang="en">
<head><title>无序列表</title></head>
<body>
  <h2>购物清单</h2>
  <ul>
    <li>牛奶</li>
    <li>面包</li>
    <li>鸡蛋</li>
  </ul>
</body>
</html>

默认情况下，浏览器通常会将 <ul> 中的 <li> 元素渲染为项目符号。

使用 CSS 样式化无序列表

您应该使用 CSS 来控制列表标记（项目符号）的外观。通常使用 list-style-type 属性。

CSS 示例：

ul.checklist {
  list-style-type: square; /* 使用方形代替项目符号 */
}

ul.no-bullets {
  list-style-type: none; /* 完全移除项目符号 */
  padding-left: 0; /* 移除浏览器默认内边距 */
}

常见的 list-style-type 值包括：disc（默认）、circle、square、none。

HTML 有序列表 (<ol>)

有序列表以 <ol> 标签开始，每个项目也使用 <li> 标签。

示例：

<!DOCTYPE html>
<html lang="en">
<head><title>有序列表</title></head>
<body>
  <h2>操作步骤</h2>
  <ol>
    <li>打开包装。</li>
    <li>阅读手册。</li>
    <li>组装产品。</li>
  </ol>
</body>
</html>

浏览器通常会将 <ol> 中的项目渲染为顺序编号（1、2、3…）。

使用 CSS 样式化有序列表

尽管 HTML 有一个已废弃的 type 属性（例如 <ol type="A">），但现代方法是使用 CSS 的 list-style-type 属性来控制编号格式。

CSS 示例：

ol.upper-alpha {
  list-style-type: upper-alpha; /* A, B, C... */
}

ol.lower-roman {
  list-style-type: lower-roman; /* i, ii, iii... */
}

ol.custom-start {
  /* 您也可以使用 HTML 中的 'start' 属性来改变起始编号 */
  /* <ol start="5"> ... </ol> */
}

常见的用于有序列表的 list-style-type 值包括：decimal（默认）、decimal-leading-zero、lower-roman、upper-roman、lower-alpha、upper-alpha。

HTML 定义列表 (<dl>)

定义列表用于将术语（<dt> - description term，定义术语）与其对应的描述（<dd> - description details，定义描述）分组。整个列表包裹在 <dl> 标签中。

示例：

<!DOCTYPE html>
<html lang="en">
<head><title>定义列表</title></head>
<body>
  <h2>词汇表</h2>
  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言 - 用于构建网页内容。</dd>

    <dt>CSS</dt>
    <dd>层叠样式表 - 用于样式化网页内容。</dd>

    <dt>JavaScript</dt>
    <dd>一种编程语言，用于为网页添加交互性。</dd>
  </dl>
</body>
</html>

嵌套 HTML 列表

您可以将列表放在其他列表项内部，以创建嵌套结构或大纲。

示例：

<ul>
  <li>咖啡</li>
  <li>茶
    <ul> <!-- 嵌套列表 -->
      <li>红茶</li>
      <li>绿茶
         <ol> <!-- 嵌套有序列表 -->
           <li>煎茶</li>
           <li>抹茶</li>
         </ol>
      </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

列表项（<li>）可以包含各种 HTML 元素，包括段落、图像、链接和其他列表。

使用 CSS 创建水平列表

列表常用于导航菜单。可以使用 CSS 将列表项水平排列而不是垂直排列。

使用 Flexbox 的现代方法：

HTML：

<nav>
  <ul class="horizontal-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS：

.horizontal-menu {
  list-style-type: none; /* 移除项目符号 */
  padding: 0;
  margin: 0;
  display: flex; /* 将项目水平排列 */
  background-color: #333; /* 示例背景 */
}

.horizontal-menu li {
  /* 使用 flex 布局时，此处不需要特定的样式 */
}

.horizontal-menu li a {
  display: block; /* 使整个区域可点击 */
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

Flexbox（display: flex）提供了一种强大且灵活的方式来创建水平布局。

本章总结

• 使用 <ul> 表示无序列表（顺序不重要）。
• 使用 <ol> 表示有序列表（顺序重要）。
• 使用 <dl> 表示术语/描述对。
• 在 <ul> 和 <ol> 中使用 <li> 表示列表项。
• 在 <dl> 中使用 <dt> 表示术语，使用 <dd> 表示描述。
• 使用 CSS（list-style-type）样式化列表标记。
• 使用 CSS（例如 Flexbox 或 Grid）创建水平列表布局。
• 列表可以嵌套在其他列表内部。
• 列表项可以包含其他 HTML 元素。

HTML 列表标签参考

标签	描述
	定义无序列表。
	定义有序列表。
	定义列表项。
	定义定义列表。
	在定义列表中定义术语/名称。
	在定义列表中定义描述/值。