将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
lang="zh-cn"才是实际开发首选，因"zh"未指定地区变体易导致屏幕阅读器fallback至粤语或英文引擎，而zh-cn明确指向大陆简体中文，确保语音合成、seo及css:lang()伪类精准生效。
lang 属性不是“写了就对”，写错、漏写、覆盖错，都会让屏幕阅读器读错、搜索引擎降权、甚至影响某些 CSS 伪类（如 :lang()）行为。它必须从 标签开始设，且优先级和继承规则容易被误判。
为什么 lang="zh" 不推荐，而 lang="zh-CN" 才是实际开发首选
ISO 639-1 标准中 zh 是语言代码，但不指定地区变体；浏览器和辅助技术会按实现策略 fallback —— Chrome 可能读作普通话，Edge 可能默认用粤语语音引擎，NVDA 屏幕阅读器在繁体环境可能跳过拼音标注。真实项目中，用户地域明确（如面向大陆用户），就必须用 zh-CN；若支持港澳台，应按页面内容动态切换 zh-HK 或 zh-TW。
以下情况会削弱效果：
-
lang="Chinese"或lang="ch"：非法值，被浏览器忽略 -
<div lang="en">...</div> <p>这段没显式设 lang</p>：<p></p>继承的zh-CN，但开发者常误以为“没写就是默认英文” - Vue/React 模板中只在根组件设
lang，子组件内嵌 HTML 片段未显式继承：SSR 渲染时可能丢失上下文
如何快速验证 lang 是否生效且未被意外覆盖
别只看源码里有没有写，要查最终渲染后的 DOM 状态。打开 Chrome 开发者工具 → Elements 面板 → 点击 标签，确认其 lang 属性值；再右键任意文本节点 → “Reveal in Elements panel”，向上逐级查看最近的带 lang 的祖先元素。
常见失效信号：
- Elements 面板中
节点没有lang属性（模板生成漏了） - 某段中文文案被包裹在
<section lang="en"></section>内，且该lang="en"没有被更内层的lang覆盖 - CSS 中用了
q:lang(zh-CN) { quotes: "「" "」" "『" "』"; }，但引号没变，说明匹配失败 → 很可能该<q></q>所在位置的计算lang值不是zh-CN
框架项目中 lang 属性容易被覆盖的三个典型场景
静态模板、服务端渲染、客户端水合三阶段都可能改写 的 lang。尤其注意：
- Next.js 的
document自定义中，若未绑定 i18n 配置，构建后固定为lang="en" - Vue CLI 项目中，
public/index.html的会被vue-server-renderer忽略，需在entry-client.js中手动document.documentElement.lang = 'zh-CN' - 使用
data-lang或其他自定义属性模拟语言切换（如），但忘了同步更新—— 辅助技术只认标准lang，不读data-属性
最隐蔽的问题往往出在多语言切换后：JS 改了 document.documentElement.lang，但没触发 document.title 或 meta[name=description] 的同步更新，导致 SEO 信息与当前语言不一致。这个细节，连 Lighthouse 都不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
