列表项必须用<li>包裹，不能直接写文本；<ul>中直接写文字会导致语义丢失、无项目符号、屏幕阅读器无法识别；子列表必须嵌套在<li>内，不可悬空；<ol>用于顺序不可变的场景，<ul>用于并列无序内容。
列表项必须用 <li> 包裹，不能直接写文本
浏览器只认 <li> 为合法列表项；<ul>首页产品关于</ul> 这种写法会让所有文字变成普通文本流——没项目符号、不进屏幕阅读器列表计数、语义完全丢失。
- 每个条目必须独立套在
<li>里，哪怕只有一行文字 - 嵌套时子
<ul>或<ol>必须放在父级某个<li>内部，不能悬空在<ul>外面 - 漏闭合
</li>会导致后续所有内容被合并成一个项，尤其在动态插入 DOM 时容易出错
什么时候该用 <ol> 而不是 <ul>
<ol> 的语义不是“带数字”，而是“顺序不可变”。改序会改变含义的场景才强制用它。
- 步骤引导（“1. 注册 → 2. 验证 → 3. 登录”）必须用
<ol> - 法律条款、评分细则、操作流程图里的编号项也属于此列
- 导航菜单、功能罗列、“热门服务”这类视觉排序可变的，一律用
<ul> -
<ol type="a">和<ol type="A">效果不同：前者是 a、b、c，后者是 A、B、C；混用会中断计数
嵌套列表必须配合 aria-labelledby 建立层级关系
仅靠缩进或 CSS 样式，屏幕阅读器无法感知“子列表属于哪个标题”。aria-label 会覆盖原生播报，不推荐。
- 给父级标题加
id，比如<h3 id="payment-methods">支付方式</h3> - 子
<ul>加aria-labelledby="payment-methods"，屏幕阅读器会先读“支付方式”，再读“列表，共2项”，再逐项播报 - 避免用
<div>或<p>包裹<li>—— 这会打断语义流，让列表项变成孤立节点 - 表单分组优先用
<fieldset><legend>，再在其内部用<ul>，别靠隐藏<legend>搞样式
CSS 清除默认样式时，list-style-type: none 不够用
只设 list-style-type: none 会让符号消失，但浏览器默认的 padding-left: 40px 还在，视觉上仍留白一大块。
立即学习“前端免费学习笔记（深入）”；
- 重置必须两步：
list-style-type: none+padding-left: 0 - 用
background-image替换项目符号时，路径错误或漏设background-repeat: no-repeat会导致图标重复铺满 - 移动端 Safari 对
list-style-image支持不稳定，更稳妥的是伪元素 +background方案 -
<ul>和<ol>的默认缩进是 padding，不是 margin；单独调 margin 不会影响序号位置
aria-labelledby 引用链越容易断裂；手动维护 ID 和引用关系时，最容易忽略的是被引用标题是否真实存在且可见。 
