多语言HTML页面必须正确设置lang属性、使用:lang()选择器、inputmode/autocomplete属性及CSS逻辑属性。lang需符合BCP 47标准并动态更新；:lang()用于语言特异性样式；inputmode控制软键盘类型；逻辑属性（如margin-inline-start）适配RTL布局；语言切换需同步重置所有状态。
多语言 HTML 页面必须设置 lang 属性
浏览器和屏幕阅读器依赖 lang 属性判断文本语言，否则标点渲染、语音朗读、字体回退都可能出错。不加或写错会直接导致 Safari 中中文引号显示为英文、Chrome 语音合成读错重音、某些 RTL 语言（如阿拉伯语）文字方向异常。
正确做法是：在 标签上动态写入当前语言代码，例如：
注意：lang 值必须符合 BCP 47 标准，不能写成 zh 或 cn；服务端渲染时应从用户语言偏好或路由前缀（如 /en/about）中提取并注入；前端切换语言时需同步更新 document.documentElement.lang。
CSS 中用 :lang() 选择器处理语言特异性样式
不同语言对空格、断行、标点、字距的需求差异很大。比如日文不需要单词间空格，但需要更宽松的 word-break；德语长复合词容易溢出容器；阿拉伯语和希伯来语需右对齐且光标行为相反。
立即学习“前端免费学习笔记（深入）”；
用 :lang() 可以精准控制，避免全局污染：
/* 中文/日文/韩文统一处理 */
:lang(zh), :lang(ja), :lang(ko) {
line-height: 1.6;
word-break: keep-all;
}
/ 阿拉伯语右对齐 + 特殊字体 /
:lang(ar) {
text-align: right;
font-family: "Tajawal", "Segoe UI", sans-serif;
}
/ 德语超长词断行 /
:lang(de) {
overflow-wrap: break-word;
}
注意：:lang() 匹配的是元素自身的 lang 属性，不是页面根节点；若子元素语言不同（如引述英文原文），应显式加 lang="en" 并配合对应 :lang(en) 规则。
HTML5 表单控件的多语言适配靠 inputmode 和 autocomplete
原生表单控件（如 ）在不同语言下软键盘类型、输入建议、自动填充逻辑完全不同。仅靠 lang 不足以触发正确行为。
关键属性组合：
-
inputmode="text"→ 普通文本（中文拼音/日文罗马字输入） -
inputmode="numeric"→ 数字键盘（适用于金额、电话等） -
inputmode="email"→ 邮箱键盘（带 @ 和 .com 快捷键） -
autocomplete="given-name"等语义值 → 让浏览器调出对应语言的已存姓名字段（如日文会优先填「山田 太郎」而非「Yamada Tarou」）
错误示例： 不会自动弹出日文键盘；必须加上 inputmode="text" 才生效。iOS Safari 对 inputmode 支持较晚（iOS 16.4+），旧版本需降级 fallback。
RTL 布局不能只靠 dir="rtl"，还要重置 CSS 逻辑属性
阿拉伯语、希伯来语、波斯语等 RTL 语言不仅文字从右向左，整个布局流（margin、padding、float、text-align）也需镜像。仅设 dir="rtl" 只影响文本方向，不影响盒模型。
推荐方式是用 CSS 逻辑属性替代物理方向属性：
/* 错误：固定 left/right */
.button { margin-left: 16px; }
/ 正确：用逻辑属性，自动适配 LTR/RTL /
.button { margin-inline-start: 16px; }
/ 同理替换 /
padding-right → padding-inline-end
float: left → float: inline-start
text-align: right → text-align: end
注意：CSS 逻辑属性在 IE 中完全不支持，若需兼容旧版，可用 [dir="rtl"] 选择器手动覆盖，但维护成本高；现代项目建议用 PostCSS 插件（如 postcss-logical）自动转换。
真正麻烦的不是加几个属性，而是语言切换后所有状态（表单输入、滚动位置、焦点元素、动态加载内容的语言上下文）都要同步重置——这点常被忽略，结果出现阿拉伯语页面里弹出的日期选择器仍是英文，或切换回中文后按钮文字没更新。
