HTML5 日常使用

文本标记语言(英文HyperText Markup Language,简称：HTML)是一种用于创建网页的标准标记语言!
对于中文网页需要使用<meta charset='utf-8'>声明编码，否则会出现乱码。有些浏览器（如360浏览器）会设置GBK为默认编码，则你需要设置为<meta charset='gbk'>
例子模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文网(html.cn)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言：HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>

HTML 头部元素

头部元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta 意为“关于某方面的信息”。
可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息。

HTML <HEAD> 元素

<head> 元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <TITLE> 元素

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素：
1.定义了浏览器工具栏的标题
2.当网页添加到收藏夹时，显示在收藏夹中的标题
3.显示在搜索引擎结果页面的标题

HTML <BASE> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>

HTML <LINK> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <STYLE> 元素

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <META> 元素

meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域

<META> 标签- 使用实例

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程教程">
定义网页作者:
<meta name="author" content="HTML">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

HTML <SCRIPT> 元素

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

HTML 元素

HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。例：

开始标签	元素内容	结束标签
<p>	这是一个段落	</p>
<a href="default.html">	这是一个链接	</a>
<br>	换行

说明：HTML 文档是由 HTML 元素定义的
注：开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
嵌套的 HTML 元素
HTML 文档由嵌套的 HTML 元素构成。大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

注释标签

HTML注释标签用来在源文档中插入注释。注释不会在浏览器中显示。可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用

标签定义及使用说明

注释标签用来在源文档中插入注释。注释不会在浏览器中显示。
您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。
您也可以在注释内容存储针对程序所定制的信息。在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中，这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。

<script type="text/javascript">
<!--
function displayMsg()
{
  alert("Hello World!")
}
//-->
</script>

注释：命令行最后的两个正斜杠（//）是 JavaScript 注释符号。这确保了 JavaScript 不会执行 –> 标签。
除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作。这些动作可能是简单地包括其他文件中的文本（即所谓的服务器端包含，server-inside include），也可能是复杂地执行其他命令去动态生成文档的内容。

HTML 段落与文字

标题

在 HTML 文档中，标题很重要。标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。其中<h1> 定义最大的标题，<h6> 定义最小的标题
HTML中的标题标签通过<h1>-<h6>来设置，越往下标题越小

段落

在HTML中段落是通过p标签来定义的，它可以将HTML文档分割为若干段落部分。因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行。
注意：因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行
我们可以通过<br/>标签来对段落进行换行
如果希望在不产生一个新段落的情况下进行换行，就可以使用<br /> 标签，注意它是一个单标签。

文本格式化

HTML可定义很多供格式化输出的元素，例：使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式，从而显示粗体或者斜体
示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML教程(html.cn)</title> 
</head> 
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML”计算机输出”标签

标签	描述
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本
<code>	定义计算机代码

HTML 引文，引用，及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目

区块

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）；而内联元素则不会。

HTML 区块元素
可以通过 <div> 和 <span> 将 HTML 元素组合起来

HTML块级元素
块级元素在浏览器显示时，通常会以新行来开始和结束 - 例：<h1>, <p>, <ul>, <table>

HTML内联元素
内联元素在显示时通常不会以新行开始 - 例：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是块级元素，浏览器会在其前后显示折行 - 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 - <div> 元素的另一个常见的用途是文档布局

HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器 - 与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

HTML字符实体

在 HTML 中，某些字符是预留的，这些预留字符必须被替换为字符实体；而，一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体
在 HTML 中，某些字符是预留的。
比如在 HTML 中不能使用小于号（<）和大于号（>）因为浏览器会误认为它们是标签，所以希望能正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样
&entity_name;
或
&#entity_number;

HTML 字符实体
不间断空格
HTML 中的常用字符实体是不间断空格( )
浏览器总是会截短 HTML 页面中的空格，如果需要在页面中增加空格的数量，需要使用字符实体

有用的字符实体

显示结果	描述	实体名称	实体编码
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
“	引号	"	"
‘	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

注意：实体名称对大小写敏感

欢迎大家提议、分享、交流、共同学习进步

．HTML5是什么？

HTML5是HTML经过第五次重大修改，用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML标准版本。

HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个Web超文本应用技术工作组（Web Hypertext Application Technology Working Group-WHATWG）的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟）专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

2012年12月17日，万维网联盟（W3C）正式宣布HTML5规范正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

2014年10月29日，万维网联盟宣布，经过近8年的艰辛努力，HTML5标准规范终于最终制定完成了，并公开发布。

