HTML 和 CSS：构建整个互联网的基石

我们在 Coddy 所做的一切，都可以归结为一个简单的理念：在实践中学习。

看看这句话。它加了粗体，用了斜体，而且还是一个可以点击的链接。很酷，对吧？但它是怎么呈现在你的屏幕上的呢？

因为我们是在 Markdown 编辑器中写下这些内容的，所以我们只需用两个星号表示粗体，一个星号表示斜体，并使用 [text] (url) 格式来创建链接。

但浏览器根本不知道什么是 Markdown。Chrome、Safari 和 Firefox 完全看不懂那些星号或方括号。在屏幕上呈现的所有内容背后，最终都必须转化为两样东西：

HTML (超文本标记语言) 和 CSS (层叠样式表)。

要让完全相同的一句话同时呈现粗体、斜体和可点击的效果，HTML 代码看起来是这样的：

<a href="https://coddy.tech/landing"><strong><em>learn by doing</em></strong></a>

想想你经常使用的一个网站。看着它时，你会看到整齐的文字、五彩斑斓的按钮、平滑的菜单。所有这些视觉元素都是用 HTML 和 CSS 构建的。无论一个网站有多贵、多现代，这两者都是它的核心基石。

让我们来看看这些工具是如何运行数字世界的，以及你如何能从第一天起通过边玩边写代码来掌握它们！

为什么每个网站都始于这里

想象一下盖房子。如果连屋顶都没有，你肯定不会去买奢华的沙发，对吧？在挑选漂亮的油漆颜色和装饰品之前，你需要最基础的原材料：地基、木梁和水泥砖。没有墙，就没有房子。

把 HTML (超文本标记语言) 想象成你的原材料，它是告诉计算机屏幕上该显示什么的“指挥官”。它会说：“在这里放一个大标题。在那里放一个段落。在这里放一张图片，在那里加一个按钮。” 没有 HTML，你最喜欢的网站就只是一个空白的白屏。什么也看不到，更不用说操作了。

但说实话，一个只有毛坯砖和木梁的房子是很难看的。它灰暗、冰冷，没人想搬进去。它完全是个半成品。这就是为什么我们需要 CSS (层叠样式表) 来美化它。

CSS 接收 HTML 结构并让它变得炫酷。CSS 会说：“让我们把那个大标题变成亮蓝色。把那张图片直接放到屏幕中央。再给那个按钮设计一个好看的圆角，并在鼠标悬停时让它发光！” 这才是建网站的方式。

简单来说，它们是终极搭档。一个构建骨架，另一个塑造皮肤。就是这样。每当你用手机或电脑打开浏览器，你都在观看一场由 HTML 和 CSS 领衔主演的现场直播。它们缺一不可。

陷阱：死记硬背标签和选择器

你对构建自己的第一个网站感到超级兴奋。接下来会发生什么？你可能会去搜一本 500 页的教科书，或者在网上找一个 10 小时的视频播放列表。我们猜你会坐下来，倒杯水，准备成为一名大师。

在最初的几个小时里，感觉可能非常好，像是一个崭新的开始。老师解释了什么是 <h1> 标签，或者如何改变背景颜色，你可能会记些笔记或高亮标出几个定义。你甚至可能会坐在那里想：“嘿，我学得挺不错的嘛！”

然后，大约一天后，你决定在电脑上打开一个空白文件。屏幕完全是白的，那个小光标一闪一闪地看着你，等待着。这时，你的脑子一片空白：“额……我现在该干嘛？” 你发现自己在一遍遍地问：链接的标签是什么来着？我该怎么连接 CSS 文件？为什么我的文字消失了？！

这就是人们常说的“被动学习”的经典陷阱。阅读关于 HTML 和 CSS 的内容很容易让你产生自己在进步的错觉，但你的大脑可能只是在储存定义。

而这根本谈不上是在培养技能。试图记住每一个 HTML 标签，就像试图通过从头到尾阅读一本厚厚的字典来学习一门新的外语。这会让人精疲力竭，而且对我们大多数人来说，这……根本行不通。

复制粘贴的习惯：为什么它可能会阻碍你

另一件常发生的事是陷入“复制粘贴”的习惯。当你跟着视频教程学习时，很容易只是照抄屏幕上那个人写的内容。你的代码和他们的一模一样，你按下保存，然后，嘿，成功了！

但你真的理解它为什么能运行吗？

当我们只是复制和粘贴代码行时，我们可能会错过编程中最重要的一部分：犯错并解决它们。因为，网页开发往往是在事情完全出错的时候才真正发生的。

假设你正尝试构建一个简单的布局，其中有三列并排的文本。你写好了 HTML，应用了一些 CSS，突然第三列掉到了页面底部。它看起来乱套了。

如果你只是从教程中复制了那个布局，你可能根本不知道该如何修复它，因为你没有亲自构建它背后的逻辑。这就是为什么你可能需要一个安全的空间，在那里你可以进行实验、修改数字、看着布局崩塌，并亲身体会网页规则是如何运作的。

亲眼见证你的代码即时生效

学习 HTML 和 CSS 绝对最好的方法就是通过即时反馈。当你写下一行 HTML 时，如果能立即在屏幕上看到结果，那将大有裨益。

想象一下，输入 <h1>My Awesome Website</h1>，在你输入完毕的那一秒，右侧屏幕上就弹出了一个粗体标题。然后，你输入 h1 { color: orange; }，眼睁睁地看着文字在眼前变成亮橙色。

