纯HTML无法实现多层级评论交互逻辑，真正依赖的是语义结构（如与）、唯一ID锚点、合理缩进策略（data-level+CSS逻辑属性）及原生正确用法。
纯 HTML 无法“实现”多层级评论交互逻辑，它只能表达层级关系；真正让回复嵌套可展开、可定位、可访问的，是语义结构 + 属性标记 + 合理缩进策略，不是 class 堆砌或 JS 模拟。
怎么用 <section></section> 和 <blockquote></blockquote> 构建合法嵌套结构
每条评论必须是独立的 <section></section>，不能塞进 <ul></ul> 或平铺 <div>；它的直接子回复应使用 <code><blockquote cite="#comment-123"></blockquote> 显式引用目标评论 ID，而非靠视觉缩进来暗示关系。
-
<section id="comment-456"></section>是必须的——所有 JS 插入、锚点跳转、ARIA 关联都依赖这个唯一 ID -
<blockquote cite="#comment-456"></blockquote>中的cite值必须是页面内有效锚点（如#comment-456）或完整 URL；空字符串、"#"或占位符会触发 Lighthouse 警告 - 不要在
<blockquote></blockquote>内再套<section></section>——语义过载，辅助技术会误判为“新评论单元”，而非“对某条的引用” - 子回复内容之后，用
<footer></footer>或<small></small>放作者和时间，别用<p></p>或<h3></h3>破坏标题流
为什么不用 <details><summary></summary></details> 做折叠，而要用它做回复容器
<details></details> 不是用来“包裹整条回复”的，它是用来控制“被引用内容是否展开”的原生机制；把它当回复容器用，等于把语义搞反了——summary 不该是“回复 @xxx”，而应是“查看原始评论”。
- 正确用法：
<blockquote cite="#comment-456"><details><summary>查看原文</summary><p>……</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></details></blockquote></li> <li>常见错误：把整个子评论（含作者、时间、内容）包进 <code><details>，导致屏幕阅读器读成“可折叠的评论”，而非“对某条的引用” -
<summary></summary>必须是<details></details>的**第一个且唯一子元素**；里面塞<button></button>或<a></a>会破坏原生 toggle 行为 - Safari 16.4+ 才稳定支持
summary::marker，老版本需 fallback 到 background-image + padding-inline-start
data-level 和 CSS 逻辑属性缩进怎么配才不翻车
缩进不是为了“看起来像嵌套”，而是为了让键盘导航、打印样式、RTL 布局、高对比度模式全部保持一致；硬写 margin-left: 30px 是最常见翻车点。
- 给每层容器加
data-level="2"、data-level="3"，CSS 写[data-level="2"] { padding-inline-start: 1.5rem; }，自动适配 LTR/RTL - 避免用
transform: translateX()缩进——脱离文档流，焦点顺序错乱，iOS Safari 键盘弹出时可能遮挡输入框 - 移动端建议 level > 2 时取消缩进，改用顶部细线 +
<small>回复给 @xxx</small>提示，防止内容宽度不足 - 别依赖
:has(> blockquote)控制缩进——旧版 Safari 不支持，且嵌套深了会拖慢渲染
JavaScript 动态插入回复时最容易漏掉的三件事
用户点“回复”按钮后，插入 DOM 的动作本身很简单，但漏掉下面任意一项，都会导致无障碍失效、键盘导航中断或后续回复无法嵌套。
- 必须先查
document.getElementById("comment-456-replies")；如果不存在，要创建一个<div id="comment-456-replies"></div>并 append 到原<section></section>底部，再插入新内容 - 插入必须用
insertAdjacentHTML("beforeend", htmlStr)，而不是innerHTML += htmlStr——后者会重置所有子节点事件监听器和表单状态 - 插入后调用
scrollIntoView({ block: "nearest" })，但禁用behavior: "smooth"；iOS Safari 15 及更早版本不支持该参数，会导致静默失败
层级超过 4 级时，视觉、语义、键盘导航、移动端展开逻辑全会变脆弱；真实项目里，第三级起就该默认收折，而不是靠结构强行撑开——这不是妥协，是让信息真正可被访问。
