企业官网建设流程全解析

重新认识 HTML（上）：为什么浏览器能够看懂我们的网页

写在前面

在开始学习 Java Web 的过程中，前端部分是绕不开的一环，而 HTML 又是前端最基础的一部分。

刚开始接触 HTML 的时候，很多人可能都会有一种感觉：

“这个东西是不是太简单了一点？”

因为相比 Java、C++ 这种需要考虑变量、循环、对象、算法逻辑的编程语言来说，HTML 看起来非常直观。

我们只需要写几个标签：

<h1>Hello World</h1><p>这是一段文字</p><imgsrc="image.jpg">

然后浏览器打开之后，就能够显示出标题、文字和图片。

整个过程甚至不需要编译，不需要运行程序，保存文件之后直接刷新浏览器就能看到结果。

这时候很多初学者都会产生一个疑问：

浏览器到底是怎么知道这些标签是什么意思的？HTML到底算不算一种编程语言？为什么几个简单的标签可以组成复杂的网站？

带着这些问题，我们重新认识一下 HTML。

一、HTML到底是什么？

HTML 的全称是：

Hyper Text Markup Language 超文本标记语言

很多人在第一次看到这个名字的时候，会觉得非常抽象。

实际上拆开来看，这几个词分别解释了 HTML 的核心特点。

1. 超文本（Hyper Text）

在互联网刚刚发展的早期，计算机之间主要传递的是纯文本信息。

比如：

Hello World 今天学习HTML

这些内容本质上只是字符。

但是随着互联网的发展，人们希望网页不仅仅能够显示文字，还可以包含更加丰富的信息，比如：

• 图片
• 音频
• 视频
• 超链接
• 表格
• 表单

于是“文本”这个概念被扩展了。

所谓“超文本”，简单理解就是：

一种比普通文字更加丰富的信息组织形式。

比如：

<imgsrc="dog.jpg">

这段代码虽然看起来只是几个字符，但是浏览器看到<img>标签之后，会知道：

“这里不是普通文本，而是一张图片。”

然后找到对应资源，将图片显示出来。

2. 标记语言（Markup Language）

理解“标记语言”，是理解 HTML 最关键的一步。

HTML 和 Java、C++ 最大的区别就在这里。

Java：

System.out.println("Hello");

是在告诉计算机：

“执行打印这个动作。”

它关注的是：

下一步应该做什么。

但是 HTML：

<h1>Hello</h1>

并不是让计算机执行某个动作。

它是在描述：

“Hello 这一段内容，它的身份是一种一级标题。”

所以：

编程语言关注：

如何让计算机完成某个任务。

标记语言关注：

如何描述一份内容的结构。

如果把制作网页比作装修房子：

HTML 就像房子的框架设计。

它决定：

• 哪里是客厅；
• 哪里是卧室；
• 哪里放窗户；
• 哪里放门。

CSS 就像装修。

它决定：

• 墙是什么颜色；
• 家具是什么风格；
• 空间如何布局。

JavaScript 则像房子的智能系统。

它决定：

• 门什么时候自动打开；
• 灯什么时候亮；
• 空调如何调节。

三者共同组成了现代网页。

二、为什么HTML文件可以直接运行？

这是很多初学者第一次学习 HTML 时觉得神奇的地方。

我们创建一个文件：

index.html

然后写：

<h1>我的第一个网页</h1>

直接使用浏览器打开。

结果：

浏览器显示：

我的第一个网页

为什么？

因为浏览器本身就拥有解析 HTML 的能力。

浏览器内部有一套专门处理网页的机制。

简单理解：

HTML文件

↓

浏览器读取文件

↓

HTML解析器分析标签

↓

生成网页结构

↓

绘制页面

这里面最重要的一个概念就是：

浏览器不是执行HTML，而是在解析HTML。

三、浏览器到底如何理解HTML？

虽然现在我们只学习基础HTML，但是了解一点浏览器背后的工作原理，会让后续学习CSS和JavaScript更加顺畅。

浏览器拿到HTML之后，并不是直接显示文字。

它首先会把HTML转换成一种树形结构：

DOM（Document Object Model，文档对象模型）

例如：

HTML：

<body><h1>标题</h1><p>内容</p></body>

浏览器理解之后，大概会形成：

body ├── h1 └── p

为什么要转换成树？

因为网页中的元素本身就具有层级关系。

比如：

一个网页里面：

页面

↓

区域

↓

模块

↓

文字和图片

这种关系非常适合使用树结构表示。

而后面学习 CSS 和 JavaScript 时，我们实际上就是不断操作这棵树。

四、HTML网页的基本结构

一个完整的HTML文件通常有固定结构：

<!DOCTYPEhtml><html><head><title>我的网页</title></head><body>网页显示内容</body></html>

刚开始学习的时候，很多人会疑惑：

为什么一定要这么写？

其实每个部分承担的职责不同。

1. head：给浏览器看的信息

head 部分主要保存网页的描述信息。

例如：

<head><title>个人主页</title></head>

这里的 title 并不会显示在网页正文中。

但是浏览器标签页会显示：

个人主页

除此之外：

CSS文件引入、网页编码等信息，也通常放在这里。

简单理解：

head 像一本书的目录页。

读者可能不会直接阅读它，但是它告诉系统：

“这是什么东西。”

2. body：用户真正看到的内容

body 是网页主体。

例如：

<body><h1>欢迎来到我的网站</h1><p>这里是介绍内容</p></body>

用户打开网页之后看到的所有内容，基本都来自 body。

五、HTML简单，但为什么越学越复杂？

刚开始学习 HTML，可能觉得：

“是不是把标签背完就结束了？”

其实不是。

HTML真正困难的地方，不是记住：

<h1><img><a>

这些标签。

真正困难的是：

如何合理组织一个复杂网页。

例如：

一个电商网站：

页面顶部：

• Logo
• 搜索框
• 用户信息

中间：

• 商品分类
• 商品列表
• 推荐区域

底部：

• 联系方式
• 服务说明

如果没有合理的结构设计，后续 CSS 会非常混乱。

所以现代前端非常强调：

语义化HTML。

也就是：

不要只关注“能不能显示”。

还要关注：

“这个标签表达的意义是否正确。”

例如：

以前很多人喜欢：

<div>标题</div>

但是更推荐：

<header>标题</header>

因为 header 明确表示：

这是网页头部区域。

这种结构更加符合网页设计思想，也方便后续维护。

六、初学HTML时最大的误区

误区一：认为HTML越复杂越厉害

其实不是。

优秀的HTML代码往往很简单。

真正复杂的是：

如何设计合理结构。

误区二：认为HTML可以完成所有网页功能

HTML只能负责结构。

例如：

登录页面：

HTML：

负责：

• 输入框
• 按钮
• 页面结构

CSS：

负责：

• 页面美化
• 布局

JavaScript：

负责：

• 点击事件
• 数据验证

Java后端：

负责：

• 查询数据库
• 用户认证

一个完整网站，是多个技术共同协作完成的。

七、总结

如果用一句话总结 HTML：

HTML不是告诉计算机“怎么做”，而是在告诉浏览器“这里有什么”。

它是网页的骨架，是浏览器理解网页内容的第一份说明书。

刚开始学习 HTML 时，不要把重点放在背标签，而应该理解：

为什么需要标签？

浏览器为什么能够理解标签？

HTML和CSS、JavaScript分别解决什么问题？

当你建立这种整体认识之后，后面学习CSS布局、JavaScript交互，甚至Vue框架时，都会发现它们其实都是在围绕同一个核心：

如何让浏览器更好地理解、展示和交互一个网页。