欢迎来到代码乐高城

第1章：欢迎来到代码乐高城

小明的奇妙发现

一个阳光明媚的周末早晨，八岁的小明像往常一样，揉着惺忪的睡眼跑到客厅。他没有去拿遥控器打开电视，而是径直走向爸爸妈妈的书房，小心翼翼地打开电脑。屏幕上，熟悉的网页浏览器正在等待着他——那是小明最喜欢的儿童科普网站，里面有好多好多有趣的科学小实验和卡通动画。

“小明，你怎么又在玩电脑？”妈妈端着一杯温热的牛奶走进书房，语气里带着一丝担忧。

“妈妈，我不是玩游戏，我在看恐龙是怎么灭绝的！”小明兴奋地指着屏幕，“这个网站上有一个超级厉害的动画，把小行星撞地球的故事讲得可精彩了！而且我还可以点击不同的按钮，看到不同的内容，就像变魔术一样！”

妈妈走近一看，果然，屏幕上正播放着一个小行星撞击地球的动画，配合着生动的解说词，恐龙时代的繁荣与突然的毁灭被展现得淋漓尽致。更神奇的是，小明点击屏幕上的不同按钮，动画就会展示不同的内容——有时候是火山爆发，有时候是冰河时期，有时候又是陨石撞地球。

“妈妈，你知道吗？”小明转过头，眼睛里闪烁着好奇的光芒，“我一直在想，这些网页是怎么做出来的？是谁画出了这么可爱的小恐龙？是谁让这些动画动起来的？为什么我一点击，页面就会变出新的内容？真的太神奇了！”

妈妈摸了摸小明的头，笑着说：“这些问题的答案，都在编程的世界里。今天，就让我们一起走进代码乐高城，去探索网页世界的神奇奥秘吧！”

听到“代码乐高城”这个名字，小明立刻来了精神。乐高可是他最喜欢的玩具！他有好多好多乐高积木，有城堡系列、汽车系列、太空系列，还有那个超大的千年隼号。小明最喜欢做的事情，就是用这些小小的积木块，按照自己的想法，拼搭出各种各样的神奇作品。

“太好了！我要去代码乐高城！”小明兴奋地跳了起来，“我要用代码积木，搭出一个超级棒的网页！”

就这样，小明开始了他的代码乐高城探险之旅。而你，亲爱的小读者，也将和小明一起，踏上这段充满惊喜和欢乐的旅程。在这一章里，我们会一起认识网页世界，了解什么是网页、什么是前端、网页是怎么工作的。别担心，这些看起来很专业的词汇，我们会用生活中最常见的东西来解释，保证你一听就懂，一学就会！

你身边的网页世界

在正式开始我们的探险之前，让我们先来看看，网页到底长什么样子，以及它们都藏在哪些地方。

打开电脑或手机，你就会看到一个叫做“浏览器”的神奇软件。最常见的浏览器有这些：Google Chrome（谷歌浏览器）、Mozilla Firefox（火狐浏览器）、Microsoft Edge（微软浏览器）、Safari（苹果浏览器）等等。你可以把这些浏览器想象成一台超级电视机，它能接收来自全世界各地网页的“节目”，然后把这些节目精彩地播放给你看。

现在，让我们打开浏览器，在地址栏里输入一个网址——比如说，www.baidu.com。你看，百度搜索引擎的页面出现了！上面有一个大大的搜索框，下面有很多很多小小的链接。你可以在搜索框里输入任何你感兴趣的内容，比如“小恐龙”、“孙悟空”、“太空飞船”，然后按一下回车键，网页就会神奇地变出好多好多相关的页面供你选择。这就是网页的第一个神奇之处——它能让你找到你想要的信息！

再比如，你可能和爸爸妈妈一起去旅游过。当你们在手机上打开一个订酒店或者订机票的网页时，你有没有注意到，那些网页上会显示很多漂亮的房间照片、价格信息，还有用户评价？你可以点击不同的日期，看看不同日期的价格有什么变化；你也可以点击不同的房间类型，看看哪个房间更大、哪个房间有窗户。这些都是网页在和你“互动”，它会根据你的选择，显示不同的内容给你看。

