hidden 是布尔属性，存在即生效，不解析值；正确写法仅需 ，hidden="false" 仍隐藏；需 css 兜底 *[hidden] { display: none !important; } 防 fovc。
hidden 是布尔属性，存在即生效，不接受值；它不是 CSS 开关，而是语义化声明“该内容当前不应呈现”，浏览器会直接跳过渲染、焦点和可访问性树。用错写法或混用样式，它就“看似失效”。
hidden 属性怎么写才在 HTML 中真正生效
只认“有没有”，不解析值。哪怕写成 hidden="false" 或 hidden="0"，元素照样被隐藏——浏览器压根不看右边的字符串。
<div hidden> ✅ 推荐，最简、语义清晰 <li><code><div hidden=""> ✅ 空字符串等价于存在，但冗余 <li><code><div hidden="false"> ❌ 仍隐藏，别被字面迷惑 <li> <code><input type="hidden" hidden>⚠️ 多余，type="hidden"和hidden完全是两回事- 根本解法只有 CSS 兜底：
[hidden] { display: none !important; }，必须加!important，且放在基础样式最末或@layer base中 - 别指望 JS 补救：首屏渲染发生在 JS 加载前，CSS 是唯一可靠防线
- 如果本该“初始可见”，就别用
hidden，改用 class 控制，比如<div class="hidden"> + <code>.hidden { display: none; }JS 动态控制 hidden 的正确姿势
DOM 元素原生支持
hidden作为布尔属性读写，这是唯一推荐方式。绕开它用setAttribute或style.display都容易翻车。- 隐藏：
el.hidden = true（自动添加属性） - 显示：
el.hidden = false（自动移除属性，不是设成"false"字符串） - 判断状态：
if (el.hidden)—— 别用el.hasAttribute('hidden')，SSR 场景下它不可靠 - 若之前手动设过
el.style.display = 'none'，切换前必须先清空：el.style.display = ''，否则el.hidden = false仍无效
hidden 和 display: none 混用时最容易踩的坑
两者语义和行为完全不同，强行混用会导致“设了却看不见”或“取消后仍不显示”。
-
hidden是 HTML 语义声明，影响渲染树、可访问性树、表单序列化；display: none只是 CSS 布局控制 - 如果元素已有
style="display: none"，再执行el.hidden = false，它依然不可见——内联样式优先级高于hidden触发的默认样式 - 想做淡出动画？
hidden本身不能过渡。得先el.hidden = false，再加class触发opacity或transform过渡，最后才设el.hidden = true收尾 - 表单中带
hidden的<input>不会提交；若需“视觉隐藏但参与提交”，得用type="hidden"，而不是hidden属性
真正容易被忽略的是：
hidden在 shadow DOM 中不自动继承，自定义组件内部需显式响应宿主上的hidden属性，否则“看似没生效”。 - 隐藏：
特别注意：hidden 对 <template></template>、<script></script> 这类本就不渲染的元素无意义。
为什么加了 hidden 页面还是闪一下（FOVC）
服务端直出 <section hidden></section>，但 CSS 没加载完或 JS 尚未执行 el.hidden = false，用户会先看到内容再消失——这是“Flash of Visible Content”，根源在浏览器渲染时机早于 JS 执行。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
