网页积木：看看网页是怎么搭起来的

🎨 欢迎来到网页积木王国

想象一下，你有一堆积木。方的、圆的、长的、短的，五颜六色的各种形状。你用这些积木可以搭房子、搭城堡、搭汽车、搭机器人……只要你能想到的，都能搭出来！

网页（Website）也是一样的道理。当你在电脑上、手机上打开一个网站，看到那些花花绿绿的页面——有漂亮的标题、有趣的图片、闪闪发光的按钮——你知道吗？这些东西全都是用“代码积木”一块一块搭出来的！

这些代码积木有三种主要类型：HTML、CSS 和 JavaScript。它们就像网页世界的三位魔法师，各有各的本领，各有各的作用。把这三位魔法师请来，你的网页就能从一张白纸变成一座热闹的城堡！

> 💡 小提示：Website 就是网站，比如你天天用的搜索引擎、玩的游戏网站、看的动画片网站，都是网站。网站是由很多网页组成的，一个网页就像一本书里的一页。

🧱 HTML：网页的地基和墙壁

想象你要用积木搭一座小房子。首先，你得把积木摆好，搭出墙壁、门、窗户，让这座房子有基本的形状。这个搭框架的工作，就是 HTML 做的事情！

HTML 的全名叫“超文本标记语言”（HyperText Markup Language）。这个名字听起来很复杂，其实一点都不难。超文本就是“比普通文字更厉害的文字”，它可以包含图片、链接、音乐等等。标记语言就是给文字做记号，告诉电脑“这是一段标题”“这是一张图片”“这是一个按钮”。

标签：网页的神奇贴纸

HTML 使用一种叫“标签”（Tag）的东西来给网页内容做标记。标签就像是贴在小积木上的小贴纸，告诉你这块积木是干什么用的。

标签通常长这样：

• **开始标签**：`<标签名>` —— 比如 `<h1>`表示“这里是一个大标题”
• **结束标签**：`</标签名>` —— 比如 `</h1>`表示“标题结束啦”

你看，结束标签比开始标签多了一个斜杠“/”，就像是在说“到这里为止”。

让我们来看一个最简单的网页长什么样子：

```html <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到网页积木王国！</h1> <p>这是一个很棒的网页。</p> </body> </html> ```

别担心看不懂，让我们一个一个来认识它们：

1. `<!DOCTYPE html>` —— 这是在告诉浏览器：“喂，我要开始写网页啦！请用最新的规则来显示我哦！” 2. `<html>...</html>` —— 这是网页的“根标签”，就像房子最外面的大围墙，所有网页内容都要包在里面。 3. `<head>...</head>` —— 这是网页的“头部”，里面放的是网页的配置信息，比如网页的标题。 4. `<title>...</title>` —— 这是网页的标题，显示在浏览器标签页上。 5. `<body>...</body>` —— 这是网页的“身体”，里面放的是你在网页上能看到的所有内容：文字、图片、按钮……

> 💡 小提示：`<head>`里的内容你看不到，但它很重要，就像一本书的书名和目录。`<body>`里的内容才是你在网页上真正能看到的东西。

常见的 HTML 积木

现在让我们认识一些最常用的 HTML 积木吧！

标题积木：`<h1>` 到 `<h6>`

网页上的标题要用标题标签。标题一共有六个级别：

```html <h1>这是一级标题，最大最醒目！</h1> <h2>这是二级标题，稍微小一点</h2> <h3>这是三级标题，又小了一点</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题，最小的一个</h6> ```

在浏览器里看起来大概是这个样子：

这是一级标题，最大最醒目！

这是二级标题，稍微小一点

这是三级标题，又小了一点

这是四级标题

##### 这是五级标题 ###### 这是六级标题，最小的一个

> 💡 小提示：在一张网页上，`<h1>`通常只出现一次，代表这个页面的主题。就像一篇文章只有一个大标题一样。

段落积木：`<p>`

段落标签用来装文字内容：

```html <p>这是一个段落。段落是用来装一段完整意思的文字的。 通常一个段落会讲一件事，或者一个观点。</p>

<p>这是另一个段落。每个段落之间会有空行隔开。</p> ```

图片积木：`<img>`

图片标签用来在网页上显示图片：

```html <img src="cat.jpg" alt="一只可爱的小猫"> ```

这里有两个重要的东西：

• `src` 是图片的地址（source），告诉浏览器图片在哪里
• `alt` 是图片的替代文字（alternative），当图片加载不出来的时候，你会看到这段文字，而且盲人用的屏幕阅读器也会读出这段文字

> 💡 小提示：`<img>`是一个“自闭合标签”，它不需要 `</img>`，因为它自己就把开始和结束合并在一起了。