再举一个例子。你有没有在视频网站上看动画片？当你打开一个视频网站，点开一部动画片开始播放的时候，画面上的小主人公就开始动起来了——他会走路、跑步、跳跃、做各种有趣的动作。有时候，小主人公还会说话、唱歌、做游戏。这些会动的画面，就是网页的另一个神奇之处——动画效果！

还有，你有没有在购物网站上逛过？当你打开一个网上商城，你会看到琳琅满目的商品图片。有漂亮的衣服、可爱的玩具、美味的零食、数字产品等等。每一件商品都有自己的价格、图片和详细介绍。如果你把鼠标移到某件商品上，有时候会出现一个小小的提示框，显示这件商品的更多信息；如果你点击这件商品，页面就会跳转到这件商品的详情页，展示更多细节。这就是网页的“交互性”——它能对你的操作做出反应。

通过这些例子，你现在应该对网页有了一个基本的认识。网页就是一个可以在浏览器里显示的内容页面，它能展示文字、图片、视频、动画等等各种信息，而且还能和你互动——你点击一下，它就会做出回应。网页是我们认识世界、获取知识、娱乐休闲的重要工具。我们每天都会和网页打交道，只是可能没有意识到而已。

积木城堡的秘密

现在你已经知道网页是什么了。但是你有没有想过，这些漂亮的网页，到底是怎么“搭建”出来的呢？

让我们先来玩一个思维游戏。回想一下你玩乐高的经历。你有一盒乐高积木，里面有各种各样的零件：有正方形的、有长方形的、有带孔的、有带凸起的、有红色的、有蓝色的、有黄色的、有绿色的……这些小小的零件看起来普普通通，但只要你发挥想象力，按照一定的方式把它们拼在一起，就能搭出各种各样的神奇作品。

你可能用乐高搭过一座城堡。城堡的墙壁是用一块块长方形的积木垒起来的；城堡的塔楼是用圆柱形的积木做成的；城堡的大门是用带凸起的积木拼成的门框；城堡的屋顶是用三角形的积木搭建的。你还会在城堡里放一些小人来代表城堡的居民，有国王、王后、骑士、公主、仆人……

如果把所有这些乐高积木都拆散，堆在一起，它们看起来就是一堆乱七八糟的塑料块，谁也不知道它们能变成什么。但是当你按照说明书上的步骤，或者按照自己的想法，把它们一个一个地组装起来之后，一座漂亮的城堡就出现在你面前了！

网页的搭建，其实就像玩乐高一样。

网页世界也有各种各样的“积木块”，只不过这些积木块不是塑料做的，而是用代码写成的。我们把这种代码叫做HTML、CSS和JavaScript。你可以把HTML想象成城堡的墙壁和结构——它决定了网页上有哪些内容，比如标题是什么、正文是什么、有哪些图片和视频。CSS就像城堡的装饰——它决定了网页长什么样子，比如墙壁是什么颜色、窗户有多大、屋顶是什么形状。JavaScript就像城堡里的小人和机关——它决定了网页会做什么，比如点击一下会发生什么、动画怎么播放。

这三种代码积木各有各的功能，各有各的特点，但它们配合在一起，就能搭建出各种各样的网页作品。就像你玩乐高积木一样，可以用同样的积木块搭出城堡、飞船、汽车、机器人……网页开发者也可以用同样的HTML、CSS和JavaScript代码，搭出百度搜索、淘宝购物、B站视频、微信聊天……

在代码乐高城里，我们主要学习的是“前端”开发。那么，“前端”是什么意思呢？

想象一下，你去一家餐厅吃饭。餐厅里有厨房和用餐区。厨房是厨师做菜的地方，客人是不能进去的；用餐区是客人吃饭的地方，厨师偶尔会出来和客人打招呼。客人能看到的是用餐区的装修、桌子、椅子、餐具、菜品，但看不到厨房里的锅碗瓢盆、炉灶油烟。

网页的“前端”就是网页的“用餐区”——它是用户能够看到、能够操作的部分。前端开发者的工作，就是把网页的“用餐区”装修得漂漂亮亮，让用户用起来舒舒服服。前端开发者会用HTML写出网页的内容结构，用CSS设计网页的外观样式，用JavaScript实现网页的交互功能。

