静态页面评论区必须用section包裹每条评论，嵌套回复用aside，表单需javascript拦截提交并存入localstorage或sessionstorage，优先选用utterances等第三方服务。
静态页面没法真存评论，所谓“简洁评论区”只能是前端模拟展示 + 本地临时存储，上线必须配后端或第三方服务。
用 section 而不是 div 包每条评论
语义错误是静态评论区最常被忽略的问题。全用 div 套娃会让屏幕阅读器读成“一堆没意义的容器”，SEO 也收不到有效信号。
- 每条评论必须用
section包裹，不是article（那是完整独立内容），也不是div（无语义） - 加
aria-label="用户评论"，比如<section aria-label="用户评论"></section> - 嵌套回复时，子评论用
aside，而不是再套一层section；超过两层嵌套就该考虑折叠交互，否则语义失效 - 别写
<section><section></section></section>——浏览器解析不了这种结构，辅助技术会跳过内层
form 提交必须用 JavaScript 拦截
直接写 action="/api/comment" 却没后端接口，表单一提交就跳转或报 405，这是静态页最常见的“没反应”原因。
-
form的action留空或设为"#"，避免默认跳转 - 务必给提交按钮加
type="submit"，否则form.addEventListener("submit", ...)不触发 - 用
event.preventDefault()阻止默认行为，再调fetch()或存localStorage -
textarea加required只做前端提示，不能替代后端校验；清缓存后localStorage数据就丢，仅限演示
CSS 缩进嵌套回复要靠 padding-inline-start
用 margin-left 或固定 padding-left 做缩进，在 RTL（从右向左）语言下会错位，且响应式不稳。
- 对回复级数用类名区分，比如
class="comment-level-2"、class="comment-level-3" - CSS 写
.comment-level-2 { padding-inline-start: 2rem; border-inline-start: 2px solid #e0e0e0; } - 配合
cite标签标记被回复人，cite的href必须指向真实锚点（如#comment-123）或 URL，不能空着 - 别用
text-indent缩进整条评论——它只缩首行，视觉混乱
静态部署场景下优先选 Utterances
GitHub Pages、VitePress、Hugo 这类平台不支持 PHP/Node 后端，硬写接口等于白忙活。
- Utterances 把每条评论转成 GitHub Issue，用 JS 加载渲染，零后端、带登录、有通知
- 注册地址是 https://www.php.cn/link/45af4af2ae6bf55e858a019a76aa20a7，按指引装 GitHub App 到目标仓库即可
- 不要自己用
localStorage模拟多用户评论——无法跨设备同步，也不能防刷，连基本时间戳都难保证准确 - 如果非要用纯前端方案，至少把用户输入存进
sessionStorage而不是localStorage，避免上次浏览的“幽灵评论”突然出现
真正麻烦的从来不是怎么画出那个框，而是让每条评论在语义、可访问、跨设备、可维护这四件事上都不掉链子——静态页最容易在第三点和第四点翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
