HTML通过浏览器解析实现页面展示，首先请求HTML文件，解析生成DOM树，同时加载CSS形成CSSOM，二者结合构建渲染树，再经布局、绘制和合成最终呈现页面。
HTML 本身并不是一种编程语言，而是一种标记语言，它的运行机制依赖于浏览器的解析和渲染过程。当你在浏览器中打开一个网页时，背后其实发生了一系列复杂的步骤，最终将 HTML 代码转化为你看到的页面内容。下面来详细解析 HTML 是如何“运行”的。
1. 浏览器请求 HTML 文件
当你输入网址或点击链接时，浏览器会向服务器发起 HTTP 请求，获取对应的 HTML 文件。这个文件本质上是一个纯文本文件，包含了结构化的标签和内容。
例如，服务器返回如下内容：
<html><head><title>我的网页</title></head>
<body><h1>欢迎访问</h1></body>
</html>
浏览器接收到这段文本后，就开始进入解析阶段。
立即学习“前端免费学习笔记（深入）”；
2. 解析 HTML 构建 DOM 树
浏览器内置的 HTML 解析器会逐行读取 HTML 文本，识别标签、属性和文本内容，并将其转换为一种内部数据结构——DOM（Document Object Model，文档对象模型）。
DOM 是一个树状结构，每个 HTML 元素都对应一个节点。比如 <h1> 变成一个元素节点，其中的文本变成文本节点。
构建 DOM 的过程是递进的，浏览器边下载边解析，不必等整个文件下载完成才开始。
3. 加载外部资源并构建渲染树
在解析 HTML 的过程中，如果遇到 <link> 引入 CSS、<script> 引入 JavaScript 或 <img> 图片等资源，浏览器会异步或同步地请求这些文件。
- CSS 被解析为 CSSOM（CSS 对象模型），它决定了每个元素的样式规则。
- JavaScript 可能会暂停 HTML 解析，直到脚本执行完成（除非加了 async 或 defer）。
DOM 和 CSSOM 合并后形成渲染树（Render Tree），它包含所有需要显示的节点及其样式信息。
4. 布局与绘制（渲染）
有了渲染树后，浏览器进行：
- 布局（Layout）：计算每个元素在页面中的位置和大小。
- 绘制（Paint）：将像素信息填充到屏幕上，包括颜色、边框、阴影等视觉效果。
- 合成（Composite）：如果有多个图层（如视频、浮动元素），浏览器会将它们合并成最终画面。
这一系列操作完成后，页面就呈现在用户面前了。
基本上就这些。HTML 的“运行”其实是浏览器对文本的解析、资源加载和图形渲染的综合结果，而不是像程序那样执行指令。理解这个过程，有助于写出更高效、兼容性更好的网页代码。