链接积木：`<a>`

链接标签让你可以点击文字跳转到其他网页：

```html <a href="https://www.example.com">点击这里访问示例网站</a> ```

`href` 的意思是“超文本引用”（hypertext reference），就是你要跳转去哪里。

按钮积木：`<button>`

按钮标签用来创建可点击的按钮：

```html <button>点我！</button> ```

这样在网页上就会显示一个写着“点我！”的按钮啦！

小小网页建筑师

让我们来试着写一个完整的网页吧：

```html <!DOCTYPE html> <html> <head> <title>小明的网页</title> </head> <body> <h1>欢迎来到我的网页！</h1>

<h2>关于我</h2> <p>我叫小明，今年10岁，我喜欢编程和搭积木！</p>

<h2>我的爱好</h2> <p>1. 编程 —— 就像搭代码积木一样有趣！</p> <p>2. 搭积木 —— 让我的动手能力越来越强！</p> <p>3. 画画 —— 我喜欢画各种可爱的小动物。</p>

<h2>我的照片</h2> <img src="my-photo.jpg" alt="我的照片">

<h2>学习链接</h2> <p><a href="https://www.example.com">点击这里学习编程！</a></p>

<button>和我打个招呼吧！</button> </body> </html> ```

看看，这个网页有标题、有介绍、有图片、有链接、有按钮！是不是已经像一个真正的网页了？

> 💡 小提示：你可以把这段代码复制到一个文本文件里，把文件保存为 `index.html`，然后用浏览器打开它，就能看到网页的样子啦！

HTML 的角色总结

HTML 在网页中扮演的角色，就像一座建筑的地基和墙壁：

• **地基**：HTML 决定了网页的基本结构，让所有内容都有了自己的位置
• **墙壁**：HTML 把不同的内容分隔开来，就像墙壁把房间分开一样
• **内容**：HTML 里面放的是网页的真正内容——文字、图片、链接等

没有 HTML，网页就没有骨架，就像一堆乱七八糟的积木散落在地上。有了 HTML，这些积木才能排列成有用的形状。

> 🎯 记住啦：HTML = 内容 + 结构，它告诉浏览器“这里有什么”。

🎨 CSS：网页的油漆和装饰

现在，你的积木房子有了墙壁和门窗，看起来还像什么样呢？灰灰的、暗暗的，一点都不漂亮。怎么办呢？

对了！我们要给墙壁刷上漂亮的颜色，贴上好看的壁纸，挂上漂亮的窗帘……给房子做装饰的工作，就交给 CSS 来做！

CSS 的全名叫“层叠样式表”（Cascading Style Sheets）。名字里的“样式”就是“装饰”的意思。

为什么需要 CSS？

想象一下：如果没有 CSS，所有网页都会长一个样子——黑黑的背景、白白的字、大大的标题……就像所有的房子都是水泥毛坯房一样，那多无聊啊！

CSS 让网页变得五颜六色、漂漂亮亮。你可以让标题变成红色、让背景变成浅蓝色、让文字变大变小、让按钮变圆变方……只要你想要的，CSS 几乎都能帮你实现！

CSS 怎么用？

CSS 有三种使用方式：

方式一：内联样式（写在标签里）

你可以直接在 HTML 标签里加上 `style` 属性：

```html <h1 style="color: red;">红色的标题</h1> <p style="font-size: 20px;">字号是20像素的段落</p> ```

方式二：内部样式表（写在 `<head>` 里）

你可以在 `<head>` 区域写一个 `<style>` 标签，里面放所有的 CSS 样式：

```html <head> <style> h1 { color: red; } p { font-size: 20px; } </style> </head> ```

方式三：外部样式表（单独的 CSS 文件）

更常见的做法是写一个单独的 `.css` 文件，然后在 HTML 里引用它：

```html <head> <link rel="stylesheet" href="style.css"> </head> ```

这样可以保持 HTML 和 CSS 分开，让代码更清晰。而且一个 CSS 文件可以给很多网页用，就像一套装修方案可以给很多房子用一样。

> 💡 小提示：在实际工作中，最常用的是第三种方式——外部样式表。它让我们的代码更有条理，也更容易维护。

CSS 基础语法

CSS 的语法很简单，分为三个部分：选择器、属性和值。

```css 选择器 { 属性: 值; 属性: 值; } ```

就像这样：

```css h1 { color: blue; font-size: 32px; } ```

这句话的意思是：选择所有的 `<h1>` 标签，把它们的颜色改成蓝色，字号改成 32 像素。

常见 CSS 属性

颜色属性：`color`

```css h1 { color: red; /* 红色 */ color: #FF0000; /* 用十六进制表示的红色 */ color: rgb(255, 0, 0); /* 用RGB表示的红色 */ } ```