而网页的“后端”就像是餐厅的厨房——它是普通用户看不到的部分。后端开发者负责处理数据、运行程序、连接数据库等工作。打个比方，当你登录一个网站输入用户名和密码时，前端负责把密码显示成小圆点（保护隐私），然后把密码发送到服务器；后端负责验证密码是否正确，验证通过后就会告诉你“登录成功”。

在代码乐高城的故事里，我们主要关注的是“前端”这个神奇的领域。我们会学习如何用代码积木搭建网页，如何让网页变得漂亮，如何让网页和你互动。这就像是在学习如何设计和装修一个房间，让它变成你想要的样子。

浏览器：神奇的网页播放器

我们已经知道，网页是用HTML、CSS、JavaScript这些代码积木搭建出来的。但是，这些代码是怎么变成我们看到的漂亮网页的呢？这就轮到浏览器登场了！

浏览器就像是一台超级翻译机，它能够读懂HTML、CSS、JavaScript这些代码语言，然后把代码“翻译”成我们能看懂的网页界面。浏览器的工作过程大概是这样的：

首先，当你输入一个网址（比如www.example.com）并按下回车键时，浏览器会向服务器发送一个请求，就像你对服务员说“我要点一份汉堡”一样。服务器收到请求后，会把网页的代码文件发送给浏览器。

然后，浏览器开始阅读这些代码。浏览器首先阅读HTML代码，了解网页的内容结构——有哪些标题、段落、图片、视频、按钮等等。接着，浏览器阅读CSS代码，了解网页的样式——标题应该多大、什么颜色，图片应该放在哪里，背景是什么图案。然后，浏览器阅读JavaScript代码，了解网页的行为——点击按钮会发生什么，动画应该怎么播放。

最后，浏览器把所有这些信息整合起来，在屏幕上渲染出一个完整的网页。就像厨师把各种食材按照菜谱加工成一道美味的菜肴一样，浏览器把各种代码“加工”成用户能看到的网页界面。

不同的浏览器（比如Chrome、Firefox、Edge、Safari）可能有一点点不同的“翻译方式”，就像不同的厨师做同一道菜可能会有细微的差别。这就是为什么有时候同一个网页在不同浏览器里看起来会有一点点不同。不过，现代浏览器都遵循一套标准，所以大多数时候，网页在不同浏览器里看起来都是一样的。

现在，让我们来做一个小实验。请你打开电脑或手机上的浏览器（如果你是用手机看的这本书，可以让爸爸妈妈帮你操作电脑）。在地址栏里输入一个你常去的网站，比如一个儿童新闻网站或者在线学习网站。

你看到了什么？页面上有文字、有图片、有按钮。也许顶部有一个导航栏，下面有一排排的文章或视频，中间有一些彩色的装饰元素。

现在，让我们来做一个更神奇的事情。右键点击页面上的一段文字，选择“检查”（或者“审查元素”），你可能会看到一个新的窗口弹出来，里面显示了很多密密麻麻的代码。不要害怕！那些就是构成这个网页的HTML代码。试着滚动一下那些代码，看看能不能找到一些你认识的内容，比如一些中文词语或者英文单词。

这就是网页的“源代码”——它是网页的“配方”，告诉浏览器这个网页应该长什么样子、应该怎么工作。你现在看到的这个漂亮的网页，就是由这些看起来有点奇怪的代码“变”出来的。很神奇吧？

代码积木的三剑客

在代码乐高城里，最重要的“积木”就是HTML、CSS和JavaScript这三种代码。它们就像三个各有特长的好朋友，一起合作，就能搭建出各种各样神奇的网页作品。让我们来认识一下它们吧！

HTML：网页的结构大师

HTML的全称是“HyperText Markup Language”，翻译成中文就是“超文本标记语言”。这个名字听起来很专业、很复杂，但其实它很好理解。让我们用搭积木的例子来解释。

想象你要用乐高积木搭一座房子。你会先规划一下：房子应该有多大？有哪些房间？门在哪里？窗户在哪里？楼梯在哪里？这些关于“结构”和“布局”的问题，就是HTML要解决的问题。

