将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
html中void elements（如、）必须不写闭合标签，否则非法；normal elements（如、、、、）必须显式闭合，否则导致内容嵌套错乱。
哪些 HTML 标签必须写闭合，哪些能自闭合
浏览器对标签闭合的要求不是“可选”，而是由 HTML 规范明确定义的：有些标签天生不能有结束标签，写了反而可能被解析为两个标签；有些必须显式闭合，否则内容会意外嵌套或截断。
关键看 HTML Living Standard 的元素分类——不是看习惯、不是看旧教程，更不是看“看着顺眼”。比如 <img> 在 HTML5 中是 void element，它没有结束标签的语义，<img> 是非法的，浏览器会忽略 ，甚至可能把后续内容误判为 <img> 的子节点。
-
<br>、<hr>、<input>、<meta>、<link>、<source></source>等属于 void elements，**不允许**写或<input>（XHTML 风格在 HTML 文档中无意义） <div>、<code><p></p>、<span></span>、<section></section>、<article></article>等属于 normal elements，**必须**有对应结束标签，<p>hello</p>不会自动补全，后续内容会被包进这个未闭合的<p></p>里-
<script></script>和<style></style>必须闭合，哪怕内容为空：<script></script>，不能写成<script></script>—— 否则 JS 不执行，CSS 不生效 - 在纯 HTML 页面中，用
<img src="a.jpg">，不要加斜杠 - 如果项目强制要求 XML 兼容（极少见），应统一用 XHTML MIME type（
application/xhtml+xml），并确保整个文档严格符合 XML 规则——但这已基本退出主流实践 - VS Code 或 WebStorm 的 Emmet 默认展开
img为<img src="">，这是正确行为；若插件输出/>，建议关掉或换配置 -
<textarea></textarea>必须成对：<textarea>默认文字</textarea>，即使为空也要写<textarea></textarea> -
<select></select>同理，哪怕只有一项：<select><option>选我</option></select> - 注意：
<option></option>本身是 normal element，但可以省略结束标签（HTML 特殊规则），不过建议始终写全，避免嵌套歧义 - 服务端拼 HTML 字符串时，一律按 HTML5 规范写：void elements 不加
/>，normal elements 必须闭合 - React/Vue/Svelte 中，直接写 JSX/模板语法即可，它们会保障输出合法 HTML；但凡要
innerHTML或v-html，先用DOMParser检查字符串是否结构完整 - CI 流程中加 HTML lint（如
html-validate），规则启用了no-self-closing-element和require-end-tags能提前暴露问题
为什么 <img src="a.jpg"> 在 HTML 里是错的，但不报错
因为 HTML 解析器对错误宽容。你写 <img src="a.jpg">，浏览器会把它当作 <img src="a.jpg"> 处理，斜杠被忽略。这不是“支持”，是“容错”。但这种写法暴露了混淆 XHTML 和 HTML 的思维惯性。
真正的问题在工具链：某些模板引擎（如早期 Vue 单文件组件）、linter（如 eslint-plugin-html）、或静态站点生成器，在解析时可能按 XML 规则处理，把 /> 当作结束信号，导致属性截断或结构错乱。
<textarea></textarea> 和 <select></select> 为什么不能自闭合
这两个标签看起来像“容器”，但内容是用户输入或选项文本，它们的 DOM 行为依赖开始与结束标签之间的文本节点。写成 <textarea></textarea> 或 <select></select>，浏览器会当作空标签处理，内部默认值、占位符、初始选项全部丢失。
典型错误现象：<textarea placeholder="输入..."></textarea> 渲染出来是空白框，且无法聚焦输入；<select><option value="1">A</option></select> 如果漏写 ，后面所有 <div> 都可能被吞进 <code><select></select> 的 DOM 子树里，样式和事件全乱。
服务端模板或 JSX 里怎么避免闭合陷阱
问题不在 HTML 本身，而在模板语法和编译阶段的解析逻辑。比如 EJS、Nunjucks 里混写原生 HTML，或 React 中用 dangerouslySetInnerHTML 注入字符串，一旦字符串含未闭合标签，就会污染整个 DOM 结构。
更隐蔽的是 JSX：它看似 XML，但实际编译为 JS 对象，<img> 是合法 JSX 语法（等价于 React.createElement('img')），但最终渲染出的 HTML 还是 <img>。这时候如果手写字符串拼接 HTML（比如构造邮件模板），就极易把 JSX 习惯带进去，写出 <div>
<img>hello</div> —— 在 HTML 环境下，“hello”会被当成 <img> 的子节点。
最容易被忽略的是：动态插入的 HTML 片段（比如富文本编辑器输出、Markdown 渲染结果）根本不管你的闭合习惯，它只负责生成字符串。这时候不验证结构，上线后某个 <p></p> 漏闭合，整页布局就可能塌掉——不是报错，是静默错乱。
