HTML-101 #1. HTML是什么 & 网络是如何工作的
发布: (2026年1月9日 GMT+8 11:59)
3 min read
原文: Dev.to
Source: Dev.to
简短介绍（我为何写这篇）
我目前正在学习 HTML，并决定通过记录我的学习过程来公开学习。
本系列并非专家撰写——而是一个初学者的大声学习，分享：
- 我所理解的，
- 让我困惑的，
- 以及我在过程中学到的东西。
目标是建立一致性、清晰度，并邀请讨论。
在本篇文章中，我将讨论：
- HTML 是什么以及它为何存在
- HTML 在网站中能做什么、不能做什么
- 将 HTML 理解为网络的结构（骨架）
- HTML、CSS 和 JavaScript 在 Web 应用中的角色
- 页面加载时浏览器内部实际发生了什么（DOM、CSS、JS）
我所有的笔记、示例和练习代码都在 GitHub 仓库中： 。
什么是 HTML？
HTML 代表 HyperText Markup Language（它并没有“超”之意）。它是网页的标准语言，定义了网站的骨架。它告诉浏览器：
- 有哪些内容，
- 内容的类型，
- 内容如何组织。
HTML 定义标题、创建段落、显示图像、构建表单以及其他少量功能。它 不 添加样式（CSS）或行为/交互（JavaScript）。
示例
My First Page
## Hello World
This is my first webpage上面的标记展示了一个大标题 “Hello World” 和一段文字 “This is my first webpage”。
HTML、CSS 与 JavaScript 的角色
| 技术 | 角色 |
|---|---|
| HTML | 结构（骨骼） |
| CSS | 设计（皮肤/衣服） |
| JavaScript | 功能（大脑） |
没有 CSS 与 JS 的网站仍然可以工作，只是看起来很朴素。
浏览器如何加载页面
- 浏览器逐行读取 HTML 并将其转换为 DOM（文档对象模型）——一个表示 HTML 元素的树状结构。
- 浏览器下载链接的 CSS 文件并应用样式。
- 浏览器下载链接的 JavaScript 文件并执行脚本。
- 最终渲染的页面被显示。
简而言之：
HTML → DOM → 应用 CSS → 运行 JavaScript → 最终页面下一篇
下一篇文章将介绍 HTML 的结构，并将在进度推进时继续更新 GitHub 仓库。
参考资料
- GitHub 仓库：