lang必须硬编码在<html>标签中,JS动态修改无效;静态站须为每种语言生成独立HTML文件,如zh/index.html(lang="zh-CN"),并确保值严格符合BCP 47规范。

lang必须硬编码在标签里,不能靠JS补
静态网页生成时,lang属性必须在HTML字符串初始输出阶段就写死在<html>标签上。浏览器、屏幕阅读器、搜索引擎只读取首次解析的HTML源码,后续任何JS修改(比如document.documentElement.lang = "zh-CN")对已加载页面完全无效——它不触发重解析,也不通知辅助技术。
模板里怎么安全插值?防XSS是底线
用模板引擎(如Jekyll、Hugo、Nunjucks)时,lang值若来自配置或数据文件,必须做两件事:
- 确保变量内容符合BCP 47:小写、短横线分隔、无空格(如
zh-CN,不是ZH_cn或zh_CN) - 输出前转义:例如Jinja2用
{{ lang | urlencode }},Nunjucks用{{ lang | escape }},避免lang="zh-CN" onerror=alert(1)这类注入
多语言静态站别用单HTML+JS切换
常见错误是建一个index.html,再靠JS根据URL参数改lang。这会导致:
- 首屏HTML里
<html lang="">或<html lang="en-US">写死,用户切到中文后,<title>和<meta name="description">仍被当英文处理 - Google Search Console报“未声明语言”,Chrome翻译按钮不出现
- 屏幕阅读器从头到尾用英文TTS引擎读中文多音字(如把“行”读成/hæŋ/)
正确做法:每个语言版本生成独立HTML文件,比如index.html(lang="en-US")、zh/index.html(lang="zh-CN"),由服务器或CDN按Accept-Language头302跳转,或靠hreflang显式关联。
立即学习“前端免费学习笔记(深入)”;
:lang()样式生效的前提是根lang合法
写:lang(zh) { quotes: "“" "”"; }却没效果?先检查控制台是否报错,再确认两点:
-
<html lang="zh-CN">是否真实存在且拼写正确(zh-cn小写、短横线、无空格) - 别指望
[lang="zh"]能匹配zh-CN——它要求完全相等;要用[lang|="zh"]或:lang(zh)才支持子标签继承
最易被忽略的是:静态生成工具(如Hugo的languageCode配置)默认可能填zh或en,必须手动改成zh-CN或en-US,否则所有下游链路都失效。



















