将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用表达对话最语义化，因html规范明确认其适用于“术语-定义”对，天然匹配“说话人-话语”关系，优于、、及误用的。
用 <dl></dl> + <dt></dt> + <dd></dd> 表达对话结构最语义化
HTML 没有专门的 <dialog></dialog> 标签来排版日常对话（比如客服聊天记录、剧本台词），但 <dl></dl>（definition list）是唯一被 HTML 规范明确认可用于“术语-定义”对的标签，天然适配“说话人-话语”这种成对关系。比用一堆 <p></p> 或 <div> 更利于读屏器识别、SEO 抓取和后期样式控制。
<p>常见错误是把对话硬塞进无序列表 <code><ul></ul> 或滥用 <blockquote></blockquote> —— 前者语义是“并列项目”，后者专指“引用外部内容”，都不符合对话中角色与发言的绑定逻辑。
-
<dt></dt>放说话人（如<dt>小明</dt>），必须紧跟在<dl></dl>内，不能空着 -
<dd></dd>放对应话语，可多行，可嵌套<em></em>、<strong></strong>甚至<time></time> - 一个
<dt></dt>可对应多个<dd></dd>（比如一人连续说两句），但一个<dd></dd>不能跨多个<dt></dt>
- 小明
- 今天作业做完了吗？
- 小红
- 做完了，还检查了两遍。
- 发来的
避免用 <div> 或 <code><p></p> 堆砌对话的三个理由
很多人图省事用 <p></p> 加 CSS 类模拟对话，例如 <p class="speaker">小明</p>
<p class="message">…</p>。这在视觉上可行，但会丢失关键信息：
- 无障碍设备无法区分“谁在说”和“说了什么”，读屏器会把所有
<p></p>当作普通段落线性朗读 - 搜索引擎无法建立说话人与内容的归属关系，影响结构化数据提取
- 后续想加时间戳、语音气泡方向（左/右）、头像图标等，得靠 JS 动态判断类名，而
<dt>/</dt> <dd></dd>天然提供层级锚点
<dialog></dialog> 标签不是用来排版静态对话的
HTML5 引入了 <dialog></dialog>，但它专指“模态弹窗”或“用户可交互的对话框”，比如确认删除的弹层。W3C 明确说明：它不适用于标记页面内的对话文本流。强行用它会导致：
- 默认隐藏（需调用
.show()或.showModal()才可见） - 浏览器强制添加焦点管理、ESC 关闭等行为，干扰正常阅读
- 多数屏幕阅读器会将其识别为“临时界面组件”，而非内容主体
所以，看到文档里写 <dialog></dialog>，别下意识觉得“对话就该用它”——那是对标签用途的根本误读。
需要时间戳或角色标注时，优先用 <time></time> 和 <span></span> 嵌套
纯 <dl></dl> 不支持附加元数据，但可以在 <dd></dd> 内安全嵌套语义化子标签：
- 用
<time datetime="ISO8601"></time>包裹时间，机器可解析，CSS 也能单独选中样式 - 用
<span></span>加data-role属性标注角色类型（如<span data-role="admin"></span>），比 class 更利于 JS 提取 - 避免在
<dt></dt>里塞图标或头像 img —— 那属于装饰，应由 CSS::before实现，保持结构干净
复杂对话系统（如客服日志）最终要导出结构化数据，<dl></dl> 的扁平层级比嵌套 <div> 更容易被 XPath 或 CSS 选择器精准定位。</div>
