基本页面结构

本节将深入讲解 HTML 文档的骨架结构，包括 head 和 body 的职责分工、元素的嵌套关系，以及 DOM 树的基本概念。理解页面结构是构建复杂网页的基础。

前置知识

阅读本节前，建议先了解：第一个 HTML 页面

基础概念

每个 HTML 文档都遵循一个固定的骨架结构，就像建筑需要地基和框架一样。HTML 文档由 <!DOCTYPE html> 声明和 <html> 根元素组成，根元素内又分为 <head> 头部和 <body> 主体两个核心区域。<head> 负责存放元数据（不可见），<body> 负责存放可见内容。这种分工确保了页面既能被浏览器正确解析，又能展示给用户有意义的信息。

文档骨架详解

完整骨架

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <!-- 页面可见内容 -->
</body>
</html>

DOCTYPE 声明

html

<!DOCTYPE html>

DOCTYPE（Document Type，文档类型）声明必须位于 HTML 文档的第一行第一个字符，前面不能有任何内容（包括空格和注释）。它告诉浏览器使用 HTML5 标准模式来渲染页面。

浏览器有两种渲染模式：

渲染模式	触发条件	特点
标准模式（Standards Mode）	存在 `<!DOCTYPE html>` 声明	按现代标准渲染，行为一致
怪异模式（Quirks Mode）	缺少 DOCTYPE 声明	模拟旧版浏览器行为，可能有意外效果

html

<!-- 标准模式：推荐 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标准模式</title>
</head>
<body>
  <p>页面以标准模式渲染。</p>
</body>
</html>

<!-- 错误！缺少 DOCTYPE，进入怪异模式 -->
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>怪异模式</title>
</head>
<body>
  <p>页面以怪异模式渲染，可能出现样式不一致。</p>
</body>
</html>

DOCTYPE 必须在第一行

如果 DOCTYPE 前面有空行、注释或任何字符，浏览器可能不会识别它，导致进入怪异模式。

head 头部区域详解

<head> 区域存放文档的元数据——描述文档信息但不直接显示的内容。head 中常用的子元素按照推荐顺序如下：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 1. 字符编码声明（应尽量靠前） -->
  <meta charset="UTF-8">

  <!-- 2. 视口设置（移动端适配必备） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. 页面标题 -->
  <title>页面标题</title>

  <!-- 4. SEO 元数据 -->
  <meta name="description" content="页面描述，用于搜索引擎结果">
  <meta name="keywords" content="关键词1, 关键词2">
  <meta name="author" content="作者名">

  <!-- 5. 外部资源引用 -->
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">

  <!-- 6. 内部样式 -->
  <style>
    /* CSS 样式规则 */
  </style>

  <!-- 7. JavaScript（放在 body 底部更好，此处仅示例） -->
  <script src="script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

head 中各元素详解

meta 标签

<meta> 标签用于定义文档的元数据，它是一个自闭合标签，通过 name/http-equiv 和 content 属性组合使用：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">

  <!-- 字符编码（推荐写法，简洁） -->
  <meta charset="UTF-8">

  <!-- 字符编码（XHTML 兼容写法，不推荐） -->
  <!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->

  <!-- 视口设置：响应式设计必备 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO 相关 -->
  <meta name="description" content="不超过 160 字的页面描述">
  <meta name="keywords" content="HTML, 教程, 前端开发">
  <meta name="author" content="作者名">

  <!-- 移动端优化 -->
  <meta name="theme-color" content="#ffffff">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <!-- 社交媒体分享（Open Graph） -->
  <meta property="og:title" content="分享标题">
  <meta property="og:description" content="分享描述">
  <meta property="og:image" content="分享图片 URL">
  <meta property="og:url" content="页面 URL">

  <!-- 禁止搜索引擎索引（用于测试页面） -->
  <!-- <meta name="robots" content="noindex, nofollow"> -->

  <title>meta 标签示例</title>
</head>
<body>
  <p>head 中的 meta 标签不会显示在页面上，但对浏览器和搜索引擎非常重要。</p>
</body>
</html>

title 标签

html

<head>
  <title>我的网站 - 首页</title>
</head>

<title> 是 head 中唯一会直接显示给用户的元素（显示在浏览器标签页上）。它的作用：

浏览器标签页上显示的标题
添加到书签时的默认名称
搜索引擎结果中链接的标题文字
对 SEO 最为重要的 head 元素

title 编写建议

长度控制在 30-60 个字符
包含页面核心关键词
格式建议：页面名称 - 网站名称（如 HTML 教程 - 前端学习网）
每个页面的 title 应该不同

link 标签

<link> 用于引用外部资源，最常用于引入 CSS 样式表和网站图标：

html

