Welcome to the World of Web Wizards! What Is Web Development Anyway?

直接开始第一段正文内容，阐述本章要讨论的核心问题。不需要任何标题或开场白。

“哇！你居然翻开了这本书！恭喜你，小巫师，你已经拿到了进入Web魔法世界的入场券啦！你有没有想过，你每天刷的动画片网站、玩的Roblox小游戏、看的动物科普页面，到底是怎么变出来的？是不是有一群超厉害的魔法师，躲在电脑后面挥着魔法棒，把这些好玩的东西变到你屏幕上？其实呀，这些人就是Web开发者，也叫Web Wizards——也就是你马上要成为的角色！今天我们就来聊聊，Web开发到底是什么，说不定你会发现，你早就偷偷练过Web开发的魔法啦！

一、那个让全世界能共享信息的老爷爷：Tim Berners-Lee的小故事

你猜怎么着？我们现在能刷到这么多好玩的网站，全是因为一个叫Tim Berners-Lee的老爷爷，在1989年的时候， wanted 解决一个超级麻烦的问题。那时候他在欧洲核子研究中心（就是那个做超级酷的粒子对撞机、研究宇宙起源的地方哦！）工作，所有的科学家写的论文、做的实验数据，都存在不同的电脑里：有的存在A的电脑里，有的存在B的电脑里，有的存在C的电脑里，格式还都不一样，就像你攒了一堆乐高零件，分别藏在你的书包、玩具箱、奶奶家的柜子里，你想拼个城堡，得跑三个地方才能找齐所有零件，太麻烦了对吧？

科学家们找一篇论文，有时候要等好几天才能收到对方发的邮件，很多重要的研究结果没法快速共享，Tim就想：“能不能做一个全世界都能用的共享笔记本？所有人都可以把论文放进去，所有人都能随便看，不用再一个个发邮件了？” 他花了两年时间，写了第一个网页浏览器（就是你现在刷网站的魔法镜！）和第一个网页服务器（就是藏在后面的存网站内容的大电脑！），1989年8月，他给老板交了一份提案，叫《信息管理：一个提案》，老板看了之后说：“这个想法有点模糊，但是挺有意思，你去做吧！” 于是，World Wide Web（也就是我们常说的万维网，就像个超级大的全球游乐场，所有人都能进去玩）就这么诞生啦！

第一个网页长什么样呢？超级简单，就像第一个游乐场只有一个秋千和一个沙坑，上面只有几行字，介绍万维网是什么，怎么用，连个图片都没有！但是现在呢？全球有超过20亿个网站，就像现在有数不清的超级游乐场：有带水上乐园的，有带过山车的，有带VR游戏的，有带密室逃脱的，全世界的Web Wizards一点点建出来的。更酷的是，这个第一个网页现在还能打开哦！你让爸爸妈妈帮你输入网址 `info.cern.ch/hypertext/WWW/TheProject.html` 就能看到，就像你能看到世界上第一个秋千一样，是不是超有纪念意义？

二、Web开发就像建游乐场：四个核心部分超简单拆解

你可能会问：“建网站是不是要写很多很多看不懂的代码？是不是要算很多数学题？” 当然不是！我们用一个你超熟悉的游乐场比喻，就能把Web开发的所有核心部分讲清楚，保证你一听就懂：

1. HTML：游乐场的骨架

首先建游乐场，你得先搭骨架吧？搭个秋千的架子，做个滑滑梯的底座，放几个长椅，铺个沙坑，这些看得见摸得着的“硬件设施”，就是HTML的工作。HTML的全称是HyperText Markup Language，翻译过来就是“超文本标记语言”，你不用记这个名字，你就把它当成“游乐场骨架搭建工具箱”就行，里面的每个工具（也就是代码标签）都有自己的名字和作用：

