评论列表应使用作为每条评论的语义化容器，包裹作者信息，或承载正文，标记时间；嵌套回复也用，禁用堆砌，避免将整个列表包在单个中。
评论列表的语义化 HTML 结构怎么写
直接用 <article></article> 套 <header></header> + <section></section> 是最稳妥的选择，而不是堆 <div>。浏览器、读屏器和 SEO 都依赖语义标签识别内容意图。
<p>每个评论应是独立内容单元，<code><article></article> 正好表达这一点；作者信息放 <header></header>，正文放 <section></section> 或 <p></p>，时间用 <time datetime="..."></time> 标记。
-
<article></article>必须有可识别的作者或来源（可用<address></address>或微数据） - 避免把整个列表包在
<article></article>里——那是把“所有评论”当成一篇内容，逻辑错误 - 如果评论支持嵌套（如回复），子评论用嵌套的
<article></article>，不要用<blockquote></blockquote>伪装
如何用 CSS 控制评论间距与层级感
靠 margin 堆叠容易导致首尾空白失控，推荐用 flex 或 grid 容器 + gap 统一控制间距，再配合 :not(:last-child) 微调分割线。
嵌套评论的缩进别用固定 padding-left，改用 margin-inline-start 配合 dir 属性适配 RTL 语言。
- 列表容器设
display: flex; flex-direction: column; gap: 1.2rem; - 每条评论加
border-bottom: 1px solid #eee;，再用<article>:last-child { border-bottom: none; }</article>去掉末尾线 - 嵌套层级超过 3 层时，考虑视觉降级（比如只缩进前两级，深层用「→」符号提示）
评论时间显示要兼顾可读性与机器可解析
用户看到“2 小时前”很友好，但搜索引擎和辅助技术需要确切时间点。必须同时提供 datetime 属性和人类可读文本。
服务端渲染时直接输出 ISO 8601 格式（如 2024-05-22T14:30:00Z）；客户端动态更新时间，用 <time></time> 的 datetime 保持不变，仅替换 innerText。
- 错误写法：
<time>2 小时前</time>（丢失时间戳） - 正确写法：
<time datetime="2024-05-22T14:30:00Z">2 小时前</time> - 注意时区：服务端生成的
datetime值必须带时区偏移（Z或+08:00），否则 JS 解析可能出错
评论内容里的用户输入 HTML 怎么安全渲染
绝不能直接用 innerHTML 插入原始评论内容——XSS 漏洞高发区。即使后端做了过滤，前端也要做兜底。
简单场景用 textContent 最安全；若需保留有限格式（如换行、粗体），建议用白名单解析（如 DOMPurify.sanitize()），而非正则替换。
- 纯文本展示：
el.textContent = comment.text; - 允许换行：
el.innerHTML = comment.text.replace(/\n/g, '<br>');，但必须先对<code>>&做实体转义 - 富文本场景：引入
DOMPurify，配置{ ALLOWED_TAGS: ['b', 'i', 'br'] }，再 sanitize 后赋值innerHTML
嵌套结构越深、用户可编辑字段越多，HTML 解析的边界条件就越难覆盖。宁可牺牲一点格式灵活性，也不要省略这层过滤。
