无序列表(ul, li)

无序列表的基本概念

无序列表是HTML中用于展示项目列表的一种方式，它不强调项目的顺序或优先级。无序列表使用<ul>标签定义，每个列表项使用<li>标签包裹。浏览器默认会在每个列表项前显示一个项目符号（通常是实心圆点）。

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

上面的代码会渲染为：

• 苹果
• 香蕉
• 橙子

无序列表的属性

虽然HTML5中移除了<ul>的大部分属性，但CSS可以完全控制无序列表的样式。过去常用的type属性（用于改变项目符号样式）现在应该使用CSS的list-style-type属性替代。

<ul style="list-style-type: square;">
  <li>正方形项目符号</li>
  <li>第二个项目</li>
</ul>

嵌套无序列表

无序列表可以多层嵌套，创建复杂的层级结构。嵌套时，浏览器会自动调整不同层级项目符号的样式。

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>胡萝卜</li>
      <li>西兰花</li>
    </ul>
  </li>
</ul>

CSS样式控制

通过CSS可以完全自定义无序列表的外观。常用的CSS属性包括：

• list-style-type: 设置项目符号类型（disc, circle, square等）
• list-style-image: 使用自定义图片作为项目符号
• list-style-position: 控制项目符号的位置（inside或outside）
• margin和padding: 控制列表的间距

ul.custom {
  list-style-type: none;
  padding-left: 0;
}

ul.custom li {
  padding: 8px;
  margin-bottom: 5px;
  background-color: #f0f0f0;
  border-left: 4px solid #3498db;
}

实际应用示例

无序列表常用于导航菜单、功能列表等场景。下面是一个横向导航菜单的实现：

<ul class="nav-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系方式</a></li>
</ul>

<style>
.nav-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

.nav-menu li {
  float: left;
}

.nav-menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-menu li a:hover {
  background-color: #111;
}
</style>

无障碍考虑

使用无序列表时应注意无障碍访问性：

1. 确保列表项有语义化的内容
2. 避免仅使用项目符号作为视觉提示
3. 嵌套列表不要过深（一般不超过3层）
4. 使用ARIA属性增强屏幕阅读器的体验

<ul aria-label="主要导航菜单">
  <li><a href="#" aria-current="page">首页</a></li>
  <li><a href="#">产品</a></li>
</ul>

与其他HTML元素的结合

无序列表可以与其他HTML元素结合使用，创建更丰富的结构。例如，在列表项中包含图片、按钮或其他交互元素。

<ul class="product-list">
  <li>
    <img src="product1.jpg" alt="产品1">
    <h3>产品名称</h3>
    <p>产品描述...</p>
    <button>加入购物车</button>
  </li>
  <li>
    <img src="product2.jpg" alt="产品2">
    <h3>产品名称</h3>
    <p>产品描述...</p>
    <button>加入购物车</button>
  </li>
</ul>

响应式设计中的无序列表

在响应式设计中，无序列表的布局可能需要根据屏幕尺寸调整。常见的做法是使用媒体查询改变列表的显示方式。

/* 默认样式 - 垂直列表 */
ul.responsive-list {
  list-style-type: none;
  padding: 0;
}

ul.responsive-list li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* 大屏幕样式 - 横向排列 */
@media (min-width: 768px) {
  ul.responsive-list {
    display: flex;
    flex-wrap: wrap;
  }
  
  ul.responsive-list li {
    flex: 1 0 200px;
    border-bottom: none;
    border-right: 1px solid #ddd;
  }
}

JavaScript交互增强

通过JavaScript可以为无序列表添加动态交互效果，如展开/折叠、拖拽排序等。

<ul id="sortable-list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<script>
document.getElementById('sortable-list').addEventListener('click', function(e) {
  if(e.target.tagName === 'LI') {
    e.target.classList.toggle('highlight');
  }
});
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

性能优化考虑

当处理大型无序列表时（如数百个项目），应考虑性能优化：

1. 使用虚拟滚动技术只渲染可见项
2. 避免在列表项中使用复杂的布局
3. 对静态列表使用CSS计数器替代JavaScript计数
4. 考虑分页或懒加载

/* 使用CSS计数器自动编号 */
ul.autonumber {
  counter-reset: item;
  list-style-type: none;
}

ul.autonumber li:before {
  counter-increment: item;
  content: counter(item) ". ";
  color: #666;
}

浏览器兼容性

现代浏览器对无序列表的支持非常一致，但需要注意：

1. IE8及以下版本对某些CSS属性的支持有限
2. 移动浏览器可能有默认样式的差异
3. 打印样式可能需要特殊处理

/* 打印样式示例 */
@media print {
  ul {
    page-break-inside: avoid;
  }
  
  ul li {
    page-break-after: avoid;
  }
}

语义化与SEO

正确使用无序列表有助于提升网页的语义化和SEO效果：

1. 搜索引擎会识别列表结构
2. 列表内容被视为相关项目组
3. 避免滥用无序列表（仅当内容确实是列表时才使用）

<!-- 适合使用无序列表的情况 -->
<ul>
  <li>产品特点1</li>
  <li>产品特点2</li>
  <li>产品特点3</li>
</ul>

<!-- 不适合使用无序列表的情况 -->
<ul>
  <li><p>这是一段普通文本...</p></li>
  <li><p>另一段文本...</p></li>
</ul>

创意设计应用

无序列表可以通过创意设计实现各种视觉效果，如时间线、步骤指示器等。

<ul class="timeline">
  <li>
    <div class="timeline-badge">1</div>
    <div class="timeline-content">
      <h3>第一步</h3>
      <p>完成注册</p>
    </div>
  </li>
  <li>
    <div class="timeline-badge">2</div>
    <div class="timeline-content">
      <h3>第二步</h3>
      <p>验证邮箱</p>
    </div>
  </li>
</ul>

<style>
.timeline {
  list-style: none;
  position: relative;
  padding-left: 50px;
}

.timeline:before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ddd;
}

.timeline li {
  position: relative;
  margin-bottom: 20px;
}

.timeline-badge {
  position: absolute;
  left: -40px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #3498db;
  color: white;
  border-radius: 50%;
}
</style>