HTML lang 与 dir 属性 — 语言与文本方向
HTML全局属性lang（语言声明）和dir（文本方向ltr/rtl）的使用、对SEO/翻译/无障碍的影响、中文网页最佳实践、bdo和bdi元素 · 难度：入门 · +10XP
HTML lang 和 dir 属性 —— 告诉浏览器你的网页说什么语言
回想一下，你的网页骨架第一行是 <!DOCTYPE html>，第二行是：
<html lang="zh-CN">这个 lang="zh-CN" 就是语言属性。它告诉浏览器、搜索引擎和屏幕阅读器：这个网页是用简体中文写的。
lang 属性的重要性
你可能觉得：网页里写的是中文，浏览器难道看不出来吗？但机器没那么聪明。lang 属性在三个地方发挥关键作用：
| 影响范围 | 作用 |
|---|---|
| SEO 搜索引擎 | Google 和百度会根据 lang 判断网页语言，影响搜索排名 |
| 屏幕阅读器 | 盲人用的读屏软件会根据 lang 选择正确的语音引擎（中文用中文发音、英文用英文发音） |
| 翻译工具 | Chrome 的自动翻译功能会参考 lang 属性判断是否需要提示翻译 |
常用语言代码
| 语言 | lang 值 |
|---|---|
| 简体中文 | zh-CN |
| 繁体中文（台湾） | zh-TW |
| 英文（美国） | en-US |
| 英文（英国） | en-GB |
| 日文 | ja |
| 韩文 | ko |
dir 属性 —— 文字方向
dir 属性控制文字的排列方向。默认是 ltr（Left to Right，从左到右），适合中文、英文等大多数语言。阿拉伯语、希伯来语等则需要 rtl（Right to Left，从右到左）。
<!-- 英文网页（从左到右） -->
<html lang="en" dir="ltr">
<!-- 阿拉伯语网页（从右到左） -->
<html lang="ar" dir="rtl">
bdo 和 bdi 元素 —— 局部改变文字方向
有时一段文字中混入了一个从右到左的单词，可以用 <bdo> 改变局部方向：
<p>我的名字是 <bdo dir="rtl">My Name</bdo></p><bdi>（Bidirectional Isolation）更智能——它会自动判断文字方向，不会受到周围文字的干扰。
动手练习
- 基础练习：创建一个中文网页，在
<html>标签中加上lang="zh-CN"。用浏览器的开发者工具（F12）查看 computed 属性，确认 lang 已生效。 - 进阶应用：写一段中英双语的内容（如 Apple 公司的 iPhone 15 售价 799 美元），用
<span lang="en-US">把英文部分标注出来。思考这对屏幕阅读器有什么帮助。 - 项目实战：做一个简单的阿拉伯语页面（内容用占位符），设置
dir="rtl"，观察整个页面从右到左排列——导航栏在右边、文字从右开始。
接下来学什么？
下一课我们将学习 HTML dialog 对话框——不用JavaScript，用纯HTML创建弹出对话框。