lang属性必须显式写在语义化元素上，如、、等，而无语言语义，无法触发屏幕阅读器正确发音；语言码须符合bcp 47标准，css :lang()为精确匹配，动态插入内容需同步设置lang。
lang 属性必须显式写在语义匹配的元素上，不能靠父级继承或 div 包裹
很多开发者以为给一个 <div lang="en"> 包住几段英文就能让屏幕阅读器正确切换发音，其实不行。<code><div> 没有语言语义，读屏软件不会把它当作“一段外语内容”处理，仍按 <code> 的规则朗读英文单词，比如把 “API” 读成“阿皮”。
真正起作用的是带明确语义的标签 + lang：引文用 <blockquote lang="en"></blockquote>，术语用 <span lang="ja"></span>，代码注释用 <pre class="brush:php;toolbar:false;" lang="en"></pre>。这些标签本身代表“这是独立的语言单元”，再配合 lang 才能被辅助技术识别。
-
<p lang="en">This is English.</p>✅ 有效，<p></p>是文本容器，语义清晰 -
<span lang="fr">bonjour</span>✅ 适合单个词或短语 -
<div lang="en"><p>...</p></div>❌ 无效，<div> 不传递语言意图<li> <code><h2 lang="ko">제목</h2>✅ 标题也是语义化元素，可单独声明 - 别指望
:lang(zh)覆盖所有中文变体，得分别写:lang(zh-CN), :lang(zh-TW), :lang(zh-HK) - 若只需统一中文标点，建议直接用
[lang^="zh"]（属性选择器前缀匹配），更实用 - 嵌套时，子元素
lang会覆盖父级，但不会“取消”父级样式，只是触发自己的:lang()规则 -
<pre class="brush:php;toolbar:false;" lang="en"># 初始化计数器</pre>✅ 注释是英文，语言码合法 -
<pre class="brush:php;toolbar:false;" lang="bash">echo "hello"</pre>❌bash不是语言，应去掉或改用lang="en" -
<q lang="de">Guten Tag</q>✅ 引用德语，语义+语言一致 -
<title lang="en">Home Page</title>❌<title></title>不支持lang属性，浏览器忽略 - 服务端渲染或静态生成时，优先在模板里写死
<p lang="{{item.lang}}"></p> - 前端 fetch 数据后插入，必须把语言信息和文本一起传，比如
{ text: "Hello", lang: "en" } - 别依赖
document.documentElement.lang推断局部语言，它只定义主语言，不决定子内容
局部语言声明要避免覆盖父级 :lang() CSS 规则
如果你写了 ，又在某段里加了 <p lang="en"></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，那 CSS 里 :lang(zh-CN) { quotes: "「" "」"; } 只会匹配到没设 lang 的元素；而 :lang(en) { quotes: "“" "”"; } 才能生效于那段英文。但要注意：:lang(zh) 不会匹配 lang="zh-CN"，:lang(zh-CN) 也不会匹配 lang="zh-Hans" —— 它们是精确字符串匹配。
代码块、引用、标题里的 lang 值不能乱填
常见错误是给 <pre class="brush:php;toolbar:false;"></pre> 写 lang="bash" 或 lang="javascript" —— 这些不是合法语言码，BCP 47 不认。如果里面是英文注释，应该写 lang="en"；如果是日文文档说明，就写 lang="ja"。同理，<q></q> 引用外文时，lang 必须对应实际内容语言，不是“这个引号看起来像英文”就填 en。
动态插入内容时，lang 属性必须随内容一起注入
JS 拼接 HTML 字符串后插入 DOM，如果忘了带上 lang，那段内容就继承父级语言，导致英文被中文引擎硬读。React/Vue 中用 JSX 或模板渲染时，也要确保 lang 是静态属性或由 i18n 数据驱动，而不是事后用 element.setAttribute('lang', 'en') 补 —— 那样读屏软件很可能已经完成解析，补了也白补。
实际项目里最容易被忽略的，是那些看似“一眼看懂”的英文术语——比如 <span>HTTP status code</span>，不加 lang="en"，读屏就会念成“H T T P 状 态 代 码”。语言声明不是装饰，是告诉机器“这段字该怎么读、怎么断词、怎么翻译”的最小契约。
