写网页这件事，程础最让人头疼的序设往往不是代码本身，而是计基你敲完最后一行标签，满心期待地打开浏览器，程础结果页面像被揉皱的序设报纸——元素叠在一起，图片撑破了容器，计基文字挤成一团。程础我见过不少初学者，序设对着屏幕上那堆乱糟糟的计基方块发愣，嘴里嘟囔着“明明照着教程写的程础”。问题多半出在一个地方：他们还没搞清楚HTML、序设CSS、计基JavaScript这三者到底怎么分工。程础

HTML是序设骨架，这个比喻老套但准确。计基它负责告诉浏览器“这里有个标题”“那里有个段落”“这是一张图片”。没有HTML，页面就是一片虚无。但光有骨架，人看起来就是一具骷髅，所以需要CSS来添上皮肉——颜色、间距、字体、布局。CSS的规则很直接：选中元素，然后给它一套样式。难的是选中谁、什么时候选中。比如一个导航栏，你给<ul>加个display: flex，里面的<li>就自动排成一行，这比早年用float再清除浮动要省心太多。我至今记得第一次用Flexbox把三个卡片并排居中时的感觉，像突然找到了开关。

但页面动起来，还得靠JavaScript。它负责响应你的点击、滚动、输入。举个例子，一个注册表单，用户还没填完就点提交，JS能立刻弹出“手机号格式不对”，不用等服务器来回跑一趟。这三者各司其职，又必须配合。HTML里通过<link>引入CSS，通过<script>引入JS，顺序不能乱——CSS放<head>里，避免页面闪一下无样式的内容；JS放<body>末尾，防止它阻塞HTML解析。

说到具体案例，我拿一个常见的“回到顶部”按钮来说。HTML只需要一个<button id="backToTop">↑</button>。CSS把它固定在右下角，position: fixed; bottom: 20px; right: 20px;，再给个圆角背景。JS监听window的scroll事件，当window.scrollY > 300时显示按钮，点击后调用window.scrollTo({ top: 0, behavior: 'smooth'})。就这么几行，效果很实在。很多教程会把这拆成三篇文章，其实放在一起看，逻辑一目了然。

另一个容易被忽略的点是盒模型。每个元素都是一个矩形盒子，由内容、内边距、边框、外边距组成。默认情况下，你给一个div设width: 200px; padding: 20px; border: 5px solid black;，它实际占的宽度是200+40+10=250px。这经常导致布局错位。解决办法是全局加一句* { box-sizing: border-box; }，让宽度包含内边距和边框。这个习惯我从写第一个项目就养成了，省下无数调试时间。

调试网页有个笨办法但很管用：在浏览器里按F12，用元素选择器点一下出问题的区域，看它的盒模型图，看哪些样式被划掉了。红色划线表示被覆盖或无效，黄色感叹号表示语法错误。我见过一个学生把color: red;写成colour: red;，找了半小时。工具就在那儿，用起来比猜快得多。

最后说一点个人观察。很多人学Web程序设计，一上来就奔着框架去，React、Vue装了一堆，结果连document.getElementById都写不利索。框架是帮你组织代码的，不是替你理解DOM的。我建议至少手写一个待办事项列表，用原生JS增删改查，再去看框架的响应式原理，会通透很多。网页的基础三件套，就像木工的锯子和刨子，用熟了，后面学什么工具都快。