无序列表标签 - <ul> #

什么是 <ul> 标签？ #

<ul> 标签用于创建无序列表，即列表项没有特定顺序的列表。浏览器通常会在每个列表项前显示一个项目符号（如圆点、方块或空心圆）。

基本语法 #

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

语义与用法 #

<ul> 标签用于表示项目之间没有特定顺序的集合，每个列表项使用 <li>（List Item）标签包裹。它告诉浏览器和屏幕阅读器：“这是一个无序列表，列表项之间没有顺序关系”。

示例：

html 
<!-- 简单列表 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<!-- 嵌套列表 -->
<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>西红柿</li>
      <li>黄瓜</li>
      <li>胡萝卜</li>
    </ul>
  </li>
</ul>

<!-- 带链接的列表 -->
<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#about">关于我们</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>

与 <ol> 标签的区别 #

<ul> 标签和 <ol> 标签都用于创建列表，但它们的语义不同：

  • <ul> 标签表示无序列表，列表项之间没有特定顺序
  • <ol> 标签表示有序列表，列表项之间有特定顺序（如数字、字母等）

示例：

html 
<!-- 使用ul -->
<ul>
  <li>面包</li>
  <li>牛奶</li>
  <li>鸡蛋</li>
</ul>

<!-- 使用ol -->
<ol>
  <li>收集材料</li>
  <li>准备工具</li>
  <li>开始制作</li>
  <li>完成项目</li>
</ol>

嵌套使用 #

<ul> 标签可以嵌套使用，创建多级列表结构：

html 
<!-- 二级嵌套 -->
<ul>
  <li>编程语言
    <ul>
      <li>JavaScript
        <ul>
          <li>React</li>
          <li>Vue</li>
          <li>Angular</li>
        </ul>
      </li>
      <li>Python
        <ul>
          <li>Django</li>
          <li>Flask</li>
          <li>FastAPI</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>前端框架
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
</ul>

全局属性 #

<ul> 标签支持所有HTML全局属性，包括 class、id、style、title 等。

示例：

html 
<!-- 使用class和title -->
<ul class="fruit-list" title="水果列表">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<!-- 使用style自定义样式 -->
<ul style="list-style-type: square; color: blue;">
  <li>红色</li>
  <li>绿色</li>
  <li>蓝色</li>
</ul>

样式定制 #

通过CSS可以自定义无序列表的外观，包括项目符号的类型、颜色和位置等：

示例：

html 
<ul class="custom-list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

<style>
  /* 自定义项目符号类型 */
  .custom-list {
    list-style-type: circle;
  }
  
  /* 自定义项目符号颜色 */
  .custom-list li {
    color: #333;
  }
  
  /* 使用图片作为项目符号 */
  .custom-list {
    list-style-image: url('bullet.png');
  }
  
  /* 移除项目符号 */
  .custom-list {
    list-style-type: none;
  }
  
  /* 自定义列表项缩进 */
  .custom-list {
    padding-left: 20px;
  }
</style>

最佳实践 #

  1. 语义化使用：仅在项目之间没有特定顺序时使用 <ul> 标签。

  2. 嵌套限制：避免过度嵌套列表，一般不超过3级，以免影响可读性和可访问性。

  3. 内容一致性：列表项内容应保持语法和结构的一致性。

  4. 空列表处理：避免创建空的 <ul> 标签，这会影响可访问性和页面结构。

  5. 结合CSS：使用CSS而不是HTML属性来自定义列表样式，保持内容与表现分离。

  6. 可访问性：确保屏幕阅读器能够正确识别列表结构，不要为了样式而破坏语义。

好的示例：

html 
<!-- 产品特性列表 -->
<ul class="product-features">
  <li>高性能处理器</li>
  <li>长续航电池</li>
  <li>高清显示屏</li>
  <li>大容量存储</li>
</ul>

<!-- 导航菜单 -->
<nav>
  <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>

不好的示例：

html 
<!-- 错误使用ul表示有序步骤 -->
<ul>
  <li>第一步：打开文件</li>
  <li>第二步：编辑内容</li>
  <li>第三步：保存文件</li>
</ul>

<!-- 过度嵌套 -->
<ul>
  <li>类别1
    <ul>
      <li>子类别1
        <ul>
          <li>项目1
            <ul>
              <li>细节1</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<!-- 混合内容类型 -->
<ul>
  <li>苹果</li>
  <li>香蕉和橙子</li>
  <li>葡萄、草莓、蓝莓</li>
</ul>

浏览器兼容性 #

<ul> 标签在所有现代浏览器中都得到广泛支持，它是HTML规范的基础部分。

总结 #

<ul> 标签是HTML中用于创建无序列表的语义化标签，它表示列表项之间没有特定顺序的集合。正确使用 <ul> 标签可以提高页面的语义化程度和可访问性，帮助用户和搜索引擎更好地理解内容的结构和关系。结合CSS可以创建各种自定义样式的列表，满足不同的设计需求。

最后更新：2026-02-07