按一下键盘上的何进F12，你眼前弹出的入网这个布满代码的面板，就是页源网页源代码的“后台化妆间”。但很多人不知道，代码这只是何进查看源代码的快捷方式之一，而且它显示的入网是“实时渲染后的代码”，并非服务器最初发送的页源那份原始文件。

要看到真正的代码源头，你得用另一个动作：在页面空白处点击鼠标右键，何进选择“查看页面源代码”。入网这时候新标签页里出现的页源，才是代码服务器吐出来的第一手HTML——没有经过浏览器任何加工，连注释都原样保留。何进我常常觉得，入网这份代码像厨师的页源菜谱，而F12面板是已经端上桌的菜，你看到的是摆盘后的样子，却不一定能猜出后厨用了什么调料。

如果你用的是手机，操作略有不同。Safari和Chrome的移动版默认不开放这个功能，你得在地址栏前加上view-source:前缀，比如view-source:https://example.com，页面就会以纯文本形式倾倒出全部代码。这个方法在电脑上也通用，算是绕过右键菜单被网站禁用时的逃生通道——有些网站会屏蔽右键菜单，比如某些在线文档平台，这时候直接改地址栏反而更快。

真正有意思的是，源代码里藏着许多“小心思”。比如很多网站的HTML头部会有一段<!--开头的注释，里面写着开发者的名字或者一句吐槽。我曾在某个电商网站的代码里看到过“别改了，再改就爆炸”这样的留言，那是三年前留下的，至今还挂在那里。还有的网站会把SEO关键词堆在meta标签里，但写法粗糙得一眼就能看出是外包团队干的活。

看源代码不需要任何编程基础，你只需要学会搜索。按Ctrl+F（Mac上是Cmd+F），输入“title”能看页面标题怎么写的，输入“keywords”能知道网站想吸引哪些搜索词。如果你想偷学某个页面的布局技巧，直接搜“flex”或“grid”，现代布局的写法就那么几种，看两遍就能模仿个七八成。

有个细节容易忽略：查看源代码时看到的HTML结构，和F12面板里的DOM结构可能完全不同。因为JavaScript会动态修改页面内容，而“查看页面源代码”展示的是JS执行前的静态骨架。所以当你发现某个元素在源代码里找不到时，别惊讶——它八成是被JS后来加上去的。这种差异本身就是一种学习素材，你对比两者，就能理解前端框架到底在背后做了什么。

最后说个实用技巧。如果你想把整个网页的源代码存下来研究，别用“另存为”——那会附带一堆浏览器生成的垃圾文件。直接在源代码页面按Ctrl+A全选，再复制粘贴到文本编辑器里，存成.html文件就行。这样得到的文件干净得多，用浏览器打开它，你还能看到这个页面在没有网络资源加载时的“素颜模样”。

按F12也好，加前缀也罢，本质都是掀开那层视觉表皮。看多了你会发现，所谓网页，不过是一堆标签和属性的排列组合，但排列的方式里，藏着写代码的人的性格。