第二个是CSS，相当于房子的“皮肤”——负责“装修”，比如墙刷什么颜色、沙发选什么材质。你看到博客标题是红色、字体是微软雅黑？那是CSS写的。CSS文件是.css后缀，比如style.css，里面会写h1 { color: red; font-family: 微软雅黑; }（所有

标签的文字都是红色、微软雅黑）。我之前帮美妆博主改源码，她嫌产品图边框丑，原来CSS里是border: 1px solid #ccc;（1px灰色实线），我改成border: 3px dashed pink; box-shadow: 0 0 5px #f00;（3px粉色虚线+阴影），她高兴得不行：“这个边框比我用修图软件做的还好看！”

第三个是JS，相当于房子的“家电”——负责“动起来”，比如按开关灯亮、按空调调温度。你点击“加载更多”按钮跳出新文章，鼠标移到商品图上图片放大，都是JS做的。JS文件是.js后缀，比如script.js，里面会写document.getElementById('load-more').onclick = function() { / 加载更多内容 / }（点击id为“load-more”的按钮，执行加载动作）。我去年帮美食博客加“点击显示做法”功能，就是用JS隐藏做法文本，点击按钮再滑出来——博主说：“之前我怕JS难，不敢碰，没想到改几行代码就解决了！”

为了让你更清楚，我做了张前端三要素对比表：

前端这三个部分缺一不可——没有HTML，CSS和JS就没地方“挂”；没有CSS，HTML就是堆干巴巴的文字；没有JS，页面就像不会动的照片，没人愿意多停留。我之前遇到个新手，觉得JS没用把.js文件全删了，结果“加入购物车”按钮点不动，“加载更多”也没反应，来找我问“为什么网站变静态页了”，我告诉他：“你把‘家电’拆了，房子能活吗？”他赶紧把JS文件加回去，页面立刻“活”了。

后端+数据库：网站的“里子”——藏在背后的“数据大脑”

说完前端，咱再讲后端和数据库——这俩是网站的“里子”，藏在背后管“数据”，没它们网站就是空壳子，没法处理用户请求（比如注册、登录、发表评论）。

先讲后端，相当于网站的“管家”——负责接收你的请求，再“指挥”数据库干活。比如你注册时输入用户名“小明”和密码“123456”，后端会先检查这个用户名有没有被用，没被用就存到数据库；被用了就弹出“用户名已存在”。后端用的语言有PHP、Java、Python，常见文件后缀是.php（比如index.php）。我去年帮做本地二手交易的客户改源码，他说用户注册总提示“服务器错误”——查了下他的PHP文件，原来数据库连接密码写错了，后端连不上数据库，改对之后注册功能立刻好了。还有次帮在线教育客户修“作业丢失”问题，发现他后端没写“保存作业到数据库”的语句，学生提交的作业直接“飘走了”，补完语句再也没丢过。

那数据库是什么？相当于网站的“ storage room”——存所有数据：你的用户名密码、博客文章、商品价格，都在这儿。数据库常见的有MySQL、SQL Server，不是普通文件，是“数据仓库”，得用SQL语句操作，比如INSERT INTO user (username, password) VALUES ('小明', '123456')（把“小明”的信息存到user表）。我之前帮宠物领养机构改源码，他们说领养信息找不到——原来数据存到“pet”表而不是“adopt”表，后台查错了表，我把数据转移到“adopt”表，改了后端查询语句，立刻就能查到所有信息。

后端和数据库的关系就像“管家和仓库”：你说“我要存东西”，管家去仓库找地方；你说“我要拿东西”，管家去仓库取。比如你登录时输入“小明”和“123456”，后端会用SELECT * FROM user WHERE username='小明' AND password='123456'查数据库——查到了就登录成功，没查到就提示“用户名或密码错误”。我之前帮小说网站客户修“登录失败”问题，发现他把SQL里的“AND”写成“OR”（意思变成“用户名对或者密码对就能登”），改回“AND”之后登录立刻正常。

提醒你一句：后端文件和数据库是“核心命脉”，千万别乱删！我遇到过新手把.php文件全删了，结果网站显示“500服务器错误”，哭着来找我恢复——我告诉他：“你把‘管家’辞了，谁帮你处理请求啊？”后来重新上传后端文件，网站才救回来。

容易被忽略但不能少的“辅助项”：静态资源与配置文件

