anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
html解析器强制修正使被拆分为...，因无连字符且未注册，不属允许的短语内容；合法嵌入需名称含连字符并调用customelements.define()注册，但w3c标准未将任何自定义元素默认纳入短语内容。
为什么 <p></p> 里不能直接放 <spoiler></spoiler>
浏览器会直接忽略你的意图，把 <p><spoiler>...</spoiler></p> 解析成 <p></p>
<spoiler>...</spoiler><p></p>。这不是渲染 bug，是 HTML 解析器的强制修正：因为 <spoiler></spoiler> 没带连字符，不被识别为合法自定义元素，自然不属于 <p></p> 允许的“短语内容”（phrasing content）。
常见错误现象：
-
document.querySelector('p spoiler')返回null，哪怕 DOM 看起来“在那儿” - CSS 选择器
p > spoiler完全不生效 - 用 DevTools 查看实际 DOM 结构，会发现
<p></p>已被自动闭合
怎样让自定义标签合法嵌入 <p></p>
必须同时满足两个硬性条件：
- 名称含至少一个 ASCII 连字符，例如
<spo-iler></spo-iler>、<my-button></my-button>，不能是<spoiler></spoiler>或<mybutton></mybutton> - 需通过
customElements.define()正式注册，否则即使有连字符，解析器仍视其为未知标签，同样触发自动闭合
注册示例：
customElements.define('spo-iler', class extends HTMLElement {
connectedCallback() {
this.style.display = 'inline';
}
});
注意：注册后它才被归类为“自主型自定义元素”，才可能进入 <p></p> ——但最终是否允许，仍取决于规范是否将其列为 phrasing content。目前仅部分浏览器在宽松模式下接受，**W3C 标准并未将任何自定义元素默认纳入 phrasing content**。
更稳妥的替代写法
别强求塞进 <p></p>，改用语义与结构双合规的方式：
- 用
<span></span>+role="region"+aria-label模拟可折叠语义，例如：<span role="region" aria-label="点击展开说明">...</span> - 把自定义元素提到段落外，用 CSS 视觉上“对齐”：
<p>文字内容</p> <spo-iler>隐藏块</spo-iler>，再通过margin-top: -1em等微调视觉位置 - 若需内联交互行为（如点击展开），优先用原生
<details><summary></summary></details>，它本身就是 phrasing content，且无需 JS 即可工作
容易被忽略的兼容性细节
即使你用了 <spo-iler></spo-iler> 并完成注册，在旧版 Safari（≤16.4）或某些 WebView 中，它仍可能被当作未知标签处理，导致解析失败。更隐蔽的问题是：
- 未注册时，
<spo-iler></spo-iler>在 HTML 解析阶段就被丢弃，JS 无法监听其connectedCallback - 用
innerHTML动态插入含自定义标签的字符串，若注册尚未完成，该标签不会升级（upgrade），始终是普通 HTMLUnknownElement - 服务端渲染（SSR）环境若未同步注册逻辑，首屏 HTML 会直接暴露未升级的标签，触发解析修正
真正安全的做法，是把“需要嵌入段落”的交互需求，转译为原生短语级元素组合，而非依赖自定义标签的嵌套自由度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