2．HTML5的八大特点：

1）语义特性：HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

2）本地存储特性：基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

3）设备兼容特性：从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

4）连接特性：更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

5）网页多媒体特性：支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。

6）三维、图形及特效特性：基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

7）性能与集成特性：没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

8）CSS3特性：在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

希望这点东西能够给你一点帮助吧！

介概述：

使用特定引擎解析网页里面得数据，根据规则提取入库

常见的技术：

正则、xpath、pyquery、Beautiful Soup4

一、正则

开源测试工具 http://tool.oschina.net/regex/

官网：https://docs.python.org/zh-cn/3/library/re.html

.	匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。
\d	匹配一个数字字符。等价于 [0-9]。
\D	匹配一个非数字字符。等价于 [^0-9]。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\w	匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
\W	匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。

1、match

用法：提取关键参数比如 token sign 后端返回得签名信息算法

match 方法会尝试从字符串的起始位置匹配正则表达式，如果匹配，就返回匹配成功的结果；如果不匹配，就返回 None

import re
content = 'Hello 123 456 welcome to world'
print(len(content))
result = re.match('^Hello\s\d\d\d\s\d{3}\s\w{7}', content)
print(result)
print(result.group())
print(result.span())

group() 返回被正则匹配的字符串
start() 返回匹配开始的位置
span() 返回一个元组包含匹配 (开始,结束) 的位置

方法	说明
group(num=0)	匹配的整个表达式的字符串，group() 可以一次输入多个组号，在这种情况下它将返回一个包含那些组所对应值的元组
groups()	返回一个包含所有小组字符串的元组，从 1 到所含的小组号

1）匹配数字

import re
content = 'Hello 123456 welcome to world'
result = re.match('^Hello\s(\d+)\swelcome', content)
print(result)
print(result.group(1))
print(result.span())

2）通用匹配

import re
content = 'Hello 123 456 welcome to world'
# 匹配所有数据
result = re.match('^Hello.*ng$', content)
# 匹配某某开始到某某结束
result = re.match('^Hello(.*)ng$', content).group(1)
print(result)
print(result.group())
print(result.span())

3）贪婪和非贪婪

python默认贪婪模式
在"*","?","+","{m,n}"后面加上？，使贪婪变成非贪婪

import re
content1 = 'http://xxxxx.com/yyds/baidu'
result2 = re.match('http.*com/(.*?)s', content1)
result2 = re.match('http.*?com/(.*)s', content1)
print('result1', result1.group())
print('result2', result2.group())

4）修饰符

re.I	使匹配对大小写不敏感
re.L	做本地化识别（locale-aware）匹配
re.M	多行匹配，影响 ^ 和 $
re.S	使 . 匹配包括换行在内的所有字符
re.U	根据Unicode字符集解析字符。这个标志影响 \w, \W, \b, \B.
re.X	该标志通过给予你更灵活的格式以便你将正则表达式写得更易于理解。

import re
# 这个修饰符的作用是匹配包括换行符在内的所有字符。
content = '''Hello 1234567 World_This
is a Regex Demo
'''
result = re.match('^He.*?(\d+).*?Demo$', content)
result = re.match('^He.*?(\d+).*?Demo$', content,re.S)
print(result.group())

2、search

用法：提取数据

re模块中的search函数对整个字符串进行扫描并返回第一个匹配的结果。从左到右进行扫描

1）匹配数据

text = '人生苦短，我用pythons'
res1 = re.search('python',text)
data = 'result:{"name":"王五","age":"20"}'
res3 = re.search("{.*?}",data)

2）正则提取案例

地址：https://finance.ifeng.com/c/8HzIujEasuH

url = 'https://finance.ifeng.com/c/8HzIujEasuH'
from utils.base import Spider
res = Spider().fetch(url)
import re
# 不带符号
# text = re.findall('var allData = {(.*)};',res.text)
# 带符号
# text = re.findall('var allData\s=\s(.*);',res.text)

3）匹配中文

[\u4e00-\u9fa5]
s = '大家晚上好asdasdsad'
aa = re.findall('[\u4e00-\u9fa5]+',s)

二、 Pyquery

环境安装

pip install pyquery

利用它，我们可以直接解析 DOM 节点的结构，并通过 DOM 节点的一些属性快速进行内容提取。

