数据分析师的编程之旅——Python爬虫预备篇（2）前端设计

作者：李禹锋，重庆芝诺大数据分析有限公司数据挖掘工程师。

有一个程序猿的岗位叫做前端工程师，当前市场需求量也不小，主要是以HTML5框架（H5）、CSS3样式表和JavaScript语言（简称JS）为核心的技术。前端和后台密不可分，但区别也很大，和前一篇的服务端和客户端也有一些类似，前端最主要就是针对网页的呈现效果、数据加载进行操作，而后台主要负责逻辑的运算以及数据的传输。

往期回顾：

非程序员的编程之旅——Python基础篇（1）前言与安装

非程序员的编程之旅——Python基础篇（2）单值变量类型

非程序员的编程之旅——Python基础篇（3）多值变量类型

非程序员的编程之旅——Python基础篇（4）流程控制与异常处理

非程序员的编程之旅——Python基础篇（5）函数

非程序员的编程之旅——Python基础篇（6）面向对象

非程序员的编程之旅——Python基础篇（7）模块

数据分析师的编程之旅——Python基础篇（8）常用内置模块文档

数据分析师的编程之旅——Python爬虫预备篇（1）MySQL

本文导读

详细的知识点会在下一篇开始的爬虫系列中进行讲解，因为爬虫的目标并不是python代码，而是HTML、CSS和JS，所以之后的系列中，若想成为爬虫工程师，就必须跨语言。下面是三个板块各自的功能，针对一个网页的呈现起的作用。

HTML——搭建房屋的钢筋混泥土、砖块；

CSS——粉刷匠；

JavaScript——吊车。

需要提一下的是，Google确实厉害，JS以前一直都是只能运行在浏览器端的脚本语言，但自从Google把Chrome浏览器解析JS部分的内核V8引擎开源后，部分脑洞大得惊人的程序员使用V8引擎让JS也可以在服务端运行，其中比较成功的案例就是NodeJS，可使用JS语言、单线程、非阻塞I/O创建网站的服务端（以前是只有后台语言才可以做的，例如C/C++、Java、Python、PHP、Ruby、Go等等），虽然创建的是轻量级网站服务端，但因其非阻塞I/O等特性，一台双核4G内存电脑就可以支撑上百人同时进行访问。当然NodeJS和老牌服务器比起来就是一个小玩具，不过使用的企业并不少，特别是一些中小型企业。然后需要吐槽的一点就是，部分企业招聘信息以及某某百科乱扯犊子，NodeJS是JavaScript语言，但和前端没有半毛钱关系，NodeJS并不是前端工程师必须要会的（而且会了也用不上，除非某家小企业只想招一个前端和后台一手包办的人）。

再提一下，数据可视化现在也是非常吃香的工作，当前可视化主要是两个方面，一个是基于H5的页面，一个是虚拟现实（VR）、增强现实（AR）、混合现实（MR）。前者主要使用JS进行可视化，后者也有使用JS，但C#更多一点。R语言做数据分析很厉害的，当然也跑不了数据可视化，但！R语言的可视化全是使用的JS框架。可能会有同学有疑问，网页做效果渲染当然很好，但也并不能包含那么多啊，例如我在手机APP里看到的那些可视化怎么会是基于H5、基于JS的呢？其实，例如QQ的各种软件，最初的那些版本全都是在网页上的，然后有一个桌面级的程序直接将网页嵌套在软件内；再例如我两个月前给一家大数据公司安全方面的产品做数据可视化的工作，我最终提交给对方的就是一堆HTML、JS、CSS等静态文件，对方整合后台之后就成了一个手机APP。

扯回来，讲了半天JS，但爬虫初学者主要会面对HTML，所以本文针对HTML进行讲解。（惊不惊喜，意不意外，开不开心）（再启，想要拿爬虫当饭碗还是精通JS比较好，反爬虫除了网站服务端拒绝访问以外，基本都是前端工程师拿JS搞的鬼）

写个HTML页面

首先，随便在电脑上的一个地方，新建一个文本文档，输入如下：

<!DOCTYPE html>

<html>

<head>

<title>第一个页面</title>

</head>

<body>

<h4>Python</h4>

</body>

</html>

然后另存为，编码选为UTF-8（默认是ASCII），退出，将后缀名.txt改为.html。使用任何浏览器打开这个文件。

认识网页

首先一点，我们在浏览器端看到的任何一个网页都是上文中的那种结构。使用html标签括起来，网页信息在head里，网页内容在body里。一个网页上所有显示出来的信息都可以在网页源码里面找到。但是，这个源码并不一定是对方服务器上的html静态文件中的源码（1中写出的小demo可称为一个静态文件），而是浏览器渲染后的源码。怎么进行效果渲染、数据加载？那就是JS的作用。只是现在我们先讲解HTML，毕竟JS、CSS操作的对象都是HTML，如果连HTML都不会，更不谈学习JS。