这让学习变成了一场游戏。你不需要在看到结果之前学习好几周的理论，而是从一开始就在创造东西。而且，不要害羞，去改变字体大小、添加边框或移动图片，看看会发生什么！如果看起来很棒，那太好了。如果崩了，你就能学到关于 CSS 布局规则如何运作的新知识。

当你的布局崩了会发生什么？

有时候写 HTML 和 CSS 会让人相当抓狂。你可能会花 30 分钟盯着你的 CSS 代码，试图弄清楚为什么一个按钮就是不肯待在盒子的正中央。你检查了拼写，刷新了页面，却绝对没有任何变化。你甚至可能想把电脑扔出窗外！

通常，问题都是一些微不足道的小事，比如 CSS 中漏掉了一个分号 ;，或者 HTML tag 拼写错误。

当你试图独自看着静态的教科书或视频学习时，这些微小的 Bug 可能会让你的进度停滞好几天。这很容易让人气馁，并认为编程对自己来说太难了。

但想象一下，在你练习时，有一个友好的一对一小助手就坐在你身边。每当你的 HTML 布局崩了，或者字体拒绝变色时，你只需询问 Bugsy，这个直接内置在课程中的 AI 助手。Bugsy 不会只给你一个复制粘贴的答案。Bugsy 会指向你的代码并说：“嘿，看第 14 行！你忘了闭合那里的 HTML 标签，” 或者 “试着检查一下盒子元素上的 CSS margin 设置。”

这就像有一个永远不睡觉、永远不会对你的问题感到厌烦的耐心朋友，实时帮你修复代码，让你能带着微笑继续前进。

2 个掌握 HTML 和 CSS 的实践方法

1. 构建微小的 HTML 组件

为什么要在第一天就急着建一个完整的网站？剧透一下：这是让你头疼的最快途径。与其尝试在几天内创建一个庞大复杂的布局，为什么不专注于微小、具体的片段呢？

想象一下，只需花 10 分钟学习如何为一个按钮、一个基本的登录表单或一个简单的导航栏编写 HTML 标签。听起来好多了，对吧？敲出这些小片段能让你的大脑快速获得成就感。而且，不知不觉中，你就可以开始把所有这些小片段组合在一起，毫无压力地创建一个完整、美观的网页。

2. 故意搞砸你的 CSS

告诉你一个秘密：对你的代码太温柔会拖慢你的进度。如果一切看起来总是那么……完美，你该如何学会像内边距（padding）、外边距（margin）或对齐方式这些棘手的 CSS 属性是如何运作的呢？

如果你把一个原本好好的盒子布局，将尺寸从 20 像素改为 200 像素，会发生什么？去吧，试试看！你的文字飞到哪里去了？它是不是完全从屏幕上消失了？

故意搞砸你的设计听起来可能有点疯狂，但这绝对是你的大脑学习 CSS 规则在现实世界中如何表现的最快方式。所以，别害羞，今天就去搞崩你的布局，看看会发生什么！

为阅读文档做好准备

一旦你能够自如地编写基本的 HTML 页面并用 CSS 为其美化，一扇全新的大门就会敞开。你将开始着眼于更大的项目，而就在那时，你将遇到开发者真正的挚友：编程文档。

把文档想象成软件、工具和高级代码的终极指南。它列出了系统的所有规则和功能，并附带了如何使用它们的清晰示例。

学习如何使用编程文档就像是发现了一个合法的“作弊码”。你不需要死记硬背任何东西！一旦你掌握了 HTML 和 CSS 的基础知识，你就会有信心打开任何文档，查看示例，并用它来构建大型项目。在你的练习工作区旁理解这些指南是如何运作的，不知不觉中就会让你成为一个完全独立的构建者。

HTML 和 CSS 开启通往 20 多种语言的大门

一旦你理解了 HTML 和 CSS 是如何协同工作的，你大脑看待软件的方式就会发生改变。你开始看到应用、游戏和你最喜欢的平台背后隐藏的骨架。

HTML 和 CSS 是终极的入门工具。它们不需要复杂的逻辑或高深的数学，这使得它们在你刚开始时显得格外友好。你可以摆弄颜色、字体和布局等视觉元素，从而即时看到自己的进步。

但是，一旦你掌握了构建页面和美化页面的艺术，你自然会开始提出更令人兴奋的问题：

• 我该如何让这个按钮保存用户数据？
• 我该如何创建一个能记住用户选择的深色模式切换开关？
• 我该如何在不刷新整个页面的情况下加载新内容？

当你达到那个阶段时，恭喜你，你已经准备好学习像 JavaScript、Python 或 PHP 这样的语言了！因为你已经了解了基础，学习一门“真正”的编程语言就会变得容易得多。你现在能够编写脚本来控制你已经知道如何构建的精美网页了。

无论你是想开发移动应用、探索数据科学，还是制作酷炫的独立视频游戏，这段旅程几乎总是始于这两个简单的布局工具。

今天就开始构建你自己的网页天地

互联网是一个庞大、美丽且纷繁复杂的空间，但它完全是由人们使用简单的工具构建起来的。HTML 和 CSS 并不是技术奇才或数学天才的专属。它们属于每一个想要无中生有创造出酷炫事物的人。

你不需要超级豪华的电脑、大学学位，也不需要听几个月的课才能开始。你只需要一点点好奇心、乐于犯有趣错误的意愿，以及一个可以输入代码并即时看到结果的实时平台。

所以，为什么你还在只是刷着这些神奇的网站，纳闷它们是怎么做出来的？快去上一堂简短的微课，敲下你的第一行 HTML，今天就开始构建你自己的互联网天地吧！

今天就构建你的第一个网页