HTML dir 语法
在 HTML 中，dir 属性是一个全局属性，它用于定义元素内容的文本方向。dir 属性可以应用于任何 HTML 元素，但通常用于 body 元素来设置整个文档的文本方向。
语法：
<element dir="取值">说明：
dir 属性常用的取值有以下 3 种：
ltr（默认值）：文本方向是从左到右。rtl：文本方向是从右到左。auto：浏览器根据内容的第一个字符自动判断文本方向。
提示:
- dir 属性不仅影响文本，还会改变页面布局。例如，在设置了 dir="rtl" 的容器中，Flex 布局的起点会变成右侧，表格的第一列也会出现在最右侧。
- dir 属性通常用于显示从右到左的文本（比如阿拉伯语和希伯来语），在中文或英文环境下几乎用不到。因此，小伙伴们完全可以忽略这个属性。
HTML dir 摘要
| 属于 | HTML 属性 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML dir 示例
接下来，我们通过几个简单的例子来讲解一下 HTML dir 属性是如何使用的。
示例 1：bdo 元素使用 dir 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>好好学习，天天向上</p>
<p><bdo dir="rtl">好好学习，天天向上</bdo></p>
</body>
</html>页面效果如下图所示。
分析：
当我们给 bdo 元素加上 dir="rtl" 时，会发现文本的文字方向是从右到左显示了。但如果是给其他元素加上 dir="rtl"，又会怎样呢？请看下面例子。
示例 2：其他元素使用 dir 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>好好学习，天天向上</p>
<p dir="rtl">好好学习，天天向上</p>
</body>
</html>浏览器效果如下图所示。
分析：
从浏览器效果可以看出，给普通元素（比如 p 标签）设置 dir="rtl" 时，它不会像 bdo 那样强制反转字符顺序（汉字依然从左往右读），但它改变了文档流的方向，导致文本默认向右对齐。
