在中直接嵌套完全合法且推荐，不支持href属性，链接语义应与内容粒度匹配，css可扩展点击区域，动态生成需防xss。

直接在 <li> 里写 @#@#@#@#@#@#@#@#@#@0 ✅ 正确

<ol href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c">https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c</ol> ❌ <ol></ol> 不支持 href

@#@#@#@#@#@#@#@#@#@1 ❌ 语义错乱，链接包裹整个列表没意义

链接文字被截断或样式异常？检查 CSS 是否重置了 @#@#@#@#@#@#@#@#@#@2'

✅ 改用 createElement + setAttribute：

li {
  position: relative;
}
li a {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 1em; /* 避免文字贴左边界 */
  text-decoration: none;
}

另外，url 必须校验协议（只允许 https?、mailto 等白名单），否则可能被注入 javascript: 伪协议。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

真正容易被忽略的是语义一致性：如果每个 <li> 都是独立导航项，用链接合理；但如果只是列表中某几个词需要跳转（比如“详见 文档”），就该把 <a></a> 放在句子内部，而不是整个 <li> 都包成链接——这会影响屏幕阅读器理解和 SEO 权重分配。

const a = document.createElement('a');<br>a.href = url; // 浏览器自动转义<br>a.textContent = text;<br>li.appendChild(a);

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！