lang属性必须写在标签上且首屏渲染时即存在，否则屏幕阅读器读错、翻译按钮不触发、:lang()伪类失效；需按路径分目录输出对应lang值（如/zh/下为zh-cn），禁用js动态修改或navigator.language推断。
lang 属性必须在 HTML 根节点渲染时就存在，不能靠 JS 后续补上——否则屏幕阅读器首屏读错、浏览器翻译按钮不触发、CSS 的 ::lang(zh) 伪类直接失效。
lang 值必须匹配真实语言路径，不能硬编码
静态页面没有服务端逻辑，但语言标识仍需动态对应访问路径。比如用户打开 /zh/about.html， 就得真实出现在该文件里，而不是所有页面都写死 lang="en" 或靠 JS 读取 URL 再改。
- 生成阶段就要按语言分目录输出：
zh/下所有 HTML 文件的标签必须带lang="zh-CN"；en/下全部用lang="en-US" - 别用
navigator.language推断：用户浏览器设成日语，但正在看中文页面，推断结果就错 - BCP 47 标准要写全：用
zh-CN不用zh，用en-US不用en——字体回退、标点间距、拼写检查都依赖这个精度
静态托管平台（如 Vercel/Netlify）怎么注入 lang
纯静态环境没法运行服务端代码，但可通过构建时预处理或部署时重写实现路径映射。
- Vercel：在
vercel.json中配rewrites，把/zh/(.*)映射到/_zh/$1，再让构建脚本把_zh/目录下所有 HTML 的lang替换为zh-CN - Netlify：用
_redirects拦截请求，配合netlify.toml的[[plugins]]调用插件，在构建后遍历 HTML 文件并替换 - 本地构建工具（如 Hugo/Jekyll）：模板中用
{{ .Site.LanguageCode }}或{{ page.Lang }}动态插入，确保每个输出页的lang与当前语言上下文一致
lang 属性影响哪些实际功能，不配会出什么问题
它不只是“告诉浏览器这是中文”这么简单，漏掉会连锁引发多个可感知缺陷：
- Chrome 翻译按钮灰色不可点——因为没
lang，浏览器无法确认页面主语言 - Firefox 拼写检查不启动：右键菜单里“语言”选项为空，
contenteditable区域无法校验错字 - CSS
::lang(zh) { font-family: "PingFang SC", sans-serif; }完全不生效，导致中英文混排时字体断裂 - 屏幕阅读器（NVDA/JAWS）朗读时按错误语种切音节，例如把“上海”读成英语重音
- 搜索引擎可能降权：Google 明确要求
lang与hreflang标签协同，缺失会影响多语言站点收录
最容易被忽略的是：即使你写了 lang="zh"，但文件本身是 GBK 编码、HTTP 响应头没声明 UTF-8、<meta charset> 又放在 <title></title> 后面——这些都会让 lang 的语义在解析早期就失效。它从来不是孤立配置项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
