为什么一定要声明网页语言
为页面设置正确的语言不只是“讲究”，它直接影响屏幕阅读器发音、断词与连字、自动拼写检查、语法高亮、浏览器排版与连字符断行、搜索引擎理解与地区定向等。最佳做法是在文档根元素声明默认语言，并在局部混用其他语言时为相应元素单独标记。
一步到位：在 <html> 上声明默认语言
<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<title>你好，世界</title>
</head>
<body>…</body>
</html>
要点：
- lang 放在 <html> 上可作为全页默认语言，其值会被元素继承。
- 值使用 BCP 47 语言标签，例如：en、en-GB、zh-Hans（简体中文）、zh-Hant（繁体中文）、es-419（拉美西语）等。
- 标签大小写约定：语言小写（en），脚本首字母大写（Hans/Hant），地区大写（US/GB）。
多语言页面：给“局部”加 lang
当页面中出现与默认语言不同的片段时，直接在元素上标注：
<p>这是一段中文文本。</p>
<p lang="en">This sentence is in English.</p>
<q lang="fr">C’est la vie.</q>
这样做能让：
- 屏幕阅读器切换到正确的发音；
- 浏览器采用该语言的断词与拼写规则；
- CSS :lang() 选择器精确匹配到对应语言片段（如为法语引号或日文字体单独设样式）。
示例（CSS）：
:lang(ja) { font-family: system-ui, "Hiragino Kaku Gothic ProN", "游ゴシック", sans-serif; }
:lang(fr) q { quotes: "« " " »" "‹ " " ›"; }
中文该写 zh-CN 还是 zh-Hans？
推荐 zh-Hans（简体）与 zh-Hant（繁体）区分书写体系，更准确也更具可移植性。
仅当确实依赖“区域变体”时再加地区，例如 zh-Hant-HK（香港繁体）。
英语常见对比如下：en-US（美式）、en-GB（英式）。
与文字方向配合（阿拉伯语/希伯来语等）
对从右到左（RTL）的语言，配合 dir：
<html lang="ar" dir="rtl">
…
<span lang="en" dir="ltr">HTTP status</span>
</html>
dir="rtl" 设置整体方向，内嵌的 LTR 片段再“局部纠偏”。
注意事项
- 别用 <meta http-equiv="content-language"> 指定页面语言（已过时）。请用 lang。
- 别忘了局部语言：仅在 <html> 写 lang 不能覆盖多语言段落。
- 别乱写代码：cn 不是语言；应写 zh + 脚本/地区。遵循 BCP 47。
- 别忽略可访问性：未设置/设置错误会让读屏发音怪异，影响无障碍合规。
- 别把 hreflang 与 lang 混为一谈：hreflang 用在 <link rel="alternate"> 或站点地图中，用于页面版本的区域/语言指向；lang 是页面内容语言。
实战清单（拿去即用）
- 单语站点：在 <html> 上设置 lang，如 lang="zh-Hans" 或 lang="en-GB"。
- 多语段落：为每个与默认语言不同的元素加 lang。
- RTL 语言：根元素加 dir="rtl"，混排片段局部 dir 修正。
- 样式与排版：用 :lang() 为特定语言定制字体、引号、行高等。
- 服务器/SEO：需要国际/区域多版本时，另行配置 hreflang 及地域化 URL，但仍应在每一页正确设置 lang。
常见示例合集
英中混排：
<p>本课程将讲解 <span lang="en">TypeScript</span> 的类型系统。</p>
英式与美式英文：
<html lang="en-GB">…</html> <!-- 英式拼写 colour/organise 等 -->
<html lang="en-US">…</html> <!-- 美式拼写 color/organize 等 -->
简繁体中文：
<html lang="zh-Hans">…</html> <!-- 简体 -->
<html lang="zh-Hant">…</html> <!-- 繁体 -->
正确设置网页语言是一项“投入最小、收益极高”的基础工程：一次配置，长期受益。把 lang 当成页面模板的必选项，你的可访问性、排版品质与国际 SEO 都会更上一层楼。