anything-to-html

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

下载

能直接放在 里的元素仅限短语类（phrasing）内容，如 、、、、、、、、 等；而 、、–、嵌套 、 等块级元素绝对禁止，否则浏览器会自动闭合 导致 dom 断裂。

哪些元素能直接放在 <p></p> 里面

<p></p> 是块级元素，但它的内容模型（content model）受限：只允许嵌套 短语类（phrasing）内容，也就是语义上属于“文本流中的一部分”的元素。

能合法嵌套的常见元素包括：<span></span>、<strong></strong>、<em></em>、@#@#@#@#@#@#@#@#@#@0

—— 表面能显示，但 <div> 在 <code><a></a> 内部已属违规（HTML5 允许 <a></a> 包含块级内容，但前提是它不被嵌在 <p></p> 里）；而一旦 <a></a> 被放在 <p></p> 中，其内部又含 <div>，整个 <code><p></p> 就会在解析时被截断。

再比如富文本编辑器输出的 <p><br></p> <p><br></p>：看似只是空段落，实际每个 <p></p> 都带默认 margin，连续多个会撑开大量空白，且语义上毫无意义。

这类问题往往在审查元素时才暴露：DOM 树里看不到你写的嵌套结构，因为浏览器早就按规范“修复”掉了。

替代方案比硬塞更可靠

当需要组合标题、段落、卡片、列表等结构时，别试图用 <p></p> 当容器，它不是 <div> 的平替。 <p>推荐做法：</p> <ul> <li>标题 + 段落 + 列表 → 拆成独立兄弟元素：<code><h3></h3>、<p></p>、<ul></ul> 并列

带样式的文字块（如引用卡、提示框）→ 用 <div class="card"> 包裹 <code><p></p>，而不是反向操作

表单控件（输入框、下拉框）→ 必须脱离 <p></p>，改用 <div> 或 <code><fieldset></fieldset> 容纳 <label></label> 和控件

需要控制段落间距 → 改 CSS 的 margin 或用 line-height，而不是靠多层 <p></p> 堆叠

真正容易被忽略的是：p 的语义边界非常刚性，它只负责“一段连续的文字内容”。一旦你想往里加结构、布局或交互容器，就已经越界了。