lang属性必须写在标签上才生效，浏览器、屏幕阅读器、搜索引擎和chrome翻译仅识别该位置的值；错误写法如、或均无效，正确格式须符合bcp 47规范，如zh-cn、en-us。
lang必须写在html>标签上才生效
浏览器、屏幕阅读器、搜索引擎和Chrome翻译功能，全部只认html元素上的lang属性——写在body、div甚至title里，等于没写。常见错误包括：（整页语言声明失效）、（非法值被忽略）、（下划线不合法，BCP 47要求连字符）。
实操建议：
- 静态页直接硬编码：
或 - SSR场景下，务必根据请求头
Accept-Language动态生成该值，不能等JS执行后再补 - Vue/React项目中，检查
index.html里的lang是否随i18n状态同步更新，否则首屏就错 - 改完后立刻触发
document.title = document.title，强制屏幕阅读器重读根节点语言
值必须符合BCP 47规范，大小写和分隔符都不能错
zh-CN有效，ZH-CN、zh_cn、zh都不可靠。iOS VoiceOver对zh可能fallback到英文TTS；旧版Edge对zh-Hans支持不全；en-us虽不报错但易引发模板不一致，统一用小写+短横线最稳。
关键规则：
- 语言子标签小写：
fr、ja、pt - 地区子标签大写：
FR、JP、BR - 组合用短横线：
fr-FR、pt-BR、zh-TW，不能用下划线或空格 - 品牌名/代码片段等短内容，建议显式加
lang="en"，哪怕页面是中文
局部语言切换要用子元素lang覆盖，不能依赖继承或猜测
浏览器不会自动识别「这是法语引文」「这是Shell命令」。不加lang，整段就按html的默认语言处理：中文页里<p>curl -X POST</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
<p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>会被VoiceOver用中文音节硬读，拼写检查标红，字体fallback也可能错乱（比如把ls塞进中文字体里显示为方块）。
正确做法：
- 外文段落：
<p lang="fr">Merci beaucoup.</p> - 代码块：
<pre class="brush:php;toolbar:false;" lang="bash">npm install</pre>或<code lang="en">useState - 双语表格每行标注：
<tr> <td lang="zh-CN">用户</td> <td lang="en-US">User</td> </tr> - 避免滥用：
span或div仅作样式用途时，别加lang，干扰可访问性树构建
lang和translate、dir、hreflang不是一回事，混用会出问题
lang回答“这是什么语言”，translate="no"回答“要不要被浏览器翻译”。两者行为独立：translate="no"能抑制Chrome右键翻译提示，但Safari不支持、Firefox行为不一致；它完全不影响屏幕阅读器——后者只看lang。
常见误配：
- 给阿拉伯语页面只设
lang="ar"却不加dir="rtl"：光标位置、Tab顺序、inputplaceholder渲染全错 - 在
link标签里写hreflang="zh-CN"，以为能替代html lang：这是用于多语言站点版本发现的，和页面内语言声明无关 - 第三方组件（如评论插件）插入DOM时自带
lang="en"，覆盖了父级设置：需检查并手动重置
真正容易被忽略的是动态插入内容：通过innerHTML或框架render生成的新节点，如果没同步设置lang，它们就处于无语言上下文状态——拼写检查、CSS :lang(zh)匹配、hyphens断字全部失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
