🎨 02 · 我的第一个网页：HTML / CSS / JS

开场：网页是一个人

你见过的每个网页——包括代码实验室——其实都像一个人：

• HTML = 骨架：决定结构（哪里是标题、哪里是段落、哪里是按钮）
• CSS = 衣服：决定样子（颜色、大小、圆角、背景）
• JavaScript = 肌肉：决定动作（点按钮有反应、数据变化、动画）

三个人缺一个都不完整。我们来分别认识它们。

HTML：骨架（超简单！）

HTML 用标签搭结构，标签就像贴标签的箱子：

<h1>你好，世界！</h1>     <!-- 一级标题 -->
<p>这是一段文字。</p>      <!-- 段落 -->
<button>点我</button>      <!-- 按钮 -->

<h1> 是开始标签，</h1> 是结束标签，中间是内容。就这么简单——你刚才已经看懂代码了！

CSS：衣服

CSS 给标签“穿衣服”。比如把标题变蓝、页面背景变浅紫：

h1 { color: #6366f1; }              /* 标题变蓝 */
body { background: #fafafa; }       /* 页面背景变浅 */

#6366f1 这种叫十六进制颜色，就是“蓝色的编号”。CSS 的基本句式永远是：谁 { 什么属性: 什么值; }。

JavaScript：肌肉

JS 让页面“动起来”。比如点按钮弹出一句话：

document.querySelector('button').addEventListener('click', () => {
  alert('你好！');
});

看不懂没关系——第 1 章说过，代码就是精确指令，这行代码的意思是：找到按钮，等它被点，弹出“你好！”。

偷看大法：F12

任何网页的代码都能“偷看”！在浏览器打开任意网站，按 F12（或右键 → 检查），就能看到这个网站的 HTML。试试打开 candiewill.com 按 F12——你会看到我们网站的全部骨架。看别人的代码，是学习写代码最快的方式之一。

真实案例：candiewill 的门户

candiewill.com 首页的“CANDIE WILL”大标题就是一个 <h1>，每个产品卡片是一组 HTML 结构，配上 CSS 的渐变和圆角。你现在做的页面，和它用的是同一种语言。

本章小结

1. 网页三兄弟：HTML 骨架 + CSS 衣服 + JS 肌肉
2. HTML 用标签搭结构，CSS 管样式，JS 管动作
3. 按 F12 可以偷看任何网页的代码

🧪 动手试试（请和家长一起做）：打开 learning.candiewill.com，按 F12，找一找页面里的 <h1> 标签，看看它的 CSS 是怎么写的。