lang属性必须唯一设置在标签上，中文推荐使用zh-CN；嵌入外文需用lang="en"等显式标注子元素；JS动态修改无效，应通过SSR/SSG或整页刷新实现多语言切换。

必须写在 标签上，且只写一次；其他任何位置或写法都不可靠，屏幕阅读器、搜索引擎和浏览器翻译功能基本不会认。

lang 属性只能设在 标签上

浏览器和辅助技术（如 NVDA、VoiceOver）只在 DOM 解析初期读取 元素的 lang 值，作为整页默认语言依据。它影响发音规则、断词逻辑、标点朗读方式，甚至字体 fallback 行为。

常见错误现象：

• → 不被识别为文档语言，仅可能影响该 内部极少数 CSS :lang() 匹配
• → HTML5 已废弃，所有现代浏览器静默忽略
• 或 （非法值）→ 被视为“未知语言”，部分读屏直接 fallback 到英文引擎

中文该用 zh-CN 还是 zh-Hans 或 zh

三者语义层级不同，实际兼容性差异明显：

• zh-CN：事实标准。明确“简体中文 + 中国大陆规范”，拼音方案、声调规则、词典匹配最全，NVDA/JAWS/VoiceOver 全部稳定支持
• zh-Hans：强调“简体字”，但未绑定地域。适合港澳台用户也用简体的场景，但旧版 Safari 或某些翻译插件可能无法加载对应语音模型
• zh：过于宽泛。不区分简繁、不指明区域，iOS VoiceOver 可能跳过中文 TTS 引擎，把“行”“长”等多音字硬读成英文音节

别写 zh_china、zh_CN、Chinese —— 全部非法，BCP 47 不认，会被静默忽略。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

多语言混排时怎么让屏幕阅读器“切换语种”

主语言靠 确立，但嵌入的英文术语、日文引用、代码注释等，必须显式标注子元素的 lang，否则读屏仍用中文规则硬读：

• 单个外文词：API → 读作 /ˈeɪ.piː.ˈaɪ/，不是“阿皮”
• 整段英文：

  This is a code example.

• 代码块注释：

  # Initialize counter

  （注意不是 lang="bash"）
• 避免滥用：
  包裹多个段落 ——

  无语义，读屏不把它当语言单元处理，且可能干扰父级 :lang(zh) CSS 匹配

  JS 动态改 document.documentElement.lang 几乎没用

  页面加载完成后修改 lang，对已激活的屏幕阅读器、已索引的搜索引擎、已解析的 CSS :lang() 规则均无实际影响。SPA 多语言切换不能只靠 JS patch。

  真正可行的做法只有两种：

  • 服务端渲染（SSR）或静态生成（SSG）：确保首屏 HTML 中 已存在，Next.js/Nuxt 需从路由或 i18n 上下文注入，而非客户端 hydrate 后补
  • 整页刷新：最稳妥。哪怕只是 demo 页手动切换，也比强行 JS patch 更可靠

  如果非要用 JS 改，至少同步做三件事：document.documentElement.lang = "en-US"、遍历重设所有已渲染容器的 lang 属性、手动触发 aria-live 提示 —— 但组件内部逻辑（如日期格式、弹窗文案）不会因此响应，因为 lang 只管语义和可访问性，不管业务逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！