HTML用一种叫做“标签”的东西来描述网页的结构。标签就像乐高积木上的凸起和凹槽，它告诉浏览器“这里是标题”、“这里是段落”、“这里是图片”、“这里是按钮”。

HTML的标签有很多种，每种标签都有自己的名字和用途。最基本的标签是这些：

`<html>`和`</html>`——这对标签包裹住整个网页，告诉浏览器“这里是网页的开始，这里是网页的结束”。

`<head>`和`</head>`——这对标签包含网页的“头部”信息，比如网页的标题、使用的字符编码、连接的样式表文件等等。“头部”信息一般不会直接显示在网页上，但它们很重要，就像一本书的封面和目录页一样。

`<body>`和`</body>`——这对标签包含网页的“身体”内容，也就是用户能在网页上看到的部分——文字、图片、视频、按钮，全都在这里面。

`<h1>`到`<h6>`——这些是标题标签。`<h1>`是最大最重要的标题，`<h6>`是最小最不重要的标题。就像一本书有章标题、节标题、小节标题一样，网页也用不同级别的标题来组织内容。

`<p>`——这是段落标签，用来包裹一段文字。浏览器会自动在段落之间留出空白，让文字看起来更整齐、更好读。

`<img>`——这是图片标签，用来在网页上插入图片。图片标签比较特殊，它不需要结束标签，只要在标签里面写上图片的地址就可以了。

`<a>`——这是链接标签，用来创建可点击的链接。链接标签里面有一个叫做`href`的属性，告诉浏览器点击这个链接会跳转到哪里。

`<button>`——这是按钮标签，用来在网页上放置一个按钮。用户可以点击这个按钮，触发某些功能。

还有很多很多其他的标签，它们各有各的用途。你可以把这些标签想象成乐高积木的不同形状——有的是长方形、有的是正方形、有的是圆柱形、有的是三角形。把这些不同形状的积木拼在一起，就能搭出各种不同的建筑结构。

CSS：网页的造型师

如果说HTML决定了网页的“骨架”，那么CSS就决定了网页的“外表”。CSS的全称是“Cascading Style Sheets”，翻译成中文就是“层叠样式表”。这个名字也有点复杂，我们还是用生活例子来解释。

想象你已经用乐高积木搭好了一座房子。房子有墙壁、地板、屋顶、门窗，结构很完整。但是，如果就这样放着，这座房子看起来有点单调——所有积木都是同一个颜色，同一种形状，没有装饰，没有色彩。

CSS的工作就是给这座房子“上色”和“装饰”。CSS可以决定文字是什么颜色、多大字号、用什么字体；可以决定图片有多大、放在哪里、是什么形状；可以决定按钮是什么颜色、什么形状、鼠标移上去会变成什么样子；可以决定整个网页的背景是什么颜色、什么图案、有没有渐变效果……

CSS的工作方式是这样的：它会“选中”HTML中的某个元素（比如一个标题），然后给它加上样式（比如红色、24号字、加粗）。

举几个CSS的例子：

`color: red;`——这会让文字变成红色。

`font-size: 24px;`——这会让文字的大小变成24像素（像素是衡量屏幕大小的单位）。

`background-color: yellow;`——这会让背景变成黄色。

`border: 2px solid blue;`——这会给元素加上一个2像素宽、实线、蓝色的边框。

CSS的功能非常强大，可以用很短的代码实现很酷的效果。通过CSS，你可以把一个普普通通的网页变得色彩斑斓、漂漂亮亮。CSS就像是网页的“造型师”，负责让网页变得更加美观、更加吸引人。

JavaScript：网页的魔法师

HTML和CSS已经让网页有了结构有了外观，但是网页还没有“灵魂”——它不会动、不会变、不会回应你的操作。这时候，就需要JavaScript登场了！

JavaScript是一种编程语言，它能让网页变得“活”起来。JavaScript可以做的事情太多了：

它可以让你点击一个按钮，页面上就弹出一个小窗口显示信息。

它可以让你填写一个表单，然后检查你填写的内容是否正确。

