csshtml网页
打开任何一个网页，右键选择“查看页面源代码”，你看到的那些尖括号包围的东西就是HTML。它不复杂，甚至可以说简陋——没有循环、没有判断、没有变量计算。但就是这套标记语言，撑起了整个互联网的内容骨架。
我刚开始学做网页那会儿，总觉得HTML太“死”了。写一个<p>标签，浏览器就显示一段文字；写<h1>，文字就变大变粗。没有逻辑，没有交互，像在填一张不会说话的表格。后来才明白，HTML的职责从来就不是“聪明”，它只是告诉浏览器：这块是标题，那块是段落，这里是图片，那里是链接。就这么简单。
但光有HTML的网页，丑得让人不想看第二眼。默认样式下，所有文字挤在左边，行距窄得喘不过气，链接是刺眼的蓝色加下划线。这时候CSS出场了。
CSS的全称是层叠样式表。层叠这个词很关键。你可以给同一个元素写多条规则，浏览器会按优先级决定用哪条。比如我写过一段代码：
<p style="color: red;">这段文字是红色的</p>同时在CSS文件里写：
p { color: blue; }最后显示出来是红色。因为行内样式的优先级高于外部样式表。这种规则在刚开始学的时候经常把人绕晕，但习惯之后反而觉得灵活——想临时改个颜色，直接写在标签里就行，不用去翻几百行的CSS文件。
真正让网页“活”起来的，是HTML和CSS的配合方式。我见过不少新手把样式全塞在HTML标签的style属性里，一个按钮写十几行行内样式。代码看起来像被胶水粘了一身纸条。更好的做法是给元素加class，然后在CSS里统一控制。比如：
<div class="card"> <h2>文章标题</h2> <p>这里是摘要内容。</p> </div>CSS里只需要写一次.card { ... }，所有带这个class的卡片样式就统一了。改一个地方，全站生效。这种分离带来的效率提升，在页面多起来之后特别明显。
有个细节值得说：CSS的盒模型。每个元素在页面上占的空间，其实是一个矩形盒子——内容区、内边距、边框、外边距，一层套一层。很多人调样式调得头疼，就是因为没搞清这四层的关系。比如你给一个div设了width: 200px，又加了padding: 20px和border: 5px，实际占的宽度是200+40+10=250px。除非你加上box-sizing: border-box，让padding和border算进200px里面。这个属性现在几乎是标配了，但十年前写页面的人，没少为它熬夜。
再讲一个实际场景。导航栏是每个网站都有的东西。用HTML写出来大概是这样：
<nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">关于</a></li> </ul> </nav>默认状态下，列表项是竖着排的，每个前面还有个小圆点。CSS几行就能改掉：
nav ul { list-style: none; display: flex; gap: 24px; } nav a { text-decoration: none; color: #333; font-weight: 500; } nav a:hover { color: #0066cc; }竖排变横排，圆点消失，链接下划线去掉，鼠标移上去还会变色。HTML提供了结构，CSS完成了视觉和交互反馈。两者各司其职，谁也不越界。
我自己的习惯是，写HTML的时候尽量用语义化标签。<header>、<nav>、<main>、<article>、<footer>，这些标签名字本身就说明了内容是什么。比满屏的<div>清晰得多。对搜索引擎和屏幕阅读器也更友好。CSS选择器写起来也顺手，比如article h2比.box .title更直观。
当然，现在做网页早就不止HTML和CSS了。JavaScript负责交互，各种框架负责组件化开发。但底层的渲染逻辑没变——浏览器拿到HTML，构建DOM树，再根据CSS计算每个节点的样式，最后画到屏幕上。你看到的圆角、阴影、渐变、动画，全是CSS在背后干活。
有时候我会想，HTML和CSS就像盖房子用的砖和水泥。砖决定哪里是墙、哪里是门，水泥决定墙面是光滑还是粗糙、颜色是白是灰。单独看都不起眼，合在一起就能搭出让人愿意待着的空间。网页也一样，结构清晰、样式舒服，人才会愿意多看几眼。