知识库

Appearance

Return to top
On this page

HTML列表标签

HTML提供了三种类型的列表来组织和展示有序或无序的数据项：无序列表、有序列表和定义列表。

无序列表 (Unordered List)

无序列表使用<ul>标签创建，列表项使用<li>标签表示。适用于不需要特定顺序的项目。

基本语法

html
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

列表标记样式

可以使用CSS来改变无序列表的标记样式：

html
<ul>
  <li style="list-style-type: disc;">实心圆点（默认）</li>
  <li style="list-style-type: circle;">空心圆点</li>
  <li style="list-style-type: square;">方块</li>
  <li style="list-style-type: none;">无标记</li>
</ul>

有序列表 (Ordered List)

有序列表使用<ol>标签创建，适用于需要特定顺序的项目，如步骤、排名等。

基本语法

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

序号类型

可以使用type属性来指定序号类型：

html
<ol type="1">
  <li>数字（默认）</li>
  <li>数字</li>
</ol>

<ol type="A">
  <li>大写字母</li>
  <li>大写字母</li>
</ol>

<ol type="a">
  <li>小写字母</li>
  <li>小写字母</li>
</ol>

<ol type="I">
  <li>大写罗马数字</li>
  <li>大写罗马数字</li>
</ol>

<ol type="i">
  <li>小写罗马数字</li>
  <li>小写罗马数字</li>
</ol>

起始数字

使用start属性指定起始数字：

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

反向列表

使用reversed属性创建反向列表：

html
<ol reversed>
  <li>最后一项</li>
  <li>倒数第二项</li>
  <li>倒数第三项</li>
</ol>

定义列表 (Definition List)

定义列表使用<dl>标签创建，包含术语<dt>和定义<dd>。

基本语法

html
<dl>
  <dt>术语1</dt>
  <dd>术语1的定义</dd>
  <dt>术语2</dt>
  <dd>术语2的定义</dd>
</dl>

复杂定义列表

一个术语可以有多个定义：

html
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dd>用于创建网页的标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
  <dd>用于描述HTML文档样式的语言</dd>
</dl>

嵌套列表

列表可以嵌套在其他列表中：

无序列表嵌套

html
<ul>
  <li>主项目1
    <ul>
      <li>子项目1.1</li>
      <li>子项目1.2
        <ul>
          <li>子子项目1.2.1</li>
          <li>子子项目1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>主项目2
    <ol>
      <li>有序子项目1</li>
      <li>有序子项目2</li>
    </ol>
  </li>
</ul>

有序列表嵌套

html
<ol>
  <li>主步骤1
    <ul>
      <li>子步骤1.1</li>
      <li>子步骤1.2</li>
    </ul>
  </li>
  <li>主步骤2
    <ol>
      <li>子步骤2.1</li>
      <li>子步骤2.2</li>
    </ol>
  </li>
</ol>

实际应用示例

导航菜单

html
<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="services.html">服务</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav>

文章大纲

html
<ol>
  <li>引言
    <ol>
      <li>背景介绍</li>
      <li>问题陈述</li>
    </ol>
  </li>
  <li>方法
    <ol>
      <li>实验设计</li>
      <li>数据收集</li>
    </ol>
  </li>
  <li>结果
    <ol>
      <li>数据分析</li>
      <li>讨论</li>
    </ol>
  </li>
</ol>

词汇表

html
<dl>
  <dt>API</dt>
  <dd>Application Programming Interface，应用程序编程接口</dd>
  
  <dt>DOM</dt>
  <dd>Document Object Model，文档对象模型</dd>
  
  <dt>SEO</dt>
  <dd>Search Engine Optimization，搜索引擎优化</dd>
</dl>

列表属性

ol元素属性

  • start：起始数字
  • reversed：反向排序
  • type：序号类型
  • compact：紧凑显示（已废弃）

li元素属性

  • value：在有序列表中的数值
html
<ol>
  <li>第一项</li>
  <li value="5">第五项</li>
  <li>第六项</li>
</ol>

CSS样式控制

列表样式

css
ul {
  list-style-type: disc;
  list-style-position: outside; /* 或 inside */
  list-style-image: url('bullet.png'); /* 自定义标记图片 */
}

/* 简写形式 */
ul {
  list-style: square inside url('bullet.png');
}

去除默认样式

css
ul, ol {
  list-style: none;
  padding-left: 0;
}

最佳实践

  1. 使用列表来组织相关项目
  2. 选择适当的列表类型（有序/无序/定义）
  3. 保持嵌套层级不过深（通常不超过3层）
  4. 为列表项添加适当的语义和样式
  5. 确保列表在不同设备上都能良好显示
  6. 遵循无障碍访问原则，使用适当的ARIA属性