HTML 简介

1. HTML 是什么？

HTML 的全称是 HyperText Markup Language（超文本标记语言）。

为了彻底理解它，我们将这个名字拆解成三个部分来看：

1.1 超文本 (HyperText)

HTML 中的“超文本”指的是包含链接的文本。

• 传统文本：你只能从头读到尾（线性阅读）。
• 超文本：你可以通过点击链接，随时跳转到其他信息（非线性阅读）。正是这种“跳转”能力，让万维网（World Wide Web）真正连接在了一起。

生活中的例子 1：百度百科 当你在看百度百科时，会发现很多蓝色的词汇。点击它们，你就会跳转到另一篇相关的文章。这就是超文本，它让你自由探索，而不是死板地阅读。

生活中的例子 2：在线银行账单 当你在网上查看银行流水时，点击某笔交易，网页会跳转到该交易的详细详情页。这种从“列表”跳转到“详情”的功能，也是超文本的功劳。

1.2 标记 (Markup)

“标记”是指对内容进行注释或定义结构。 在 HTML 中，我们使用特殊的代码（称为元素和属性）来告诉浏览器：这一段内容是什么。 注意： 你是在告诉浏览器“这是什么”（比如这是一个标题），而不是“这看起来应该是什么样”（那是 CSS 的工作）。

生活中的例子：编辑的批注 在电脑普及前，作者把手稿给编辑，编辑会在纸上用红笔“标记”：此处是大标题、此处需要加粗、这里是新段落。这些标记不是故事的一部分，而是告诉排版员如何呈现故事。HTML 对浏览器起的作用也是一样的。

生活中的例子：购物清单 想象一张分类清单：“蔬菜类”、“乳制品”、“谷物”。这些分类标签就是“标记”，它们赋予了清单结构和意义。

1.3 语言 (Language)

HTML 被称为“语言”，因为它有一套特定的规则、语法和关键词。
它是所有网页浏览器（如 Chrome, Edge, Safari）通用的“母语”。就像人类使用共同的语言交流一样，开发者和浏览器之间使用 HTML 来沟通。

2. HTML 是如何工作的？

HTML 是创建网页的基础。当你在浏览器中输入网址并回车时，幕后发生了一系列事情：

2.1 简单的“请求-响应”过程

1. 你（客户端）发起请求：你的浏览器向互联网另一端的服务器发送请求：“嘿，我想看这个网址的页面。”
2. 服务器响应：服务器找到对应的 HTML 文件（以及相关的图片、样式表等），把它们发回给你的浏览器。
3. 浏览器翻译并渲染：浏览器收到文件后，首先读取 HTML。它通过解读“标记”来理解页面的结构——哪是标题、哪是段落、哪是图片。然后，它结合 CSS（负责美观）和 JavaScript（负责交互），将完整的网页展示在你面前。

2.2 重要区分：HTML 只管结构

• HTML (原材料)：定义结构和内容（这是标题、那是图片）。
• CSS (摆盘与装饰)：负责表现（标题是红色的、图片在右边）。
• JavaScript (互动指令)：负责行为（点击按钮后弹出窗口）。

2.3 DOM（文档对象模型）—— 简单了解

当浏览器读取 HTML 时，它会在内存中把页面建成一棵“树”，这棵树叫 DOM。HTML 中的每一个标签（如标题、段落）都是树上的一个“节点”。这让浏览器能高效地管理页面内容。

现在你只需要知道：HTML 是创建这棵树的原材料。

3. 理解 HTML 的核心组件

虽然我们还没开始写代码，但必须先理解 HTML 的两个核心概念：元素和属性。（我们会在后面的章节仔细探讨这两个概念，现在先让我们进行简单的了解。）

3.1 元素 (Elements)：网页的积木

元素用来标记一段内容，赋予它意义。
从概念上讲，一个元素通常包含：开始标签 + 内容 + 结束标签。

• 作用：定义网页上不同类型的内容。
• 举例（概念上的）：
• 主标题元素：告诉浏览器“这是页面最重要的标题”。
• 段落元素：告诉浏览器“这是一整块文字”。
• 图片元素：告诉浏览器“这里放一张图”。

你可以把元素想象成不同的容器或标签贴纸。

3.2 属性 (Attributes)：提供额外信息

属性是写在元素里的补充信息，用来提供更多细节。

• 作用：让元素更具体，提供必要的信息。
• 举例（概念上的）：
• 对于图片元素：你需要一个属性来告诉浏览器“图片的来源（文件路径）在哪里”。
• 对于链接元素：你需要一个属性来指定“点击后跳转的目标网址”。
• 对于段落元素：你可能给它一个ID属性，相当于给这具体的一段话起个独一无二的名字。

如果说元素是“一扇门”，那么属性就是告诉我们这扇门是“木头做的”还是“红色的”。

4. HTML发展史一览表