第1章：欢迎来到网站建造世界！——你的第一个网站之旅

嘿，未来的网站建造大师！想象一下，你能像搭积木一样，建造一个属于自己的网站吗？一个可以分享你的恐龙收藏、展示你的乐高作品，或者讲述你冒险故事的神奇地方。更酷的是，这个网站一旦建好，全世界的朋友都能通过互联网看到它！是不是有点像拥有了一个全世界都能接收的魔法信箱？别怀疑，这就是网站开发的神奇之处。从今天起，我们就将一起推开这扇充满创意的大门，踏上这段激动人心的“网站建造世界”之旅。准备好了吗？我们的第一站，就是亲手打造一个只属于你的、独一无二的超简单网页——并且马上就能在浏览器里看到它！这感觉，就像第一次学会骑自行车，那种“哇，我做到了！”的成就感，绝对让你对接下来的一切充满期待。

在开始动手之前，我们得先搞清楚两件超级重要的事：第一，我们到底要建造的是个什么东西？第二，我们用什么工具来建造？别急，我们用最有趣的方式来理解。

网站是什么？它就像一栋神奇的房子！

你肯定去过很多网站，比如看动画片的视频网站、查资料的百科网站、或者和好朋友聊天的社交网站。但有没有想过，它们到底是什么呢？

让我们来玩一个比喻游戏。把网站想象成一栋房子。这栋房子不是用砖头水泥建的，而是用“代码”这种特殊的语言建成的。这栋房子有好多房间，每个房间都有不同的功能。

• **地基和框架（服务器与HTML）**：任何房子都需要一个坚实的地基，否则就会倒塌。网站的地基，是一台叫做“服务器”的超级计算机，它24小时不睡觉，永远在线，专门负责“存放”你的网站文件，并把它发送给任何想访问的人。而房子的框架结构，就是**HTML**（你可以念作“H-T-M-L”，或者给它取个外号“超文本标记语言”）。HTML就像房子的钢筋骨架和房间布局图，它决定了哪里是客厅（主要内容区），哪里是卧室（侧边栏），哪里是大门（标题）。没有HTML，房子连形状都没有。
• **装修和美化（CSS）**：光有骨架可不行，房子得好看才能吸引人。**CSS**（层叠样式表）就是你的室内设计师和油漆工！它负责给房子刷上喜欢的颜色（背景色、文字颜色），决定家具的样式（按钮是圆的还是方的），调整房间的大小和布局。有了CSS，你的网站就能从“毛坯房”变成“精装豪宅”，变得漂亮又独特。
• **智能电器和互动游戏（JavaScript）**：现在，我们给房子加上一些智能设备。当你按下开关，灯就亮了；你对着智能音箱说话，它就会播放音乐。**JavaScript** 就是网站的“智能电器”和“游戏规则”。它让网站“活”起来！比如，你点击一个按钮，网页上的图片就切换了；你在搜索框里打字，下面立刻出现提示；你玩一个小游戏，分数会实时增加。没有JavaScript，网站就像一个静态的纸板模型，只能看，不能玩。

所以，一个完整的、好玩的网站，通常是 HTML（结构） + CSS（样式） + JavaScript（行为） 这三兄弟共同合作的结果。在本书的旅程中，我们会从认识大哥HTML开始，慢慢认识二哥CSS和三弟JavaScript，最终让你成为能指挥三兄弟的“包工头”！

互联网和浏览器：通往网站世界的两把钥匙

光知道网站是栋房子还不够，我们还得知道怎么找到它、怎么进去。这就需要用上两把至关重要的“钥匙”：互联网 和 浏览器。

第一把钥匙：互联网（The Internet）—— 全球最大的信息蜘蛛网

互联网，你可以把它想象成一个覆盖了整个地球的、巨大无比的“信息蜘蛛网”。这张网由无数根看不见的“网线”（光纤、电缆、无线信号）连接着全世界数以亿计的电脑、手机、服务器。这些设备就像蜘蛛网上的节点，可以互相传递信息——文字、图片、声音、视频。

当你想看一个网站时，你的请求（“我想看看小明的恐龙网站”）就会通过这张大网，瞬间传达到存放着小明网站的服务器那里。服务器收到请求后，会把网站文件打包，再通过互联网“快递”回你的电脑。这个过程快得惊人，通常只需要零点几秒！这就是为什么你能立刻看到远在千里之外的网站内容。互联网是这个“快递网络”的总称。

第二把钥匙：浏览器（Browser）—— 你的万能网站查看窗

