lang属性必须为IETF标准格式如zh-CN，因zh单独存在不符合BCP 47规范，会导致屏幕阅读器分词错误、声调错乱、标点停顿异常；多语言混排需在对应元素显式标注lang，不可仅依赖根标签继承。
lang 属性写错或不写，屏幕阅读器大概率会把中文读成日文、英文甚至乱码——这不是“听起来别扭”，而是用户根本听不懂。
为什么 lang="zh" 是错的，必须写 lang="zh-CN"
浏览器和辅助技术（如 NVDA、VoiceOver）依赖 IETF 语言标签标准，zh 单独存在不是合法值，AT 兼容性极差。实际效果是：分词错误、声调错乱、标点停顿异常。
-
lang="zh-CN"→ 简体中文（推荐用于大陆用户） -
lang="zh-TW"→ 繁体中文（台湾地区） -
lang="zh-HK"→ 繁体中文（香港地区） - 绝对不要用
lang="ch"、lang="cn"、lang="zh"
React/Vue 中动态渲染时，lang 值不能靠 JS 拼接后塞进 DOM；必须确保服务端初始 HTML 就带对，否则 SSR 阶段已失效。
多语言混排时，局部 lang 怎么嵌套才安全
一段英文引文、一个外文人名、一段代码注释里的日文——这些都得用 lang 显式标注，否则整页被统一识别为中文，局部内容会被强行“中文化朗读”。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<p lang="en">The quick brown fox...</p> - 错误：
<p><span>The quick brown fox...</span></p>（没声明语言） - 嵌套需闭合：外层
lang="zh-CN"，内层lang="ja"的<blockquote>必须完整包裹，不能只开不关 - 避免过度嵌套：连续三层
lang切换会让部分 AT 缓存混乱，优先合并同类语种块
hreflang 和 lang 完全是两回事，别混用
hreflang 是给搜索引擎和浏览器导航用的（比如 <a href="/en/" hreflang="en">English</a>），它不影响当前页面的语音朗读逻辑。lang 才决定屏幕阅读器怎么读这一段文字。
- 漏写
lang→ 当前元素语音输出不可控 - 只写
hreflang不写lang→ 多语言链接跳转后，新页面仍可能读错 - 双语页面首页同时有中英文区块？每个区块开头必须带对应
lang，不能只在<html>上写一个
容易被忽略的边界场景
表单 placeholder、SVG title、<canvas> fallback 文本、JS 动态插入的弹窗文案——这些地方常被当成“视觉辅助”，但只要它们出现在 DOM 中，且未被 aria-hidden="true" 或 display: none 掩盖，就会被读屏软件捕获并按当前上下文语言朗读。
- placeholder 写中文但父容器
lang="en"？会被读成英文发音 - SVG 中
<title>编辑</title>没加lang="zh-CN"？照样读错 - 用
innerText动态写入提示语时，记得同步设置父元素lang或用aria-label覆盖
最麻烦的不是写错，而是写了但没测——不同 AT 对嵌套 lang 的解析深度不一致，NVDA 和 VoiceOver 在混合脚本（如中+阿拉伯数字+拉丁字母）段落里表现差异明显。