• `<html>` 是整个游乐场的围墙，把所有的设施都圈在里面
• `<head>` 是游乐场的说明书，告诉别人这个游乐场叫什么名字，有什么注意事项
• `<body>` 是游乐场里面的所有设施，你能看到的所有东西都在这里面
• `<h1>` 是游乐场入口的大标题牌，写着“Lucky的仓鼠游乐场”
• `<p>` 是长椅，上面可以写文字，比如“欢迎来玩！请勿投喂零食哦”
• `<img>` 是贴在围墙上的照片，比如你家的仓鼠Lucky啃瓜子的照片
• `<a>` 是指路牌，写着“去沙坑玩”“去秋千那边”，点一下就能去对应的位置
• `<div>` 是空的一块地，你想放什么就放什么，比如放个跑轮，放个喂食器

你看，HTML是不是就像搭乐高？每个标签就是一块乐高，你知道这块是红色的长方形，那块是蓝色的正方形，把它们拼到对的位置，就能搭出游乐场的骨架啦！根本不用算复杂的数学题，只要记住每个乐高块的名字和作用就行。

2. CSS：游乐场的装修

骨架搭好了，是不是要装修？给秋千刷成你最喜欢的粉色，给滑滑梯贴个独角兽贴纸，给沙坑里放彩色的小铲子，给指路牌画上可爱的奥特曼图案，让整个游乐场看起来超好看，这就是CSS的工作。CSS的全称是Cascading Style Sheets，翻译过来是“层叠样式表”，你还是不用记这个名字，把它当成“游乐场装修魔法工具箱”就行。

CSS有多神奇呢？你和你朋友用同一个HTML骨架搭游乐场，你刷成粉色独角兽风，给秋千加个云朵靠垫，给滑滑梯加个彩虹灯；他刷成蓝色奥特曼风，给秋千贴奥特曼贴纸，给滑滑梯加个音效按钮，出来的两个游乐场完全不一样！你甚至可以加动画：让大标题闪呀闪，让仓鼠的照片转个圈，让按钮按下去的时候弹个小爱心，这些都是CSS能做到的。就像你给秋千刷完粉色之后，再加个闪粉，秋千就会在太阳底下闪闪发光，超酷！

3. JavaScript：游乐场的魔法互动

游乐场建好了，是不是要加好玩的魔法？你坐在秋千上，不用别人推，秋千自己就会晃；你滑滑梯滑到底，就会响起你最喜欢的《Baby Shark》音乐，还会喷个小彩虹；你按一下指路牌，就会弹出一个框，告诉你“沙坑里有3个小铲子哦！你还可以去 snack bar 领免费的瓜子！” 这些会动、会响、能和用户互动的魔法，就是JavaScript（简称JS，你可以叫它“魔法精灵代码”）的工作。

JS就像游乐场里的小魔法精灵，你告诉它规则，它就会照做：你告诉它“有人点按钮就弹出恭喜框”，它就会在你点按钮的时候弹出框；你告诉它“有人赢了小游戏就加1个积分”，它就会自动帮你加分；你告诉它“每天下午3点就提醒喂仓鼠”，它到点就会弹个小窗口提醒你。你玩的所有网站上的互动功能：点按钮变颜色、点图片放大、下拉菜单选内容、小游戏，几乎都是JS做的魔法哦！

4. 后端：藏在游乐场后面的小秘密房间

你玩游乐场的时候，能看到所有的秋千、滑滑梯、长椅，但是你看不到游乐场后面的小房间，就是 snack bar（零食吧）和 storage shed（储物间），这就是后端的工作，是你看不到，但是超级重要的部分：

• snack bar 负责给你发福利：你赢了游乐场里的小游戏，就给你发个小贴纸，给你送免费的瓜子，给你解锁新的关卡
• storage shed 负责存东西：你攒的10个小贴纸、你填的会员信息、你发的“我今天喂了Lucky 10颗瓜子”的日记，都存在这里面，下次你再来玩，还能看到你的贴纸和日记，不会丢

比如你在网站上注册账号，你的密码就存在后端的storage shed里，下次你登录，后端会核对密码，对了就让你进去；你在网站上发的帖子，也会存在storage shed里，全世界的小朋友都能看到；你玩的网站小游戏赢了得金币，后端会帮你把金币记下来，下次打开还能看到。没有后端的话，你的游乐场就只是个空架子，存不了东西，发不了福利，玩起来就没意思啦！

