有一天在敲代码，家里五岁的小外甥女凑过来问在干啥。屏幕上全是尖括号和英文字母，在她眼里跟天书似的。本想随便糊弄过去，但转念一想，这正好是个机会，把那些天天在用的东西，用最土最实在的大白话捋一捋。
这活儿说白了就两块：HTML管“有啥”，CSS管“长啥样”。就像盖房子，HTML是先把墙、屋顶、窗户这些空间布局摆好，CSS才是给墙面刷漆、给窗户安框、决定屋里是亮堂还是温馨。新手刚接触时，最容易懵的就是这俩东西搅和在一块。其实记住，HTML是骨架，CSS是皮肤。下面用盖房子的流程，把从零开始让网页显形这整套动作，掰开揉碎说清楚。
第一铲子土，得先有块地儿和一堆砖
干活总得有个地方。写网页这活儿，需要两个家伙什儿：一个是写指令的记事本（代码编辑器），一个是看结果的窗户（浏览器）。浏览器现在满大街都是，重点在编辑器，得找个顺手的。新手推荐用VS Code，免费，装好之后界面清爽，敲字还有提示。
打开编辑器，第一步不是急着堆东西，而是得告诉浏览器，这是一张网页，不是别的啥。得先搭个最基础的架子，行话叫“HTML结构”。这个架子长这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这儿是网页标签栏上的字</title>
</head>
<body>
<!-- 所有看得见的东西，都得塞进这个body区域 -->
</body>
</html>把这段代码敲进编辑器，然后保存文件，名字随便起，但结尾必须是.html，比如fangzi.html。保存好之后，双击这个文件，它就会在浏览器里打开。这时候看到的是一片白，啥也没有，因为<body>里头还是空的。
这儿得留个神，文件名字和路径里最好只用英文、数字、短横线，别搞空格和中文。有些老服务器或者系统，碰到稀奇古怪的字符会闹脾气，页面显示不出来。这就好比给房子安门牌号，得用大家都认识的数字和字母，不然快递小哥找不着地儿。
往空地上码砖，用HTML把房间分出来
现在地有了（浏览器窗口），得往上头放东西了。HTML里，每个东西都用一个“标签”来表示，标签就是尖括号包着单词，比如<div>、<h1>、<p>。这就像乐高积木，每一块都有固定的形状和作用。
目标是盖个简单的小房子，得有屋顶、墙面、窗户和门。回到编辑器，在<body>和</body>中间，添上这些积木：
<body>
<div class="house">
<div class="roof">这儿是屋顶</div>
<div class="wall">
<div class="window">窗户</div>
<div class="door">门</div>
</div>
</div>
</body>保存文件，再刷新浏览器，页面上还是啥也没有？不对，仔细看，屏幕左上角有一行小字“这儿是屋顶”，下面有一行“窗户”，再下面一行“门”。它们是竖着排下来的，也没任何样式，丑得不行。但HTML的工作已经完成了，它老老实实地告诉了浏览器：有个叫house的大盒子，里面有个roof（屋顶），有个wall（墙），墙上还有window（窗户）和door（门）。这就像盖房子的施工队把墙砌好了，房间隔出来了，但墙还是毛坯，没抹灰没刷漆。
码砖的时候，最容易犯的毛病是标签没配对。比如写了<div>，忘了写</div>，或者嵌套顺序搞乱了。浏览器虽然大多时候能猜，但猜的结果常常乱套。好比砌墙，砖块放歪了，后面的门窗就装不上。每次写完，看一眼编辑器里的代码高亮，没配对的标签颜色通常不对劲。
给毛坯房化妆，用CSS刷上颜色和形状
房子结构有了，但看着寒碜。这时CSS就得登场了。CSS就是给这些砖块定规矩的，比如屋顶刷什么颜色、窗户多大、墙多宽。
CSS可以写在哪儿？最简单粗暴的，就是直接在HTML文件的<head>部分，加一对<style>标签，在里面写规则：
<head>
<meta charset="UTF-8">
<title>小房子</title>
<style>
/* 所有以house开头的玩意儿，都装进这个框里 */
.house {
width: 300px;
margin: 50px auto;
background-color: #f0f0f0;
}
.roof {
height: 80px;
background-color: #a52a2a; /* 棕色屋顶 */
text-align: center;
line-height: 80px;
color: white;
}
.wall {
background-color: #deb887; /* 土黄色墙 */
padding: 20px;
min-height: 200px;
}
.window {
width: 80px;
height: 80px;
background-color: #87ceeb; /* 天蓝色窗户 */
border-radius: 10px;
text-align: center;
line-height: 80px;
margin-bottom: 20px;
}
.door {
width: 60px;
height: 100px;
background-color: #8b4513; /* 木头色门 */
text-align: center;
line-height: 100px;
color: white;
}
</style>
</head>把这些样式加进去，保存文件，刷新浏览器。奇迹发生了：那个灰扑扑的页面，变成了一个棕色屋顶、土黄墙身、带蓝色圆角窗户和棕色木门的小房子。而且，屋顶的字儿居中对齐了，窗户和门也变成了有背景色的方块。
这里头最关键的是那个“选择器”，比如.roof，前面的点表示“class”，意思是给HTML里class="roof"的那个元素穿上这身衣服。如果<div class="roof">和样式里的.roof名字对不上，样式就白写了，跟拿错钥匙开不了门一个道理。名字必须严丝合缝。
这时候再回头看，HTML还是那些标签，一个字没动，但页面天翻地覆。这跟装修一模一样，房子结构没变，但刷了漆、铺了地砖、装了灯，感觉就完全两样了。
把砖和颜色分家，让代码规整好打理
刚才那法子，CSS和HTML挤在一个文件里，短平快行，但房子一旦变大，比如要盖三层楼，所有装修说明书都堆在进门玄关，谁看着都头大。正经干活得分开。
建个新文件，名字叫style.css。把<style>标签里所有内容（就那堆大括号括起来的规则）全部剪切，粘到这个新文件里。style.css文件里只留这些：
.house {
width: 300px;
margin: 50px auto;
background-color: #f0f0f0;
}
.roof {
height: 80px;
background-color: #a52a2a;
text-align: center;
line-height: 80px;
color: white;
}
.wall {
background-color: #deb887;
padding: 20px;
min-height: 200px;
}
.window {
width: 80px;
height: 80px;
background-color: #87ceeb;
border-radius: 10px;
text-align: center;
line-height: 80px;
margin-bottom: 20px;
}
.door {
width: 60px;
height: 100px;
background-color: #8b4513;
text-align: center;
line-height: 100px;
color: white;
}然后在原来的HTML文件里，<head>部分把<style>标签整个删掉，换成一行引用：
<head>
<meta charset="UTF-8">
<title>小房子</title>
<link rel="stylesheet" href="style.css">
</head>保存两个文件，刷新浏览器，效果一模一样。但好处来了：以后想改房子颜色，不用去HTML里翻，直接打开style.css改就行。想给房子加个烟囱，去HTML里加个<div>，然后去CSS里写新样式。各管各的，清清爽爽。
这种分离做法，在团队干活时尤其重要。有人专管砌墙（写HTML），有人专管装修（写CSS），互不干扰。要是混在一块，改点东西得小心翼翼，生怕碰坏别的。
到这一步，一个带简单样式的网页就完整落地了。整个过程梳理下来，就是先搭骨架（HTML），再抹灰刷漆（CSS）。骨架决定“有没有这个东西”，装修决定“这个东西长什么样”。对刚开始摸代码的新手来说，把这个理清，比背一百个标签名都顶用。
小外甥女看完，指着屏幕上那个棕色屋顶的方块说：“所以这个div是墙，那个color是油漆？” 这话一点没错。HTML就是指着空地说，这儿要有个墙，那儿要开个窗。CSS就是给这墙刷成土黄，给窗户刷成天蓝。她走之后，盯着那个简陋的小房子看了半天，突然觉着，干了这么多年活，有时候真该回头看看，最初那些堆砖块、刷油漆的乐子，到底还在不在。