html规范要求的直接子元素只能是，因此必须嵌套在内；否则会触发验证错误、损害可访问性、破坏css选择器匹配。
有序列表里的每一项都可以加链接，但必须把 @#@#@#@#@#@#@#@#@#@0，浏览器虽可能渲染出来，但会触发 HTML 验证错误，影响可访问性（屏幕阅读器可能跳过链接语义），且 CSS 选择器如 ol > li > a 会失效。
正确结构只有一种：<ol><li>@#@#@#@#@#@#@#@#@#@1</li></ol>
<a></a> 加在 <li> 里时的常见错误
- href 值为空字符串
""或仅"#"：点击后页面跳到顶部或刷新，不是真跳转；应填完整 URL 或用javascript:void(0)（仅限 JS 控制场景） - 忘记闭合
<a></a>：比如写成<li><a href="page.html">链接文本</a></li>，会导致后续所有<li>被吞进这个链接里 - 在
<a></a>内部再嵌套交互元素（如按钮、其他<a></a>）：违反 HTML 嵌套规则，部分浏览器会自动截断或报错 - 用
target="_blank"却没加rel="noopener noreferrer"：存在安全风险，新页面可通过window.opener操作原页面
带编号样式的链接如何保持视觉连贯
默认情况下，<ol></ol> 的编号由浏览器生成，不占文档流；而 <a></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></ol> 时，容易忽略编码与上下文隔离问题。
- 用户输入作为链接文本？必须对
、<code>>、"做 HTML 实体转义，否则可能注入标签或破坏结构 - URL 来自变量？需校验是否含协议（
https://或/path），避免拼出href="userInput"导致相对路径跳转到错误域名 - 用
innerHTML插入？不如用document.createElement逐个创建li和a，更安全可控 - 编号逻辑依赖 JS（比如手动写
1.、2.）？放弃——直接用原生<ol></ol>，浏览器自动维护序号，包括嵌套、CSS 修改起始值（start属性）、type 切换（A/i）等
最易被忽略的是：当列表项内容含富文本（如粗体、图片）时，<a></a> 必须包裹全部内容，且不能跨多个 <li> —— 编号永远属于 <li>，不是 <a></a>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
