内容摘要：右键点击网页，选“查看网页源代码”，你会看到一堆密密麻麻的字母和符号。别被吓到，那其实就是浏览器从服务器那儿拿到的原始文件。它跟你在屏幕上看到的图文排版完全是两码事。 我头一回干这事是在大学宿舍，想扒

右键点击网页，网站选“查看网页源代码”，代码你会看到一堆密密麻麻的网站字母和符号。别被吓到，代码那其实就是网站浏览器从服务器那儿拿到的原始文件。它跟你在屏幕上看到的代码图文排版完全是两码事。

我头一回干这事是网站在大学宿舍，想扒一个论坛的代码签到按钮逻辑。按下右键，网站满屏的代码<div>和<script>扑面而来，第一反应是网站：这玩意儿能看？但硬着头皮往下翻，慢慢就摸到门道了。代码HTML管骨架，网站CSS管皮肉，代码JavaScript管动作。网站三样东西搅在一起，构成了你眼前那个花花绿绿的页面。

HTML：页面的骨架

看源代码，最先认出来的肯定是尖括号包起来的东西，比如<p>、<img>、<a>。这些叫标签，告诉浏览器“这里是一段文字”“这里插一张图”“这里是个链接”。标签一层套一层，像俄罗斯套娃。你看到的段落、标题、列表，全是靠它们撑起来的。

有个细节挺有意思：很多网站会把导航栏、页脚这些重复出现的部分写成<nav>、<footer>，语义化标签让代码读起来更顺。早年的网页清一色<div>加类名，现在规范多了。不过也有偷懒的，我见过一个电商页面，整个商品列表用了几十个<div>硬堆，连个<ul>都不给，维护的人估计得骂娘。

CSS：藏在里面的样式

样式通常写在<style>标签里，或者单独一个.css文件被<link>引进来。源代码里看到color: #333、margin: 10px auto这种，就是CSS在干活。它决定了文字多大、颜色多深、盒子摆哪儿。

有时候你会在标签上直接看到style="..."，这叫内联样式，优先级高但不好复用。正经项目里很少这么写。我查过一个政府网站，源代码里内联样式满天飞，同一个红色写了七八遍，改版的时候估计得哭。

JavaScript：让页面动起来

源代码里最让人头大的部分。看到<script>标签，里面要么直接写代码，要么通过src属性加载外部文件。点击按钮弹窗、下拉菜单展开、表单验证，全靠它。

现代网站的前端代码往往经过压缩，变量名变成a、b、c，换行全去掉，一整坨挤在一行里。想读懂得先格式化。我试过分析某视频网站的播放逻辑，压缩后的代码三千多行挤成三行，用工具展开才勉强看出点眉目。那感觉像拆一个被胶带缠死的快递。

为什么要看源代码

最直接的用处是学习。看到某个网站布局巧妙，右键一看就知道人家怎么分块、怎么用栅格。想抄个按钮样式，找到对应的类名，复制CSS，改改就能用。

再就是排查问题。页面显示错位、图片加载不出来，看源代码能快速定位是标签没闭合，还是路径写错了。有次我帮朋友看一个表单提交失败的问题，源代码里<form>的action属性指向了一个不存在的地址，改过来就好了。

还有安全层面。源代码里偶尔会泄露注释、测试接口、甚至密钥。我见过一个后台登录页，注释里写着“测试账号admin/123456，上线前删除”，结果上线了也没删。这种低级失误不算少见。

几个实用技巧

浏览器开发者工具比直接看源代码方便得多。按F12，Elements面板里能实时查看DOM结构，鼠标划过哪块，页面对应区域就高亮。Network面板看资源加载，Sources面板看JS文件。右键“查看源代码”看到的是服务器返回的原始HTML，而Elements面板看到的是经过JavaScript修改后的最终结构，两者经常不一样。

想快速找到某个元素，在Elements面板里点左上角的小箭头，再点页面上的目标，代码会自动定位过去。这招比在几千行里翻找快多了。

看源代码这事，门槛不高，但想看出门道得有点耐心。它像看一个人的体检报告，表面是数字和术语，背后是整套运行逻辑。多看几个网站，慢慢就能从乱码一样的字符里读出设计者的意图和习惯。有人写得干净利落，有人写得一团乱麻，代码风格骗不了人。