lang属性必须写在html根标签上，如，写在body或子元素无效；多语言局部切换可用子元素lang；js动态修改document.documentelement.lang对已加载内容基本无效。
lang 属性必须写在 html 标签上，其他位置基本无效
浏览器、屏幕阅读器、搜索引擎都只认根元素上的 lang 声明，写在 body、div 或任何子元素上，主体语言就等于没声明。
常见错误现象：
-
→ 读屏软件仍按系统默认语言朗读 -
<meta http-equiv="Content-Language" content="zh-CN">→ 浏览器忽略，HTML5 已明确弃用 -
或（非法值）→ 被视为“未知语言”，比不写还糟
正确做法是服务端根据用户请求头 Accept-Language 或路由路径（如 /en/about）直接输出带对应 lang 的 HTML。硬编码最稳，比如：。
选哪个语言代码：优先用 zh-CN，别用 zh 或 zh-Hans
zh-CN 是事实标准，兼容性最好；zh 过于宽泛，不指明简繁体和地域，部分辅助技术可能降级处理；zh-Hans 强调简体字但未绑定地域，某些旧版读屏或 SEO 工具识别不稳定。
所有值必须符合 BCP 47 规范，大小写不敏感但惯例小写。不要拼错，比如 zh-china、zh_CN、ZH-CN 都是无效值。
多语言页面中，局部切换可用子元素 lang，例如：<p>这句中文<span lang="en">and this is English</span></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> —— 这样 :lang(en) CSS 才能精准命中。
JS 动态改 document.documentElement.lang 几乎没用
页面加载完成后用 JS 修改 lang，对已激活的屏幕阅读器、已索引的搜索引擎、已解析的 CSS :lang() 规则均无实际影响。
如果你真需要运行时语言切换（比如 demo 页），至少做到：
- 同步更新
document.documentElement.lang - 遍历并重设所有已渲染元素的
lang属性（尤其是body下带lang的容器） - 手动触发
aria-live提示，告知读屏用户语言已变
但请注意：组件内部逻辑（比如日期格式、翻译弹窗）不会因 lang 变化而自动响应——它只管语义和可访问性，不管业务逻辑。
:lang() CSS 选择器怎么写才真正生效
:lang(zh) 只匹配 lang="zh" 的元素，不匹配 lang="zh-CN"；想覆盖更广，用 :lang(zh-CN), :lang(zh-Hans), :lang(zh-Hant) 显式列举，或退而求其次用属性选择器 [lang^="zh"]（但注意它会误伤 lang="zh-XX-YY" 这类非常规值）。
一个实用技巧：q:lang(ja) { quotes: "「" "」" "『" "』"; } 可让日文引用自动套用日式引号，但前提是 HTML 中对应 <q></q> 元素确实有 lang="ja"。
记住：:lang() 匹配的是元素自身或其祖先的 lang 值，不是内容检测结果——哪怕你把整段英文塞进 <p lang="zh-CN"></p>，它也不会被 :lang(en) 选中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
