当前位置：首页 > article >正文

HTML 列表详解

article 2025/3/12 21:36:09

一、HTML 列表概述

HTML 列表用于以结构化的方式展示项目集合。列表可以是无序的（项目符号为圆点、方块等）、有序的（项目符号为数字或字母）或者定义列表（包含术语和描述）。列表在网页布局、导航菜单、表单布局等方面有广泛的应用。

二、无序列表（`<ul>`）

无序列表使用<ul>标签定义，列表项使用<li>标签表示。每个列表项前默认显示圆点符号。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

常用属性

type：设置列表项的项目符号类型，可选值为"disc"（实心圆点，默认值）、"circle"（空心圆点）、"square"（方块）。

<ul type="square">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

三、有序列表（`<ol>`）

有序列表使用<ol>标签定义，列表项使用<li>标签表示。每个列表项前默认显示数字编号。

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

常用属性

type：设置列表项的编号类型，可选值为"1"（数字，默认值）、"A"（大写字母）、"a"（小写字母）、"I"（大写罗马数字）、"i"（小写罗马数字）。

<ol type="A">
  <li>选项A</li>
  <li>选项B</li>
  <li>选项C</li>
</ol>

四、定义列表（`<dl>`）

定义列表使用<dl>标签定义，包含术语（<dt>）和描述（<dd>）。适用于术语和描述的配对展示。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页的标准标记语言。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于描述HTML或XML文档的呈现。</dd>
</dl>

五、列表的嵌套

列表可以嵌套使用，即在一个列表项中包含另一个列表。

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>西红柿</li>
      <li>黄瓜</li>
      <li>土豆</li>
    </ul>
  </li>
</ul>

六、列表的样式设计

使用内联样式

<ul style="list-style-type: square;">
  <li style="color: red;">苹果</li>
  <li style="color: yellow;">香蕉</li>
  <li style="color: orange;">橙子</li>
</ul>

使用内部样式表

<style>
  .special-list {
    list-style-type: upper-roman;
  }
  .special-list li {
    color: blue;
  }
</style>
<ul class="special-list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

使用外部样式表

<!-- HTML 文件 -->
<link rel="stylesheet" href="styles.css">
<ul class="custom-list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

/* styles.css */
.custom-list {
  list-style-type: lower-greek;
}
.custom-list li {
  margin-bottom: 5px;
  padding: 5px;
  background-color: #f0f0f0;
}

七、列表的高级应用

与 JavaScript 交互

<ul id="myList">
  <li>初始项1</li>
  <li>初始项2</li>
</ul>
<button onclick="addListItem()">添加项</button>

<script>
  function addListItem() {
    var list = document.getElementById('myList');
    var newItem = document.createElement('li');
    newItem.textContent = '新项 ' + (list.children.length + 1);
    list.appendChild(newItem);
  }
</script>

创建导航菜单

<ul class="nav-menu">
  <li><a href="/home">首页</a></li>
  <li><a href="/about">关于我们</a></li>
  <li><a href="/services">服务</a></li>
  <li><a href="/contact">联系我们</a></li>
</ul>

.nav-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.nav-menu li {
  margin-right: 20px;
}
.nav-menu a {
  text-decoration: none;
  color: #333;
}
.nav-menu a:hover {
  color: #666;
}