它可以播放动画，让网页上的元素动起来——比如飘落的雪花、奔跑的小人、旋转的陀螺。

它可以从服务器获取新的数据，然后在不刷新页面的情况下更新网页的内容。

它可以记住你的偏好设置，比如你上次访问时选择了深色模式，下次访问时自动使用深色模式。

JavaScript让网页变得有交互性、有动态效果、有“智慧”。想象一下，如果一个网页只能显示静态的文字和图片，不能做任何回应，那该多无聊啊！正是JavaScript让网页变得像一个小助手、小游戏、小玩具一样有趣。

HTML、CSS和JavaScript，这三个好朋友各司其职，又紧密合作。HTML负责“说什么”——网页的内容是什么；CSS负责“怎么说”——网页看起来怎么样；JavaScript负责“做什么”——网页会有什么动作和反应。把它们三个组合在一起，就构成了前端开发的核心技术。

用画画来理解网页

除了用积木来比喻网页，我们还可以用画画来理解网页的概念。

想象你在一张白纸上画画。你先画了一个太阳，然后画了一座山，山脚下有一座小房子，房子旁边有一棵树，树下有几个小朋友在玩耍。你用不同的颜色画太阳、房子、树、小朋友，用线条画出了它们的形状。

画完之后，你看着这幅画，觉得还不够漂亮。你想给太阳加上光芒，让它看起来更耀眼；你想给天空加上几朵白云，让画面更丰富；你想给小朋友加上表情，让它们看起来更开心。于是你拿出彩色笔，一笔一笔地给画面添加细节和色彩。

最后，你还想让这幅画动起来！你在画上加了一些小机关——比如，你画了一个弹簧机关，小朋友一跳就会弹起来；你画了一个风车，一吹就会转；你画了一个太阳公公，一按就会发出光芒。这些小机关让原本静止的画面变得生动有趣。

这个画画的过程，其实就是在“做网页”：

你最初画的太阳、山、房子、树、小朋友——这就是HTML做的事情。HTML定义了网页上有哪些元素，它们各自在哪里、是什么形状。

你后来添加的颜色、光芒、白云——这就是CSS做的事情。CSS定义了网页上各个元素的颜色、大小、位置、样式。

你最后添加的小机关——这就是JavaScript做的事情。JavaScript定义了网页上各个元素会做什么动作、怎么和用户互动。

HTML是网页的“底稿”，CSS是网页的“色彩”，JavaScript是网页的“魔法”。把这三者结合起来，就能画出又漂亮又有趣的“网页画”！

在代码乐高城里，我们就是要学习如何创作这样的“网页画”。我们会学习如何用HTML画出网页的“骨架”，如何用CSS给网页“上色”，如何用JavaScript给网页“施魔法”。等你学完了所有的知识，你也能创作出属于自己的、独一无二的网页作品！

网页是怎么工作的

现在你已经知道网页是由HTML、CSS、JavaScript这些代码组成的，浏览器负责把这些代码“翻译”成我们看到的网页界面。但是，网页到底是怎么从远程的服务器“跑”到我们的电脑或手机上的呢？这个过程是怎么实现的？

让我们用一个生活中的例子来解释。

想象你要给远方的朋友寄一封信。你先在一张信纸上写下你想说的话——比如“亲爱的朋友，你好吗？我很想念你。祝你天天开心！”然后你把信纸装进信封，写上朋友的地址和自己的地址，贴上邮票，把信投进邮筒。

邮递员会来收取信件，把信送到邮局。邮局会对信件进行分拣，看看它应该被送到哪个城市的哪个邮局。然后，信件会被装进邮袋，通过飞机、火车、汽车等交通工具，运送到目的地城市的邮局。目的地的邮递员会再次分拣信件，看看它应该被送到哪条街、哪个门牌号。最后，邮递员会把这封信送到朋友的手中。

朋友打开信封，阅读你写的信，就知道了你想传达的信息。整个过程虽然看起来复杂，但其实在几秒钟之内就能完成——如果你用特快专递的话。

网页的工作原理，其实和寄信非常相似！

当你想要访问一个网页时，你的浏览器会发出一封“信