浏览器地址栏里敲上一串网址，网页页面弹出来，源代图文并茂，网页动效顺滑。源代你盯着这块屏幕，网页有没有一秒钟想过——这玩意儿到底是源代怎么从一根网线变成眼前这副模样的？

答案就藏在页面上。鼠标右键，网页点“查看页面源代码”，源代或者干脆按键盘上的网页Ctrl+U。哗啦一下，源代新标签页里铺满密密麻麻的网页英文、尖括号、源代斜杠、网页数字。源代别慌，网页这不是乱码，这就是这个网页的“底料”。

说白了，网页源代码就是一份纯文本的“施工图纸”。浏览器收到服务器传过来的这堆字符，然后照着图纸把房子盖给你看。你看的那些漂亮的按钮、图片、排版，在这份源代码里，全是一行行标签和属性。比如<img src="图片地址">，就代表“这儿放一张图，图从哪儿来，你自己去找”。

读源代码不需要什么高深武功。你得先学会抓大放小。打开源代码后，第一眼看到的通常是<!DOCTYPE html>，然后跟着一大串<html>、<head>、<body>。head里面装的是给浏览器看的“配置信息”，比如编码格式、网页标题、引用的外部样式表。body里面才是你肉眼可见的所有内容——标题、段落、图片、链接，全在这块区域里躺着。

我刚开始看代码那会儿，总想每行都看懂，结果十分钟就头晕。后来一个做前端的朋友点醒我：你不需要全懂，你只需要找东西。想找这张图片的原始地址？在源代码里按Ctrl+F，搜img，一个个点过去，总能看到src=后面跟着的那个URL。想看看这个页面调了哪些外部接口？搜script标签，里面引用的.js文件就是。

这么干有个实际好处。有回我想下载一段视频，网页上死活找不到下载按钮。打开源代码，搜video，没找着；再搜mp4，嘿，直接蹦出来一个链接，复制到新窗口打开，视频就躺在那儿。这感觉就像绕过了门卫，直接从后厨端走了菜。

还有个更妙的用法——偷师。看到某个网站的布局特别顺眼，别光顾着羡慕，右键查看源代码，看看人家是怎么用flex或者grid排的版；觉得某个按钮的阴影效果高级，去样式表里翻翻那个类名对应的box-shadow值。这不是抄袭，这是临摹，跟学书法一个道理。你看多了好代码，自己写的时候手就不生。

当然，源代码里也有脏东西。有些网站故意压缩代码，所有内容挤成几行超长字符串，看着就劝退。这时候你可以在源代码页面右键，选择“格式化”或者“美化代码”，大部分浏览器或编辑器都能帮你把缩进和换行恢复出来。还有些网站更鸡贼，把核心逻辑藏在加密的JS文件里，你看到的全是eval(function(p,a,c,k,e,d)...)这种玩意儿。碰到这种，别硬刚，说明人家不想让你轻易看懂，换个思路查网络请求面板，比死磕源代码高效得多。

看源代码这习惯，养成了就戒不掉。我现在刷网页，手总忍不住按Ctrl+U，倒不是每回都有目的，纯粹是好奇——这个页面背后用了什么框架？那个轮播图是手写的还是插件的？有些时候，看着别人写的代码，能感受到那个程序员当时的情绪：注释写得啰嗦的，估计是个新手，生怕自己以后看不懂；代码干净利落、变量命名讲究的，大概率是个老手，还有点强迫症。

这就像拆开一个精密的钟表，里面齿轮咬合，发条紧绷。你未必能把它重新装回去，但至少你知道了，它不是凭空变出来的，是有人一点一点拼起来的。下次页面加载慢，或者样式错乱，你心里也有底——不是玄学，就是代码里某个地方出了岔子。

所以，下次看到网页，别光顾着划。按一下Ctrl+U，往后台瞅一眼。那堆看似枯燥的字符里，藏着这个数字世界最朴素的真相。