浏览器的网站地址栏里敲上一串网址，按下回车，代码屏幕上秒开一个页面。网站多数人不会去想，代码这页面背后到底是网站一堆什么玩意儿在驱动。但如果你是代码个稍微有点好奇心的人，迟早会问：这网站代码长什么样？网站我怎么才能看到？

答案比你想的简单得多。在电脑上打开任意一个网站，代码然后点击鼠标右键，网站在弹出的代码菜单里找到“查看网页源代码”这一项，点下去。网站一个新标签页会打开，代码里面全是网站密密麻麻的英文字母、尖括号和斜杠。代码这就是网站这个页面的骨架——HTML代码，浏览器把它翻译成了你眼前看到的排版、颜色和文字。

我第一次干这事是在大学宿舍，看一个论坛的页面代码，满屏的<div>和<span>，当时觉得这简直是天书。但别被吓跑，你不需要立刻读懂所有东西。你只需要知道，那些尖括号里的标签，就是页面结构的“积木块”。<h1>是大标题，<p>是段落，<a>是链接。就这么直白。

光看源代码还不够过瘾。更进阶的方法是打开浏览器的“开发者工具”。快捷键是F12，或者右键菜单里选“检查”。这个工具才是真正的好东西。它把页面拆解成一个实时面板，左边是结构，右边是样式。你鼠标在代码上划拉，页面上对应的区域就会高亮。反过来，你在页面上点一下某个元素，代码面板也会自动跳转到那一段。

这功能简直像给网页做透视。我经常用它来偷师——看到某个网站的按钮圆角做得特别好看，就检查一下那个按钮的CSS，发现人家用了border-radius: 999px，自己抄过来改改就能用。注意，抄代码不是抄袭，是学习，是站在别人肩膀上解决问题。但别把整个网站扒下来直接商用，那是另外一回事，涉及版权和法律。

还有个细节容易被忽略。你在源码里看到的HTML，只是静态部分。很多网站的内容是动态加载的，比如你刷微博，往下滚，新内容会源源不断出现。这些内容不是一开始就在HTML里写好的，而是通过JavaScript从服务器请求数据，再动态渲染出来的。所以你要是直接右键查看源代码，可能只看到个空壳子，看不到你实际看到的那些文字和图片。这时候，F12里的“网络”选项卡就派上用场了。你刷新页面，它会记录下浏览器发出的每一个请求，包括那些藏在背后的数据接口。

看懂这个，你对网站的理解就会上一个台阶。你会开始明白，网页不只是“一个东西”，而是一套代码在另一台服务器上运行后，把结果传到你电脑上，再由你的浏览器拼装出来的结果。这个过程中间有无数层逻辑，但你可以从最外层——查看源代码——开始，一步步往里挖。

话说回来，看代码这习惯一旦养成，你再看任何网站都会带着一种拆解的眼光。别人看到的是一个漂亮的首页，你看到的是<header>、<nav>、<main>这些结构标签在各自的位置上干活。别人感叹动画流畅，你脑子里浮现的是requestAnimationFrame和transform的配合。这不是什么高深的技能，就是手熟。

最后给你个实操建议。下次打开一个你常看的网站，别急着关掉，按一下F12，随便点几个标签，看看界面怎么变。别怕弄坏什么，浏览器刷新一下就恢复原样了。试着把一个标题的文字临时改掉，或者把一个图片隐藏起来，看看页面会怎么反应。这种小动作能让你立刻体会到“代码控制页面”的感觉，比读十篇文章都管用。

网页不是魔术，它就是代码。而代码这东西，只要你想看，它永远都是敞开的。