别被“去中心化”绕晕了：说白了，这就是一场“去中介化”的金融革命
2026/9/27 22:02:07
- 教程
【免费下载链接】growth-ebook
Growth Engineering: The Definitive Guide。全栈增长工程师指南
项目地址：https://gitcode.com/phodal/growth-ebook
HTML（HyperText Markup Language，超文本标记语言）是 Web 的核心语言，也是《Growth: 全栈增长工程师指南》基础知识篇中最先上手的一门"不算是语言的语言"。本篇基于仓库中 chapters/1.4.0-html.md 的完整内容展开，带读者从新建一个helloworld.html文件开始，经历调试、中文标记实验、常用标记的编写，最终理解"标记语言"的本质——为什么浏览器只认英文标签、为什么<!-- -->是注释、以及 HTML 在"HTML + CSS + JavaScript 三剑客"中扮演的角色。读完本文，你将具备亲手写出一份可被现代浏览器正确解析的 HTML 文档的能力，并建立起继续学习 CSS 与 JavaScript 的前置认知。
为什么从 HTML 开始
在《Growth》的学习路径里，HTML 被刻意放在 CSS、JavaScript 之前，原因很实际：学习 HTML 不需要配置复杂的开发环境。当你还没有接触过"开发环境"这个概念时，最友好的入门方式就是打开一个编辑器、写几行文本、双击打开文件——一个现代浏览器就能把结果呈现出来。这也是 Web 开发与其他语言学习路径最大的差异所在：你的工具（浏览器）已经预装在你日常使用的每一台设备上了。
HTML 是 Web 的核心语言，也算是比较基础的语言。
仓库的 chapters/1.0.md 中交代了整本指南的基调：每个人第一次写程序都是从 Hello World 开始的，无论是 C 语言的printf("hello,world");，还是 JavaScript 的alert('hello,world');，又或是 Nginx 安装成功后看到的It works!。hello,world 这个传统最早可以追溯到 1972 年贝尔实验室的内部技术文档，而我们接下来要遵循的，正是这个延续了几十年的入门仪式。
hello,world：最短的 HTML 程序
遵循 hello,world 的传统，我们新建一个文件，命名为helloworld.html，整个操作只需要四步：
- 新建文件：在桌面上新建一个文本文件。如果你在 Windows 环境下工作，新建文本文档后记得把扩展名从
.txt重命名为.html；如果你更习惯使用编辑器，仓库在 chapters/1.1.0-tool.md 中推荐过 Sublime Text 这类轻量编辑器——破解与否、注册与否都不会影响使用。 - 输入内容：在文件中输入下面这一行文本：
hello,world- 保存为
helloworld.html：注意扩展名必须是.html，这是浏览器识别 HTML 文档的依据。 - 双击打开这个文件：正常情况下，它会用你的默认浏览器打开。只要是一个正常工作的现代浏览器，页面上就应该显示
hello,world。
这才是最短的 hello,world 程序。对比一下在 Ruby 交互环境中输出同样的内容，需要输入命令并看到解释器回显：
2.0.0-p353 :001 > p "hello,world" "hello,world" => "hello,world" 2.0.0-p353 :002 >如果你了解过 HTML 的语法规则，会觉得"直接写一行文本"一点都不符合语法——但它工作了。没有什么比安装完 Nginx 后看到It works!更让人激动了。这里也顺带解释了为什么在后续章节中，仓库会反复强调"先动手、再深入"：Web 开发里，最简单的东西往往也是最直接的反馈循环。
不过，这段"非法"的代码未必能在所有浏览器上工作，所以我们需要动手调试其中的 bug——这正是开发者日常工作的真实写照。
调试 hello,world：审查元素
用 Chrome 打开页面，右键点击浏览器中的空白区域，选择审查元素（Inspect），你会发现浏览器实际上把你的代码解析成了下面的结构：
<html> <head></head> <body>hello,world</body> </html>浏览器帮你自动补齐了缺失的标签：<html>是文档的根元素，<head>是头部区域（当前为空），而hello,world这行文本被放进了<body>。这才是真正能在大部分浏览器上工作的代码——把这段完整结构复制回编辑器里吧。
在 chapters/1.1.0-tool.md 中，仓库曾提到 Chrome Dev Tools 是前端开发者最常用的调试工具。这里的"审查元素"就是 Dev Tools 最基础的用法：它展示的是浏览器解析后的 DOM 结构，而不是你手写的源码。理解这一点，是后续学习 CSS 选择器与 JavaScript DOM 操作的前提。
说说 hello,world：标记语言的本质
很多人不喜欢 HTML 中成对的<...></...>尖括号，但作者坦言"没有找到别的方法来代替它们"，所以这是一个设计得当的语言。甚至大部分人都说这算不上是一门真正的语言——让我们回到 HTML 的原义：
超文本标记语言
关键词是标记（markup）。也就是说：html是一个 markup，head是一个 markup，body也是一个 markup。HTML 的全部工作，就是用成对的标记把内容"包裹"起来，告诉浏览器"这是什么"。
而我们真正写内容的代码在<body>里面。至于为什么在这里面，这个问题太复杂，打个比方来说：
- 我们所使用的汉语是人类用智慧创造的，我们所正在学的这门语言同样也是人类创造的。
- 我们在自己的语言里遵循着"桌子是桌子，凳子是凳子"的原则，很少有人会问为什么。
语言就是约定俗成的规则。计算机语言与现实世界用于交流沟通的语言，本质上可以划上一个等号。
中文标记实验：为什么不能写中文标签
既然标记语言只是"约定"，那我们能不能用汉语来写 HTML？把上面的代码直译过来：
<语言> <头><结束头> <身体>你好，世界<结束身体> <结束语言>这看上去很奇怪，只是因为直译的原因。也许你会觉得这样更好理解，但输入上可一点也不方便——键盘本身就不适合输入汉字，同时这也意味着你输入的内容可能会出问题。把上面的代码保存后打开浏览器，会看到：
<语言> <头><结束头> <身体>你好，世界<结束身体> <结束语言>更不幸的结果可能是出现乱码：
<璇█> <澶�><缁撴潫澶�> <韬綋>浣犲ソ锛屼笘鐣�<缁撴潫韬綋> <缁撴潫璇█>这是一个编码问题——早期浏览器对中文的支持并不友好。如果我们把代码改成和标记语言一样的"成对标签"结构：
<语言> <头></头> <身体>你好，世界</身体> </语言>页面上的结果是：
<语言> <头> <身体>你好，世界那么 Chrome 浏览器把这段代码解析成了什么样？审查元素可以看到：
<html><head></head><body><语言> <头><!--头--> <身体>你好，世界<!--身体--> <!--语言--> </body></html>注意看：以<!--开头、-->结尾的，是注释（comment）。注释是写给人看的代码，不是给机器看的，所以机器不会去理解这些代码。浏览器面对不认识的中文标签，就把它连同内容一起当成了注释来处理——标签没有被识别，标签之间的内容也没有被渲染。
再做一个实验：把代码改成
<whatwewanttosay>你好世界</whatwewanttosay>浏览器上面显示的内容就变成了：
你好世界这看起来有点神奇，但一点也不神奇：虽然我们的中文语法也遵循着标记语言的标准，但浏览器不支持中文标记。据此我们可以得出两个结论：
- 浏览器对中文支持不友好。
- 浏览器对英文支持友好。
刚开始学习时，不要对"中文编程"抱太多想法，这是很不现实的：
- 现有的系统都是基于英语语言环境构建的，对中文支持不是很友好。
- 中文输入的速度在某种程度上来说没有英语快。
完整的"中文编程"只有当我们可以从头构建一个中文系统时才是可行的——这需要把 CPU、软件、硬件都包含在内，甚至需要重新设计 CPU 的结构，在某种程度上来说会有些不现实。与其等待"一代又一代人的努力"，不如"师夷之长技以制夷"，先把现有的英文标记语言用好。
其它 HTML 标记：标题与列表
下面为我们的页面添加一个标题。在<head>中加入<title>标签：
<html> <head> <title>标题</title> </head> <body>hello,world</body> </html>保存刷新后，你便可以在浏览器的最上方看到"标题"二字。像淘宝网这样的站点，也包含了上面的东西，只是还包括了更多的东西——所以，看懂一个网页的<title>，就是看懂它浏览器标签页上文字的来源。
再扩展一下 body 里的内容，加入标题和列表标记：
<html> <head> <title>标题</title> </head> <body> hello,world <h1>大标题</h1> <h2>次标题</h2> <h3>...</h3> <ul> <li>列表1</li> <li>列表2</li> </ul> </body> </html>这里用到的标记及其含义如下：
| 标记 | 作用 | 说明 |
|---|---|---|
<html> | 文档根元素 | 包裹整个 HTML 文档 |
<head> | 头部区域 | 存放标题、样式、脚本声明等元信息 |
<title> | 页面标题 | 显示在浏览器标签页/标题栏 |
<body> | 正文区域 | 页面可见内容的容器 |
<h1>~<h3> | 标题层级 | h1最大，数字越大层级越低 |
<ul>/<li> | 无序列表 | ul是列表容器，li是列表项 |
更多的东西可以在相关书籍上看到，这里所说的只是一次简单的语言入门，其它的东西都和这些类似——掌握了"成对标记包裹内容"这一核心心智模型，再遇到<a>、<img>、<div>、<p>等标记，你都能一眼看懂它们的大致用途，并通过审查元素去验证自己的猜测。
浏览器如何把 HTML 变成页面
既然 HTML 是一串文本，浏览器是如何把它变成屏幕上的像素的？在 chapters/1.3-web-basic.md 中，仓库对"从 HTML 到页面显示"给出了流程级解释：浏览器拿到 HTML 文本后，第一步就是Parse HTML（解析 HTML），把文本解析为一棵DOM Tree；与此同时，CSS 解析器解析 CSS 会产生CSS 规则树；随后浏览器根据 DOM 树和 CSS 规则树构建Render Tree（渲染树），接着计算渲染树的布局（Layout），最后绘制（Paint）出页面。
上面两张图（渲染流程示意图与 Chrome 渲染时间线）说明了同一个结论：无论你在 HTML 里写了多少内容，浏览器做的第一件事永远是解析 HTML 并构建 DOM 树。这也就解释了我们在"中文标记实验"中看到的现象——浏览器解析时遇到无法识别的标签，只能按容错机制把它降级处理为注释，DOM 树里自然不会出现对应的节点，页面也就不会渲染出"你好，世界"。
（注：上述渲染流程以 WebKit 内核为例，即 Chrome 和 Safari 等浏览器所使用的内核。）
小结：美妙之处与下一步
美妙之处
我们简单地上手了一门"不算是语言的语言"，浏览器简化了这其中的大部分过程。虽然没有 C 和其他语言来得有专业感，但是我们试着去开始写代码了。我们可能在未来的某一篇中看到类似的语言，诸如 Python，我们所要做的就是：
$ python file.py =>hello,world然后在终端上返回结果。学会 HTML 是有意义的：简单的上手，然后再慢慢地深入。如果一开始我们就去理解指针、理解类、理解程序是怎么编译运行的，反而会在"过程中到底发生了什么"里迷失。虽然现在我们也没能理解这其中发生了什么，但至少这一章展示了：
- 中文编程语言在当前意义不大——不现实、效率不高、兼容性差。
- 语言的语法是固定的。（ps：虽然我们也可以进行扩充，我们将会在后来支持上述的中文标记。）
- 已经开始写代码，而不是还在配置开发环境。
- 随身的工具才是最好的，最常用的 code 也才是实在的。
更多：HTML 之后还需要什么
我们还没有试着去解决"某商店里的糖一颗 5 块钱，小明买了 3 颗糖，一共花了多少钱"的问题——也就是说，我们学会的还是一个还不能解决实际问题的语言。于是我们还需要学点东西，比如 JavaScript、CSS。在 chapters/1.4.1-css.md 与 chapters/1.4.2-js.md 中，仓库给出了三者的分工：
我们可以将 JavaScript 理解为解决问题的语言，HTML 则是前端显示，CSS 是配置文件。
更形象的说法是：HTML 是建筑的框架，CSS 是房子的装修。HTML 负责"有什么内容、内容的结构是什么"，CSS 负责"这些内容长什么样"，而 JavaScript 负责"页面的行为和逻辑"。三者的关系在 chapters/1.4.1-css.md 中有一个直观示例：同一个<p id="para" style="color:red">Red</p>，HTML 定义了段落与文本，CSS（或内联样式）定义了颜色，而 JavaScript 用document.getElementById("para").style.color="blue"可以在运行时把红色改成蓝色——这正是"HTML 负责显示、CSS 负责样式、JavaScript 负责逻辑"的缩影。
当你走完这三个章节，你就掌握了 Web 前端的"三剑客"底座。接下来，无论是进入 前端与后台 了解 MVC 与前后端交互，还是进入 编码 学习 Git、测试与重构，你都已经拥有了一个可以实际运行、可被浏览器解析、可以被调试工具检查的最小 Web 页面。这正是全栈增长工程师之路的第一步：从一个能双击打开的helloworld.html开始，逐步构建对整个 Web 系统的整体性认识。
赞
- 教程
【免费下载链接】growth-ebook
Growth Engineering: The Definitive Guide。全栈增长工程师指南
项目地址：https://gitcode.com/phodal/growth-ebook
相关推荐
Growth 全栈增长工程师指南：从 CGI 到无栈的工程师成长路线图
Growth 全栈增长工程师指南：从 CGI 到无栈的工程师成长路线图 本文以《Growth: 全栈增长工程师指南》开篇章节为骨架，梳理 Web 技术从 CGI
教程Swift 语言快速入门指南：从 Hello World 到基础语法
Swift 语言快速入门指南：从 Hello World 到基础语法 前言 Swift 是苹果公司开发的一款现代化编程语言，它结合了 C 和 Objective
Growth 全栈增长工程师指南：后台语言选型深度解析
Growth 全栈增长工程师指南：后台语言选型深度解析 后台语言选择是每个 Web 开发者入行时都会遇到的第一个"哲学问题"：选哪门语言性价比最高、用得最久、不
教程
上一篇：突破LiveCodeBench数据加载瓶颈：从版本冲突到高效解决方案
下一篇：BiliRoamingX项目视频画面尺寸记忆功能解析
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考