lang属性决定发音规则而非开关，需全局与局部同步设置以确保语音合成和屏幕阅读器正确解析多语言内容。
lang 属性不是语音朗读的“开关”，而是决定“用哪套发音规则去读”的硬性依据。没它，speechSynthesis.speak() 可能静音、报错，或把“行”读成 háng 而非 xíng——这不是体验问题，是语义失效。
为什么只设
全局 lang 只初始化屏幕阅读器的默认语音引擎，但页面里常有局部多语言内容：英文术语、日文代码注释、法语引文。浏览器不会自动识别这些片段的语言，必须显式声明。
-
<p>《The Art of Computer Programming》</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-US"，中文语音引擎会强行切分单词，读成“特-阿-特-欧夫-科-姆-普-特-尔-普罗-格-拉-明” -
<code lang="en">useState才能触发 IDE 插件英文高亮 + VoiceOver 切换英语发音 -
<td lang="ja-JP">こんにちは</td>避免假名被中文字体渲染，也防止屏幕阅读器跳过该单元格
SpeechSynthesisUtterance.lang 和页面 lang 必须同步
utterance.lang 控制当前语音单元的发音引擎，但它不继承页面 lang；页面 lang 影响屏幕阅读器对 DOM 结构的语义解析。两者脱节，就会出现“嘴在说日语，耳里听中文”的错乱。
- 想让某段文字用日语朗读，必须同时满足：
<span lang="ja-JP">ありがとう</span>+utterance.lang = "ja-JP" - 只设页面
lang不设utterance.lang，speechSynthesis.speak()仍可能 fallback 到系统默认语音（如 en-US） - 只设
utterance.lang不设页面lang，屏幕阅读器无法构建正确可访问树，双语信息可能被忽略
动态语言切换时最容易漏掉的三处同步
SPA 切换语言后，仅改 document.body.lang 或状态变量，90% 的语音功能会失效。DOM、语音合成、屏幕阅读器三者必须一致。
- 必须操作
document.documentElement.lang，不是body，也不是某个 div - 已创建的
SpeechSynthesisUtterance实例不会自动继承新lang，需重新new并显式赋值utterance.lang - 动态插入的新节点（如 AJAX 加载的表格行），必须同步设置其
lang属性，不能只靠 JS 改文本
最常被忽略的点是：语音是否自然，80% 取决于 lang 是否准确、是否嵌套得当——而不是用了多高级的 TTS 库。写错 zh_cn 或漏掉 ja-JP 中的连字符，等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