在浏览器端（最好使用Chrome或Firefox，IE和edge退散），打开任何一个网页--->点击右键--->点击查看检查（Chrome）、查看元素（Firefox）、审查元素（360浏览器）。或打开任何一个网页按F12（再次，使用IE或edge浏览器的同学请下载Chrome浏览器后再行尝试）。我个人使用Chrome浏览器较多，Firefox不少组件得自己安装，而且部分组件还得翻墙下载，总之就是很麻烦。

下只讲解Chrome浏览器，其他大部分浏览器都大同小异，名字可能会有差异，但内容差不多。下图是我打开百度后按F12的结果

Elements是网页渲染后的源码，Console是控制台，Source是该网页所有的资源（html文件、js文件、css文件、图片文件等等），Network是检测资源加载的地方。了解这几个就足够了。Console界面是一个JS的命令行界面，可以在里面输入一些JS代码进行调试，例如输入

alert("你好世界！");//按回车

或者

console.log("hello world!"); //按回车

注意标点需要是全英文的。在这里打JS代码能够运行其实就是上文所说V8引擎的功劳。当然也可以看到别人一些网站打印到控制台的信息，例如百度的控制台就有。

一张网页，要经历怎样的过程，才能抵达用户面前？

一位新人，要经历怎样的成长，才能站在技术之巅？

探寻这里的秘密；

体验这里的挑战；

成为这里的主人；

加入百度，加入网页搜索，你，可以影响世界。

等等噼里啪啦。

总的来说，我水土不服、老奶奶不扶、墙倒不扶，就服这招聘广告……讲到招聘，我忽然想给大家讲个鬼故事。

再讲个鬼故事。

html元素简介

一个网页，平常在大家看起来是一个平面，但实际上却是由各种DOM元素所组成的三维结构。在Firefox浏览器中有附加组件可查看一个网页的三维样式。

DOM（Document Object Model），这是一套标准，使用HTML的标准。具体的内容有哪些勒，首先第一个小节中使用的

等等标签都是属于DOM对象，也称为节点元素，当然也有一个从属关系。

大部分标签都会有闭合标签，例如会有，起始标签到闭合标签中间写包含的内容。故自己在写页面的时候，最好先把标签成对写好，再写中间的内容，否则要找问题很麻烦。

我们在爬虫时绝大部分是查找body下的标签内容（数据），但也并不是忽略head信息，例如这个网页的编码格式是什么，将会在head下的meta中声明，下面是百度和网易两个网站的编码声明。

（百度首页）

（网易首页）

之前说过，乱码问题全是编码问题，如果你进行爬虫时，没有将编码对应上，那基本上你获取到的源码会是乱码，特别是中文部分。

然后在head中的一个重点是script（body中也会有script，用法一模一样），中文名为脚本，所有JS、CSS等脚本全会包含在script标签里。例如淘宝网的数据就是以JSON格式存储在script标签中，下图以淘宝女装中的羽绒服为例。

插播一些题外话（总感觉每次题外话才是重点……）

一个网站想要反爬虫，最常用的方法就是使用JS控制数据的加载。之前也说过，网页的源码和浏览器渲染加载后的源码很可能不是同一个东西。浏览器加载后的源码，当前页面的数据会直接在body下的标签内，对应匹配出即可，这种方式通用性更强（因为每个网站反爬虫的方式都不尽相同，想要使用一套或者几套直接获取数据流的方式来爬取所有网站基本上是天方夜谭，而直接解析源码，虽然不同网站的网页结构也不尽相同，但是获取源码的过程基本上是一样的，唯一需要改动的是解析源码的代码）。

例如爬取淘宝网的方式是在script中使用正则表达式匹配出来参数后再发送异步请求获取数据，但京东又是另外一种方式，美团外卖每次往下滚动又会加载出新的数据等等都和淘宝网是两码事。爬虫和反爬虫从一开始就是一个博弈的过程，相互之间博弈成本，反爬虫机制达到一定的高度后，想要爬虫付出的成本代价也是极高的，如果爬虫方有实力承担该成本，那想爬取什么网站都随你心情（例如百度、Google等巨型搜索引擎）（当你的爬虫规模达到一定程度的时候，面对验证码或者某某网站要求将下列所有图片全部摆正，再或者某某网站要求找出下图中所有的香菜一类的时候，就需要对图像识别有要求了）。

