HTML 中 lang 属性仅声明内容语言，不触发翻译；正确值须符合 BCP 47（如 zh-CN、en-US）；translate="no" 可抑制浏览器翻译提示但兼容性差；hreflang 用于 link 标签声明页面语言版本，与 lang 用途不同。
HTML 中用 lang 属性声明目标语言，不是“显示翻译”
HTML 本身不翻译文本，lang 只是告诉浏览器、屏幕阅读器或搜索引擎「这段内容是什么语言」。它不会触发自动翻译，也不会让页面变出多语言按钮——那是 JavaScript 或服务端逻辑的事。
常见错误现象：lang="zh" 写成 lang="cn"（正确是 zh 或更细粒度如 zh-CN）；整个页面只在 <html> 上设一次 lang，但某段英文引文没单独标注，导致语音朗读错乱。
-
lang值必须符合 BCP 47 标准，比如en、fr-FR、ja、zh-Hant（繁体中文），不能自造缩写 - 嵌套不同语言时，必须逐层标注：比如英文段落里引用一句德语，那
<span lang="de">Guten Tag</span> - 搜索引擎靠这个判断内容语种，影响搜索结果地域相关性；屏幕阅读器靠它切换发音引擎——没标对，读出来就是“中式英语”腔
浏览器自动翻译按钮怎么出来的？
Chrome、Edge 等浏览器检测到页面主语言和用户界面语言不一致，且页面没有明确声明 translate="no"，才可能显示翻译提示条。这不是 HTML 标准功能，而是浏览器私有行为。
容易踩的坑：translate="no" 加在错误位置——它只作用于当前元素及其子元素，加在 <body> 上会阻止整页被建议翻译；加在某个词上却忘了父容器没设 lang，结果浏览器根本识别不出语种差异。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 想禁用翻译提示：在根元素加
translate="no"，例如<html lang="zh-CN" translate="no"> - 想保留翻译机会：确保
<html lang="...">设置准确，且不要全局加translate="no" - 注意兼容性：
translate属性在 Safari 中基本无效，Firefox 不支持该属性——别指望它跨浏览器统一控制翻译入口
快捷语言切换按钮得靠 JS + 多语言资源，HTML 只管标记
所谓“HTML 常用语言快捷按钮”，其实是前端用 JS 切换 DOM 文本、或通过 URL 参数加载对应语言的 JSON/HTML 片段。HTML 本身没有内置语言切换组件。
典型错误：把多个语言的文案都写死在页面里，靠 CSS display: none 切换，结果 SEO 抓取混乱、首屏加载冗余、无障碍体验差。
- 推荐做法：用
data-lang属性标记多语言文案，例如<span data-lang="en">Home</span><span data-lang="zh">首页</span>，再由 JS 按需显示 - 更稳妥方案：服务端根据
Accept-Language头返回对应语言的 HTML，避免客户端 JS 渲染延迟和 SEO 风险 - 性能提醒：如果语言包体积大（比如含富文本），别一股脑塞进 HTML，用
fetch()按需加载，否则初始 HTML 膨胀严重
lang 和 hreflang 的区别别搞混
lang 是描述「当前元素内容的语言」，hreflang 是 <link> 标签里的属性，用于告诉搜索引擎「这个链接指向的是哪种语言/地区的页面」。两者用途完全不同，混用会导致多语言站点被降权。
常见错误：在 <a href="/en/">English</a> 上加 lang="en"，以为这样能申明跳转目标语言——没用，搜索引擎根本不看这个。
- 正确用法：
<link rel="alternate" hreflang="en" href="https://example.com/en/">放在<head>里 - 必须成对出现：每个语言版本都要互相指向，比如 en 版要声明 zh 版，zh 版也要声明 en 版
- hreflang 值必须和实际页面的
<html lang="...">一致，否则 Google 会认为你在欺骗
最常被忽略的一点：区域变体（如 en-US 和 en-GB）之间也要显式声明，不能只写 en 就以为覆盖全部。漏掉这个，英国用户搜到美国版页面的概率会明显下降。
