所有含文本的语义化标签必须显式设置lang属性，否则辅助技术、拼写检查和CSS断字失效；外文引文、代码块、alt文本等均需独立标注符合BCP 47标准的语言值。
为什么只设不够用
浏览器和屏幕阅读器按每个元素自身的lang属性决定标点宽度、字体回退链、语音朗读方式——不继承父级。你给<html lang="zh-CN">设了主语言，但页面里一段法语引文<p>Merci beaucoup</p>仍会被当成中文朗读，顿号间距错、连字符不生效、Chrome 翻译按钮可能压根不出现。
常见错误包括：<blockquote>没加lang、<pre lang="bash">被误改成lang="zh-CN"、或以为<div lang="en">能覆盖整个子树而漏掉内部<p>和<h2>。
哪些元素必须显式加lang属性
所有含文本的语义化标签都要手动加，不是“可选”而是“必须”。否则辅助技术、拼写检查、CSS hyphens: auto都失效。
-
<h1>到<h6>、<p>、<section>、<footer>等——值与当前语言包一致，如lang="zh-Hans" -
<blockquote lang="fr">Merci</blockquote>、<cite lang="ja">『源氏物語』</cite>——外文引文/专有名词需独立标注 -
<pre lang="bash">curl -X POST</pre>、<code lang="sql">SELECT * FROM users;</code>——保留原lang值，这是合法混排，别覆盖 - 跳过
<script>、<style>、<meta>——它们不参与文本渲染，设了无效
lang值写错比不写更糟
非标准写法会让浏览器直接忽略该属性，相当于白写。比如lang="zh_CN"、lang="Chinese"、lang="ZH-CN"（大小写敏感）全都不生效。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须严格遵循 BCP 47 标准：
- 简体中文：用
zh-Hans或zh-CN（后者更常见，但前者是现代推荐） - 繁体中文：用
zh-Hant或zh-TW - 英文：用
en（通用）或en-US（带区域） - 代码块语言标识（如
bash、sql）不是语言代码，但语法高亮工具会识别——可以写，但别拿它当自然语言用
SPA切换语言时怎么同步更新局部lang
只执行document.documentElement.lang = "ja-JP"远远不够。已挂载的<p lang="en">不会自动变，屏幕阅读器仍按旧语言上下文朗读，标点间距、字体回退全错。
正确做法是遍历并更新所有含lang的元素：
- 先收集所有带
lang属性的元素：document.querySelectorAll('[lang]') - 排除明确要保留原语言的节点（如
<pre lang="bash">、<code lang="py">） - 对剩余节点批量赋新值：
el.lang = 'ja-JP' - 动态插入的 DOM（如弹窗、AJAX 表格行）插入后必须立即调用该逻辑，否则不会自动生效
最容易被忽略的是：<img alt="logo">的alt文本属于可读内容，它的父容器<figure>或自身也得有对应lang——否则 VoiceOver 仍用中文引擎读英文单词。
