1.2 HTML5文档基本结构
HTML5文档采用树形层级结构，由根元素<html>包含<head>与<body>两大核心部分，形成"文档头-文档体"的清晰划分，这种结构化设计确保了内容组织的逻辑性与可维护性。
核心结构标签解析
<html>：文档根元素，所有其他标签均为其子元素，lang属性可指定页面语言（如lang="en"表示英文，lang="zh-CN"表示简体中文），有助于搜索引擎优化与无障碍访问。<head>：包含文档元数据（Metadata），即描述文档自身信息的数据，不直接显示在页面中。典型子标签包括：<title>：定义页面标题，显示在浏览器标签页，是SEO核心要素之一。<meta>：提供字符编码、视口设置、关键词等信息（如charset指定编码，name="description"设置页面描述）。<link>：引入外部资源（如CSS样式表、图标），常用rel="stylesheet"指定样式表关系。<style>：嵌入内部CSS样式规则。<script>：引入或嵌入JavaScript代码。<body>：包含页面可见内容，所有用户可直接看到的元素（如文本、图片、按钮、表单等）均需放置于此标签内，其结构直接决定页面呈现效果。
标签层级关系示意图
plaintext
复制代码
<html>
├─ <head>
│ ├─ <meta charset="UTF-8">
│ ├─ <meta name="viewport" ...>
│ └─ <title>页面标题</title>
└─ <body>
├─ <h1>主标题</h1>
├─ <p>段落文本</p>
└─ <img src="image.jpg" alt="图片">案例1-2：简单网页框架实现
以下代码构建一个包含基础元数据与可见内容的网页框架，通过注释标注各标签的层级关系：
html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 根元素：包含整个HTML文档 -->
<head>
<!-- 文档头：包含元数据，不显示在页面中 -->
<meta charset="UTF-8">
<!-- 视口设置：确保移动设备正确缩放页面 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面标题：显示在浏览器标签栏 -->
<title>HTML5文档结构示例</title>
<!-- 引入外部CSS样式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 文档体：包含所有可见内容 -->
<header>
<h1>欢迎来到我的网站</h1>
</header>
<main>
<p>这是页面的主要内容区域。</p>
</main>
<footer>
<p>© 2025 版权所有</p>
</footer>
</body>
</html>最佳实践
- 始终保持标签闭合（如
<p></p>），避免遗漏结束标签导致布局错乱。 - 合理嵌套标签，禁止交叉嵌套（如错误写法：
<p><strong>文本</p></strong>）。 - 使用语义化标签（如
<header>、<main>、<footer>）替代通用<div>，提升代码可读性与SEO表现。