理解 HTML 文档的骨架结构
每个 HTML 文档都有三个核心组成部分，它们构成了网页的基本骨架：
lang 属性指定文档语言（对屏幕阅读器和 SEO 很重要）<html lang="zh-CN">
<!-- 所有内容都在这里 -->
</html><meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但对浏览器和搜索引擎非常重要。
| Meta 标签 | 作用 | 示例 |
|---|---|---|
charset |
指定字符编码 | <meta charset="UTF-8"> |
viewport |
视口设置（移动端适配） | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
description |
页面描述（SEO） | <meta name="description" content="页面描述"> |
keywords |
关键词（SEO，已不太重要） | <meta name="keywords" content="HTML, CSS, 教程"> |
author |
作者信息 | <meta name="author" content="张三"> |
UTF-8 是目前最通用的字符编码，支持世界上几乎所有的文字，包括中文、日文、emoji 等。
如果不设置正确的字符集，中文可能会显示为乱码。
<!-- 必须放在 head 的最前面 -->
<meta charset="UTF-8">viewport 设置确保网页在移动设备上正确显示。
<meta name="viewport"
content="width=device-width, initial-scale=1.0">属性解释：
width=device-width：视口宽度等于设备宽度initial-scale=1.0：初始缩放比例为 1.0（不缩放）<head>
<!-- 页面标题：显示在浏览器标签和搜索结果中 -->
<title>HTML 基础教程 - 从零开始学习网页制作</title>
<!-- 页面描述：显示在搜索结果中 -->
<meta name="description"
content="这是一份完整的 HTML 入门教程，适合零基础学习者...">
</head>HTML 注释用于在代码中添加说明，不会显示在网页上。
<!-- 这是单行注释 -->
<!--
这是多行注释
可以写很多行
用于详细说明
-->
<div>
<!-- 注释可以放在任何地方 -->
<p>这是一个段落</p>
</div><!-- ==================== 头部导航开始 ==================== -->
<header>
<nav>...</nav>
</header>
<!-- ==================== 头部导航结束 ==================== -->
<!-- ==================== 主要内容开始 ==================== -->
<main>
<!-- 文章列表 -->
<article>...</article>
</main>
<!-- ==================== 主要内容结束 ==================== -->创建一个完整的 HTML 文档，包含以下内容：