整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
源：Python之禅 作者：刘志军
题图：@Miguel Mateo
系列文章的第3篇介绍了网络请求库神器 Requests ，请求把数据返回来之后就要提取目标数据，不同的网站返回的内容通常有多种不同的格式，一种是 json 格式，这类数据对开发者来说最友好。另一种 XML 格式的，还有一种最常见格式的是 HTML 文档，今天就来讲讲如何从 HTML 中提取出感兴趣的数据
直接字符串处理？自己写个 HTML 解析器来解析吗？还是用正则表达式？这些都不是最好的办法，好在，Python 社区在这方面早就有了很成熟的方案，BeautifulSoup 就是这一类问题的克星，它专注于 HTML 文档操作。
BeautifulSoup 是一个用于解析 HTML 文档的 Python 库，通过 BeautifulSoup，你只需要用很少的代码就可以提取出 HTML 中任何感兴趣的内容，此外，它还有一定的 HTML 容错能力，对于一个格式不完整的HTML 文档，它也可以正确处理。
安装 BeautifulSoup
pip install beautifulsoup4
BeautifulSoup3 被官方放弃维护，你要下载最新的版本 BeautifulSoup4。
HTML 标签
学习 BeautifulSoup4 前有必要先对 HTML 文档有一个基本认识，如下代码，HTML 是一个树形组织结构。
<html><head><title>hello, world</title></head><body><h1>BeautifulSoup</h1><p>如何使用BeautifulSoup</p><body></html>
它由很多标签（Tag）组成，比如 html、head、title等等都是标签
一个标签对构成一个节点，比如 <html>...</html>是一个根节点
节点之间存在某种关系，比如 h1 和 p 互为邻居，他们是相邻的兄弟（sibling）节点
h1 是 body 的直接子（children）节点，还是 html 的子孙（descendants）节点
body 是 p 的父（parent）节点，html 是 p 的祖辈（parents）节点
嵌套在标签之间的字符串是该节点下的一个特殊子节点，比如 “hello, world” 也是一个节点，只不过没名字。
使用 BeautifulSoup
构建一个 BeautifulSoup 对象需要两个参数，第一个参数是将要解析的 HTML 文本字符串，第二个参数告诉 BeautifulSoup 使用哪个解析器来解析 HTML。
解析器负责把 HTML 解析成相关的对象，而 BeautifulSoup 负责操作数据（增删改查）。“html.parser” 是 Python 内置的解析器，“lxml” 则是一个基于c语言开发的解析器，它的执行速度更快，不过它需要额外安装
通过 BeautifulSoup 对象可以定位到 HTML 中的任何一个标签节点。
from bs4 import BeautifulSouptext = """<html><head><title >hello, world</title></head><body><h1>BeautifulSoup</h1><p class="bold">如何使用BeautifulSoup</p><p class="big" id="key1"> 第二个p标签</p><a href="http://foofish.net">python</a></body></html>"""soup = BeautifulSoup(text, "html.parser")# title 标签>>> soup.title<title>hello, world</title># p 标签>>> soup.p<p class="bold">\u5982\u4f55\u4f7f\u7528BeautifulSoup</p># p 标签的内容>>> soup.p.stringu'\u5982\u4f55\u4f7f\u7528BeautifulSoup'
BeatifulSoup 将 HTML 抽象成为 4 类主要的数据类型，分别是Tag , NavigableString , BeautifulSoup，Comment 。每个标签节点就是一个Tag对象，NavigableString 对象一般是包裹在Tag对象中的字符串，BeautifulSoup 对象代表整个 HTML 文档。例如：
>>> type(soup)<class 'bs4.BeautifulSoup'>>>> type(soup.h1)<class 'bs4.element.Tag'>>>> type(soup.p.string)<class 'bs4.element.NavigableString'>
Tag
每个 Tag 都有一个名字，它对应 HTML 的标签名称。
>>> soup.h1.nameu'h1'>>> soup.p.nameu'p'
标签还可以有属性，属性的访问方式和字典是类似的，它返回一个列表对象
>>> soup.p['class'][u'bold']
NavigableString
获取标签中的内容，直接使用 .stirng 即可获取，它是一个 NavigableString 对象，你可以显式地将它转换为 unicode 字符串。
>>> soup.p.stringu'\u5982\u4f55\u4f7f\u7528BeautifulSoup'>>> type(soup.p.string)<class 'bs4.element.NavigableString'>>>> unicode_str = unicode(soup.p.string)>>> unicode_stru'\u5982\u4f55\u4f7f\u7528BeautifulSoup'
基本概念介绍完，现在可以正式进入主题了，如何从 HTML 中找到我们关心的数据？BeautifulSoup 提供了两种方式，一种是遍历，另一种是搜索，通常两者结合来完成查找任务。
遍历文档树
遍历文档树，顾名思义，就是是从根节点 html 标签开始遍历，直到找到目标元素为止，遍历的一个缺陷是，如果你要找的内容在文档的末尾，那么它要遍历整个文档才能找到它，速度上就慢了。因此还需要配合第二种方法。
通过遍历文档树的方式获取标签节点可以直接通过 .标签名的方式获取，例如：
获取 body 标签：
>>> soup.body<body>\n<h1>BeautifulSoup</h1>\n<p class="bold">\u5982\u4f55\u4f7f\u7528BeautifulSoup</p>\n</body>
获取 p 标签
>>> soup.body.p<p class="bold">\u5982\u4f55\u4f7f\u7528BeautifulSoup</p>
获取 p 标签的内容
>>> soup.body.p.string\u5982\u4f55\u4f7f\u7528BeautifulSoup
前面说了，内容也是一个节点，这里就可以用 .string的方式得到。
遍历文档树的另一个缺点是只能获取到与之匹配的第一个子节点，例如，如果有两个相邻的 p 标签时，第二个标签就没法通过 .p的方式获取，这是需要借用 next_sibling 属性获取相邻的节点。
此外，还有很多不怎么常用的属性，比如：.contents 获取所有子节点，.parent 获取父节点，更多的参考请查看官方文档。
搜索文档树
搜索文档树是通过指定标签名来搜索元素，还可以通过指定标签的属性值来精确定位某个节点元素，最常用的两个方法就是 find 和 find_all。这两个方法在 BeatifulSoup 和 Tag 对象上都可以被调用。
find_all()
find_all( name , attrs , recursive , text , **kwargs )
find_all 的返回值是一个 Tag 组成的列表，方法调用非常灵活，所有的参数都是可选的。
第一个参数 name 是标签节点的名字。
# 找到所有标签名为title的节点>>> soup.find_all("title")
[<title>hello, world</title>]
>>> soup.find_all("p")
[<p class="bold">\xc8\xe7\xba\xce\xca....</p>,
<p class="big"> \xb5\xda\xb6\xfe\xb8\xf6p...</p>]
第二个参数是标签的class属性值
# 找到所有class属性为big的p标签>>> soup.find_all("p", "big")
[<p class="big"> \xb5\xda\xb6\xfe\xb8\xf6p\xb1\xea\xc7\xa9</p>]
等效于
>>> soup.find_all("p", class_="big")
[<p class="big"> \xb5\xda\xb6\xfe\xb8\xf6p\xb1\xea\xc7\xa9</p>]因为 class 是 Python 关键字，所以这里指定为 class_。
kwargs 是标签的属性名值对，例如：查找有href属性值为 “http://foofish.net” 的标签
>>> soup.find_all(href="http://foofish.net")
[<a href="http://foofish.net">python</a>]当然，它还支持正则表达式
>>> import re>>> soup.find_all(href=re.compile("^http"))
[<a href="http://foofish.net">python</a>]
属性除了可以是具体的值、正则表达式之外，它还可以是一个布尔值（True/Flase），表示有属性或者没有该属性。
>>> soup.find_all(id="key1")
[<p class="big" id="key1"> \xb5\xda\xb6\xfe\xb8\xf6p\xb1\xea\xc7\xa9</p>]
>>> soup.find_all(id=True)
[<p class="big" id="key1"> \xb5\xda\xb6\xfe\xb8\xf6p\xb1\xea\xc7\xa9</p>]遍历和搜索相结合查找，先定位到 body 标签，缩小搜索范围，再从 body 中找 a 标签。
>>> body_tag = soup.body>>> body_tag.find_all("a")
[<a href="http://foofish.net">python</a>]
find()
find 方法跟 find_all 类似，唯一不同的地方是，它返回的单个 Tag 对象而非列表，如果没找到匹配的节点则返回 None。如果匹配多个 Tag，只返回第0个。
>>> body_tag.find("a")
<a href="http://foofish.net">python</a>
>>> body_tag.find("p")
<p class="bold">\xc8\xe7\xba\xce\xca\xb9\xd3\xc3BeautifulSoup</p>
get_text()
获取标签里面内容，除了可以使用 .string 之外，还可以使用 get_text 方法，不同的地方在于前者返回的一个 NavigableString 对象，后者返回的是 unicode 类型的字符串。
>>> p1 = body_tag.find('p').get_text()实际场景中我们一般使用 get_text 方法获取标签中的内容。
总结
BeatifulSoup 是一个用于操作 HTML 文档的 Python 库，初始化 BeatifulSoup 时，需要指定 HTML 文档字符串和具体的解析器。它有3类常用的数据类型，分别是 Tag、NavigableString、和 BeautifulSoup。查找 HTML元素有两种方式，分别是遍历文档树和搜索文档树，通常快速获取数据需要二者结合。
级链接标签
目的页面的地区用 name属性定义（name的值可自己定义，一般为英文），链接页面的链接应写为<a href=”url#name”></a>
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
关于锚的进一步说明：
<a> 标签可定义锚，锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
图片标签 <img>
1、img标签是一个单标签，必须和src（source：指出图像的路径）属性连用，
网页上图像的路径有绝对路径和相对路径两种，但在实际运用中往往只用相对路径
绝对路径：图片在硬盘上的路径 （分割符号是/）
相对路径：图片相对于网页而言的路径
如果图片与网页在同一个文件夹下，那么可以直接用图片的名称表示其路径
如果图片在网页的下一层文件夹中，比如图片在网页文件下面的images文件夹中，则可用images/表示
我们也可以用./表示网页所在的文件夹
如果图片在网页的上一层文件夹中，则用../表示
事实上，不但图片文件是如此，网页中应用的文件都分为相对路径和绝对路径两种表达方式。
2、在网页上，支持的图片格式包括.gif .jpg .png .bmp,一般用前三者居多，因为前三者的图片压缩比较好。但是，gif格式只有256种颜色，所以，在需要丰富颜色的场合，往往多用jpg和png格式。不过，gif拥有动态功能，而后两者则不具备。
3、img标签可以与其它标签共处一行，如果有多个图形出现时，默认为同一行显示
4、img标签有4个常用标签，分别是
alt 图片说明，在图像无法显示时表现为图像的替代文本
width 宽 属性值可以是象素，也可以是%
height 高 属性值可以是象素，也可以是%
border 边框
5、图片链接仍然是用a标签来显示
例子：<a href=“http://www.rwxy.xnc.edu.cn”><img src="sample.jpg" ></a>
6、可以用图像映射实现图像不同区域的链接
图象映射
所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。
图象映射由<map>定义。<map>有一个基本属性是name。name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。
<map>在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形)
图象映射实例
<img src="bear.jpg" usemap="#map" >
<map name=“map">
<area shape="rect" coords="46,29,253,164" href="#" >
<area shape="circle" coords="76,510,59" href="#" >
<area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" >
</map>
表格标签
表格由三个标签构成，分别是
<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表格单元(表格的具体数据)
在表格标签中，table、tr、td标签都具备不同的属性
table：border（边框尺寸设置）；width（表格的宽）；height（表格的高）；align（横向对齐：left center right）；bgcolor（背景色彩）；background（背景图像）；cellspacing（表格单元的间隙设置）；cellpadding（表元内部空白设置）；
tr：height（行高）；align（横向对齐：left center right）；valign（纵向对齐：top middle bottom）；bgcolor（背景色彩）；
td：width（表格的宽）；height（表格的高）；align（横向对齐：left center right）；valign（纵向对齐：top middle bottom）；bgcolor（背景色彩）；background（背景图像）；
注：当talble、tr、td有共同的属性而且属性值发生冲突之际，其优先性是td > tr > table
表格在html中最大的作用不是用来整理数据，而是用来排版，所以它是html中用处最广的标签之一。
表格内部可以继续放入表格，这被称之为表格嵌套，利用表格嵌套可以制作出非常复杂的排版。
表格的单元格可以跨行跨列显示
跨多列的单元格 <td colspan=#>
<table border=1>
<tr><td colspan=3> morning menu</td>
<tr><td>food</td> <td>drink</td> <td>sweet</td>
<tr><td>a</td><td>b</td><td>c</td>
</table>
morning menu
food
drink
sweet
a
b
c
跨多行的单元格 <td rowspan=#>
<table border=1>
<tr><td rowspan=3> morning menu</td>
<td>food</td> <td>a</td></tr>
<tr><td>drink</td> <td>b</td></tr>
<tr><td>sweet</td> <td>c</td></tr>
</table>
morning menu
food
a
drink
b
sweet
c
....................................................................
我的微信公众号：UI严选 —越努力，越幸运
ext()方法会把包含的字符转义处理,html()则不会.所谓转义就是字符的另一种显示方法,例如"<" 显示成 "<",这就是转义了,其中的<就是<的转义字符.还有很多可以转义的字符,可以搜索下看看.
下边是项目中用到的2个语句:span中包含了jquery的语句输出结果.
1. $('.title').text("<img src=" ">");
显示结果为<img src=" ">,这里的<img src=" ">不会被解析成html的img标签,而是以存字母文字的形式显示,也就是单纯的字符串:<img src=" "> .并且f12查看源码时看到span包含的<img src=" ">文字内容外层有双引号哦.看下图,
如果你用右键选择编辑为html,则看到其中的转义字符<这就说明我们的<被转移了,
如果我们想把<img>显示成标签,被浏览器解析.那么就需要如下方法.
2. $('.title').html("<img >");
显示结果为解析后的html代码段,那么这里的<img >就会按照h5的标签img图片进行解析显示了.下图是f12的页面代码结果span中的<img>标签外层无双引号,且页面此时会显示出来图片.
*请认真填写需求信息，我们会在24小时内与您取得联系。