我们可以用一张图把四个部分的关系画出来，超清楚： ```mermaid graph TD A[Web开发 = 建游乐场] --> B[HTML: 游乐场骨架<br/>(秋千、滑滑梯、长椅)] A --> C[CSS: 游乐场装修<br/>(粉色油漆、独角兽贴纸、彩虹灯)] A --> D[JavaScript: 游乐场魔法<br/>(秋千自动晃、滑到底放音乐)] A --> E[后端: 藏在后面的小房间<br/>(零食吧、储物间)] B --> F[用户能看到的部分<前端>] C --> F D --> F E --> G[用户看不到的部分<后端><br/>(存积分、发零食、记用户信息)] ``` 你看，是不是超简单？你平时玩网站的时候，能看到的部分就是HTML+CSS+JS，看不到的就是后端，就像你玩游乐场，能看到所有的设施，看不到后面的小房间，但是小房间里的零食和储物间超级重要！

三、Bust the Myth！你不需要是数学天才也能当Web Wizard

你是不是听过很多人说：“ coding 超级难，要数学好才能学，只有大人才能做？” 大错特错！今天我们就来把这个大 Myth 拆穿，告诉你为什么你完全可以当Web Wizard：

Myth 1：Coding要数学超好，要算很多复杂的公式

哈哈，你玩《我的世界》建城堡的时候，需要算微积分吗？你玩Roblox做小游戏的时候，需要算几何题吗？当然不需要啊！你只要知道怎么把方块一块一块摞起来，怎么把游戏零件拼起来就行。Coding 也是一样！你写HTML的时候，就像拿乐高块，你知道这个块是红色的长方形，是做大标题的，就把它拼在顶部，根本不用算任何公式；你写CSS的时候，就像拿画笔，你知道要把标题改成粉色，就写一行“color: pink”，不用算颜色混合的比例；你写JS的时候，就像给魔法精灵下指令，你说“点按钮就弹出框”，它就会照做，不用算任何逻辑公式。

当然啦，如果你以后想做特别复杂的游戏、特别酷的AI网站，可能会用到一点数学，但是基础的Web开发，根本不需要！你只要会数123，会认颜色，会想好玩的主意，就够啦！

Myth 2：Coding是大人做的，小朋友做不了

我给你讲两个超酷的小朋友的故事，你听完就知道，小朋友不仅能做，还能做的超厉害：

• 有个叫Quinn的美国小朋友，10岁的时候，用HTML和CSS做了一个恐龙收藏网站，把他所有的32个恐龙玩具都拍成照片，放到网站上，每个恐龙下面都写了名字和介绍，比如“霸王龙T-Rex：超级厉害的肉食

有个叫Quinn的美国小朋友，10岁的时候，用HTML和CSS做了一个恐龙收藏网站，把他所有的32个恐龙玩具都拍成照片，放到网站上，每个恐龙下面都写了名字和介绍，比如“霸王龙T-Rex：超级厉害的肉食恐龙，一口能吃掉一辆小汽车！我最喜欢它！” 结果这个网站被他们学校的科学老师看到了，放到学校的官网上，全年级的小朋友都来围观，还有别的小朋友发邮件问他“能不能加个三角龙的页面呀？我也喜欢三角龙！” 你看，小朋友不仅能做网站，还能做成全校的网红网站呢！

还有个更厉害的中国小朋友，叫朵朵，12岁的时候，她们社区有很多流浪猫没人领养，她就用免费学的HTML和CSS做了一个“朵朵的流浪猫小窝”网站，把每只流浪猫的照片、名字、性格都放上去，还加了“我要领养”的按钮，一开始只有10只猫，后来全班同学都帮她拍照、写介绍，还加上了JS的领养申请表格，现在这个网站已经帮30多只流浪猫找到了家，还有别社区的阿姨来问她“能不能帮我们也做个流浪狗网站呀？” 你看，Web开发不仅能玩，还能帮到小动物，超有意义的！

三、Bust the Myth！你不需要是数学天才也能当Web Wizard

你是不是听过很多人说：“coding超级难，要数学好才能学，只有大人才能做？” 大错特错！今天我们就来把这个大 Myth 拆穿，告诉你为什么你完全可以当Web Wizard：

