html无原生剧透标签，需用语义化组合+css显隐控制；存在兼容性、无障碍和样式问题，推荐+aria手动实现，如role="region"配合aria-label或aria-describedby按需选用。
怎么用 HTML 实现“含剧透”这类敏感内容提示
直接说结论：HTML 本身没有专门的 <spoiler></spoiler> 或 <sensitive></sensitive> 标签，所有“剧透警告”“含敏感内容”提示都靠语义化组合 + CSS 控制显隐实现，不是靠浏览器原生支持。
为什么不能只用 <details></details> 就完事
<details></details> 看起来最接近需求，但实际用起来容易翻车：
- 默认展开逻辑不统一：Chrome 和 Safari 对
open属性的初始渲染行为略有差异，尤其在 SSR 或 hydrate 场景下可能闪动 - 无障碍问题：屏幕阅读器对
<summary></summary>的朗读方式不稳定，有些会跳过警告文字直接读内容 - 样式不可控：
<details></details>内部箭头无法彻底移除或自定义，且无法独立控制警告文案和折叠区域的样式分离
更稳妥的做法是用 <div> + ARIA 属性手动实现，比如：<pre class="brush:php;toolbar:false;"><div role="region" aria-label="剧透警告：以下内容包含《奥本海默》结局">
<button aria-expanded="false" aria-controls="spoiler-1">⚠️ 含剧透，点击展开</button>
<div id="spoiler-1" hidden>…</div>
</div></pre>
<h3>
<code>aria-label 和 aria-describedby 到底该选哪个
关键看提示信息是否**可复用、是否需要被多个元素引用**：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
aria-label：适合一次性、上下文明确的提示，比如单个剧透段落，直接把警告文案塞进去，简洁 - 用
aria-describedby：适合多处引用同一类说明（如全站统一的“含暴力画面”定义），把描述写在<div id="warning-violence"> 里，再让多个按钮通过 <code>aria-describedby="warning-violence"关联 - 别混用：同一个元素上同时设
aria-label和aria-describedby，前者会完全覆盖后者，屏幕阅读器只读aria-label -
hidden是布尔属性，设了就隐藏，但它是强制 display: none，CSS 过渡对其无效；必须配合 class 切换（如is-hidden）才能做动画 - 用
max-height做收起动画时，要预估内容最大高度，否则过渡会卡顿；纯opacity+visibility更安全，但视觉上不够“折叠” - 旧版 Safari（≤15.6）对
display: contents下的 ARIA 属性支持差，如果警告容器用了这个，aria-labelledby可能失效
折叠动画和 hidden 属性的兼容性坑
想加淡入/滑动效果？小心这几个点：
最简健壮方案：用 class="spoiler-collapsed" 控制 height 和 overflow，JS 切换 class，CSS 定义过渡，不依赖 hidden。
真正难的不是怎么写出来，而是判断哪些内容该标、标到什么粒度——一段对话要不要标剧透，一张角色图要不要标“含毁容画面”，这些没标准答案，得看用户场景和社区共识。代码只是工具，提示本身得有分寸感。
