HTML规范要求<ol>的直接子元素只能是<li>，因此必须嵌套在<li>内；否则会触发验证错误、损害可访问性、破坏CSS选择器匹配。
有序列表里的每一项都可以加链接，但必须把 <a> 放在 <li> 内部，不能包住整个 <ol> 或塞进 <ol> 标签属性里。
为什么 <a> 必须嵌套在 <li> 里
HTML 规范要求 <ol> 的直接子元素只能是 <li>。如果把 <a> 放在 <ol> 外层或写成 <ol><a href="..."><li>...</li></a></ol>，浏览器虽可能渲染出来，但会触发 HTML 验证错误，影响可访问性（屏幕阅读器可能跳过链接语义），且 CSS 选择器如 ol > li > a 会失效。
正确结构只有一种：<ol><li><a href="...">内容</a></li></ol>
<a> 加在 <li> 里时的常见错误
- href 值为空字符串
""或仅"#"：点击后页面跳到顶部或刷新，不是真跳转；应填完整 URL 或用javascript:void(0)（仅限 JS 控制场景） - 忘记闭合
<a>：比如写成<li><a href="page.html">链接文本</li>，会导致后续所有<li>被吞进这个链接里 - 在
<a>内部再嵌套交互元素（如按钮、其他<a>）：违反 HTML 嵌套规则，部分浏览器会自动截断或报错 - 用
target="_blank"却没加rel="noopener noreferrer"：存在安全风险，新页面可通过window.opener操作原页面
带编号样式的链接如何保持视觉连贯
默认情况下，<ol> 的编号由浏览器生成，不占文档流；而 <a> 是行内元素，不会干扰编号位置。但如果你用 CSS 清除了 a 的下划线或改了颜色，编号仍会正常显示。
立即学习“前端免费学习笔记（深入）”；
需要特别注意的点：
- 不要对
ol或li设置display: inline类样式，否则编号可能错位或消失 - 若用
list-style-type: none+ 自定义伪元素编号（如::before），要确保a不覆盖伪元素区域（可用position: relative配合z-index控制层级） - 移动端点击热区小？给
a加display: block或padding，但别忘了同时设text-decoration: none保持简洁
动态生成带链接的有序列表时的关键控制点
用 JavaScript 拼接字符串或操作 DOM 生成带链接的 <ol> 时，容易忽略编码与上下文隔离问题。
- 用户输入作为链接文本？必须对
<、>、"做 HTML 实体转义，否则可能注入标签或破坏结构 - URL 来自变量？需校验是否含协议（
https://或/path），避免拼出href="userInput"导致相对路径跳转到错误域名 - 用
innerHTML插入？不如用document.createElement逐个创建li和a，更安全可控 - 编号逻辑依赖 JS（比如手动写
1.、2.）？放弃——直接用原生<ol>，浏览器自动维护序号，包括嵌套、CSS 修改起始值（start属性）、type 切换（A/i）等
最易被忽略的是：当列表项内容含富文本（如粗体、图片）时，<a> 必须包裹全部内容，且不能跨多个 <li> —— 编号永远属于 <li>，不是 <a>。
