第一章：欢迎来到网页王国
放学铃声清脆地响起，夕阳的余晖洒在校园的林荫道上，把每一片叶子都染成了金色。小灵背着那个蓝色的双肩包，蹦蹦跳跳地走在回家的路上。书包里装着今天发的数学试卷，上面画满了红叉叉——唉，又是那个讨厌的应用题，小灵怎么也算不明白。
“算了算了，先不想这个！”小灵摇摇头，加快了脚步。肚子已经开始咕咕叫了，妈妈今天做了什么呢？红烧排骨？糖醋鱼？光是想一想，小灵就感觉口水要流下来了。
走过学校旁边那条长长的巷子，再拐过街角，就能看到小区的大门了。小灵熟门熟路地走着，忽然，巷子深处有什么东西吸引了他的注意。
那是一台……电脑？
小灵揉了揉眼睛，没错，在那堆杂乱的纸箱和旧家具中间，确实摆着一台电脑。准确地说，是一台老式台式机，显示器是那种厚厚的、方方正正的款式，看起来至少有好几十年的历史了。机箱上落满了灰尘，键盘的字母都磨得看不清了。
可是最奇怪的是，这台电脑的屏幕居然亮着！
一道柔和的蓝色光芒从屏幕中散发出来，在昏暗的巷子里显得格外醒目。小灵看了看四周，这里平时就是个堆放杂物的地方，很少有人来。这台电脑是从哪里来的？为什么会在这里？它为什么是亮着的？
好奇心像一只小爪子，在小灵的心里挠啊挠。他本来应该直接回家的，可是那双脚却不听使唤地朝电脑走去。
一步，两步，三步……
小灵走到电脑前，弯下腰仔细打量着这台神秘的机器。屏幕上的光芒似乎在微微跳动，像是某种邀请。
“Hello？”小灵试探性地对着屏幕喊了一声，“有人吗？”
当然没有人回答他。屏幕上的光芒却跳动得更欢快了，仿佛在回应他的问候。
小灵凑近了一些，想看看屏幕上显示的是什么内容。可是屏幕上的画面很奇怪，不像是普通的网页或者游戏画面，而是不断闪烁着各种符号和图案。有的小方块排列得整整齐齐，像是在搭积木；有的是五颜六色的色块；还有的会自己动来动去，像是有了生命一样。
“这到底是什么呀？”小灵好奇地伸出手，指尖刚刚碰到屏幕——
“哎呀！”
小灵惊叫一声，因为他感觉到屏幕像是活的！那道蓝色的光芒顺着他的手指爬了上来，像是一条柔软的发光丝带，把他整个人都包裹了起来。
“别怕别怕，小朋友！”一个苍老而温和的声音响起，“这只是传送门在工作而已。”
“传、传送门？”小灵瞪大了眼睛，还没来得及反应，眼前就突然一白，什么都看不见了。
---
“小朋友！小朋友！你还好吗？”
那个苍老的声音再次响起，把小灵从眩晕中拉了回来。
小灵慢慢睁开眼睛，发现自己正躺在一片柔软的草地上。天空是湛蓝色的，但仔细看去，那蓝色似乎是由无数个小点点组成的，就像……就像电视屏幕上的像素点一样。
“天啊，这是哪里啊？”小灵猛地坐起来，四处张望。
“这里吗？这里是网页王国啊！”那个声音的主人终于出现在小灵面前——是一位白胡子老爷爷，穿着一件灰色的长袍，头戴一顶奇怪的帽子。帽子上绣满了奇怪的符号，看起来像是某种代码。
“老爷爷，您是谁？”小灵连忙站起来，拍了拍身上的草屑。
“我？我叫码爷爷，是这个网页王国的守护者。”老爷爷笑眯眯地说，“欢迎来到网页王国，我的小客人！”
“网页王国？”小灵更糊涂了，“那是什么地方？这里是电脑里面吗？”
码爷爷捋了捋长长的白胡子，眼睛里闪着智慧的光芒：“电脑里面？嗯，这么说也不算错。这里确实是由代码构建的世界，不过它可比普通的电脑有趣多了。来来来，我带你四处看看吧！”
码爷爷拄着一根不知道用什么材料做成的手杖，带着小灵往前走。走了没几步，一座奇特的“建筑”出现在小灵眼前。
这座“建筑”看起来像是一栋房子，但它的墙壁是由一个个整整齐齐的“小方块”组成的。每个小方块里面都写着一些奇怪的符号，有的写着“html”，有的写着“body”，还有的写着“div”。这些小方块层层叠叠地排列在一起，构成了房子的大梁、墙壁、屋顶……
“哇！这房子好奇怪啊！”小灵忍不住惊叹。
“这叫做HTML房子，”码爷爷解释道，“HTML就是网页的骨架，它决定了网页有哪些部分、各个部分放在哪里。就像盖房子需要先搭好框架一样，做网页也要先有HTML。HTML的全称是HyperText Markup Language，翻译成中文就是超文本标记语言。”
“超文本……标记语言？”小灵努力地重复着这些名词，感觉有点复杂。
码爷爷笑了笑：“没关系没关系，你现在还小，等以后学了就明白了。简单来说，HTML就是用来告诉浏览器‘这里有一个标题’、‘那里有一个段落’、‘中间要放一张图片’的东西。你看到的这些小方块，叫做标签，每个标签都有自己的作用。”
说着，码爷爷带着小灵继续往前走。很快，他们来到了一条繁华的街道。街道两旁是各种各样的店铺和房屋，每一栋建筑都有自己的独特风格。有的房子是红色的，看起来喜气洋洋；有的是蓝色，清新淡雅；还有的涂着彩虹一样的七种颜色，绚烂夺目。
“为什么这些房子颜色都不一样啊？”小灵好奇地问。
“这就要靠CSS来帮忙了。”码爷爷指着那些彩色的房子说，“CSS就像是网页的画家，负责给网页穿上漂亮的衣服。CSS的全称是Cascading Style Sheets，翻译过来是层叠样式表。它的作用就是告诉浏览器，每个部分应该用什么颜色、多大的字体、距离其他部分多远等等。”
“那HTML和CSS是什么关系呢？”小灵觉得自己的脑袋有点转不过来。
码爷爷想了想，用了一个简单的比喻：“想象你要画一幅画。HTML就像是画布和画纸，它决定了你要画什么——有太阳、有云、有房子、有小人。CSS呢，就像是颜料和画笔，它决定这些东西长什么样——太阳是红色的还是黄色的？云是白色还是灰色的？房子是大还是小？明白了吗？”
“明白了！”小灵眼睛一亮，“HTML决定有什么，CSS决定长什么样！”
“对对对，就是这个道理！”码爷爷赞许地点点头，“你很聪明嘛！”
小灵有点不好意思地挠挠头，可是他心里又冒出了一个问题：“可是码爷爷，我刚才在巷子里看到的那些奇怪的图案，有的会自己动来动去，那是怎么办到的呢？”
码爷爷神秘地眨眨眼：“问得好！那就要靠JavaScript了。”
就在这时，一阵欢呼声从小灵身后传来。他转头一看，只见街道上突然热闹起来——一只毛茸茸的小动物从旁边的房子里跑出来，然后又钻了回去；一盏路灯自己亮了起来，过了一会儿又灭了；街边的小贩居然在吆喝着卖东西，客人们进进出出……
“天啊！这些都是真的吗？”小灵惊呆了。
“它们不是真的，但它们看起来像真的。”码爷爷笑呵呵地说，“这就是JavaScript的魔力。JavaScript是网页的心脏，它给网页赋予了生命。有了JavaScript，网页就可以变得'活'起来——可以响应你的点击、可以自己动起来、可以和你对话。HTML是骨架，CSS是皮肤，JavaScript就是灵魂。你刚才看到的那些会自己动的图案，就是JavaScript在起作用。”
小灵听得入了迷，原来一台普普通通的电脑里面，竟然藏着这么神奇的世界！
正当小灵沉浸在惊讶中时，码爷爷突然停下了脚步，神情变得有些严肃。
“小灵啊，我带你来这里，其实是有原因的。”码爷爷叹了口气，“网页王国最近遇到了一些麻烦。”
“麻烦？什么麻烦？”小灵连忙问。
“我们王国正在招募新的小工程师。”码爷爷看着小灵，眼睛里满是期待，“我们需要有人来建造新的建筑、维护旧的设施，让王国变得越来越好。你……愿意成为我们的一员吗？”
小灵愣了一下：“我？我能行吗？我才上小学五年级啊！而且我又不懂什么HTML、CSS、JavaScript……”
码爷爷拍了拍小灵的肩膀：“没关系，我可以教你啊！就像你学语文要学拼音、学数学要学加减法一样，编程也是从最基础的东西学起的。而且啊——”码爷爷眨眨眼，“学习编程可有意思了，你可以创造出自己的游戏、动画、网站，比玩别人做的游戏有趣多了！”
小灵心动了。能够创造游戏和动画？听起来确实很酷！而且这个世界这么神奇，小灵也想多了解一些。
“好！我愿意试试！”小灵握紧小拳头，“码爷爷，您教我吧！”
码爷爷高兴得胡子都翘了起来：“好好好！太好了！那我们从最基础的东西开始吧——首先，你要知道什么是网页。”
---
“小灵啊，你知道什么是网页吗？”码爷爷带着小灵来到了一座小亭子里，两人坐在石凳上，开始了正式的“教学”。
“网页……”小灵想了想，“网页就是我们在电脑上看到的那些页面吗？就像打开百度会看到一个搜索的页面，打开游戏会看到一个游戏的页面？”
“没错！你理解得很对！”码爷爷点点头，“网页就是你在浏览器里看到的每一个页面。你可以把它想象成是一张电子画布，上面可以放文字、图片、视频、按钮……各种各样的东西。我们每天上网，其实就是在浏览一个又一个的网页。”
“那什么是浏览器呢？”小灵问道。
“浏览器啊，就是用来查看网页的工具。”码爷爷打了个比方，“想象你有一本厚厚的书，书里有很多很多页，每一页都是一幅画。如果你想看这些画，就需要翻书。浏览器就像是那本书的翻页器，它帮你把网页这张'画'展示出来给你看。”
“常见的浏览器有很多，比如谷歌浏览器Chrome、微软的Edge、苹果的Safari、火狐浏览器Firefox等等。它们的功能都差不多，都是用来显示网页的，只是速度和界面可能有点不一样。”
小灵点点头，他想起自己家里电脑上用的就是Chrome浏览器，原来这就是码爷爷说的浏览器啊！
“接下来我要教你的，是每个网页都有的东西——URL地址。”码爷爷神秘地说。
“URL？那是什么？”小灵歪着脑袋。
“你有没有注意过，当我们想打开某个网页的时候，要在浏览器里输入一串奇怪的字母和符号？”
小灵回忆了一下：“哦！我知道了！就像打开百度的时候，浏览器里会显示www.baidu.com，对吗？”
“对对对！”码爷爷欣慰地笑了，“你观察得很仔细。www.baidu.com就是百度的URL地址。URL的全称是Uniform Resource Locator，中文名叫统一资源定位器。翻译成大白话，就是'网址'。”
“网址我懂！”小灵说，“就是网页的门牌号对不对？”
“太对了！”码爷爷竖起大拇指，“就像每个房子都有自己独特的地址一样，每个网页也有自己独特的网址。当你在浏览器里输入一个网址，浏览器就会根据这个地址，找到对应的网页，然后把网页的内容展示给你看。”
码爷爷说着，用手中的魔法手杖在空中一挥，一串发光的字符出现在空中：
``` https://www.example.com/index.html ```
“你看，一个网址通常由几个部分组成。”码爷爷开始解释，“最前面的是'https://'，这叫做协议，就像是一封信的邮戳，表示浏览器应该用什么方式来获取网页。最常见的是http和https，区别是https更加安全，你在网上购物或者登录账号的时候，通常会用https。”
“然后是'www.example.com'这部分，这是域名。域名就像是一个人的名字，它比后面的数字地址好记多了。真正的电脑之间是用数字来通信的，数字地址叫做IP地址，就像192.168.1.1这样。但是数字太难记了，所以就有了域名，让人们用名字就能访问网站。”
“最后是'/index.html'，这个叫做路径。它表示你要访问的具体文件。就像一座大楼有很多房间，你需要告诉浏览器你要去哪个房间。”
小灵听得眼睛都亮了，这些知识好有意思啊！
“那为什么有的网址开头是http，有的开头是https呢？”小灵问。
“这是个好问题！”码爷爷说，“简单来说，https比http多了一个'S'，这个'S'代表'Secure'，意思是'安全'。当网页使用https的时候，你和网站之间的通信会被加密，就像有了一把锁保护你的信息。所以当你要输入密码、银行卡号这些重要信息的时候，一定要看看网址开头是不是https。”
“原来是这样！”小灵恍然大悟，“我以前都不知道呢！”
---
了解了网址的基本知识后，码爷爷决定带小灵去参观网页王国的“档案馆”，那里存放着网页世界最重要的秘密。
档案馆的外观看起来像一座图书馆，里面有无数个书架，每个书架上都摆满了各种颜色的“书”。但小灵走近一看，发现这些根本不是真正的书，而是各种各样的网页文件！
“这些都是我们网页王国的宝贵财富。”码爷爷自豪地说，“HTML文件、CSS文件、JavaScript文件、图片、音频、视频……所有的资源都存放在这里。”
“你看那边，”码爷爷指着书架上不同颜色的文件，“蓝色的代表HTML文件，它们是网页的骨架；紫色的代表CSS文件，它们负责网页的样式；黄色的代表JavaScript文件，它们给网页带来交互。”
小灵仔细端详着这些文件，发现它们的图标确实不一样。HTML文件的图标像是一个带着<>符号的卷轴，CSS文件的图标像是一个调色盘，JavaScript文件的图标像是一个金色的咖啡杯——据说这是因为JavaScript最初的名字和咖啡有点关系呢。
“码爷爷，这些文件是怎么组合在一起，变成我们看到的网页的呢？”小灵好奇地问。
“这个嘛……”码爷爷捋了捋胡子，“说起来其实也不复杂。当你在浏览器里输入一个网址，浏览器就会去服务器那里请求网页。服务器就像是一个超级大的仓库管理员，它会找到你需要的文件，然后把这些文件发送给浏览器。”
“浏览器收到文件之后，就会开始'读'这些文件。首先读HTML文件，了解网页的结构——有哪些标题、哪些段落、哪些图片。然后读CSS文件，按照CSS的指示给各个部分添加颜色、大小、间距等样式。最后读JavaScript文件，给网页添加各种交互功能。”
“就像搭积木一样？”小灵兴奋地说。
“没错，就像搭积木！”码爷爷笑着说，“HTML告诉你有哪些积木块，CSS告诉你把这些积木块涂成什么颜色、摆成什么形状，JavaScript告诉你哪些积木块会动、会说话、会做游戏。三者配合起来，就构成了一个完整的网页！”
---
参观完档案馆，码爷爷带着小灵来到了一块空地。这里已经有很多小朋友聚集了，他们有的在交头接耳，有的在好奇地四处张望。
“这些都是来参加小工程师培训的小朋友，”码爷爷介绍道，“网页王国每年都会举办这样的活动，招募新成员来学习网页开发。”
“欢迎大家来到网页王国！”码爷爷站在一块大石头前，对着小朋友们说，“从今天开始，你们就是网页王国的小工程师候选人了！在接下来的一段时间里，我会教你们HTML、CSS和JavaScript的知识。等你们学成之后，就可以为我们的王国建设添砖加瓦了！”
小朋友们发出了欢呼声。
“首先，让我们从HTML开始。”码爷爷挥动手杖，空中出现了一个巨大的屏幕，“HTML是网页的骨架，是所有网页的基础。不管你以后想做什么网站、做游戏还是做App，HTML都是第一步要学的。”
“HTML使用一种叫做'标签'的东西来工作。”码爷爷继续解释，“标签就像是搭建房子用的砖块，只不过它们不是真正的砖头，而是用符号<>包起来的文字。”
说着，码爷爷在屏幕上写下了这样的内容：
```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到网页王国</h1> <p>这是一个神奇的代码世界！</p> </body> </html> ```
小灵瞪大眼睛看着这些奇怪的符号，感觉又陌生又兴奋。
“第一行<!DOCTYPE html>告诉浏览器，这是一个HTML文档，要用HTML的标准来解析。”
“然后是<html>标签，它就像是一个大盒子，把整个网页的内容都装在里面。所有的HTML代码都要放在这个大盒子里。”
“<head>标签里面放的是网页的头部信息，比如网页的标题。<title>就是网页标题，你打开浏览器标签页的时候看到的那行字就是它。”
“<body>标签里面放的是网页的主要内容，比如标题、段落、图片等。<h1>是最大的标题标签，<p>是段落标签。”
小灵认真地听着，虽然有些地方还不太明白，但他已经把重要的知识点记在了心里。
“那我写的这些文字会直接显示在网页上吗？”有小朋友举手问道。
“问得好！”码爷爷说，“HTML的标签不会直接显示出来，它们只是告诉浏览器这些内容是什么。比如<h1>标签不会显示，它只是告诉浏览器'这是一级标题'，浏览器再按照一级标题的样式把它显示出来。”
“标签是成对出现的，”码爷爷指着屏幕上的代码，“有开始标签<xxx>，就要有结束标签</xxx>，两者夹着的内容就是标签要标记的内容。结束标签和开始标签的区别是多了一个斜杠/。”
小朋友们纷纷点头，表示明白了。
---
了解了HTML的基本概念后，码爷爷决定带小朋友们进行第一次实践。
“接下来，我们要创建一个真正的网页！”码爷爷兴奋地说。
码爷爷挥动手杖，每个小朋友面前都出现了一台小电脑。小灵看着这台电脑，感觉和现实世界里的电脑很像，但仔细看又有点不同——键盘上的字母在发光，屏幕的边框是彩虹色的。
“不要太惊讶，这就是网页王国特有的编程电脑。”码爷爷笑着说，“好了，让我们开始写代码吧！”
小灵在码爷爷的指导下，在电脑上敲下了人生中第一行HTML代码：
```html <h1>你好，网页王国！</h1> ```
“天啊！这段代码在我的屏幕里！”小灵激动地叫起来。
原来，这台编程电脑是网页王国特有的工具。当小灵输入代码的时候，代码会自动变成网页的样子显示出来。小灵看到自己输入的"你好，网页王国！"以超大的字体出现在屏幕中央，就像魔法一样神奇！
“太棒了！”码爷爷欣慰地说，“小灵，你完成了你在网页王国的第一个作品！”
小灵激动得脸都红了。他从来没想过，自己也能创造出网页！
“接下来，让我们给网页加点内容。”码爷爷继续说，“你可以加一个段落、一些图片、或者一个按钮。随便你想加什么！”
小灵想了想，在<h1>下面加了一行：
```html <p>我叫小灵，今年11岁。</p> ```
屏幕上立刻出现了新的内容。现在网页上有了一个大标题和一段话，看起来已经有模有样了。
“很好很好！”码爷爷走过来看了看小灵的网页，“不过现在网页还比较简单。等你学了更多知识之后，你可以做出更复杂、更好看的网页！”
---
一天的培训很快结束了。码爷爷把大家召集到一起，做了一个小小的总结。
“今天我们学到了什么呢？”码爷爷问道。
“我知道了HTML是用来搭建网页结构的！”一个小朋友举手回答。
“很好！”码爷爷点点头，“还有呢？”
“HTML是由标签组成的！”另一个小朋友说。
“没错！还有吗？”
“URL是网页的地址！”
“浏览器是用来查看网页的工具！”
小朋友们七嘴八舌地回答，气氛非常热烈。
“大家都学得很棒！”码爷爷满意地说，“今天的课就到这里。回去好好休息，明天我们继续学习HTML的更多知识。明天你们会学到怎么在网页里添加图片、链接，还有更多有用的标签！”
小灵恋恋不舍地看着眼前的网页王国，夕阳的光芒把整个王国染成了金黄色。那些由代码构成的建筑在阳光下闪闪发光，显得格外美丽。
“码爷爷，我明天还能来吗？”小灵问道。
“当热可以！”码爷爷笑眯眯地说，“欢迎你明天继续来学习。记住，网页王国的大门永远向好学的小朋友敞开！”
小灵重重地点了点头，心里暗暗发誓：一定要好好学习网页知识，成为一名真正的网页工程师！