必须用当内容有内在顺序（如步骤、条款），而非仅需编号；须显式闭合，嵌套宜浅；样式优先用css而非type属性。
直接用 <ul></ul> 和 <ol></ol> 就能创建，但选错标签或忽略闭合、嵌套规则，很快就会在样式、可访问性或 JS 操作中出问题。
什么时候必须用 <ol></ol>，而不是 <ul></ul>
不是看“要不要显示数字”，而是看内容有没有内在顺序。浏览器加编号只是副产品，语义才是关键。
- 用
<ol></ol>：安装步骤、法律条款第1条/第2条、搜索结果排名、导航菜单（若存在逻辑层级） - 用
<ul></ul>：产品特性并列项、侧边栏链接组、标签云、“热门城市”列表（北京、上海、广州之间无先后） - 硬套
<ol></ol>只为视觉编号 → 后续做无障碍测试时，屏幕阅读器会读成“第1项、第2项…”，造成语义污染，修复成本远高于初始选对
<li> 必须显式闭合，别信“HTML5 允许省略”
虽然解析器会容错，但实际开发中极易引发连锁问题：
- 嵌套时漏闭合
- Vue/React 模板里直接报错；服务端渲染（如 EJS）中条件分支漏写
-
document.querySelectorAll('li')可能少取节点，或把文本节点误判为<li> - W3C Validator 会警告，CI 流水线若启用校验会失败
<ul><li>A<ul><li>B</li></ul>
</li></ul> → 浏览器可能把整个子 <ul></ul> 当作 A 的文本内容，DOM 结构错乱
CSS 控制样式比 type 属性靠谱得多
type 属性（如 <ol type="A"></ol>）是遗留方案，支持有限、不可扩展、且与 CSS 冲突风险高。
-
type值只支持1/A/a/I/i，不支持自定义前缀（如 “Step 1.”）、emoji 或图标 - 现代项目统一用
list-style-type：ul { list-style-type: square; }ol { list-style-type: lower-alpha; } - 要彻底自定义（比如用箭头或 SVG），先
list-style: none，再用li::before { content: "→ "; } - 注意
list-style-position: inside会让换行文字缩进不对齐，生产环境慎用
嵌套列表最容易踩的三个坑
语法合法 ≠ 渲染合理。三层以上嵌套基本等于放弃可维护性和可访问性。
- 子列表没缩进？大概率是父级
<ul></ul>或<ol></ol>的padding-left被全局 CSS 重置了，优先查这个，不是list-style的问题 - 屏幕阅读器读嵌套列表时容易混淆层级，尤其当子项是解释性内容（如“支付方式 → 支付宝：支持花呗”），更适合改用
<dl></dl>或<details></details> -
<li>里塞<div>？HTML 规范允许，但部分老浏览器或 SSR 框架会解析异常；稳妥做法是只放段落、标题、图片等语义明确的块级元素 <p>最常被忽略的一点：列表结构一旦写错，后续所有样式、JS、无障碍补救都是在打补丁。第一行就该决定用 <code><ul></ul>还是<ol></ol>，而不是等出问题再回头改。