除了前端、后端、数据库，还有两个“辅助项”——静态资源和配置文件，虽然容易被忽略，但少了它们网站也没法正常运行。

先讲静态资源，就是网站里“不会变的东西”：图片、字体、视频、音频，比如网站logo、博客配图、特殊字体，都存在“images”“fonts”“videos”文件夹里。我去年帮户外旅行博主改源码，他说网站加载太慢——看了下“images”文件夹，全是几MB的原图，我把图片压缩成webp格式（每个从5MB变500KB），加载速度快了10倍，他说：“原来不是服务器慢，是我存的图太大了！”还有次帮设计博主修“特殊字体不显示”问题，发现他没传字体文件到“fonts”文件夹，只在CSS里写了字体名称，传上文件后立刻显示出来。

再讲配置文件，相当于网站的“说明书”——告诉网站怎么运行：数据库连接信息、域名、上传文件大小限制，都在这儿。常见的有config.php、settings.ini，比如config.php里会写$db_host = 'localhost'; $db_user = 'root'; $db_pass = '123456';（数据库地址、用户名、密码）。我之前帮奶茶店客户部署源码，他说网站连不上数据库——查了下config.php，原来他把$db_host写成“127.0.0.1”，而服务器用“localhost”（有些服务器不认“127.0.0.1”），改对之后立刻连上了。还有次帮电商客户修“上传图片超限”问题，发现配置文件里上传限制是2MB，改成5MB就能传大图片了。

别小看这两个“辅助项”——我遇到过新手删了“images”文件夹，结果网站logo、配图全没了，页面光秃秃的；还有新手改了config.php里的数据库密码，网站直接连不上数据库，显示“无法连接服务器”。它们就像网站的“后勤部队”，虽然不站前台，但没了它们，前台的人也没法干活。

怎么样？现在再看源码文件夹，是不是觉得每个文件都有“岗位”了？W3C（万维网联盟）在《web开发最佳实践》里说过：“前端是用户与网站的第一次接触，后端与数据库是核心能力，静态资源与配置文件是稳定运行的基础，这四部分缺一不可”——我帮朋友改源码的经历也印证了这点：搞懂这四部分，你再也不会对着源码发呆，甚至能自己改点小功能（比如换个标题颜色、加个加载按钮）。

你要是还有不懂的地方，或者改源码时遇到问题，欢迎在评论区告诉我——毕竟我也是从“对着源码发呆”过来的，太懂那种迷茫的感觉了！

前端源码里的HTML、CSS、JS分别负责什么？

简单说，HTML是网站的“骨架”——比如博客首页的标题位置、正文区域、侧边栏列表，都是它先搭好框架；CSS是“皮肤”——标题要红、字体用微软雅黑、照片排三列，这些“装修”活儿都是它管；JS是“家电”——点击“加载更多”出文章、商品图 hover 放大，这些能动的交互全靠它。我之前帮朋友改摄影博客，他首页照片堆得乱，就是HTML没分组，用

和
• 把照片套进去，立刻整整齐齐。
  

  后端和数据库是什么关系啊？

  后端像网站的“管家”，数据库是“储物间”——比如你注册输入用户名，后端先去数据库查有没有人用过这个名；你登录输密码，后端去数据库核对对不对；你发评论，后端把评论存进数据库。我帮二手交易客户改源码时，他说注册总提示“服务器错误”，查了下后端PHP文件，原来是数据库连接密码写错了，改对之后立刻能注册了。

  静态资源文件夹里的文件能随便删吗？

  真不能！静态资源是网站里“不会变的东西”——images文件夹存logo、博客配图，fonts文件夹存特殊字体，videos文件夹存宣传视频，删了images文件夹，你网站的logo和照片就全没了，页面光秃秃的；删了fonts文件夹，你特意选的文艺字体就显示成默认宋体。我去年帮户外博主改源码，他嫌加载慢删了压缩后的图片，结果传回去的原图太大，加载反而更慢，后来又把压缩图传回去才好。

  配置文件里的数据库密码写错了会怎么样？

  直接导致网站“断粮”！配置文件是网站的“说明书”，里面写着数据库的地址、用户名、密码，比如config.php里的$db_pass要是写错，后端就没法连数据库——用户注册时，后端想存数据存不进去，会提示“无法连接服务器”；登录时，后端查不到你的账号信息，会一直提示“用户名或密码错误”。我帮奶茶店客户部署源码时就遇到过这问题，改对密码后，注册功能立刻恢复了。