4. html 标签与 lang 属性

本节目标：理解 <html> 是文档根元素，知道 lang 属性的作用和写法。

每个 HTML 文档的最外层都是 <html> 标签，它把所有其他标签包在里面，所以叫根元素。

基本结构

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>

<html> 标签是可选的——不写浏览器也能正常渲染。但加上它，尤其是加上 lang 属性，是个好习惯。

lang 属性告诉浏览器：这个页面主要用什么语言写的。

<html lang="zh-CN">

常见写法：

Tip

语言代码遵循 ISO 639-1 标准。zh 是中文，en 是英文。后面加 -CN、-US 等是区域细分。

对搜索引擎友好

搜索引擎会根据 lang 判断页面语言，把它放到对应语言的搜索结果里。

对屏幕阅读器有用

视障人士用的屏幕阅读器，会根据 lang 选择正确的发音引擎。比如法语和英语都有”six”这个词，但发音完全不同。

对浏览器有用

浏览器可以根据语言设置合适的字体、断行规则和引号样式。

如果你页面里有其他语言的片段，可以单独标注：

<html lang="zh-CN">
<body>
  <p>下面这句是英文：</p>
  <p lang="en">Hello, world!</p>
</body>
</html>

这样屏幕阅读器读到第二段时，会自动切换到英语发音。

和语言相关的还有 dir 属性，控制文字方向：

<html lang="ar" dir="rtl">

下一节，我们深入了解 <head> 标签。