html = '''
<div id="cont">
<ul class="slist">
<li class="item-0">web开发</li>
<li class="item-1"><a href="link2.html">爬虫开发</a></li>
<li class="item-0 active"><a href="link3.html"><span class="bold">数据分析</span></a></li>
<li class="item-1 active"><a href="link4.html">深度学习</a></li>
<li class="item-0"><a href="link5.html">机器学习</a></li>
</ul>
</div>
'''

1、实例演示

from pyquery import PyQuery as pq
doc = pq(html)
print(doc('li'))

2、css选择器

doc = pq(html)
print(doc('#cont .slist li'))
print(type(doc('#cont .slist li')))

3、提取内容

for item in doc('#cont .slist li').items():
    print(item.text())

4、子节点

from pyquery import PyQuery as pq
doc = pq(html)
items = doc('.slist')
print(type(items))
print(items) # 提取节点所有内容
lis = items.find('li') # 获取符合条件的li标签
print(type(lis))
print(lis)

5、属性获取

from pyquery import PyQuery as pq
doc = pq(html)
a = doc('.item-0.active a')
print(a, type(a))
print(a.attr('href'))

6、遍历提取

doc = pq(html)
a = doc('a')
for s in a.items():
    print(s.attr('href')) # 属性获取
    print(s.text()) # 值获取

三、 xpath

插件下载：https://chrome.zzzmh.cn/index#/search

XPath 的选择功能十分强大，它提供了非常简洁明了的路径选择表达式。另外，它还提供了超过 100 个内建函数，用于字符串、数值、时间的匹配以及节点、序列的处理等。几乎所有我们想要定位的节点，都可以用 XPath 来选择。

官网：https://www.w3.org/TR/xpath/

安装xpath解析库：

pip install lxml

表 3-1　XPath 常用规则

表　达　式	描　　述
nodename	选取此节点的所有子节点
/	从当前节点选取直接子节点
//	从当前节点选取子孙节点
.	选取当前节点
..	选取当前节点的父节点
@	选取属性

案例演示

text = '''
<div>
<ul>
<li class="item-0"><a href="link1.html">first item</a></li>
<li class="item-1"><a href="link2.html">second item</a></li>
<li class="item-inactive"><a href="link3.html">third item</a></li>
<li class="item-1"><a href="link4.html">fourth item</a></li>
<li class="item-0"><a href="link5.html">fifth item</a>
</ul>
</div>
'''

1、解析

from lxml import etree
html = etree.HTML(text)
result = etree.tostring(html)
print(result.decode('utf-8'))

2、节点操作

我们一般会用 // 开头的 XPath 规则来选取所有符合要求的节点。这里以前面的 HTML 文本为例，如果要选取所有节点，可以这样实现：

这里使用 * 代表匹配所有节点，也就是整个 HTML 文本中的所有节点都会被获取。可以看到，返回形式是一个列表，每个元素是 Element 类型，其后跟了节点的名称，如 html、body、div、ul、li、a 等，所有节点都包含在列表中了。

result = html.xpath('//*')

3、子节点

result = html.xpath('//li/a')
result = html.xpath('//li/a/text()') # 提取数据
result = html.xpath('//li/a/@href') # 属性值

4、指定节点获取

result = html.xpath('//li[@class="item-0"]/a/text()')
print(result)
# ['first item', 'fifth item']

5、匹配翻页元素

# 最后一个
//div[@class="page"]/a[last()-1]
# 下一页
//div[@class="page"]/a[text()="下一页>"]/@href

6、案例演示

• 说明：提取当前网站的首页标题信息，要求使用xpath解析器

from lxml import etree
url1= 'https://www.icswb.com/channel-list-channel-162.html'
res4 = Spider().fetch(url=url1)
html = etree.HTML(res4.text)
li = html.xpath('//ul[@id="NewsListContainer"]/li')
for i in li:
href = i.xpath('./h3/a/text()')
print(href)

四、 Beautiful Soup

简单来说，BeautifulSoup 就是 Python 的一个 HTML 或 XML 的解析库，我们可以用它来方便地从网页中提取数据，官方的解释如下：

BeautifulSoup 提供一些简单的、Python 式的函数用来处理导航、搜索、修改分析树等功能。它是一个工具箱，通过解析文档为用户提供需要抓取的数据，因为简单，所以不需要多少代码就可以写出一个完整的应用程序。
BeautifulSoup 自动将输入文档转换为 Unicode 编码，输出文档转换为 utf-8 编码。你不需要考虑编码方式，除非文档没有指定一个编码方式，这时你仅仅需要说明一下原始编码方式就可以了。
BeautifulSoup 已成为和 lxml、html5lib 一样出色的 Python 解释器，为用户灵活地提供不同的解析策略或强劲的速度。

