教程【免费下载链接】growth-ebookGrowth Engineering: The Definitive Guide。全栈增长工程师指南项目地址https://gitcode.com/phodal/growth-ebook点击查看免费下载HTMLHyperText 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 bodyhello,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是一个 markuphead是一个 markupbody也是一个 markup。HTML 的全部工作就是用成对的标记把内容包裹起来告诉浏览器这是什么。而我们真正写内容的代码在body里面。至于为什么在这里面这个问题太复杂打个比方来说我们所使用的汉语是人类用智慧创造的我们所正在学的这门语言同样也是人类创造的。我们在自己的语言里遵循着桌子是桌子凳子是凳子的原则很少有人会问为什么。语言就是约定俗成的规则。计算机语言与现实世界用于交流沟通的语言本质上可以划上一个等号。中文标记实验为什么不能写中文标签既然标记语言只是约定那我们能不能用汉语来写 HTML把上面的代码直译过来语言 头结束头 身体你好世界结束身体 结束语言这看上去很奇怪只是因为直译的原因。也许你会觉得这样更好理解但输入上可一点也不方便——键盘本身就不适合输入汉字同时这也意味着你输入的内容可能会出问题。把上面的代码保存后打开浏览器会看到语言 头结束头 身体你好世界结束身体 结束语言更不幸的结果可能是出现乱码璇█ 澶缁撴潫澶 韬綋浣犲ソ锛屼笘鐣缁撴潫韬綋 缁撴潫璇█这是一个编码问题——早期浏览器对中文的支持并不友好。如果我们把代码改成和标记语言一样的成对标签结构语言 头/头 身体你好世界/身体 /语言页面上的结果是语言 头 身体你好世界那么 Chrome 浏览器把这段代码解析成了什么样审查元素可以看到htmlhead/headbody语言 头!--头-- 身体你好世界!--身体-- !--语言-- /body/html注意看以!--开头、--结尾的是注释comment。注释是写给人看的代码不是给机器看的所以机器不会去理解这些代码。浏览器面对不认识的中文标签就把它连同内容一起当成了注释来处理——标签没有被识别标签之间的内容也没有被渲染。再做一个实验把代码改成whatwewanttosay你好世界/whatwewanttosay浏览器上面显示的内容就变成了你好世界这看起来有点神奇但一点也不神奇虽然我们的中文语法也遵循着标记语言的标准但浏览器不支持中文标记。据此我们可以得出两个结论浏览器对中文支持不友好。浏览器对英文支持友好。刚开始学习时不要对中文编程抱太多想法这是很不现实的现有的系统都是基于英语语言环境构建的对中文支持不是很友好。中文输入的速度在某种程度上来说没有英语快。完整的中文编程只有当我们可以从头构建一个中文系统时才是可行的——这需要把 CPU、软件、硬件都包含在内甚至需要重新设计 CPU 的结构在某种程度上来说会有些不现实。与其等待一代又一代人的努力不如师夷之长技以制夷先把现有的英文标记语言用好。其它 HTML 标记标题与列表下面为我们的页面添加一个标题。在head中加入title标签html head title标题/title /head bodyhello,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 idpara stylecolor:redRed/pHTML 定义了段落与文本CSS或内联样式定义了颜色而 JavaScript 用document.getElementById(para).style.colorblue可以在运行时把红色改成蓝色——这正是HTML 负责显示、CSS 负责样式、JavaScript 负责逻辑的缩影。当你走完这三个章节你就掌握了 Web 前端的三剑客底座。接下来无论是进入 前端与后台 了解 MVC 与前后端交互还是进入 编码 学习 Git、测试与重构你都已经拥有了一个可以实际运行、可被浏览器解析、可以被调试工具检查的最小 Web 页面。这正是全栈增长工程师之路的第一步从一个能双击打开的helloworld.html开始逐步构建对整个 Web 系统的整体性认识。赞分享教程【免费下载链接】growth-ebookGrowth 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 和 ObjectiveGrowth 全栈增长工程师指南后台语言选型深度解析Growth 全栈增长工程师指南后台语言选型深度解析 后台语言选择是每个 Web 开发者入行时都会遇到的第一个哲学问题选哪门语言性价比最高、用得最久、不教程上一篇突破LiveCodeBench数据加载瓶颈从版本冲突到高效解决方案下一篇BiliRoamingX项目视频画面尺寸记忆功能解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