Myth 1：Coding要数学超好，要算很多复杂的公式

哈哈，你玩《我的世界》建城堡的时候，需要算微积分吗？你玩Roblox做小游戏的时候，需要算几何题吗？当然不需要啊！你只要知道怎么把方块一块一块摞起来，怎么把游戏零件拼起来就行。Coding 也是一样！你写HTML的时候，就像拿乐高块，你知道这个块是红色的长方形，是做大标题的，就把它拼在顶部，根本不用算任何公式；你写CSS的时候，就像拿画笔，你知道要把标题改成粉色，就写一行`color: pink`，不用算颜色混合的比例；你写JS的时候，就像给魔法精灵下指令，你说“点按钮就弹出框”，它就会照做，不用算任何逻辑公式。

当然啦，如果你以后想做特别复杂的3D游戏、特别酷的AI网站，可能会用到一点数学，但是基础的Web开发，根本不需要！你只要会数123，会认颜色，会想好玩的主意，就够啦！

Myth 2：Coding是大人做的，小朋友做不了

刚才讲的Quinn和朵朵的例子，已经证明了小朋友不仅能做，还能做的超厉害！还有更酷的：有个叫Angie的哥伦比亚小朋友，9岁的时候做了一个网站，教别的小朋友怎么用废纸做手工，现在有上万个小朋友看她的教程；还有个叫Sania的印度小朋友，11岁的时候做了一个网站，帮乡村的小朋友免费学英语，现在已经帮助了10万多个小朋友。你比他们大或者小都没关系，只要有想法，就能做出来！

Myth 3：Coding要一直坐在电脑前，很无聊，伤眼睛

哈哈，你玩过家家的时候，要一直坐着吗？你搭乐高的时候，要一直坐着吗？当然不是啊！Web开发也一样，你可以站着做，躺着做，甚至和好朋友一起趴在地板上做。而且Web开发就像画画、做手工，你想做什么就做什么，你可以在网站里加你画的画、你写的故事、你拍的仓鼠视频，就像你在做你自己的专属秘密本子，怎么会无聊呢？你还可以和朋友分工：你负责搭HTML骨架，他负责用CSS刷油漆，另一个负责写JS魔法，就像你们一起搭乐高城堡一样，超有意思的！

我们可以把这三个Myth和真相画成对比图，超清楚： ```mermaid graph TD subgraph myths[ myths 误区] A[要数学好，算复杂公式] B[只有大人能做] C[要一直坐着，很无聊] end subgraph truths[真相] D[只要会数123就行] E[小朋友也能做] F[想怎么做就怎么做，超有意思] end A --> D B --> E C --> F ```

四、Web开发的三个超酷超能力，你马上就能拥有

学会了Web开发，你就相当于有了三个超能力，比你玩 Roblox 开外挂还厉害：

超能力1：你想做什么就做什么，没有限制

你是不是经常想“要是有个网站专门放我画的奥特曼画就好了”“要是有个网站专门收集全世界的彩虹橡皮就好了”“要是有个网站专门放我的养蚕日记就好了”？学会Web开发，这些你都能自己做！你的网站你想加什么就加什么：你想加100张奥特曼画就加100张，你想加1000个彩虹橡皮的照片就加1000个，你想加你每天写的养蚕日记就加，没有老师、没有家长能管你，就像你的游乐场，你想放多少个秋千就放多少个，想刷成什么颜色就刷成什么颜色，超自由！

比如你喜欢《我的世界》，就可以做一个“我的世界建筑教程网站”，把你搭的城堡、红石电路的步骤都放上去，全世界玩MC的小朋友都能来学；你喜欢小仓鼠，就可以做一个“仓鼠美食测评网站”，给你家仓鼠试吃不同的小零食，打分放上去，别的养仓鼠的小朋友都能来参考；你喜欢写小说，就可以做一个“我的奇幻小说连载网站”，每天更新一章，让全世界的小朋友都能追更，超酷的！

超能力2：你可以帮到很多人

Web开发不只是自己玩，还能帮到别人！刚才讲的朵朵做流浪猫网站帮30多只猫找到家，就是超棒的例子。还有：