> 💡 小提示：颜色可以用英文名字（red、blue、green）、十六进制（#FF0000）或者 RGB 值（rgb(255, 0, 0)）来表示。十六进制和 RGB 值可以表示更多的颜色。

背景属性：`background`

```css body { background-color: lightblue; /* 浅蓝色背景 */ }

div { background-image: url("bg.jpg"); /* 图片背景 */ } ```

字号属性：`font-size`

```css p { font-size: 16px; /* 16像素 */ font-size: 1.5em; /* 1.5倍大小 */ font-size: 150%; /* 150%大小 */ } ```

字体属性：`font-family`

```css p { font-family: "微软雅黑", "宋体", sans-serif; } ```

> 💡 小提示：这里写多个字体是因为，如果第一个字体你的电脑上没有，浏览器会尝试下一个，依次类推。

给网页化个妆

让我们给之前的网页加点 CSS，让它变得更好看：

```html <!DOCTYPE html> <html> <head> <title>小明的美丽网页</title> <style> /* 让页面背景变成浅蓝色 */ body { background-color: #E6F3FF; font-family: "微软雅黑", sans-serif; }

/* 标题样式 */ h1 { color: #333366; /* 深蓝色 */ text-align: center; /* 居中对齐 */ font-size: 36px; }

h2 { color: #3366CC; /* 蓝色 */ font-size: 24px; border-bottom: 2px solid #3366CC; /* 蓝色下划线 */ padding-bottom: 5px; }

/* 段落样式 */ p { color: #555555; /* 深灰色 */ font-size: 16px; line-height: 1.8; /* 行间距 */ }

/* 图片样式 */ img { border: 5px solid white; /* 白色边框 */ border-radius: 10px; /* 圆角效果 */ box-shadow: 3px 3px 10px rgba(0,0,0,0.2); /* 阴影效果 */ }

/* 按钮样式 */ button { background-color: #FF6B6B; /* 珊瑚红背景 */ color: white; /* 白色文字 */ border: none; /* 无边框 */ padding: 15px 30px; /* 内边距 */ font-size: 18px; border-radius: 25px; /* 圆角按钮 */ cursor: pointer; /* 鼠标变成手形 */ transition: all 0.3s; /* 过渡效果 */ }

button:hover { background-color: #FF4757; /* 鼠标悬停时变深 */ transform: scale(1.1); /* 放大效果 */ } </style> </head> <body> <h1>🌟 欢迎来到我的网页！🌟</h1>

<h2>👦 关于我</h2> <p>我叫小明，今年10岁，我喜欢编程和搭积木！编程就像搭代码积木一样，每一行代码都是一块小积木，组合在一起就能创造出神奇的世界！</p>

<h2>🎯 我的爱好</h2> <p>1. 💻 编程 —— 就像搭代码积木一样有趣！</p> <p>2. 🧱 搭积木 —— 让我的动手能力越来越强！</p> <p>3. 🎨 画画 —— 我喜欢画各种可爱的小动物。</p>

<h2>📷 我的照片</h2> <img src="my-photo.jpg" alt="我的照片" width="300">

<h2>🔗 学习链接</h2> <p><a href="https://www.example.com">点击这里学习编程！</a></p>

<p style="text-align: center; margin-top: 30px;"> <button>👋 和我打个招呼吧！</button> </p> </body> </html> ```

哇！加了 CSS 以后，这个网页变得好漂亮啊！有蓝色的背景、红色的按钮、圆角的效果、鼠标悬停还会变大变色……

> 🎯 记住啦：CSS = 样式 + 外观，它告诉浏览器“怎么显示”。

⚡ JavaScript：网页的电动马达

现在，你的积木房子已经建好并装修完毕了。它看起来很漂亮！但是……它还是不能动啊！门不会自己开，灯不会自己亮，房子里静悄悄的。

怎样才能让房子动起来呢？对了！你需要给它装上电动马达！按一下开关，灯就亮了；推一下门，门就开了；按一下按钮，机器人就开始跳舞了……

在网页世界里，JavaScript 就是这个神奇的电动马达！它让网页能动起来、会思考、能和用户互动。

JavaScript 是什么？

JavaScript（简称 JS）是一种编程语言。编程语言就是人和电脑交流的语言。我们用 JavaScript 来告诉电脑：“当用户点击这个按钮的时候，做这件事！”

和 HTML、CSS 不一样，JavaScript 是真正的“编程语言”。HTML 和 CSS 更像是“标记”和“样式”，它们描述的是“是什么”和“长什么样”。而 JavaScript 做的是“做什么”——它告诉网页要执行什么动作。

JavaScript 能做