评论列表应使用<article>作为每条评论的语义化容器，<header>包裹作者信息，<section>或<p>承载正文，<time datetime="...">标记时间；嵌套回复也用<article>，禁用<div>堆砌，避免将整个列表包在单个<article>中。
评论列表的语义化 HTML 结构怎么写
直接用 <article> 套 <header> + <section> 是最稳妥的选择，而不是堆 <div>。浏览器、读屏器和 SEO 都依赖语义标签识别内容意图。
每个评论应是独立内容单元，<article> 正好表达这一点；作者信息放 <header>，正文放 <section> 或 <p>，时间用 <time datetime="..."> 标记。
-
<article>必须有可识别的作者或来源（可用<address>或微数据） - 避免把整个列表包在
<article>里——那是把“所有评论”当成一篇内容，逻辑错误 - 如果评论支持嵌套（如回复），子评论用嵌套的
<article>，不要用<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; }去掉末尾线 - 嵌套层级超过 3 层时，考虑视觉降级（比如只缩进前两级，深层用「→」符号提示）
评论时间显示要兼顾可读性与机器可解析
用户看到“2 小时前”很友好，但搜索引擎和辅助技术需要确切时间点。必须同时提供 datetime 属性和人类可读文本。
服务端渲染时直接输出 ISO 8601 格式（如 2024-05-22T14:30:00Z）；客户端动态更新时间，用 <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>');，但必须先对<>&做实体转义 - 富文本场景：引入
DOMPurify，配置{ ALLOWED_TAGS: ['b', 'i', 'br'] }，再 sanitize 后赋值innerHTML
嵌套结构越深、用户可编辑字段越多，HTML 解析的边界条件就越难覆盖。宁可牺牲一点格式灵活性，也不要省略这层过滤。