• 有个美国的小朋友，12岁的时候做了一个网站，帮助有阅读障碍的小朋友，把大段文字改成更大、更柔和的颜色，还有语音朗读功能，现在有几十万有阅读障碍的小朋友用他的网站看书，再也不用怕读长故事了。
• 有个肯尼亚的小朋友，10岁的时候做了一个网站，告诉大家怎么用旧塑料瓶做雨水收集器，帮助他家乡的小朋友在干旱的时候也能有干净的水喝，现在这个网站已经被联合国儿童基金会推荐给全非洲的小朋友了。
• 还有个中国的小朋友，13岁的时候做了一个“古诗小游戏网站”，把古诗变成闯关游戏，比如把诗句拼对就能过关，现在有上万个小学生用他的网站背古诗，再也不用死记硬背了。

你学会Web开发之后，也可以帮你想帮的人：比如你爷爷奶奶不会用手机看新闻，你就可以做一个只有大字体、简单按钮的新闻网站给他们用；你们学校要办义卖，你就可以做一个义卖网站，放所有义卖商品的照片，全校的小朋友都能提前看，超方便！

超能力3：你可以交到全世界的朋友

你做的网站，只要有网址，全世界的小朋友都能看到！你可以在网站上放你画的画、你写的诗、你拍的vlog，外国的小朋友看到了，就会给你留言说“你的画超好看！能不能教我怎么画？” 你还可以和外国的小朋友一起做网站，比如你负责写中文的部分，介绍中国的春节、粽子、熊猫，他负责写英文的部分，介绍他们的圣诞节、火鸡、鹰，做一个“中美好朋友日常”网站，就像你交了个笔友，还能一起做项目，超酷的！

五、互动时间！三个小挑战等你来玩

现在你已经知道Web开发是什么了，是不是迫不及待想试试？我们准备了三个超简单的小挑战，不用写任何代码，就能感受到Web开发的乐趣：

挑战1：小巫师投票

<!-- 电子版交互：投票组件，点击选项即可投票，结果会在下一章公布 --> > 🗳️ 你最喜欢的网站是哪种？ > - ⬜ 动画片/视频网站（比如B站、腾讯视频） > - ⬜ 游戏网站（比如Roblox、我的世界官网） > - ⬜ 科普网站（比如动物科普、太空科普） > - ⬜ 社交网站（和好朋友聊天、分享照片的地方） > - ⬜ 其他（快告诉我你喜欢的网站！） > 把你的选项写在书的页脚，或者告诉爸爸妈妈，下一章我们会看看大家的投票结果哦！

挑战2：画出你的梦想网站

<!-- 纸书提示：这里可以留一个16开的空白框，旁边加手绘风格的提示图案，比如画笔、网站图标 --> > 🎨 不用写任何代码，拿一张纸和一支笔，画出你梦想中的网站是什么样的！ > 给你几个灵感： > - 想做仓鼠美食测评网站？就画一只仓鼠拿着瓜子，旁边有打分的小星星，还有评论区 > - 想做奥特曼卡片交换网站？就画一堆奥特曼卡片，旁边有“交换”“上传”的按钮 > - 想做和好朋友的秘密日记网站？就画两个小女孩的头像，旁边有写日记的框，还有密码锁 > 不用画得好看！想到什么就画什么，就像你玩过家家的时候画的地图一样，随便画就行！画完之后，你可以给爸爸妈妈看，告诉他们你马上就能把这个画变成真的网站啦！

挑战3：探索你最喜欢的网站

> 🔍 跟着下面的步骤做，看看你喜欢的网站背后是什么样的： > 1. 打开你的魔法镜（浏览器）：电脑端点屏幕左下角的Windows图标，找Chrome或者Edge点一下打开；Mac端点屏幕底部的Dock栏里的Safari图标；手机端点屏幕上的Safari或者微信里的浏览器图标。 > 2. 输入你最喜欢的网站地址：比如你经常看的B站，就输入`bilibili.com`，按回车键就能进去。 > 3. 看看网站的四个部分：找找看，哪个是标题（HTML做的），哪个是背景颜色（CSS做的），哪个是点赞按钮（JS