anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
标签不能嵌套块级元素，因其仅允许行内容（如文本、、），浏览器解析时会自动将 文本 修正为两个独立 元素；连续 合法且推荐用于语义化分段，需用 、 或 等容器替代非法嵌套。
标签不能嵌套块级元素，连续多个 <p></p> 标签本身合法，但若试图用一个 <p></p> 包裹另一个 <p></p>（即 <p></p>
<p>内容</p>
<p></p> 被提前关闭，内层变成新节点。这不是样式问题，是解析阶段的 DOM 重写。
为什么 <p></p>
<p>文本</p> 会被拆开
HTML 规范把 <p></p> 定义为“短语内容容器”，只允许包含文本、<strong></strong>、<em></em>、<img> 等行内容（phrasing content）。它不允许自身或其他块级元素作为子节点。
- 你写的
<p></p> <p>A</p> <p>B</p>，实际 DOM 变成：<p>A</p> <p>B</p> -
document.querySelector('p').children返回空 NodeList - CSS 中
p > p或p p选择器永远不匹配 - JS 动态插入时同样触发：
el.innerHTML = '<p></p> <p>x</p>'→ 渲染结果仍是两个平级<p></p>
连续 <p></p> 的合理使用场景
连续段落本就是 <p></p> 的设计用途，比如文章正文、说明文案、用户协议条款等。它们天然适合语义化分段，也利于屏幕阅读器识别。
- 正确：
<p>第一段。</p> <p>第二段。</p> <p>第三段。</p> - 错误：用
<p></p>模拟标题或列表容器（如<p></p> <h3>标题</h3>） - 注意：连续
<p></p>之间默认有 margin，若需紧凑排版，应统一重置p { margin: 0.5em 0; }，而非强行合并
想包裹多段内容？别硬套 <p></p>，换容器
当需要对一组段落加统一样式、动画、JS 控制或语义分组时，<p></p> 不是合适父容器——它没这个能力。该用什么，取决于上下文：
- 通用分组：
<section></section>（语义明确，支持 aria-labelledby） - 文章主体：
<article></article>（带独立语义，可被 RSS 抓取） - 仅需样式隔离：
<div>（无语义，但解析安全） <li>含标题+段落+列表：<code><section><h2>标题</h2> <p>段落</p> <ul><li>项</li></ul></section> - VS Code 或 WebStorm 开启 HTML 校验插件，能提前标出
<p></p> <div>...</div>这类非法嵌套 - W3C Validator（validator.w3.org）会明确报错：
Element div not allowed as child of element p - 用
document.querySelectorAll('p')检查数量是否符合预期，比肉眼数标签更可靠 - 自动生成 HTML 的模板字符串（如 JS 拼接或 SSR 输出）最容易漏掉嵌套合法性检查
容易被忽略的调试盲区
很多人在 DevTools 里看源码就以为结构是对的，其实关键得看 Elements 面板里的实时 DOM 树——那是浏览器真正渲染的基础。