<head>
  <!-- 引入外部 CSS 样式表 -->
  <link rel="stylesheet" href="css/style.css">

  <!-- 引入多个样式表 -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- 网站图标（favicon） -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">

  <!-- Apple 触摸图标 -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

  <!-- 字体预加载 -->
  <link rel="preload" href="fonts/main.woff2" as="font" crossorigin>
</head>

body 主体区域详解

<body> 包含所有用户可见的内容和可交互的元素。body 中可以使用任何 HTML 标签来构建页面。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>body 区域示例</title>
</head>
<body>
  <!-- 页面头部 -->
  <header>
    <h1>网站名称</h1>
    <nav>
      <a href="#home">首页</a>
      <a href="#about">关于</a>
      <a href="#contact">联系</a>
    </nav>
  </header>

  <!-- 主体内容 -->
  <main>
    <article>
      <h2>文章标题</h2>
      <p>这是文章的正文内容。</p>
      <section>
        <h3>小节标题</h3>
        <p>小节内容。</p>
      </section>
    </article>

    <!-- 侧边栏 -->
    <aside>
      <h2>推荐阅读</h2>
      <ul>
        <li>相关文章 1</li>
        <li>相关文章 2</li>
      </ul>
    </aside>
  </main>

  <!-- 页面底部 -->
  <footer>
    <p>版权所有 2024</p>
  </footer>
</body>
</html>

body 中可直接包含的元素

在 HTML5 中，<body> 元素可以直接包含以下类型的子元素：

类别	元素	说明
区块级	`<div>`、`<section>`、`<article>`	内容分组容器
语义区块	`<header>`、`<footer>`、`<nav>`、`<aside>`、`<main>`	语义化页面区域
标题	`<h1>` 到 `<h6>`、`<hgroup>`	标题层级
文本	`<p>`、`<pre>`、`<blockquote>`、`<figure>`	文本内容块
列表	`<ul>`、`<ol>`、`<dl>`	列表结构
表格	`<table>`	表格数据
表单	`<form>`	表单交互
多媒体	`<video>`、`<audio>`、`<canvas>`、`<svg>`	富媒体内容
嵌入	`<img>`、`<iframe>`、`<picture>`	嵌入外部资源
脚本	`<script>`、`<noscript>`	JavaScript 代码

body 中的内容限制

在标准模式下，body 中不能直接放文本（如 hello）或行内元素（如 <span>text</span>），它们必须被包裹在块级元素中。浏览器会自动纠正这个问题，但不规范。

DOM 树概念

浏览器在解析 HTML 文档时，会将其转换为一棵DOM 树（Document Object Model，文档对象模型）。DOM 树是 HTML 文档在内存中的树形结构表示，每个 HTML 标签对应树中的一个节点（Node）。

DOM 树示例

以下 HTML 文档对应的 DOM 树：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>DOM 树示例</title>
</head>
<body>
  <h1>标题</h1>
  <p>段落文字<strong>加粗</strong>部分。</p>
</body>
</html>

对应的 DOM 树结构：

Document
 └── html (元素节点)
      ├── head (元素节点)
      │    ├── meta (元素节点) [charset="UTF-8"]
      │    └── title (元素节点)
      │         └── "DOM 树示例" (文本节点)
      └── body (元素节点)
           ├── h1 (元素节点)
           │    └── "标题" (文本节点)
           └── p (元素节点)
                ├── "段落文字" (文本节点)
                └── strong (元素节点)
                     └── "加粗" (文本节点)

DOM 树中的节点类型

节点类型	说明	示例
元素节点（Element）	HTML 标签	`<html>`、`<body>`、`<p>`
文本节点（Text）	标签内的文字	"标题"、"段落文字"
注释节点（Comment）	HTML 注释	`<!-- 注释 -->`
文档节点（Document）	文档根节点	整个文档

为什么 DOM 树很重要

DOM 树是前端编程的基础。JavaScript 通过 DOM API 操作页面——查找元素、修改内容、添加事件监听等，都是基于 DOM 树进行的。CSS 选择器也是基于 DOM 树来匹配元素的。

嵌套关系与层级

DOM 树的层级关系定义了元素之间的父子关系：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>嵌套关系示例</title>
</head>
<body>
  <!-- div 是父元素，h2 和 ul 是子元素 -->
  <div>
    <!-- h2 和 ul 是兄弟元素，拥有共同的父元素 div -->
    <h2>标题</h2>
    <!-- ul 是 div 的子元素，同时也是 li 的父元素 -->
    <ul>
      <!-- 每个 li 是 ul 的子元素，li 之间是兄弟关系 -->
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 3</li>
    </ul>
  </div>
</body>
</html>