扯回来扯回来，讲HTML就认真讲HTML，怎么能分心呢。

标签既DOM对象，这个对象和Python中的对象有异曲同工之妙，有属性有方法，不过DOM对象还有一个东西，InnerHTML，其实也是一个属性，但我更喜欢叫他内容。夹杂在起始标签和闭合标签中间的内容叫做InnerHTML，其余属性和方法均在起始标签内。

属性有id、class、style、href等等。例如一个锚标签可定义如下

id是唯一识别码，class是类识别码，href是链接，”百度链接”四个字是InnerHTML。

将该标签添加到第一节中的h4标签下，重新打开html文件可见下图。

点击百度链接几个字就会跳转至百度。

标签和属性w3cschool或菜鸟教程等网站整理得比较全。

w3cschool：

http://www.w3school.com.cn/tags/index.asp

菜鸟教程：

http://www.runoob.com/html/html-tutorial.html

上面的链接也可以夹在a标签内，就直接可以点击了。极简单的介绍了一下需要的基础知识（共10篇），我能做的只能是引进门，修行全在自己。下一篇开始进入爬虫篇，可能很多朋友也是朝着爬虫篇和数据挖掘篇来的，都想看实战嘛，所以我前面的篇章进度拉得非常快。同时因平时上班事情太多了，都是抽出的空闲时间来写，写完后没有时间仔细再看几遍，文中有任何纰漏或不足之处敬请指出。人生苦短，我选Python。

数据分析师的编程之旅——Python爬虫预备篇（2）前端设计相关推荐

数据分析师的编程之旅——Python基础篇（8）常用内置模块文档
作者:李禹锋,重庆芝诺大数据分析有限公司数据挖掘工程师. 先来一点题外话,说明一下为什么要改名字.首先呢,许多业外人士对于程序员和工程师都有个误解,虽然都自嘲是码农,但并不代表程序员就是一个社会地位低 ...
python在煤矿的用途-仁寿高校邦数据科学通识课【Python爬虫】答案
仁寿高校邦数据科学通识课[Python爬虫]答案it8p 仁寿高校邦数据科学通识课[Python爬虫]答案关注公众号{帅搜}即可查询答案支持:大学网课,智慧树,知到,超星,尔雅,学习通,选修课,公 ...
【Python爬虫实例学习篇】——5、【超详细记录】从爬取微博评论数据（免登陆）到生成词云
[Python爬虫实例学习篇]--5.[超详细记录]从爬取微博评论数据(免登陆)到生成词云个人博客地址:ht/tps://www.asyu17.cn/ 精彩部分提醒: (1)微博评论页详情链接为一个 ...
如何学习Python爬虫[入门篇]？
这篇文章已经过去很久了,有一些学习资源链接已经失效了,还一直有小伙伴在Python的路上摸索.所以我根据自己的学习和工作经历整理了一套Python学习电子书,在公众号「路人甲TM」后台回复关键词「1」 ...
python爬虫——实战篇
python爬虫--实战篇 2021.7.20晚已更新注:注释和说明已在代码中注释 python爬虫实战篇笔趣阁小说及其网址爬取 4k图片网站图片爬取简历模板爬取自动填体温小程序待补充笔趣 ...
python爬虫入门篇（二）
往期文章 python爬虫入门篇(一) 目录往期文章前言一.为什么不能直接打开开发者工具 ① 误判开发者工具中的Elements(元素)就是源代码 ② 为什么源代码和Elements显示的不一样 ...
python怎么爬取b站_【Python爬虫实例学习篇】——4、超详细爬取bilibili视频
[Python爬虫实例学习篇]--4.超详细爬取bilibili视频由于经常在B站上学习,但无奈于家里网络太差,在线观看卡顿严重,于是萌生了下载视频的想法(如果只是单纯想下载视频,请用you-get ...
Python 爬虫进阶篇-4行代码实现爬取指定网站中的全部图片实例演示及原理剖析
上一篇:Python 爬虫入门篇-如何获取网页中的图片.我们了解到了 urllib 获取图片的原理,urllib.request.urlretrieve() 就是用来获取图片的. 这一篇,我们用正则表 ...
数据分析师 vs 算法工程师，Python 出身的程序员如何抉择？
作者 | 刘早起早起责编 | 屠敏疫情即将散去,又到了求职季.学习Python的各位该如何选择自己的职业方向,算法工程师还是数据分析师?跟随本文一起看看吧! 数据获取与处理本次样本数据采集于拉勾 ...

数据分析师的编程之旅——Python爬虫预备篇（2）前端设计

数据分析师的编程之旅——Python爬虫预备篇（2）前端设计相关推荐

最新文章

热门文章