前端基础第 01 期：前端开发到底在做什么？HTML、CSS、JavaScript 分工详解原创

欢迎来到代码简单说前端基础动画课。第一期我们回答一个问题，一个网页到底是谁做出来的？前端开发通常由三种语言协作完成。HTML负责结构，像房子的骨架，CSS负责样式，让页面有颜色、间距和层次，Javascript负责行为，让页面能够响应点击、输入和数据变化。先看HTML。我们用main标题、段落和按钮搭出页面的基本结构。浏览器读取这些标签，就能知道页面中有哪些元素，以及它们之间的父子关系。接着加入CSS。

内边距、圆角、颜色和阴影，让原本简单的结构变成清晰的界面。样式不会凭空出现，它需要先找到HTML中真实存在的节点。最后加入javascript。Query select, 找到按钮a listener监听，点击text content, 修改按钮文字。点击发生后，代码沿着这条路径执行，页面就从试试看变成已响应。所以HTMLCSS和javascript不是互相替代，而是一条协作链。只有HTML页面有结构，但缺少表达，只有CSS，没有可以挂载的对象，只有javascript，也没有可操作的页面目标。

请记住，HTML搭骨架，CSS做表达，Javascript让它响应。现在试着给按钮加一个点击事件，把文字改成完成。我们下一期见。