关系	说明	示例（以上面的代码为例）
父元素	直接包含当前元素的元素	`ul` 是 `li` 的父元素
子元素	被当前元素直接包含的元素	`li` 是 `ul` 的子元素
兄弟元素	拥有同一父元素的元素	`h2` 和 `ul` 是兄弟元素
祖先元素	父元素的父元素，直到根元素	`div` 是 `li` 的祖先元素
后代元素	子元素的子元素，直到叶节点	`li` 是 `div` 的后代元素

实战示例

下面是一个结构完整、展示页面骨架各部分职责的示例：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- ========== 元数据区域 ========== -->

  <!-- 字符编码 -->
  <meta charset="UTF-8">

  <!-- 移动端视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 页面标题 -->
  <title>技术博客 - 首页</title>

  <!-- SEO 元数据 -->
  <meta name="description" content="一个关于 Web 前端技术的个人博客">
  <meta name="keywords" content="HTML, CSS, JavaScript, 前端">
  <meta name="author" content="小明">

  <!-- 社交媒体分享信息 -->
  <meta property="og:title" content="技术博客 - 首页">
  <meta property="og:description" content="关于 Web 前端技术的个人博客">
  <meta property="og:image" content="https://example.com/og-image.jpg">

  <!-- 网站图标 -->
  <link rel="icon" href="/favicon.ico">
</head>

<!-- ========== 可见内容区域 ========== -->
<body>

  <!-- 页面头部：网站 Logo + 导航 -->
  <header>
    <h1>技术博客</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/articles">文章</a>
      <a href="/about">关于</a>
      <a href="/contact">联系</a>
    </nav>
  </header>

  <!-- 主体内容：页面的核心区域 -->
  <main>
    <!-- 文章列表 -->
    <article>
      <h2>理解 HTML 页面结构</h2>
      <p>发布日期：2024 年 1 月 15 日</p>
      <p>
        HTML 页面由 head 和 body 两大部分组成。head 存放元数据，
        body 存放可见内容。理解这个基本结构是 Web 开发的第一步。
      </p>
      <a href="/article/html-structure">阅读全文</a>
    </article>

    <hr>

    <article>
      <h2>CSS 基础入门</h2>
      <p>发布日期：2024 年 1 月 10 日</p>
      <p>
        CSS（层叠样式表）用于控制 HTML 页面的视觉表现，
        包括颜色、字体、布局等。
      </p>
      <a href="/article/css-basics">阅读全文</a>
    </article>

    <!-- 侧边栏 -->
    <aside>
      <h2>关于作者</h2>
      <p>小明，前端开发初学者。</p>
      <h2>友情链接</h2>
      <ul>
        <li><a href="https://developer.mozilla.org/zh-CN/">MDN</a></li>
        <li><a href="https://github.com">GitHub</a></li>
      </ul>
    </aside>
  </main>

  <!-- 页面底部 -->
  <footer>
    <p>版权所有 2024 技术博客</p>
    <p>
      <a href="/privacy">隐私政策</a> |
      <a href="/terms">使用条款</a>
    </p>
  </footer>

</body>
</html>

注意事项

<!DOCTYPE html> 必须是文档的第一行，前面不能有任何内容
<html> 是根元素，所有其他元素都必须嵌套在其中
<head> 中至少包含 <meta charset="UTF-8"> 和 <title>
不要在 body 中直接放置裸文本或行内元素（浏览器会自动包裹，但不规范）
每个 HTML 文档只能有一个 <html>、一个 <head>、一个 <body>、一个 <title>
script 标签通常放在 body 底部或使用 defer/async 属性

最佳实践

DOCTYPE 声明使用小写 <!DOCTYPE html>
head 中的元素按以下顺序排列：charset → viewport → title → meta → link → style → script
页面结构使用语义化标签（<header>、<nav>、<main>、<footer>）
每个页面只使用一个 <h1>，标题层级从 <h1> 开始按序递减
使用注释标记页面结构的主要区域，便于维护
将 JavaScript 放在 body 底部或使用 defer 属性，避免阻塞页面渲染

继续学习：文本与标题

基本页面结构 ​

基础概念 ​

文档骨架详解 ​

完整骨架 ​

DOCTYPE 声明 ​

head 头部区域详解 ​

head 中各元素详解 ​

meta 标签 ​

title 标签 ​

link 标签 ​

body 主体区域详解 ​

body 中可直接包含的元素 ​

DOM 树概念 ​

DOM 树示例 ​

DOM 树中的节点类型 ​

嵌套关系与层级 ​

实战示例 ​

注意事项 ​

最佳实践 ​

参考链接 ​

基本页面结构

基础概念

文档骨架详解

完整骨架

DOCTYPE 声明

head 头部区域详解

head 中各元素详解

meta 标签

title 标签

link 标签

body 主体区域详解

body 中可直接包含的元素

DOM 树概念

DOM 树示例

DOM 树中的节点类型

嵌套关系与层级

实战示例

注意事项

最佳实践

参考链接