最简单的网页方式是右键点击页面任意空白处，选“检查”。代码别被英文界面吓到，进入Chrome和Edge都自带中文。网页弹出的代码窗口默认停在“Elements”（元素）标签，这儿的进入代码不是静态的——你把鼠标移到代码行上，页面上的网页对应区域会高亮。我第一次发现这个联动时，代码像个孩子一样在淘宝首页上划来划去，把每个按钮都“摸”了一遍。这种即时反馈比任何教程都直观。

想看得更细？按住Ctrl+Shift+C（Mac上是Cmd+Shift+C），鼠标会变成十字准星。点页面上任何一个元素——比如那张猫猫图片，代码面板直接跳到它的位置，连CSS样式都给你列在右边。改颜色？双击颜色值，弹出色盘，你改一个十六进制码，页面立刻变色。这不是黑客行为，这是浏览器给你的“草稿纸”，刷新就复原。

有个细节很多人不知道：F12打开的开发者工具，左上角有个手机图标。点它，你能模拟iPhone或安卓屏幕。这时候再去“检查”某个元素，你会发现响应式布局的断点——为什么手机上菜单收起来了，电脑上却展开。这些代码不是死的，它们像乐高，每个块都有名字，有位置，有父子关系。

如果你想要更原始的代码，按Ctrl+U（Mac上是Cmd+U）直接看源代码。那是服务器发来的原始HTML，没有经过JavaScript的“化妆”。对比一下源代码和F12里的元素，你会发现很多页面内容其实是JS动态生成的——比如微博的时间线，源代码里只有空壳，真正的内容是脚本后来塞进去的。这种“动态”和“静态”的差异，是理解现代网页的关键一步。

别怕弄坏什么。浏览器里的代码修改只存在于本地内存，关掉标签页就没了。你大可以把知乎首页的“登录”按钮改成“退出”，把百度logo的文字换成自己的名字，截图发朋友圈装个逼。玩坏十次，你就懂了CSS选择器优先级；玩坏二十次，你就知道JavaScript怎么绑定事件——前提是你有耐心看Console（控制台）里的报错。

最后说个野路子：地址栏输入view-source:https://example.com（把网址换成你想要的），直接跳转到源代码视图。这比Ctrl+U更纯粹，连浏览器外壳都省了。我常用这招看别人的页面结构，尤其是那些设计感强的独立博客——他们的代码通常比大厂官网干净一百倍。

进入代码不是终点，是起点。你看到的是别人怎么思考布局、怎么命名类名、怎么处理图片懒加载。有一次我扒了一个摄影师的个人作品集，发现他给每张图片的alt属性写了一句诗——这种细节，不打开代码你永远看不见。网页代码不是天书，它只是另一种语言，而F12就是你的翻译耳机。