anything-to-html

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

下载

里不能放 ，因为 html 解析器会强制自动闭合 ，使结构变为 hello； 仅允许 phrasing content（如 、），禁止 flow content（如 、）。

为什么 <p></p> 里不能放 <div> <p>浏览器解析 HTML 时，<code><p></p> 是“短语级”（phrasing content）容器，只允许嵌套内联元素（如 <span></span>、<strong></strong>、@#@#@#@#@#@#@#@#@#@0 —— 只允许 <em>phrasing content</em>。

• ✅ 允许：<span></span>、<em></em>、<time></time>、<img>（带 alt）、<input>（表单控件也算 phrasing）
• ❌ 禁止：<div>、<code><section></section>、<ul></ul>、<h2></h2>、<table>、<code><form></form>
• ⚠️ 容易误判：<button></button> 和 <iframe></iframe> 属于 phrasing content，可以放，但要注意交互语义是否合理

想实现“段落里有区块布局”，怎么写才合法

核心思路是：别硬塞 <div> 进 <code><p></p>，换语义正确、且支持块级样式的替代方案。

• 用 <span></span> + CSS display: block 或 display: flex：它仍是内联元素，但表现像块，且合法
• 用 <figure></figure> + <figcaption></figcaption> 包裹图文组合（语义更准，也支持块级子元素）
• 直接拆成多个 <p></p>：很多所谓“段落内区块”，其实是视觉分组需求，不是语义上的一个段落
• 若必须保留 <div> 结构，就用 <code><div> 替代 <code><p></p>，再用 CSS 控制行高、间距模拟段落效果（比如 margin-bottom: 1em）

  Vue / React 里也要注意这个限制

  框架模板语法（如 v-html、dangerouslySetInnerHTML）输出的 HTML 仍受浏览器解析规则约束。动态拼接时若没校验结构，照样触发自动闭合。

  • Vue 示例：<p v-html="'<div>xxx</div>'></p> → 渲染结果仍是 <p></p><div>xxx</div>
  • React 示例：<p dangerouslySetInnerHTML={{__html: '<div>xxx</div>'}} /> → 同样被修正
  • 安全做法：服务端或组件逻辑里提前做结构校验，或改用 <div> 包裹 + CSS 模拟段落样式

  真正容易被忽略的点是：这个错误不会报 JS 错误，控制台也无 warning，DOM 差异要靠肉眼或调试器逐层点开才能发现。尤其在 SSR 或静态生成场景下，HTML 是直出的，问题更隐蔽。

  ">