lang属性决定翻译插件使用的语言模型，必须设在html根标签且符合BCP 47格式（如zh-CN），其他位置或错误写法均无效；多语言内容需在语义元素上显式标注lang，并配合translate="no"防止误译。

lang 属性本身不命令翻译插件“开始翻译”，但它决定了插件用哪种语言模型来理解、分词和处理文本。写对了，插件才能准确识别哪段是中文、哪段是英文、哪段是代码注释；写错了或漏写了，插件就只能靠字符猜——结果常是英文被当乱码、日文引文被套上中文发音、API 名称被翻成“获取数据函数”。

根标签必须写对，且只认

所有主流翻译插件（Google 翻译、DeepL 浏览器扩展、Edge 翻译栏）在页面加载初期就读取 html 标签的 lang 值，作为整页主语言基准。其他位置全无效：

• ：只影响 CSS 的 :lang() 匹配，插件完全忽略
• ：HTML5 已废弃，现代插件一律不读
• document.documentElement.lang = "zh-CN"（JS 动态改）：页面已加载后才执行，插件早已完成语言推断，基本不起作用

值必须严格符合 BCP 47 格式

插件依赖标准语言标签匹配内置词典和语音模型。非法或模糊写法会被静默降级为 und（未知语言），触发错误 fallback：

• ✅ 正确：zh-CN、en-GB、ja-JP、pt-BR（小写 + 连字符 + 地区码）
• ❌ 错误：zh_CN（下划线）、ZH-cn（大小写混用）、Chinese（非标准字符串）、zh（太宽泛，部分插件无法激活简体中文专用模型）

多语言混排必须局部显式标注

插件不会从父容器“继承”语言，也不会跨元素推测。中英文术语对照、代码块、引文等，必须在对应语义元素上直接加 lang：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• ✅

  快速排序 quick sort

• ✅

  C'est magnifique.

• ✅

  curl -H "Content-Type: application/json" ...

  （别用 lang="bash"，bash 不是语言）
• ❌

  API Key

  （
  无语言语义，插件不认）

  专有名词和不可译内容要加 translate="no"

  lang 告诉插件“这是什么语言”，translate="no" 告诉插件“这段别翻译”。两者配合才防误译：

  • 技术词：useState
  • 品牌名：React Router v7
  • 混合重点：

    使用 fetch()/GET 请求数据

  注意：translate="no" 必须加在最内层承载文本的元素上（如 mark、code），加在父级 p 或 div 上，多数插件不响应。

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