HTML基础教程：从标签结构到语义化网页搭建

1. 从零认识HTML：网页的"乐高积木"原理

第一次接触HTML时，我盯着浏览器里那些尖括号组成的代码感到无比困惑。直到一位前辈告诉我："把HTML想象成乐高积木，每个标签就是不同形状的积木块"。这个比喻瞬间让我茅塞顿开——就像用标准化的积木可以搭建出无限可能的模型，HTML通过标签的嵌套组合，构建出了我们每天浏览的万千网页。

HTML（HyperText Markup Language）本质上是一种标记语言，它不像编程语言那样需要处理逻辑运算，而是专注于定义文档的结构和内容。当我们在浏览器地址栏输入网址时，服务器返回的就是这些HTML文档，浏览器则像一位乐高大师，按照标签的指示把文字、图片、视频等元素组装成可视化的页面。

关键理解：HTML标签总是成对出现（少数例外），比如<p>和</p>就像乐高积木的凹凸接口，而标签之间的内容就是积木本身。这种设计保证了结构的清晰性和可扩展性。

2. HTML标签的解剖学：从<!DOCTYPE>到</html>

2.1 文档类型声明：<!DOCTYPE html>

每个HTML文档都始于这个看似简单的声明。它告诉浏览器："接下来你要解析的是HTML5文档"。在早期网络时代，存在多种HTML版本（如HTML4.01、XHTML1.0），这个声明能确保浏览器用正确的规则渲染页面。现代开发中我们只需记住：所有HTML文件开头都应该是这行代码：

html复制<!DOCTYPE html>

2.2 根元素：<html>标签

这是整个文档的容器，lang属性指定页面主要语言（如lang="zh-CN"表示中文简体），这对搜索引擎和屏幕阅读器很重要。典型结构如下：

html复制<html lang="zh-CN">
  <!-- 所有其他内容都放在这里 -->
</html>

2.3 头部区域：<head>的秘密

<head>就像乐高套装里的说明书，包含了对页面的关键定义但不会直接显示在页面上：

html复制<head>
  <meta charset="UTF-8"> <!-- 必须放在最前面，定义字符编码 -->
  <meta name="viewport" content="width=device-wi