壹心理“网页三剑客”这个说法，很多刚接触前端的人都不陌生。它听起来像一套软件，但放到现在的语境下，大家更常说的是三样技术：HTML、CSS、JavaScript。它们不是安装包，而是浏览器能“读得懂”的三门语言，分别负责一个网页的结构、外观和交互。把三者配合好，才能产出那种看起来像样、点起来顺手、换设备也不容易散架的页面。
这篇文章会围绕网页三剑客这套组合展开，沿着“结构 -> 样式 -> 行为 -> 联调”的顺序走。我会讲解标准HTML骨架、CSS里最常让人头疼的Flex布局与常见样式问题，再进入JavaScript的函数、异步请求和错误调试，最后用一个能运行的卡片页面把三者串起来。无论你是刚开始学网页设计，还是从UI岗位想补齐前端短板，或者正在啃Vue但基础不牢，都能从里面拿到一些可以直接抄走的经验。
1. 网页三剑客到底要解决什么问题
1.1 三个角色，对应三种不同的回答
HTML全称是超文本标记语言，它负责搭建页面的信息结构。CSS全称是层叠样式表，它负责控制元素在屏幕上的布局和外观。JavaScript是一门脚本语言，它负责让页面在用户操作后产生行为变化。
可以打个比方。HTML像毛坯房，房子有几间房、哪里是承重墙、哪里是门窗，都是它的职责。CSS像装修，墙刷什么颜色、地板铺什么材质、家具摆放在哪个位置，都由它决定。JavaScript则像水电线路和智能开关，按下灯的开关，灯会亮；点了一个按钮，页面内容会更新。三者缺一个，网页都不算完整。
这个分工不是老师拍脑袋定的。搜索引擎要读HTML来理解页面主题；屏幕阅读器依赖语义化标签来把内容朗读出来；浏览器需要CSS和JS的分离来更高效地渲染和执行逻辑。如果违背分工，网页短期内能显示，长期一定会在性能、可维护性、可访问性上出问题。
拿一个现实场景说：很多新手会用 <div class="title"> 把标题包起来，然后靠CSS调字体大小。这没有错，但如果它真的是一篇文章的主标题，语义上应该用 <h1> 或 <h2>。否则代码里的信息层级丢失，屏幕阅读器和SEO都会受影响。这属于“能跑但不好维护”的典型写法。
还有一件事要讲清楚：这三个不是互相替代的关系。你不能用CSS让一个按钮“变成”一段新的列表，也不能用HTML去计算一个复杂的数据结果。很多“为什么我的页面不动”的问题，本