【春节系列】前端是如何扒别人网页代码的PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛大家都

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

大家都知道，“前端无秘密”，这是什么意思呢？这篇文章就来带大家看一看，前端是如何借助工具扒别人网页的代码的。

声明一下，所谓扒代码不是鼓励大家抄袭，而是前端网页代码大多属于客户端代码，可以通过浏览器访问其源码内容。所以一般都可以通过各种方式去反推一个页面的HTML和CSS是如何写的，从而参考页面的布局方式和样式实现。

首先，我们要找到想扒的页面，最好是能通过浏览器打开的。其实由于移动互联网的普及加之前端行业的繁荣，现在我们在手机上访问的诸多页面都已经是通过前端技术实现的了。

比如你可以点击这个链接

这其实是支付宝APP里“公众号”文章的详情页，它在支付宝APP里打开是下图的样子。

这就是一个我们常说的H5网页。H5网页有什么特点呢，就是使用一种叫做HTML编程语言编写而成的，为什么叫H5呢，因为现在大多使用的是HTML的第五个版本。

而H5一般需要使用浏览器打开，这是因为HTML这种编程语言诞生初衷，就是用于在浏览器中展示相较于普通文本更丰富的内容格式，比如图片、音频、超链接等。

但是随着技术的发展，负责解析H5的部分可以脱离浏览器运行，因此展示网页的环境也逐渐丰富了起来。比如我们这里的支付宝APP，其内部就是拥有解析H5的能力，所以我们这个H5网页既可以在浏览器打开，也可以在支付宝APP内打开。

找到网页目标后的第二步，是需要借助一系列工具来对网页进行分析。简单一点的，我们可以通过打开浏览器自带的“检查”工具来查看网页的结构，比如你在网页上点击鼠标右键的“检查”。

怎么样，是不是很神奇。随着你鼠标在右侧面板选中不同的代码区域，左侧部分会高亮页面中对应的区域。这其实就是前端日常调试网页的最常规手段。

这里再介绍一下移动端如何调试网页，因为现在大多数网页实际上是在手机APP里进行使用，而不是电脑浏览器。

如果你是手机，你需要一台Mac电脑+电脑端safari浏览器+手机端safari浏览器+一根数据线。

然后把手机用数据线和Mac电脑进行链接，并使用手机端的safari浏览器打开网页，接着在电脑端的safari浏览器点开“开发”标签下手机名称下的网页链接。

这里如果没有“开发”标签，需要如下图，在【偏好设置】-【高级】中勾选“在菜单栏中显示“开发“菜单”

然后在打开页面链接后，电脑端的safari会显示出手机safari当前访问网页的代码结构。同样地，鼠标移到不同的代码区域，手机safari则会高亮对应的网页区域，正如下图所示。

那么既然我们可以做到使用工具调试网页，那么自然就可以使用HTML和CSS还原页面的内容。这里我们就以这个页面为例，来试着还原一下它。

还原方式可以分为两种：临摹和拷贝

临摹适合于学习HTML和CSS的新手，可以通过浏览器检查工具查看页面的各个元素和样式，然后在自己创建的HTML文件中对所有元素进行以此还原。

比如这个页面，整个页面主体是body标签下的section标签，然后section内部又由header和main两部分组成。header内部由两个div分别显示文章标题和作者信息。而main内部则通过许多p标签进行文章主体详情各个段落的显示。

拷贝则适合有一定网页编写经验的前端工程师，熟练掌握浏览器开发者工具，并熟悉常用的HTML和CSS语法。

比如对于这个页面，首先分析出页面核心元素均为纯内容展示，而无事件绑定，所以可以在核心DOM——main-section处点击鼠标右键，使用Copy-Copy element复制出HTML源码，并在自己创建的HTML文件的body标签内进行粘贴并代码格式化。

对于页面样式，可选中关键节点，查看右侧样式面板中所指向的源文件

然后通过开发者工具的代码格式化功能，将压缩后的代码进行格式化，以此还原样式代码原貌

接着将样式部分拷贝至自己文件中head标签内的style内即可。

上图是我们通过拷贝原网页结构和样式代码后的HTML文件预览效果。怎么样，是不是和原版像素级一致？其实这就是对于网页的“像素级抄袭”。

抄袭可耻，鼓励原创

抄袭毕竟不是长久之计，所以最重要的还是自己掌握网页编写的原理、理解基本知识，并熟练掌握各种工具的使用和技巧，从而可以做到举一反三，解决各种实际问题。

本文我们介绍了使用以下知识和工具实现对于一个H5网页的还原。

希望能够借此让大家了解移动互联网并没有什么魔法，有的只是技术的不断更迭和从业人员的努力，使得我们可以通过手机访问的应用越来越丰富，生活越来越精彩。如果你对这些内容的贡献感兴趣，你也可以从现在开始，学习简单的网页开发技巧，搭建属于自己的H5应用。