0040 如何分析网页源代码并模仿编写(如何开发网页,关键词优化)

前面，学习了如何从零开始编写一个网站的程序，并部署在本地Web服务器，然后部署到云服务器上，通过域名进行访问。

基本上整个网站开发的基本入门知识介绍的差不多了。

这节课来讲讲如何去模仿开发实现一个网站，这样今后大家就可以做出各种各样的网站了。

网页分析

首先来看一下学哥打算模仿开发的网站，如下图所示。

打开浏览器访问这个网站，样子是这样的：

为了简化起见，学哥只打算模仿开发首页，至于点击某篇文章或者其他链接进入的详细页面，模仿开发的原理都是一样的。

模仿一个网页的主要流程是这样的：

先分析一下网页的主要结构和元素，然后整理出一个大概的排版编程设计，然后通过Chrome浏览器的调试工具下载相关的图片资源和CSS资源，然后通过分析获取所需的元素，然后开始编写网页文件，按照效果模仿实现。

这个网页分析一下，最上面是一个菜单栏，里面是各种图标按钮，然后是一个大的图片，下面是分为左右2栏，左边的上面是一个图标按钮，左边的下面是一个一个文章标题和内容，右边的上面是五个图标按钮，右边的下面是推荐作者列表。

计划用一个table来进行排版，总共3行2列，第1行合并2列，第2行合并2列，第3行2个td。

第1行的td里面放一个table，只有1行，很多列，每个按钮占一个td。

第2行的td里面放一个图片，实际网站是多个图片切换的，由于还未学习javascript修改网页动态显示的技术，因此这里简化起见，就放一个大图片就好。

第3行的第1个td和第2个td，从上到下都用p来实现。

使用Chrome浏览器的调试工具

网页当中的图片，需要实现下载下来备用。同时网页中用到的一些CSS样式，也需要复制下来使用。这样能尽量保持显示效果相似。

下载的方法有几种，最简单的就是在浏览器中鼠标光标移动到图片上，右键单击，然后选择菜单【图片存储为...】，然后保存到本地计算机的某个目录下。

这种方式在某些情况下不太好使，比如某些图片资源是通过CSS样式来定义的时候，就无法下载了。比如，鼠标光标移动最上面一排按钮的右侧的【注册】按钮上，右键单击，发现并没有出现菜单【图片存储为...】。

这时候，就可以使用另外一种方法，就是使用Chrome浏览器的调试工具。

打开调试工具的方法是，鼠标光标移动到希望查看分析的网页元素上，右键单击，然后选择菜单【检查】，浏览器就出现了调试工具如下。例如，鼠标光标移动最上面一排按钮的右侧的【注册】按钮上，右键单击，然后选择菜单【检查】，看到网页效果如下：

点击调试工具最上面一排按钮的最右侧倒数第2个按钮，就是竖着的3个点的按钮，会浮出一个菜单，里面的第一排是Dock side，这个是用来设置调试工具位于浏览器的哪个位置的，可以看到默认是位于浏览器右侧的，这样会让真正的网页的宽度很窄，看起来不方便。

Dock side的3个按钮分别可以设置成：弹出一个新窗口，窗口内靠下，窗口内靠右。

来点击当中的按钮，将调试工具设置为窗口内靠下。设置后的效果如下：

可以看到调试工具分为上下2行，下面一行是Console，就是浏览器的控制台，主要用来显示网页的调试信息，目前暂时不用关心，等到后面第3章讲到JavaScript的时候会用到。上面一行又分为左右2栏，左边显示的是html代码的内容，右侧显示的是CSS样式的内容。

此时，如果在浏览器的显示内容里面，重新选择一个目标元素，鼠标右键点击【检查】菜单，会发现，调试工具里面的焦点也会跟随切换到对应的网页元素的html代码和CSS样式。例如，找到网页元素【新上榜】上鼠标右键点击【检查】菜单，调试工具里面焦点切换如下：

这样就能很方便的分析每一个网页元素，看到实际实现的html代码以及对应的CSS样式，有利于更方便的模仿实现。

网页元素分析

挨个分析网页上的元素，能下载的图片文件都下载下来，放到images目录下，如果有特殊的文字按钮或显示文字样式，复制对应的CSS样式到一个临时文件中。

例如，第一个图标【简书】按钮，调试工具里面显示是这样的：

找到img标签的src属性，这就是图片文件的网络地址，将这个地址复制出来，鼠标右键单击这个链接地址，弹出调试工具的菜单：

选择菜单项【Edit Attribute】，这时候，焦点会进入src的属性值里面，也就是链接地址文本会被选中：

