<ul>-无序列表

<ul> 是 HTML 中用于定义无序列表的标签，通常与 <li> 标签配合使用，展示一组没有特定顺序的项目。无序列表默认以项目符号（如圆点）标记每一项，适合用于导航菜单、功能列表等场景。

<ul> 的基本语法

<ul> 的语法非常简单，只需包裹一组 <li> 标签即可。<li> 表示列表中的每一项。例如：

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

渲染效果如下：

• 苹果
• 香蕉
• 橙子

<ul> 的常用属性

虽然现代 HTML 更推荐使用 CSS 控制样式，但 <ul> 仍支持一些传统属性：

1. type 属性：指定项目符号的样式，可选值包括：

   • disc（默认，实心圆点）
   • circle（空心圆点）
   • square（实心方块）

   示例：

   <ul type="square">
     <li>红色</li>
     <li>绿色</li>
   </ul>
   

   效果： ▪ 红色
   ▪ 绿色

2. compact 属性（已废弃）：减少列表项间距，建议改用 CSS 的 margin 或 padding。

嵌套 <ul> 实现多级列表

<ul> 可以嵌套使用，创建多级列表结构。例如：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>芒果</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>菠菜</li>
      <li>胡萝卜</li>
    </ul>
  </li>
</ul>

渲染效果：

• 水果
  • 苹果
  • 芒果
• 蔬菜
  • 菠菜
  • 胡萝卜

通过 CSS 自定义 <ul> 样式

现代开发中，通常用 CSS 替代 HTML 属性来控制样式。以下是常见场景：

1. 修改项目符号样式

ul.custom {
  list-style-type: none; /* 移除默认符号 */
  padding-left: 0;
}

ul.custom li::before {
  content: "→ "; /* 自定义符号 */
  color: #ff5733;
}

2. 横向排列列表

ul.horizontal {
  display: flex;
  gap: 20px;
  list-style-type: none;
}

3. 悬停效果

ul.hover-effect li:hover {
  background-color: #f0f0f0;
  transform: translateX(5px);
}

实际应用示例

示例 1：导航菜单

<nav>
  <ul class="nav-menu">
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

<style>
  .nav-menu {
    display: flex;
    gap: 30px;
    list-style: none;
    background: #333;
    padding: 15px;
  }
  .nav-menu a {
    color: white;
    text-decoration: none;
  }
</style>

示例 2：功能清单

<ul class="feature-list">
  <li>响应式设计</li>
  <li>跨浏览器兼容</li>
  <li>SEO 优化</li>
</ul>

<style>
  .feature-list {
    list-style-image: url('checkmark.png');
    line-height: 1.8;
  }
</style>

<ul> 与其他列表标签的区别

1. <ol>：有序列表，用数字或字母标记项目顺序。

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

2. <dl>：定义列表，包含术语（<dt>）和描述（<dd>）。

   <dl>
     <dt>HTML</dt>
     <dd>超文本标记语言</dd>
   </dl>
   

无障碍性注意事项

为提升无障碍体验：

• 避免用列表单纯实现布局（应使用 <div>）
• 嵌套列表不宜超过 3 层
• 对导航菜单添加 ARIA 角色：

  <ul role="menubar">
    <li role="menuitem">首页</li>
  </ul>
  

浏览器兼容性与特殊场景

所有主流浏览器均支持 <ul>，但需注意：

• 旧版 IE 对 CSS list-style-position 的支持不一致
• 打印时可能需要调整符号颜色：

  @media print {
    ul { list-style-type: square !important; }
  }
  

动态操作 <ul> 的 JavaScript 示例

通过 JavaScript 动态操作列表：

<ul id="dynamic-list"></ul>

<script>
  const fruits = ['梨', '葡萄', '西瓜'];
  const list = document.getElementById('dynamic-list');

  fruits.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    list.appendChild(li);
  });
</script>