将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
里不能放，因为html解析器会自动闭合，将移至外部，导致dom结构变为内容，使css选择器p > div失效、js查询失败、样式错乱。
为什么 <p></p> 里放 <div> 会导致样式失效
<p>浏览器根本不会按你写的结构解析——它会直接把 <code><p></p> 关掉，再把 <div> 挪到外面。结果就是你写的 <code><p></p>
<div>内容</div>，实际 DOM 变成 <p></p>
<div>内容</div>。
常见连锁反应包括：document.querySelector('p > div') 找不到元素、CSS 的 p > div 选择器完全不生效、<p></p> 上设置的 padding/margin 看不见效果。
-
<p></p>只允许子节点是行内内容：文本、<span></span>、<strong></strong>、<img>（行内块）、<em></em>等 - 哪怕给
<div> 加了 <code>display: inline，也拦不住浏览器自动拆解 - 想包裹多段内容（含标题、列表），改用
<section></section>或<article></article>，它们才是设计来嵌套块级元素的 - 错误写法：
<h3><div class="meta">副标题</div></h3> - 正确替代：
<h3 class="title">主标题</h3> <div class="meta">副标题</div>，或用<header></header>包裹 - 注意：JS 动态插入时同样受此限制，
el.innerHTML = '<h4><div>x</div></h4>'也会被自动修正 - 典型症状：页面右侧莫名出现空白、表单控件错位、
<label for="x"></label>找不到对应<input id="x"> - VS Code 里开启
editor.matchBrackets，光标停在<img>上不会高亮任何匹配项——这是个信号 - 模板字符串拼接时尤其危险，比如
`<div>${item.imgTag}</div>`，确保item.imgTag是纯<img src="x">，不含闭合标签 - 真正灵活的容器是
<div>、<code><section></section>、<article></article>、<main></main>——它们没有语义嵌套限制，但也不具备<p></p>的段落语义最常被忽略的一点：嵌套错误不会抛 JS 错误，也不会在控制台报红，它只是静默地把你的结构改得面目全非。调试时盯着 Elements 面板比盯着 Console 更有效。
<h1></h1>～<h6></h6> 和 <dt></dt> 同样不能嵌套块级元素
和 <p></p> 一样，这些标签在 HTML 规范中被定义为“短语内容容器”，只接受行内级内容。你写 <h2><ul><li>项</li></ul></h2>，浏览器会解析为 <h2></h2>
<ul><li>项</li></ul>，<h2></h2> 变成空标签。
自闭合标签加 不是语法糖，是 DOM 灾难
<img>、<input>、<br> 是 void 元素，HTML5 中禁止闭合。写成 <img src="x">，浏览器会把它当作两个标签处理：第一个 <img> 被忽略（因无结束符），第二个 被当成未知开始标签，后续所有内容整体右移一级。
块级与行内元素的嵌套边界不是靠 CSS 决定的
很多人以为只要加了 display: inline，就能往 <p></p> 里塞 <div>。不行。HTML 解析阶段就完成了结构修正，CSS 是在 DOM 树建好之后才介入的，它改变不了已被浏览器重排的层级。
<ul>
<li>验证方法：打开 DevTools → Elements 面板，看真实 DOM 结构，别信源码</li>
<li>W3C 验证器（validator.w3.org）会明确报错：<code>Element div not allowed as child of element p