既然互联网是快递网络，那总得有个“收件窗口”来接收并展示快递里的东西吧？这个窗口，就是浏览器。你电脑或手机上常用的 Chrome（谷歌浏览器）、Safari（苹果浏览器）、Edge（微软浏览器）、Firefox（火狐浏览器），都是不同的“窗户品牌”，但它们干的是同一件事：接收互联网送来的网站文件，并把它翻译成你能看懂、能互动的漂亮页面。

你可以把浏览器想象成一个超级聪明的“翻译官”和“展示柜”。它懂HTML、CSS、JavaScript这些“建造语言”，拿到这些代码文件后，就按照代码的指示，在屏幕上画出标题、排好段落、涂上颜色、加上动画。最终，你看到的五彩斑斓、可以点击的网页，全是浏览器“翻译”和“绘制”出来的成果！

小实验：你的浏览器就是最好的实验室 现在，请打开你电脑上的任意一个浏览器（就是平时你用来上网的那个软件）。在顶部的地址栏里，输入 `https://www.bilibili.com` 然后按回车。看！一个充满视频和动画的网站瞬间出现。这就是浏览器在为你工作！再试试输入 `https://www.baidu.com`，又是一个完全不同的样子。同一个浏览器，展示不同的网站，因为它翻译了不同的代码文件。浏览器本身不生产内容，它只是内容的“展示者”。

哇！这些网站也太酷了吧！

光知道理论可不够，看看真正的“网站豪宅”才能让你热血沸腾！下面这些网站，每一个都是Web开发技术的结晶，它们展示了网站可以多么有趣、有用、震撼人心。

1. 互动故事与游戏乐园

• **例子：`https://www.natgeokids.com`（国家地理儿童版）** 这不是一个简单的杂志网站。在这里，你可以点击视频看动物纪录片，玩关于恐龙的问答游戏，甚至用互动地图探索世界。它的每个页面都像一个小小的探险站，充满了CSS动画和JavaScript互动，让你在玩中学。
• **例子：`https://www.poki.com`（或类似的小游戏网站）** 打开它，就像走进了一个巨大的线上游乐场。成千上万个游戏，从跑酷到益智，全部在浏览器里直接玩，不需要下载安装。这些游戏几乎完全由JavaScript、HTML5的Canvas绘图技术和CSS动画驱动，展示了浏览器强大的计算和渲染能力。

2. 神奇的数据可视化

• **例子：`https://www.weather.com`（或中国天气网）** 你看的不只是“今天25度，多云”。你可能看到动态的云图在移动，雷达图显示雨带走向，点一下地图上的城市，就弹出详细的预报。这些动态图表，是用JavaScript库（比如D3.js）把枯燥的气象数据变成直观、美丽的动画，让信息一目了然。
• **例子：`https://www.worldpopulationreview.com`** 想看看全球人口变化？这里的世界地图，不同国家可以用颜色深浅表示人口密度，数据随着年份自动变化。这就是“数据可视化”，它让抽象的数字“活”在了地图上。

3. 沉浸式艺术与体验

• **例子：`https://www.apple.com`（苹果官网）** 每次苹果发新品，官网都会变成一场视觉盛宴。产品页面常常有可以360度拖拽旋转的3D模型，有随着滚动优雅展开的动画叙事。这背后是前沿的CSS3高级动画和JavaScript 3D库（如Three.js）在支撑，把产品介绍变成了一段电影般的体验。
• **例子：`https://thefwa.com`（FWA网站奖项）** 这个网站专门收录全球最具创意和技术的网站。随便点开一个获奖作品，你可能会看到网页随着鼠标移动产生流动的色彩，或者文字像有生命一样聚散。这些是艺术与技术的完美结合，证明了浏览器能成为强大的艺术创作工具。

想一想： 你最喜欢的网站是哪一个？它最吸引你的地方是什么？是漂亮的图片（CSS的功劳），还是可以点击的小游戏（JavaScript的功劳），或者是清晰的信息排版（HTML的功劳）？试着用我们刚学的“房子比喻”去拆解它，你会发现，原来每个酷炫的网站背后，都藏着这些基础“积木”的巧妙组合！

从“玩”网站到“造”网站：你的第一个身份转变

现在，你已经知道了网站是什么、怎么看到它们，也见识了它们的无限可能。最关键的问题来了：我们怎么才能从“游客”变成“建造者”？

答案就是：写代码。

别被“代码”这个词吓到！它不是什么天书，而是一种用特定规则写出来的“指令”。你写的每一行代码，都是在给浏览器下命令：“嘿，浏览器，在这里放一个大标题！”“嘿，浏览器，把这段文字变成蓝色！”“嘿，浏览器，当用户点击这里时，播放一个音效！”

