征服 HTML 列表：攻克常见陷阱和错误

用于无序列表，列表项以项目符号表示。
• 用于有序列表，列表项以数字或字母表示。
  1. 选择不当会导致语义混乱，例如将有序列表用于无序数据。

嵌套列表结构复杂

• 避免嵌套超过 2-3 层的复杂列表。
• 嵌套过多会降低可读性和可维护性。

缺少列表元素结束标签

• 每个列表项都必须用结束标签关闭，例如 </li>)。
• 遗漏结束标签会导致页面验证错误或显示问题。

序列中断

• 有序列表中，列表项必须按顺序编号。
• 中断序列会造成混乱，例如缺少一个列表项或错误的编号。

列表项内容不一致

• 列表项应该包含相关的或类似性质的内容。
• 混合不同类型的内容会降低可读性，例如将图像插入文本列表中。

缩进不统一

• 使用 CSS 属性（例如 text-indent) 正确缩进列表项。
• 缩进不一致会导致页面布局混乱。

可访问性问题

• 向屏幕阅读器提供列表语义，例如使用 aria-labelledby 属性。
• 未提供适当的语义会阻碍视障用户的可访问性。

语义滥用

• 避免将列表用于导航或其他结构化目的。
• 列表应仅用于表示数据或信息。

其他陷阱

• 列表项中包含表单元素：表单元素会导致嵌套错误，应将其移至列表项之外。
• 使用
  换行：<br> 不应在列表中使用，因为它会打破列表结构。
• 列表项内使用表：表格应单独使用，避免嵌套在列表项中。

避免错误的最佳实践

• 验证代码：使用 html 验证器检查代码是否有错误。
• 遵守标准：遵循 HTML 标准，以确保代码语义正确。
• 使用语义元素：选择
  和
  等语义元素，以清楚地表达列表类型。
  1. 保持简单：避免复杂的列表结构，选择最简单的选项。
  2. 提供上下文：在列表之前提供适当的标题或，以提供上下文。