lang属性必须写在<html>标签上，因屏幕阅读器、Chrome翻译按钮、搜索引擎和CSS :lang()仅识别此处声明；写在<body>或<div>中会导致<title>等不继承语言信息，引发读音错误、无翻译按钮、样式失效及SEO降权。
lang 属性必须写在 <html> 标签上，其他位置无效——这是唯一能让屏幕阅读器、Chrome 翻译按钮、搜索引擎和 CSS :lang() 正确识别页面语言的方式。
为什么不能写在 <body> 或 <div> 里
浏览器和辅助技术（如 NVDA、VoiceOver）在解析 HTML 最初几毫秒就读取 <html lang="zh-CN">，并据此加载中文语音库、切分音节、匹配词典。写在 <body lang="zh-CN"> 里，<title> 和 <meta name="description"> 完全不继承它，导致这些关键语义信息“失语”：
- 屏幕阅读器把“行”读成 /hæŋ/ 而非 /ʃəŋ/
- Chrome 地址栏不出现翻译按钮，或点了直接翻成日语
-
:lang(zh-CN) { quotes: "“" "”"; }样式完全不生效 - Google 可能将全中文页识别为“未标注语言”，影响搜索排名
lang 值怎么填才不被忽略
必须严格符合 BCP 47 规范，大小写不敏感但惯例小写；非法值（如 zh_china、Chinese、zh）会被静默忽略：
- 中文优先用
zh-CN：覆盖拼音、声调、词典最全，NVDA/JAWS/VoiceOver 全部稳定支持 - 别用
zh-Hans：只表示“简体字”，不绑定地域，旧版 Edge 或某些翻译插件可能 fallback 到英文 TTS - 别用
zh：过于宽泛，iOS VoiceOver 可能直接用英文引擎处理多音字 - 英文必须用
en-US或en-GB，english、en_US（下划线非法）、EN-us（大小写错位）都无效
局部外语内容怎么加 lang
主语言靠 <html lang="zh-CN"> 确立，嵌入的外语内容需显式标注子元素 lang，否则屏幕阅读器仍用中文规则硬读：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 单个术语：
<span lang="en">API</span>→ 正确读作 /ˈeɪ.piː.ˈaɪ/ - 整段英文：
<p lang="en">This is a code example.</p> - 代码注释：
<pre lang="en"># Initialize counter</pre>（注意不是lang="bash"） - 避免滥用：
<div lang="en">包裹多个段落会破坏语义层级，也干扰父级:lang(zh)的 CSS 匹配范围
动态改 document.documentElement.lang 有用吗
基本没用。屏幕阅读器在 DOM 解析初期就缓存了 <html> 的初始 lang 值，后续 JS 修改不会触发语音引擎重载或文本重分析：
- 单页应用（React/Vue）必须在服务端渲染（SSR）或静态生成阶段注入真实语言值
- Next.js 应在
app/layout.tsx中通过localeprop 注入，确保首屏 HTML 就含正确lang - 若真要做运行时切换（比如 demo 页），至少要同步触发
document.title = document.title，强制屏幕阅读器重新读取根节点
最容易被忽略的一点：字符编码和语言声明是两件事。<meta charset="UTF-8"> 解决乱码，<html lang="zh-CN"> 解决“谁来读、怎么读、往哪翻”。两者都得在 <head> 里，且都得写对位置、写对值。
