HTML无原生“回复层级”语义，视觉缩进需用padding-inline-start配合data-reply-level实现响应式与RTL适配；引用关系应使用<blockquote cite="URL">，嵌套需指向真实引用源；复杂层级须借ARIA role="feed"/"article"及aria-labelledby补足可访问性。
HTML里没有“回复层级”这个原生概念
HTML规范本身不定义“回复”“引用”“嵌套评论”这类社交或论坛场景的语义层级。所谓“深度缩进”，只是视觉表现，不是结构语义。强行用<blockquote>或<div>加class模拟“第3层回复”，浏览器和屏幕阅读器都感知不到它和上一层回复的逻辑关系。
用<blockquote>配合cite属性最接近语义化表达
如果某段内容确实是直接引用前一条回复，<blockquote>是唯一有语义支撑的标签。但注意：cite属性只接受URL，不能写“用户A”或“楼中楼第2层”。
- 正确用法：
<blockquote cite="https://example.com/post/123">…</blockquote> - 错误用法：
<blockquote cite="用户A的回复">（违反规范，被解析为无效值） - 嵌套
<blockquote>合法，但每层都应指向真实引用源，而非单纯为了缩进
视觉缩进必须靠CSS，且要避开margin-left硬编码
用margin-left: 20px逐层递增看起来简单，但会导致三个实际问题：响应式失效、RTL（从右向左）语言错乱、无障碍导航时缩进干扰焦点顺序。
- 推荐用
padding-inline-start替代margin-left，自动适配文本方向 - 缩进层级建议通过data属性控制，比如
<article data-reply-level="3">，再用CSS属性选择器：[data-reply-level="3"] { padding-inline-start: 48px; } - 避免用
<ol>或<ul>包裹回复链——它们表示项目列表，不是引用关系
真正需要层级语义时，得靠ARIA或微数据补位
如果产品要求屏幕阅读器能说出“这是对第2条回复的回复”，纯HTML做不到。必须引入ARIA角色：
立即学习“前端免费学习笔记（深入）”；
- 给最外层容器加
role="feed"表明这是动态消息流 - 每条回复用
role="article"，并用aria-labelledby指向上一条的id - 示例：
<article role="article" aria-labelledby="reply-42"></article>，其中id="reply-42"在上一级元素上 - 注意：ARIA不改变DOM结构，只是增强可访问性；JS仍需维护引用ID的对应关系
缩进的“深度”最终是视觉+语义+交互三者对齐的结果，缺一不可。最容易被忽略的是：当用户用键盘Tab遍历回复时，缩进样式不该影响焦点流顺序，而很多人只调了CSS，忘了检查tabindex和ARIA关系是否同步。
