lang属性是浏览器、屏幕阅读器和搜索引擎识别语言的唯一依据，必须严格遵循BCP 47标准（如zh-CN、en-US），使用小写语言子标签、大写地区子标签及ASCII短横线连接，错误格式将导致可访问性与SEO失效。
lang 属性不是装饰，它是浏览器、屏幕阅读器和搜索引擎理解“这段文字该用什么语言读、怎么排、归到哪类”的唯一可靠依据。设错或不设，多语言页面的可读性会直接掉档。
lang 属性必须严格按 BCP 47 格式写
常见错误是把 zh_CN、en_us 或 es_ES 当成合法值——它们全无效。BCP 47 要求：
- 语言子标签小写（如
zh、en、es） - 地区子标签推荐大写（如
CN、US、ES） - 语言和地区之间必须用 ASCII 短横线
-，不能用下划线_、中文破折号或空格
✅ 正确：<html lang="zh-CN">、<html lang="en-US">、<html lang="es">（通用西班牙语）
❌ 错误：<html lang="zh_CN">、<html lang="en-us">、<html lang="es/ES">
为什么不能只靠 navigator.language 决定 lang 值
浏览器返回的 navigator.language 是 UI 语言，不是用户真实偏好。比如：
立即学习“前端免费学习笔记（深入）”；
- 安卓 WebView 可能返回空字符串或
und，导致 fallback 失效 - 用户装了简体中文系统但偏好繁体内容（
zh-TW），navigator.language却是zh-CN - 某些企业内网强制设为
en-US，但实际用户需要日语
正确做法：优先读 localStorage 或 URL 参数（如 ?lang=ja），再 fallback 到 navigator.language，最后才用默认值（如 zh）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
lang 属性要分层设置，不只是 <html>
整页用一个 lang 不够。混合语言内容必须局部标注：
-
<p lang="en">This is English.</p>—— 明确告诉屏幕阅读器此处切语言 -
<blockquote lang="fr">C’est une citation.</blockquote>—— 引用法语原文时保持语音语调准确 - 嵌套时，子元素继承父级
lang，但可被更具体的值覆盖
漏标会导致屏幕阅读器用错误音调朗读，搜索引擎也可能把混排内容误判为低质量。
:lang() 伪类才是样式适配的关键入口
光设 lang 属性没用，得配合 CSS 才能真正解决排版问题：
:lang(zh) { font-family: "PingFang SC", sans-serif; line-height: 1.8; }:lang(ar) { direction: rtl; text-align: right; }:lang(ja) { font-family: "Hiragino Kaku Gothic Pro", sans-serif; }
注意：:lang() 匹配的是元素自身的 lang 属性，不是祖先的；它比 class 选择器更语义、更稳定，且无需 JS 干预就能生效。
最容易被忽略的点：lang 值一旦写错，Lighthouse 和 axe 工具会直接报 element does not have a valid value for its [lang] attribute，而这个警告在无障碍审计里权重极高——它不是“建议修复”，而是“无法通过”。
