<ul>-无序列表

<ul> 是 HTML 中用于创建无序列表的标签，列表项默认以项目符号（如圆点）显示。它通常与 <li> 标签配合使用，适用于需要展示无顺序关系的项目集合。

<ul> 的基本语法

<ul> 的语法非常简单，只需将列表项包裹在 <ul> 和 </ul> 之间，每个列表项用 <li> 标签定义：

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

渲染效果如下：

• 苹果
• 香蕉
• 橙子

<ul> 的常见属性

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

type 属性

控制项目符号的样式，可选值：

• disc：默认实心圆点
• circle：空心圆圈
• square：实心方块

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

compact 属性（已废弃）

原本用于减少列表间距，现在应使用 CSS 的 margin 和 padding 替代。

嵌套 <ul> 的用法

无序列表可以多层嵌套，浏览器会自动为不同层级应用不同的项目符号：

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

渲染效果：

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

结合 CSS 的进阶样式

通过 CSS 可以完全自定义无序列表的样式：

替换项目符号为图片

ul.custom {
  list-style-image: url('bullet.png');
}

横向排列列表

ul.horizontal {
  display: flex;
  list-style: none;
  padding: 0;
}
ul.horizontal li {
  margin-right: 20px;
}

自定义计数器样式

ul.decorative {
  list-style: none;
}
ul.decorative li::before {
  content: "◆ ";
  color: #ff5722;
}

实际应用场景示例

导航菜单

<nav>
  <ul class="menu">
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/about">关于我们</a></li>
  </ul>
</nav>

<style>
.menu {
  display: flex;
  gap: 1rem;
  list-style: none;
  background: #f5f5f5;
  padding: 1rem;
}
.menu a {
  text-decoration: none;
  color: #333;
}
</style>

功能特性列表

<ul class="features">
  <li>响应式设计</li>
  <li>跨平台兼容</li>
  <li>高性能渲染</li>
</ul>

<style>
.features {
  background: #f0f8ff;
  padding: 1.5rem;
  border-radius: 8px;
}
.features li {
  padding: 0.5rem 0;
  position: relative;
  padding-left: 1.5rem;
}
.features li::before {
  content: "✓";
  color: #4caf50;
  position: absolute;
  left: 0;
}
</style>

无障碍访问注意事项

1. 当列表用于导航时，应添加 role="navigation"
2. 避免使用纯视觉符号，确保屏幕阅读器能正确识别
3. 嵌套列表不宜超过4层

<nav aria-label="主导航">
  <ul role="menu">
    <li role="none"><a role="menuitem" href="/">首页</a></li>
    <li role="none"><a role="menuitem" href="/about">关于</a></li>
  </ul>
</nav>

与其他列表标签的对比

浏览器兼容性与特殊案例

所有主流浏览器都完整支持 <ul> 标签，但需要注意：

• IE8 及更早版本对 CSS list-style-type 的某些值支持不完整
• 移动端浏览器可能对嵌套列表的缩进处理不一致
• 打印时可能需要调整列表间距避免分页打断

<!-- 兼容旧版IE的写法 -->
<ul>
  <!--[if IE 8]>
    <li style="list-style-type: square;">IE8专用样式</li>
  <![endif]-->
  <li>正常列表项</li>
</ul>

性能优化建议

1. 避免过度嵌套（超过5层）
2. 包含大量列表项时（超过50个），考虑分页或虚拟滚动
3. 使用 CSS content 属性替代图片符号可减少HTTP请求

// 大数据量列表的优化示例
function renderLongList(items) {
  const fragment = document.createDocumentFragment();
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li);
  });
  document.getElementById('long-list').appendChild(fragment);
}