Web学习网站

Appearance

<html> 标签 ​

<html> 标签是 HTML 文档的根元素，所有其他 HTML 元素都应该嵌套在 <html> 标签内。

概述 ​

<html> 标签是每个 HTML 文档的根元素，它包含了文档的所有内容。所有其他 HTML 元素都应该作为 <html> 标签的后代元素出现。

语法 ​

html
<html>
  <!-- 文档内容 -->
</html>

属性 ​

<html> 标签支持以下常用属性：

lang 属性 ​

指定页面内容的语言：

html
<html lang="zh-CN">
  <!-- 中文内容 -->
</html>

<html lang="en">
  <!-- 英文内容 -->
</html>

dir 属性 ​

指定文本方向：

html
<html dir="ltr">
  <!-- 从左到右的文本 -->
</html>

<html dir="rtl">
  <!-- 从右到左的文本 -->
</html>

基本用法 ​

一个典型的 HTML 文档结构：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>
  <h1>页面内容</h1>
  <p>这是一个段落。</p>
</body>
</html>

在 HTML 和 XHTML 中的区别 ​

HTML 中 ​

在 HTML 中，<html> 标签的结束标签是可选的：

html
<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title>
</head>
<body>
  <p>内容</p>
</body>
</html>

XHTML 中 ​

在 XHTML 中，所有标签都必须正确关闭：

xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>页面标题</title>
</head>
<body>
  <p>内容</p>
</body>
</html>

实际示例 ​

多语言网站 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>English Page</title>
</head>
<body>
  <h1>Welcome to our website</h1>
  <p>This is the English version of our website.</p>
</body>
</html>

右到左语言网站 ​

html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>صفحة عربية</title>
</head>
<body>
  <h1>مرحبا بكم في موقعنا</h1>
  <p>هذه هي النسخة العربية من موقعنا.</p>
</body>
</html>

无障碍访问 ​

lang 属性对于无障碍访问非常重要，因为它帮助屏幕阅读器正确发音内容。确保为每个页面设置正确的语言属性。

浏览器兼容性 ​

<html> 标签在所有浏览器中都得到支持，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

最佳实践 ​

  1. 始终在 HTML 文档中包含 <html> 标签
  2. 使用 lang 属性指定文档的主要语言
  3. 当处理从右到左的语言时，使用 dir 属性
  4. 确保所有页面内容都嵌套在 <html> 标签内

相关标签 ​