而我们要使用的第一块、也是最重要的“积木”，就是 HTML。HTML的全称是“HyperText Markup Language”，中文是“超文本标记语言”。我们不用纠结这个长名字，你只需要记住：

• **超文本**：不只是文字，还可以包含图片、链接、视频等。
• **标记**：就是我们用来“标记”内容类型的特殊符号，比如用 `<h1>` 标记标题，用 `<p>` 标记段落。
• **语言**：它有自己严格的语法规则，浏览器只认这种规则。

HTML文档其实就是一个纯文本文件，但它有一个特殊的扩展名：`.html`。比如 `my-first-site.html`。当你用浏览器打开这个文件时，浏览器就会读取里面的HTML代码，并把它变成你看到的网页。

HTML的核心思想：用“标签”包裹内容 HTML的所有魔力都来自“标签”。标签是一对尖括号 `<>` 里的单词。大部分标签都是“成双成对”出现的：

• 一个**开始标签**：比如 `<p>` （代表段落开始）
• 一个**结束标签**：比如 `</p>` （代表段落结束）
• 在这对标签**中间**，就是你想要显示的内容，比如“今天天气真好！”

所以，`<p>今天天气真好！</p>` 这行代码的意思就是：“浏览器，请把‘今天天气真好！’这几个字当作一个段落来显示。”

有些标签比较特殊，是“单身汉”，只有一个标签，比如 `<br>` 代表换行，`<img>` 代表插入图片。我们后面会遇到它们。

标签的嵌套：像套俄罗斯娃娃 标签可以一个套一个，这叫做“嵌套”。就像俄罗斯套娃，大的娃娃里面装小的。在HTML里，这代表了内容的包含关系。 ```html <div> <h1>我的网站</h1> <p>这是我的第一个段落。</p> </div> ``` 上面的代码里，`<div>` 是一个大容器标签（代表一个区块），它里面装了一个 `<h1>` 标题标签，又装了一个 `<p>` 段落标签。这清晰地告诉浏览器：标题和段落都属于同一个“区块”。

动手时间！写下你的第一行“魔法咒语”

理论说了这么多，是时候施展真正的魔法了！我们要创建一个最简单的网页，它包含： 1. 一个大大的标题：“你好，世界！” 2. 一段自我介绍的文字。 3. 一张图片（我们用网络上一张现成的可爱图片）。

第一步：准备工具——一个“代码记事本” 你需要一个能写纯文本的软件。千万不要用Word！ Word会偷偷添加很多格式，浏览器不认识。请使用：

• **Windows电脑**：打开“记事本”（在开始菜单里搜索“记事本”）。
• **Mac电脑**：打开“文本编辑”（在应用程序文件夹里），然后在顶部菜单栏选择“格式” -> “制作纯文本”。
• **或者，下载一个更专业的免费编辑器，比如 VS Code（强烈推荐！）**，它会给代码高亮，更容易看。

第二步：写下你的第一段HTML代码 在记事本里，准确地输入以下每一行代码（注意大小写和空格）：

```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网站</title> </head> <body> <h1>你好，世界！</h1> <p>欢迎来到我的第一个网站！我是[你的名字]，我很高兴能学习建网站。</p> <img src="https://picsum.photos/300/200" alt="一张随机可爱图片"> </body> </html> ```

别慌，我们来逐行“翻译”这些“咒语”：

• `<!DOCTYPE html>`：这是一条“声明”，告诉浏览器：“嘿，接下来这份文档是标准的HTML5文档，请用最新标准来解析。” 这是所有HTML文件的第一行，固定格式。
• `<html>`：这是整个网页的**最外层容器**，就像房子的整体框架。所有其他内容都要写在它里面。对应的 `</html>` 表示框架结束。
• `<head>`：这是“头部”区域。这里放的信息**不会直接显示**在网页主体上，但非常重要。它像房子的“设计图纸”和“房产信息”。
• `<meta charset="UTF-8">`：指定网页使用“UTF-8”字符编码，确保中文、英文、表情符号都能正确显示。你几乎可以原样抄写。
• `<title>我的第一个网站</title>`：这是网页的**标题**。它不会显示在页面内容里，但会显示在**浏览器的标签页上**（比如你打开很多网页时，顶部的那些小标签）。这是给搜索引擎和用户看的重要信息。
• `<body>`：这是“身体”区域！**所有你希望用户在浏览器窗口里看到的内容，都必须写在 `<body>` 和 `</body>` 之间**。这是我们主要的工作区。
• `<h1>你好，世界！</h1>`：`<h1>` 是最高级别的**标题**标签。它通常最大、最醒目。里面的文字“你好，世界！”就是显示在网页上的大标题。这是一个传统，程序员写的第一个程序往往是“Hello, World!”。
• `<p>欢迎来到我的第一个网站！... </p>`：`<p>` 是**段落**标签。它把你写的文字变成一个独立的段落，前后会有一些空白，方便阅读。
• `<img src="https://picsum.photos/300/200" alt="一张随机可爱图片">`：这是**图片**标签。注意它是“单身汉”，没有 `</img>`。
• `src="..."`：这是**属性**，用来给标签提供额外信息。`src` 是“来源”的意思，后面跟着图片的**网址（URL）**。这里我们用了一个神奇的网站 `picsum.photos`，它会自动提供一张随机的高质量图片。`300/200` 是要求的图片尺寸（宽300像素，高200像素）。
• `alt="..."`：这是“替代文本”。如果因为网络问题图片加载失败，或者有视障用户使用读屏软件，这里描述的文字就会显示/读出。这是**好习惯**，一定要写！

