必须用的场景包括步骤说明、排名优先级、法律条文等有严格顺序语义的内容；无序内容如导航菜单、产品特性等一律用

用

还是

，不是看要不要数字，而是看内容有没有顺序语义——这点错了，后面所有样式、无障碍、SEO 都得返工。

什么时候必须用

而不能用

浏览器加不加数字只是渲染结果，关键在语义。以下场景必须用

：

• 步骤说明（如“1. 下载安装包 → 2. 双击运行 → 3. 完成配置”）
• 排名或优先级（如“Top 3 框架：1. React 2. Vue 3. Svelte”）
• 法律条文、合同条款编号（顺序不可交换，跳项会改变含义）

反例：导航菜单、产品特性罗列、标签云——这些项目调换位置不影响逻辑，一律用

。强行用

不仅误导屏幕阅读器，还会让后续加 aria-orientation 或做 WCAG 测试时多绕三道弯。

不是“高级

”，它只适合术语+定义对

的语义非常窄：一个

必须对应至少一个

，且二者构成“名词—解释”关系。常见误用：

• 用
  做两栏布局（比如“姓名：张三｜邮箱：zhang@example.com”）→ 应该用 或 CSS Grid
  把

  当标题、

  当内容块来塞段落和按钮 → 屏幕阅读器会连续读出“术语…定义…术语…定义”，完全丢失结构
  漏写

  ，只留

  → DOM 中出现孤立节点，部分 SSR 框架（如 Next.js）可能报 warning，SSR 渲染结果与 CSR 不一致

  真要展示键值对，且不需要表格语义，优先考虑

  + aria-labelledby，比硬套

  更可控。

  嵌套列表时，

  是唯一合法父容器

  所有嵌套都必须发生在

  内部，而不是直接写在

  或

  里。错误写法：

  • 一级项
  • 二级项

  正确写法：

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载

  • 一级项
    • 二级项

  三层以上嵌套虽语法合法，但人眼难分辨层级，辅助技术（如 VoiceOver）常把第三层开始的编号读成“1点1点1”，建议用

  替代深层子列表，尤其当子项是解释性内容时。

  CSS 移除默认符号后，别忘重置 padding 和 margin

  只写 list-style-type: none 不够，浏览器默认给

  和

  设了 padding-left（通常 40px），移除符号后缩进还在，视觉上像“空了一格”。必须同步处理：

  .clean-list {
    list-style-type: none;
    padding-left: 0;   <!-- 关键！否则左边还留白 -->
    margin: 0;          <!-- 防止和上下文间距异常 -->
  }

  如果列表项内含

  或 ，还要注意

  默认是 display: list-item，某些旧版 Safari 对块级子元素的垂直对齐有 bug，可显式加 display: block 避坑。

  最常被跳过的一步：模板引擎里动态生成列表时，条件判断漏掉

  开闭合（比如 v-if 或 {% if %} 只包内容不包标签），会导致 HTML 结构断裂——浏览器自动纠错后 DOM 和预期不一致，JS 拿 querySelectorAll('li') 可能少抓几个。语义选择和标签闭合，第一行就得写对。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！