有序列表中嵌套a标签必须用li包裹，否则触发解析警告、序号错乱、无障碍失效；a可置于li内任意位置，外链需配rel="noopener"，锚点须确保id唯一且合法。
有序列表里嵌套 a 标签要加 li 包裹
直接在 ol 里写 a 标签会触发 HTML 解析警告，浏览器可能自动补全或错位渲染。必须把每个链接放进 li 里，这是语义和结构的硬性要求。
常见错误现象：ol 渲染后序号错乱、点击区域不完整、无障碍读屏器无法识别顺序。
-
ol是“有序内容容器”，li是唯一合法子元素 -
a是行内元素，可自由放在li内任意位置（开头、中间、结尾） - 若需整个
li可点击，把a设为display: block并撑满父级
<ol> <li><a href="/guide#step1">第一步：初始化项目</a></li> <li><a href="/guide#step2">第二步：配置环境变量</a></li> </ol>
target="_blank" 必须配 rel="noopener"
在有序列表的链接中加 target="_blank" 很常见，但漏掉 rel="noopener" 会导致安全漏洞：新页面可通过 window.opener 访问原页面的 document 和 location。
使用场景：文档导航列表、教程步骤跳转、外部参考资源索引。
- 仅加
target="_blank"不够，必须成对出现rel="noopener" - 如果还要支持旧版 Safari，可额外加
rel="noreferrer"（但noopener已覆盖主要风险） - 不要用
rel="nofollow"替代——它只影响 SEO，不解决 opener 安全问题
<ol> <li><a href="https://example.com" target="_blank" rel="noopener">查看官方 API 文档</a></li> </ol>
锚点链接在 ol 中要确保目标 id 存在且唯一
用有序列表做页面内导航（比如“目录”）时，href="#section2" 点击后没反应，大概率是目标元素缺失 id="section2"，或该 id 在页面中重复出现。
性能影响：浏览器查找锚点是线性扫描 id 属性，重复 id 会让行为不可预测（通常停在第一个匹配项）。
- 检查目标元素是否存在，例如：
<h2 id="section2">安装步骤</h2> - 避免用数字开头的
id（如id="1-intro"），部分老浏览器解析异常 - 不要用空格或中文命名
id，推荐用短横线分隔的小写字母（id="setup-guide"）
样式冲突：ol 默认缩进 + a 下划线容易挤占可读空间
默认渲染下，ol 的左侧计数器和 a 的下划线叠加，尤其在小屏幕或高密度列表中，文字拥挤、点击热区难判断。
容易踩的坑：只重置 a 的 text-decoration，却忘了 ol 的 padding-left 或 list-style-position。
- 用
list-style-position: inside把序号拉进文本流，减少左偏移 - 给
a加text-decoration: none后，务必加border-bottom或背景色作为视觉反馈 - 移动端建议设置最小点击区域：
padding: 8px 0或line-height: 1.5
ol、li、a 三层嵌套关系的精确控制，而不是笼统地“清样式”或“全加粗”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