表 4-1　Beautiful Soup 支持的解析器

解析器	使用方法	优势	劣势
Python 标准库	BeautifulSoup(markup, "html.parser")	Python 的内置标准库、执行速度适中、文档容错能力强	Python 2.7.3 or 3.2.2) 前的版本中文容错能力差
LXML HTML 解析器	BeautifulSoup(markup, "lxml")	速度快、文档容错能力强	需要安装 C 语言库
LXML XML 解析器	BeautifulSoup(markup, "xml")	速度快、唯一支持 XML 的解析器	需要安装 C 语言库
html5lib	BeautifulSoup(markup, "html5lib")	最好的容错性、以浏览器的方式解析文档、生成 HTML5 格式的文档	速度慢、不依赖外部扩展

通过以上对比可以看出，lxml 解析器有解析 HTML 和 XML 的功能，而且速度快，容错能力强，所以推荐

1、安装

pip install beautifulsoup4

2、demo

from bs4 import BeautifulSoup
# 2个参数 html 文本 解析引擎
soup = BeautifulSoup('<p>Hello world</p>', 'lxml')
print(soup.p.string)

3、节点选择器

直接调用节点的名称就可以选择节点元素，再调用 string 属性就可以得到节点内的文本了，这种选择方式速度非常快。如果单个节点结构层次非常清晰，可以选用这种方式来解析。

下面再用一个例子详细说明选择元素的方法：

html = """
<html><head><title>The Dormouse's story</title></head>
<body>
<p class="title" name="dromouse"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a href="http://example.com/elsie" class="sister" id="link1"><!-- Elsie --></a>,
<a href="http://example.com/lacie" class="sister" id="link2">Lacie</a> and
<a href="http://example.com/tillie" class="sister" id="link3">Tillie</a>;
and they lived at the bottom of a well.</p>
<p class="story">...</p>
"""
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'lxml')
print(soup.title)
print(type(soup.title))
print(soup.title.string)
print(soup.head)
print(soup.p)

4、获取属性

每个节点可能有多个属性，比如 id 和 class 等，选择这个节点元素后，可以调用 attrs 获取所有属性：

print(soup.p.attrs)
print(soup.p.attrs['name'])

5、嵌套选择

html = """
<html><head><title>The Dormouse's story</title></head>
<body>
"""
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'lxml')
print(soup.head.title)
print(type(soup.head.title))
print(soup.head.title.string)

6、select（根据选择器选取指定内容）

标签选择器（a），类选择器（.dudu），id选择器（#lala），组合选择器（a, .dudu, #lala, .meme），层级选择器（div.dudu#lala.meme.xixi 表示下面好多级和 div>p>a>.lala 只能是下面一级），伪类选择器（不常用），属性选择器（input[name=‘lala’]）

1）样例

htmls = """
<html>
    <head>
        <title>The Dormouse's story</title>
    </head>
    <body>
        <p class="story">
            Once upon a time there were three little sisters; and their names were
            <a href="http://example.com/elsie" class="sister" id="link1" title="xl">
                <span>Elsie</span>
            </a>
            <a href="http://example.com/lacie" class="sister" id="link2">Lacie</a> 
            and
            <a href="http://example.com/tillie" class="sister" id="link3" rel="noopener noreferrer ">Tillie</a>
            and they lived at the bottom of a well.
        </p>
        <p class="story">...</p>
"""

2）层级选择器

soup.select('.story > a > span')[0].text

3）id选择器

print(soup.select('#link1'))

4）提取属性

soup.select('#link1')[0].attrs['href']

5）属性选择器

print(soup.select("input[type='password']"))

6）提取实际数据

在线咨询

上一篇：网页设计必学：CSS四种样式引入方式及常用样式
下一篇：WP模板开发中，怎样给wordpress网站的文章，添加点赞功能？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5 日常使用

什么是HTML？

HTML 标签

HTML 元素

HTML 头部元素

HTML <HEAD> 元素

HTML <TITLE> 元素

HTML <BASE> 元素

HTML <LINK> 元素

HTML <STYLE> 元素

HTML <META> 元素

<META> 标签- 使用实例

HTML <SCRIPT> 元素

HTML 元素

元素语法

注释标签

标签定义及使用说明

HTML 段落与文字

标题

段落

文本格式化

区块

HTML字符实体

一、正则

二、 Pyquery

三、 xpath

四、 Beautiful Soup

您的项目需求