本文介绍HTML和CSS的基础知识，包括HTML标签、CSS样式表的概念及其作用，并讲解了如何使用Python的BeautifulSoup库进行网页数据抓取。
HTML 和 CSS 基础与 BeautifulSoup 解析库入门
1. 实验目标
Requests入门
2. 实验主要使用的 𝑃𝑦𝑡ℎ𝑜𝑛Python 库
| 名称 | 版本 | 简介 |
|---|---|---|
| requests | 2.22.0 | 数据采集 |
4. 实验步骤
步骤1 安装并引入必要的库
代码示例：
pip install bs4==0.0.1
pip install requests==2.23.0代码示例：
# 加载第三方库
from bs4 import BeautifulSoup
import requests步骤2 什么是 HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
步骤3 HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
步骤4 HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>例子解释
- 与 之间的文本描述网页
- 与 之间的文本是可见的页面内容
-
与
之间的文本被显示为标题 -
与
之间的文本被显示为段落
步骤5 CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
步骤6 样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用
、
、
这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
步骤7 多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
步骤8 CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}步骤9 Beautiful Soup 的简介
简单来说，Beautiful Soup 是 python 的一个库，最主要的功能是从网页抓取数据。官方解释如下：
Beautiful Soup 提供一些简单的、python 式的函数用来处理导航、搜索、修改分析树等功能。它是一个工具箱，通过解析文档为用户提供需要抓取的数据，因为简单，所以不需要多少代码就可以写出一个完整的应用程序。
Beautiful Soup 自动将输入文档转换为Unicode编码，输出文档转换为utf-8编码。你不需要考虑编码方式，除非文档没有指定一个编码方式，这时，Beautiful Soup就不能自动识别编码方式了。然后，你仅仅需要说明一下原始编码方式就可以了。
Beautiful Sou p已成为和 lxml、html6lib 一样出色的 python 解释器，为用户灵活地提供不同的解析策略或强劲的速度。
步骤10 创建BeautifulSoup对象
首先是 导入 bs4 库，以及前面几节实验提到的 requests 库用于发送请求接受数据。通过 BeautifulSoup 类解析返回的 HTML 数据后，我们调用 BeautifulSoup 对象的 prettify() 函数，用于格式化的打印 HTML 文档。
下面让我们来请求 http://www.pythonscraping.com/pages/page3.html 这个网页，并使用 BeautifulSoup 来解析它。
代码示例：
url = r'http://www.pythonscraping.com/pages/page3.html'
html = requests.get(url)
bsObj = BeautifulSoup(html.text)
print(bsObj.prettify())步骤11 标签参数 tag
Tag 是什么？通俗点讲就是 HTML 中的一个个标签，例如
<title>The Dormouse's story</title>
<a class="sister" href="http://example.com/elsie" id="link1">Elsie</a>
上面的 title a 等等 HTML 标签加上里面包括的内容就是 Tag，下面我们来感受一下怎样用 Beautiful Soup 来方便地获取 Tags
代码示例：
print(bsObj.head)下面让我来输出该 HTML 中的 div 标签下面的 h1 标签。
代码示例：
print(bsObj.div.h1)步骤12 CSS选择器
Beautiful Soup 支持大部分的CSS选择器,在 Tag 或 BeautifulSoup 对象的 select() 方法中传入字符串参数,即可。
使用CSS选择器的语法找到 tag，我们提取所有 id 为 “wrapper” 的标签下 所有 id 为 “content” 的标签内容: (根据 id 查找标签，需要在 id 值前加 # 号)
代码示例：
content = bsObj.select("#wrapper #content")
print(content)使用CSS选择器的语法找到 tag，我们提取所有 class 为 “gift” 的标签: (根据 class 查找标签，需要在 class 值前加 . 号)
代码示例：
gift = bsObj.select(".gift")
print(gift)使用CSS选择器的语法找到 body 标签下的 div 标签下的 div 标签下的 p 标签： (根据 class 查找标签，需要在 class 值前加 . 号)
代码示例：
p = bsObj.select("body div div p")
print(p)
扫一扫
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
