网页底层代码怎么打开

在浏览器里随便打开一个网页，网页按下键盘上的底层代码打开 Ctrl+U（Mac 用户按 Option+Command+U），你就能看到一堆密密麻麻的网页代码。这就是底层代码打开网页的底层——HTML、CSS 和 JavaScript 的网页混合体。很多人第一次看到会头皮发麻，底层代码打开其实这东西没那么神秘。网页

我当初第一次按下那个快捷键时，底层代码打开屏幕弹出新标签页，网页里面全是底层代码打开尖括号包裹的英文单词。第一反应是网页“这什么鬼”，第二反应是底层代码打开关掉页面。直到后来才知道，网页那堆看起来像乱码的底层代码打开东西，恰恰是网页整个互联网最基础的骨架。

换个更直接的办法：在网页空白处右键，菜单里选“查看页面源代码”。效果跟快捷键一样，会打开一个新标签页，里面是纯文本格式的代码。注意，得点页面空白区域，别点在图片或链接上，否则右键菜单会变成别的选项。

但这里有个坑——你看到的源代码，是服务器发给浏览器的“最终版本”。现在的网页很多是动态的，内容靠 JavaScript 实时生成。你在源代码里可能找不到页面上显示的某些文字，因为它们是在代码运行后才被创建出来的。这时候需要用开发者工具：按 F12 或者 Ctrl+Shift+I，打开一个分屏面板，点“Elements”（元素）标签，那里展示的是浏览器渲染后的真实结构。

面板左侧是 DOM 树，跟源代码长得差不多，但更活。鼠标在代码行上移动时，页面上对应的部分会高亮。右键点击页面任意元素，选“检查”，能直接跳到那个元素的代码位置。这招用来偷看别人网站的布局技巧特别管用。

说个具体案例。有次我好奇一个电商网站的价格是怎么实时变动的，按 F12 打开面板，在 Network（网络）标签里刷新页面，看到一堆请求文件。点开其中一个 JSON 文件，里面就是商品价格数据。原来页面上的数字根本不是写死在 HTML 里的，而是从后台接口拿到的。这种层层剥开的感觉，比看任何教程都来得直观。

如果你用的是手机浏览器，操作稍微不同。Chrome 浏览器在地址栏输入 view-source: 加上网址（比如 view-source:https://example.com），能直接看源代码。Safari 则需要先在设置里开启“网页检查器”，然后长按刷新按钮，选“显示网页源代码”。麻烦是麻烦点，但总归能看到。

还有个野路子：在地址栏输入 data:text/html,<h1>Hello</h1>，回车。浏览器会直接渲染这段代码，显示一个“Hello”标题。这招用来测试代码片段特别方便，不用建文件也不用开服务器。

看代码这事，第一次会觉得枯燥，但当你认出某个标签是标题、某个属性控制颜色、某段脚本负责弹窗时，那种“原来如此”的感觉挺上头的。网页在你眼里不再是平面的图片，而是一层层可以拆解的积木。下次遇到页面布局奇怪的网站，别急着吐槽，按个 F12，看看它到底怎么拼出来的。