怎么打开网站的源代码

按下F12，打开的源代码网页的网站骨架就摊在你面前了。这事儿简单得让人想笑，打开的源代码但很多人压根不知道。网站

我见过太多人对着网页右键猛点，打开的源代码找那个“查看源代码”的网站选项。可有些网站偏不给你这个菜单，打开的源代码你一按右键，网站它弹个广告或者提示“禁止复制”。打开的源代码别慌，网站这时候你直接按键盘上的打开的源代码Ctrl+U（Mac上是Option+Cmd+U），一个新的网站标签页会立刻打开，里面全是打开的源代码密密麻麻的代码——那就是这个网页的原始HTML。这一招几乎对所有浏览器都管用，网站属于“官方后门”，打开的源代码网站作者拦不住你。

如果你连F12和Ctrl+U都不想按，还有个更笨但更彻底的办法：把网址前面的view-source:手动敲进去。比如你想看example.com的代码，就在地址栏输入view-source:example.com，回车。浏览器会直接以纯文本形式展示这个页面的所有源码，连注释都不带隐藏的。这个方法冷门，但偶尔能避开某些网站对开发者工具的检测——虽然那种检测本来就没什么用。

打开源代码之后，你看到的是一堆尖括号包裹的英文标签，<div>、<span>、<a>，看着像天书。别被吓住，你不需要全懂。你只需要学会一个动作：在代码区域按Ctrl+F，输入你想找的关键词。比如你想知道这个网页的标题是怎么写的，搜<title>；你想看它调用了哪些外部文件，搜.css或者.js。这种“搜索式阅读”比从头到尾读一遍高效十倍——谁写代码也不是为了给人逐行朗读的。

有个细节你可能没注意到：不同浏览器显示的源代码格式略有差异。Chrome会把HTML自动排版成树状结构，带颜色高亮，点击标签前面的小箭头还能折叠代码块。Firefox更朴素，直接给你纯文本。Safari稍微别扭，你得先开偏好设置里的“显示开发菜单”。这些差异不影响本质——代码还是那串代码，只是“眼镜”不同罢了。

我刚开始学前端的时候，最喜欢的练习就是打开随便一个新闻网站的源码，然后搜索<h1>标签。你猜怎么着？一个页面里往往只有那么一个<h1>，而且内容就是那篇新闻的大标题。这比任何教程都直观地告诉你：<h1>是主标题，搜索引擎靠它认页面主题。这种自己动手发现的乐趣，比看十篇教学文章都管用。

最后提醒你一句：看源代码和“抄袭”是两码事。你看了别人的代码，理解了布局思路，那是学习。你直接复制粘贴整个页面，改个logo就说是自己的，那是找骂。代码这玩意儿，看多了自然能分辨出哪些是巧妙的写法，哪些是垃圾堆。反正你打开源代码的那一刻，就等于站在了巨人的肩膀上——至于你是想看得更远，还是想直接把巨人推倒，那全看你自己。