消息列表必须用带唯一id的<article>，标题用<h3>并关联aria-labelledby，操作区放<footer>，data-liked和data-comment-count须服务端直出为字符串，点赞评论交互需防抖、禁用按钮、请求成功后更新dataset及textContent。
消息列表结构必须用 <article>，别套 <div> 或 <li>
用 <div> 堆消息，点赞按钮点击态会丢；用 <li> 会导致屏幕阅读器误读为“第3项”，而实际顺序可能被后端动态调整。真实项目里每条消息必须是独立语义单元：<article> 天然支持 aria-labelledby 和焦点管理，且浏览器对它的滚动锚点计算更稳定。
关键约束：
-
<article>必须带唯一id（如msg-20260513001），后续点赞/评论交互都靠它定位 - 标题用
<h3>，并设id与aria-labelledby关联，例如<h3 id="title-20260513001">系统升级通知</h3>+<article aria-labelledby="title-20260513001"> - 操作区（点赞、评论按钮）统一放底部，用
<footer>包裹，语义清晰，也方便 CSS 控制间距
data-liked 和 data-comment-count 必须写死在 HTML 里
前端不能靠 JS 初始化状态——页面直出时若 JS 加载失败或延迟，用户看到的全是“未点赞”“0 条评论”，但真实状态已在服务端渲染完成。所有可交互字段必须由后端注入初始值。
示例 HTML 片段：
立即学习“前端免费学习笔记（深入）”；
<article id="msg-20260513001" data-liked="1" data-comment-count="7">
<h3 id="title-20260513001">新功能上线</h3>
<p>本次更新支持消息快捷回复…</p>
<footer>
<button type="button" data-action="like">?</button>
<span class="comment-count">? 7</span>
</footer>
</article>
注意点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
data-liked值必须是字符串"0"或"1"，不是布尔值，否则 Vue/React 中属性可能被自动移除 -
data-comment-count不要只存数字，得带单位（如"7"），避免 JS 拼接时类型错误 - 按钮点击后，只改
dataset.liked和dataset.commentCount，不重绘整条 DOM
点赞按钮点击后，必须发请求再更新 UI，不能只改本地状态
常见翻车现场：用户双击点赞，前端没锁按钮，后端收到两条请求，结果状态错乱（比如点两次变“已取消”）。真实链路必须严格按“请求 → 成功 → 更新”走，且带防抖和 loading 状态。
实操要点：
- 点击瞬间禁用按钮：
btn.disabled = true，同时加loading类显示转圈图标 - 请求成功后，才更新
dataset.liked和按钮文案（如从"?"切到"✅"） - 失败时恢复按钮状态，并用
alert()或 toast 提示“网络异常，请重试”，别静默吞掉错误 - 禁止用
localStorage缓存点赞状态——它无法解决多端同步问题，且刷新即失效
评论数更新必须用 textContent，别用 innerHTML
很多项目把 <span class="comment-count">? 7</span> 的内容全替换成 innerHTML = '? ' + newCount，结果 XSS 风险直接暴露。哪怕后端做了过滤，中间 CDN 或代理也可能插入恶意字符。
安全写法只有一条：
- 用
textContent只更新数字部分：el.querySelector('.comment-count').textContent = '? ' + newCount - 如果需要高亮变化（如数字跳动），用
span套数字：<span class="comment-count">? <span class="num">7</span></span>，然后只改.num.textContent - 永远不要拼接用户可控字段进 HTML 字符串，包括评论人昵称、时间等
最易被忽略的是：当评论数为 0 时，有些 UI 会隐藏整个 .comment-count 元素，但无障碍要求它仍需存在（用 aria-hidden="true" 控制视觉，而非 display: none），否则屏幕阅读器会跳过该操作入口。
