正确写法是<html lang="ar" dir="rtl">，lang="ar"声明语言，dir="rtl"触发双向算法；局部英文需显式标注lang="en"；动态切换语言时客户端修改不被读屏和翻译按钮识别，推荐服务端生成对应HTML。
lang="ar" 写在 标签上才生效
浏览器、屏幕阅读器、Chrome 翻译按钮只认 <html lang="ar"> 这个位置的声明，写在 <body>、<div> 或用 JS 动态设置都无效。常见错误包括：<html lang="AR">（大小写错）、<html lang="ar_SA">（地区码非必需且可能被部分读屏忽略）、<html lang="arabic">（非法值，静默失效）。
正确写法只有：<html lang="ar"> —— BCP 47 规范中 ar 是阿拉伯语的标准语言子标签，小写+无连字符，已被所有主流辅助技术稳定支持。
必须同步设置 dir="rtl"
lang="ar" 告诉浏览器“这是阿拉伯语”，但不改变文本方向；dir="rtl" 才触发 Unicode 双向算法（UBA），影响光标移动、Tab 焦点顺序、<input> placeholder 渲染、<select> 下拉项排列等底层行为。
二者缺一不可，且必须同时出现在 <html> 上：
立即学习“前端免费学习笔记（深入）”；
<html lang="ar" dir="rtl">
仅设 lang="ar" 不设 dir，会导致阿拉伯文字左对齐、光标从左往右跳、输入框内文字反向显示等实际可用性问题。
局部混排英文或数字时怎么处理
阿拉伯语页面中嵌入英文术语、品牌名、URL 或数字时，不能靠继承，必须显式标注：
<p>استخدم تطبيق <span lang="en">WhatsApp</span> للدردشة.</p><blockquote lang="en">The Quran is the central religious text.</blockquote>-
<code lang="en">git clone</code>让代码高亮工具识别为英文上下文
不加 lang="en"，屏幕阅读器可能用阿拉伯语音库强行朗读 “WhatsApp”，导致发音严重失真；CSS 的 :lang(en) 选择器也无法匹配。
动态切换语言时容易白忙活
单页应用（SPA）里用户点“切换为阿拉伯语”，仅执行 document.documentElement.lang = "ar" 和 document.documentElement.dir = "rtl" 是不够的：
- 已激活的屏幕阅读器会继续用旧语言引擎朗读，因为它是解析初始 HTML 时加载的语音库
- Chrome 翻译按钮不会自动出现，它只信任首屏 HTML 中的
lang - 更稳妥的做法是：服务端渲染（SSR）或静态生成（SSG）不同语言的独立 HTML 文件，每个入口都带正确的
<html lang="ar" dir="rtl">
如果必须客户端切换，至少补一句 document.title = document.title 强制读屏重读根节点，但这只是权宜之计——真正难的是让所有后续插入的 DOM 节点（比如异步加载的评论、广告脚本注入的内容）也携带准确的 lang 上下文。
