dir="ltr"可省略，因浏览器默认将<html>视为ltr且所有子元素继承该方向；仅当需覆盖父级rtl环境（如阿拉伯语页面中嵌英文段落）时才需显式声明。
dir="ltr" 是 HTML 的默认行为，显式设置它通常只在需要覆盖父级 RTL 环境时才有意义。
为什么dir="ltr"一般不用写
浏览器默认把 <html> 当作 dir="ltr" 处理，所有子元素继承该方向。除非你已在外层（比如整页设了 dir="rtl"）改变了方向，否则加 dir="ltr" 不产生实际效果，反而可能干扰自动继承逻辑。
- 写
<html dir="ltr">属于冗余操作，多数框架/模板生成的 HTML 里根本不会出现 - 在 RTL 页面中嵌一段英文段落，才需要局部显式写
<p dir="ltr">Hello world</p> -
dir="ltr"和dir="rtl"是唯二有完整语义效力的取值；dir="auto"不推荐用于结构化文本
dir="ltr" 和 style="direction: ltr" 的关键区别
CSS 的 direction: ltr 只影响文本渲染和盒模型排列，不改变底层逻辑顺序；而 HTML 的 dir="ltr" 是语义属性，会影响 Tab 键焦点流、剪贴板粘贴顺序、<input> 光标起始位置等。
- 只用 CSS：复制一段文字到记事本，顺序可能错乱；表单按 Tab 键仍从右往左跳（如果父级是 RTL）
- 只用 HTML：
<html dir="ltr">能确保整个文档流回归标准逻辑，哪怕页面其他地方用了direction: rtl - 二者混用时，HTML
dir优先级更高，CSSdirection仅作用于当前元素及其后代（除非被更近的dir覆盖）
什么时候必须显式写dir="ltr"
只有在明确需要「局部覆盖 RTL 上下文」时才写，典型场景包括：
立即学习“前端免费学习笔记（深入）”；
- 阿拉伯语页面中显示英文产品名：
<h1 dir="ltr">iPhone 15</h1> - RTL 表单里嵌入 LTR 邮箱输入框：
<input type="email" dir="ltr">（避免 @ 符号位置错乱） - 防止第三方组件因继承
dir="rtl"导致图标/间距错位，强制重置某容器方向
注意：<bdi> 不适用于这种场景——它只做双向隔离，不改变布局流向或焦点顺序。
动态切换时别漏掉document.documentElement.dir
JS 切换方向必须操作 document.documentElement（即 <html> 元素），而不是 <body> 或某个 <div>：
- 错误：
document.body.setAttribute('dir', 'ltr')→ 表单光标、Tab 流、Flex 主轴仍按旧方向运行 - 正确：
document.documentElement.dir = 'ltr'→ 触发全链路方向重置 - 若需持久化，记得同步存入
localStorage，并在页面加载时读取并赋值，否则刷新即失效
最易被忽略的是：即使你用 CSS 把所有文字都“看起来”右对齐了，只要没动 document.documentElement.dir，底层交互逻辑就还是错的。