第三步：保存文件——给它一个“家” 1. 在记事本菜单栏，点击“文件” -> “另存为”。 2. 在“保存类型”下拉菜单里，务必选择“所有文件(\*.\*)”，而不是“文本文档”。这是关键！ 3. 在“文件名”处，输入 `my-first-website.html`（或者你喜欢的任何名字，但扩展名必须是 `.html`）。 4. 在“编码”下拉菜单里，选择“UTF-8”（如果选项里有的话）。 5. 选择一个你容易找到的位置保存，比如“桌面”或“文档”文件夹。 6. 点击“保存”。

第四步：见证奇迹！—— 用浏览器打开它 现在，去你保存文件的地方（比如桌面），找到一个叫 `my-first-website.html` 的文件，它的图标可能是浏览器的logo。双击它！

发生了什么？你的浏览器窗口打开了，里面显示着你刚刚写的标题、段落和一张随机可爱的图片！恭喜你！ 你刚刚完成了从“使用者”到“创造者”的华丽转身。你写的HTML代码，被浏览器成功翻译成了一个真正的、可以访问的网页。这个文件现在就在你的电脑上，它就是你的第一个“网站”，虽然它现在只住在你的电脑里。

电子版互动提示： > 💡 小探索：右键点击这个网页的任意空白处，选择“查看网页源代码”（不同浏览器叫法略有不同）。你会看到什么？没错，就是你刚刚写的那一串代码！这证明了，你看到的漂亮页面，完全是由这些“天书”一样的代码构建而成的。现在你是懂魔法的人了！

常见问题与“小急诊室”

第一次动手，遇到问题很正常。这里是常见问题和解决方法：

• **问题：我双击文件，怎么弹出一个“你要如何打开此文件？”的窗口，或者代码直接显示在浏览器里？**
• **原因**：文件保存时扩展名不对。可能你保存成了 `my-first-website.html.txt`（因为系统隐藏了已知扩展名）。
• **解决**：确保在“另存为”时，文件名是 **`my-first-website.html`**（注意最后的 `.html`），并且保存类型是“所有文件”。如果文件已经保存错了，请重命名它，把 `.txt` 删掉，只留 `.html`。

• **问题：我的网页打开后，标题没有变成大号字，或者图片不显示？**
• **原因1**：代码写错了。仔细检查每一行，标签 `<` 和 `>` 是不是成对？有没有打错字母（比如 `<h1>` 写成了 `<h1>`）？属性 `src="..."` 的引号是英文引号吗？
• **原因2**：图片网址问题。`picsum.photos` 网站有时需要几秒钟加载，或者网络不好。可以尝试刷新页面。或者，你可以把 `<img>` 标签里的网址换成一个你确定能访问的图片地址（比如从百度图片复制一个链接，但注意要确保链接直接指向图片文件，通常以 `.jpg`、`.png` 结尾）。
• **解决**：对照上面的代码示例，一行一行检查。最有效的方法是：**全部删除，重新手工输入一遍**。这能避免看不见的空格或格式错误。

• **问题：我想修改一下文字，该怎么做？**
• **解决**：很简单！回到你保存的 `my-first-website.html` 文件（右键点击它，选择“用记事本打开”或“用VS Code打开”），找到你想改的那一行，直接修改文字内容。比如把“你好，世界！”改成“哈喽，宇宙！”。保存文件（Ctrl+S），然后**刷新你的浏览器窗口**（按F5键或浏览器上的刷新按钮），变化就立刻出现了！这就是Web开发最爽的地方：修改 -> 保存 -> 刷新，即时反馈。

纸书排版提示：

• 本小节“常见问题”在纸书中可以设计为一个小边框