anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

非法嵌套不报错但浏览器静默修正dom，导致css失效、js查询失败、ssr hydration错误；根源是违反content model规范，如内嵌触发强制闭合，直含致其被移出，漏造成结构错位，须用w3c validator或devtools elements面板验证真实dom。

非法嵌套不会报错，但浏览器会静默重写 DOM，导致 CSS 选择器失效、document.querySelector 找不到元素、SSR hydration 失败——问题根源不是“写错了”，而是违反了 HTML 规范定义的 content model。

为什么 <p></p> 里放 <div> 会让样式和 JS 全面失效<p><a style="color:#f60; text-decoration:underline;" title="浏览器解析" href="https://m.php.cn/zt/300670.html" target="_blank">浏览器解析</a>到 <code><p></p> <div>...</div>

时，会在遇到 <div> 的瞬间闭合当前 <code><p></p>，再把 <div> 移到外面，最后补一个空 <code><p></p>。真实 DOM 变成：<p></p> <div>...</div> <p></p>。

- p > div 这类 CSS 选择器完全不匹配（<div> 已不在 <code><p></p> 内） - 原本靠 <p></p> 的 margin 或 padding 控制的垂直间距消失 - document.querySelector('p') 可能返回空段落节点，而非预期内容容器 - 富文本编辑器或 CMS 输出的 HTML 很容易带这种嵌套，且难以肉眼发现

<ul></ul> 和 <ol></ol> 只能直接包含 <li>，其他都算非法

写成 <ul><div class="item">xxx</div></ul> 是典型错误。浏览器会把 <div> 移出 <code><ul></ul>，变成兄弟节点，<ul></ul> 内部只剩空列表。

- 默认项目符号（list-style）不显示 - ul li 选择器失效，被迫改写为脆弱的 ul + div.item - 屏幕阅读器无法识别语义，影响可访问性 - 动态插入时，服务端与客户端 DOM 结构可能不一致

<table> 漏掉 <code><tbody> 不是“省事”，而是埋雷<p>虽然 <code><table><tr><td>A</td></tr></table> 能渲染，但 W3C 要求 <tr> 必须在 <code><thead>、<code><tbody> 或 <code><tfoot> 内。浏览器会自动补 <code><tbody>，但位置不可控。<ul> - <code>tr:first-child 可能命中 <tbody> 而非实际第一行数据 - <code>table.tBodies[0].rows 在 SSR 场景下可能因服务端未补而客户端补，导致 hydration 失败 - Bootstrap 等框架依赖显式 <tbody> 做样式隔离，漏写就边框/悬停异常 - 检查 Elements 面板时，<code><tr> 缩进层级突然“跳一级”，就是漏了中间层信号 <h3>验证非法嵌套不能只靠肉眼，得看真实 DOM 和规范报错</h3> <p>DevTools Elements 面板显示的结构，才是 JS 查询和 CSS 匹配所依据的真实树。W3C Validator 则能指出“Element <code>div not allowed as child of element p”这类明确违规。

- 打开 Chrome DevTools → Elements，禁用所有 CSS 后观察块级元素是否塌陷或错位 - 把 HTML 片段粘贴到 validator.w3.org，重点看 “Error” 类提示 - 模板拼接、SSR 输出、富文本生成的内容最容易藏非法嵌套，必须单独校验 - <h1></h1>～<h6></h6>、<dt></dt> 同样只接受 phrasing content，放 <p></p> 或 <div> 也会被自动截断 </div>