HTML 基本结构

每个 HTML 页面都遵循一套固定的结构模板。下面是一个合法、完整的 HTML 页面：

html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，世界!</h1>
  <p>这是我的第一段 HTML 内容。</p>
</body>
</html>

结构拆解

<!DOCTYPE html> — 文档声明

它不是 HTML 标签，而是告诉浏览器”请用最新的标准来解析这个页面”。必须写在第一行。

<html> — 根元素

所有内容的外层容器。lang 属性告诉浏览器和搜索引擎页面使用什么语言。

DOCTYPE 声明文档版本（HTML5），html 是所有元素的根容器，head 存放元数据（不显示在页面），body 存放可见内容。

虽然浏览器很宽容，会尽量补全你漏掉的标签，但漏写 DOCTYPE 或 charset 可能让页面在不同设备上呈现不一致。养成完整书写每个必需元素的好习惯。

虽然浏览器很宽容，会尽量补全你漏掉的标签，但漏写 DOCTYPE 或 charset 可能让页面在不同设备上呈现不一致。养成完整书写每个必需元素的好习惯。

<head> — 元数据区

不显示在页面上的配置信息，常见内容包括：

  • <meta charset="utf-8"> — 声明字符编码
  • <title> — 浏览器标签页上的标题

完整的 <head> 元素用法见 HTML head 元素 章节。

<body> — 可见内容区

用户在浏览器里真正看到的一切都写在 <body> 里面。