鼠标光标移动到这段文本上面，右键单击，出现对这段文本的可以操作菜单，选择菜单项【复制】，这段链接文本就会被复制到系统剪贴板中了。

然后打开一个新的浏览器Tab窗口，将地址复制到网址输入框，然后回车，访问这个图片：

鼠标光标移动到图片上，右键单击，出现菜单：

选择菜单项【图片存储为...】，弹出文件保存界面：

选择要保存到的目录，然后修改文件名，然后点击【保存】按钮，完成保存这个图片的操作。

接下来，开始分析第2个图标元素，指南针图标元素。鼠标移动到图标上，右键菜单【检查】，调试工具显示如下：

可以看到这个图标是一个i标签，i标签是什么标签呢，去查一下html手册吧，它是一个表示斜体文本的标签，也就是说这个一个文本了，那么为何显示是一个图标呢。继续查看，关键在于这3个css属性：iconfont ic-navigation-download menu-icon

可以在右侧的样式窗口的搜索框Filter里面输入css的样式名字来检索看它具体的值，输入iconfont：

看到了它的一些属性值了，例如font-family，font-size，font-style，font-weight，-webkit-font-smoothing等等。

其中font-size是显示的删除线，这表示这个属性值对于当前这个标签元素是无效的，可能是受父元素或者子元素的影响。

如果有碰到之前没有学习过的属性和属性值，可以通过查看CSS手册或者去网上搜索获得相关知识。

这些属性值，是可以通过临时编辑来体现对网页的不同的影响。

鼠标光标移动到属性font-style上面，可以看到，每个属性前面都出现了一个蓝色的勾选按钮：

这里可以把蓝色的勾选去掉，这样属性值就显示成删除线了，就是属性不起作用，同时可以看到体现在网页元素的显示效果上。

例如，将font-style的勾选去掉，就能看到对应的指南针图标编程斜体了：

还可以，直接修改属性的值，例如鼠标点击font-style的值normal，可以看到此处变成了一个输入框：

可以直接进行编辑了，编辑完成之后回车键，就能看到新的值对网页的影响了。如果要改回去，一种办法是再次编辑值，还可以点击浏览器的刷新按钮，重新加载页面，并重新查看这个元素来调试。

这里可以判断出，这些属性都不像是能显示指南针图标的属性，因此继续分析另外一个属性 menu-icon：

也可以判断出，menu-icon也不是显示指南针图标的属性，因此继续分析最后一个属性 ic-navigation-download：

可以看到，搜索的时候关键字可以模糊搜索，不需要全部输入完整。

可以判断出，这里的content: "\E69A"; 属性值就是显示指南针图标的关键属性值。

content属性是CSS3规范新增的一个样式，用来显示一些特殊字符。这里的"\E69A"就是显示一个指南针的字符。

继续分析下一个元素，发现下载图标也是用content:"\E69D"; 来显示的特殊字符。

碰到这样的用CSS属性来显示元素的，就将这些值记录到一个临时文件中保存起来，后面编程的时候会用到。

继续分析下一个元素，搜索框，查看对应的CSS样式：

发现关键是用border-radius:40px;来实现圆角的背景色。

发现搜索图标也是用content:"\E618";属性来实现的。

同样的，Aa图标也是content:"\E6B5";属性实现的。

登录按钮主要使用log-in样式，而注册按钮主要使用sign-up样式。

写文章按钮主要使用write-btn样式，里面的羽毛笔使用content:"\E60E";属性来实现的。

接下来，将当中的图片用截屏工具截取出来，保存为head.jpg文件。

接下来，分析大图片下面的左边的一堆图文标签按钮。

主要是样式collection和name，然后把文字前面的小图标下载下来。

接下来分析【新上榜】这个图文按钮。

可以分析出来，这就是一个图片外面套了一个a标签。

然后来分析第一篇文章标题链接部分。

可以看到并没有太多特殊的技术实现，都是之前学习过的。

后面的分析就省略了，把这些样式的名字和值保存在临时文件里面。

文件定义和主体框架和排版

接下来，开始编写代码模仿实现了。

创建一个jianshu.html文件和一个jianshu.css文件。

然后开始编写主体框架。

jianshu.html代码如下：

jianshu.css代码如下：

刷新页面看看：

接下来用table实现排版并将主要的元素加上去。

jianshu.html代码如下：

jianshu.css代码如下：

刷新页面看看：

可以看到基本的框架已经出现了，接下来就是逐个元素修改样式添加上去。

下节课将实现详细的每个显示项目和样式。

往期教程

由于教程前后关联性极强，请大家查看历史消息。