将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
浏览器不报错但会自动纠错html嵌套错误，导致源码与实际dom结构不一致，引发表单失效、语义标签错位、css/js失灵等问题；应使用w3c验证器定位首个错误并优先修复。
HTML标签嵌套错误不会报错，但会悄悄改写你的DOM结构——你写的代码和浏览器实际渲染的，根本不是一回事。
为什么浏览器不报错却页面乱套
浏览器解析HTML时遇到非法嵌套（比如<p></p>
<div></div>），不会中断加载，而是自动“纠错”：它按自己的规则补闭合、挪层级、丢标签。结果就是你在源码里看到的结构，和Elements面板里看到的真实DOM完全对不上。
常见连锁反应包括：<form></form>突然失效、<nav></nav>被塞进<header></header>、<ul></ul>里<div>变成孤立节点、CSS选择器失灵、JS用<code>document.querySelector找不到元素。
- 别信“能显示就行”，打开DevTools → Elements面板，盯住DOM树的实际嵌套关系
- 禁用所有CSS后观察块级元素是否塌陷或错位，这是父容器被意外截断的典型信号
- W3C验证器（
validator.w3.org）会直接指出Element div not allowed as child of element p这类精准问题
<p></p>里不能放<div>、<code><h1></h1>、<ul></ul>等块级元素
HTML规范明确限制<p></p>只能包含行内内容（文本、<span></span>、<a></a>、<img>等）。一旦嵌套块级标签，浏览器会立即关闭<p></p>，把后续内容扔到外面。
错误写法：
<p></p><div>文字</div>→ 实际解析为
<p></p>
<div>文字</div>- 想包裹多行内容？用
<div>或语义化标签如<code><article></article>替代<p></p> - 想加标题或列表？把
<p></p>换成<section></section>，再在其内部放<h2></h2>和<ul></ul> - VS Code开启
editor.matchBrackets，光标停在<p></p>上能立刻高亮匹配的，避免手动数漏
自闭合标签误加>或
<img>、<input>、<br>、<hr>是void元素，在HTML5中**禁止闭合**。写成<img src="x">会被当成两个标签：第一个被忽略，第二个被当作普通容器，后续所有嵌套整体右移一级。
错误写法：
<div>@@##@@<p>文字</p> </div>→ 实际DOM可能是
<div><img src="a.jpg"></div>
<img src="a.jpg"><p>文字</p>- 统一用
<img>（HTML5推荐省略/>），不要加 - W3C验证器会报
Element img is not closed，这类警告必须处理，不是可忽略提示 - 模板字符串拼接时尤其危险（如EJS/JSX），建议用组件化代替手拼，或加注释标明层级：
<!-- end user card -->
<form></form>、<nav></nav>、<footer></footer>的语义嵌套边界
这些标签不是视觉容器，而是语义区块。违反语义嵌套会导致结构被重排，且无障碍支持失效。
典型错误：
• 把<nav></nav>塞进<header></header>（<header></header>只应含本区块标题类内容）
• 在<main></main>里放<footer></footer>（页面级页脚必须是直系子元素）
• 用空<form></form>分隔不同表单区域（后续控件全部脱离表单作用域）
- 修正方式：
<header></header>与<nav></nav>并列，同属外层<section></section>；<footer></footer>提到<main></main>外部 -
<form></form>必须完整包裹所有相关控件，action和method属性不可缺，否则提交行为可能静默失败 - 用JS做兜底检查：
this.closest('form')确认submit按钮是否真在有效<form></form>内
最常被忽略的一点：嵌套错误极少单独存在。W3C验证器报出的第一条错误，往往是根因；修完它再重新校验，后面一堆报错通常自动消失。别急着全改，先盯住第一个<div>没闭合、第一个<code><p></p>里塞了<div>、第一个<code><img src="x">多写了——这些才是真正的起点。
