爬虫学习笔记3-----网页基础 New！
本帖最后由 极品召唤兽 于 2021-2-4 17:58 编辑『 上 节 回 顾 』
~~点我点我~~
『 初 识 网 页 』
爬虫可不止是这么简单的爬取而已，爬虫的另一个重要部分就是解析和提取。
要实现爬虫的解析和提取，我们首先要清楚爬到的东西是什么？我们再来看看用 requests 爬取网页返回的源代码：
这次我们要读懂并会修改 HTML 代码。
<!DOCTYPE html>
<html lang="zh-cmn-Hans" class="ua-mac ua-webkit book-new-nav">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>豆瓣图书 Top 250</title>
</head>
<body>
<div class="global-nav-items">
<a >豆瓣</a>
<a >读书</a>
<a >电影</a>
<a >音乐</a>
<a >同城</a>
<a >小组</a>
<a >阅读</a>
<a >FM</a>
<a >时间</a>
<a >豆品</a>
</div>
</body>
</html>
『 认 识 网 页 』
其实，我们通过 requests.get('网站') 拿到的返回值通过 print(res.text) 打印出来的就是网页。
但是我们通过浏览器看见的网页并不是源码形式的
网页的本质是 HTML，当我们用浏览器打开某个网页的时候，浏览器会用适合人类阅读的方式呈现出来了。
爬虫要解析的就是 HTML，我们要学习HTML的语法来辅助爬虫的使用
通过右键点击 显示网页源代码 可以看到：网页的本质就是一个 HTML 文档。
https://img.imgdb.cn/item/601018303ffa7d37b3a69ab4.jpg
『 网 页 开 发 』
在学习 HTML 前，我们先了解一些网页开发的知识。
Web 开发也称为前端开发，需要同时使用三把利器——HTML、CSS、JavaScript。
接下来我们会把网页开发和熟悉的 PPT 制作来对比理解，我想你对 PPT 的制作应该不陌生吧？
PPT 的制作过程：
1.新建 PPT 文件；
2.插入标题、文本框、图片等元素；
3.调整字体大小、颜色等，进行排版；
4.添加动画，比如为页面元素设置进入和退出的动画。
网页的开发过程：
1.新建 HTML 文件；
2.添加 HTML 元素；
3.通过 CSS 来调整元素样式；
4.通过 JavaScript 来配置页面的交互动作等。
https://img.imgdb.cn/item/600ff0023ffa7d37b39147f6.jpg
HTML 负责为网页添加内容
CSS 负责美化网页
JavaScript 负责让网页动起来。
https://img.imgdb.cn/item/601019643ffa7d37b3a722d6.gif
『 HTML 元 素 』
HTML 是什么？
HTML（Hyper Text Markup Language）是一种超文本标记语言，它是由一堆标记（或者称为标签）组成的。
举个栗子
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
Hello，World
</body>
</html>
这是一个最简单的 HTML 代码
可以看到很多夹在尖括号 <> 中间的字母，它们叫做 标签。
一般来说标签都是成对出现的，所以标签又分为 开始标签（比如 <title>）和 结束标签（比如 </title>）。
开始标签、结束标签加上标签中间的内容就构成了 元素。
https://img.imgdb.cn/item/60101a893ffa7d37b3a7c3c2.jpg
1.结束标签与开始标签十分相似，只是结束标签在元素名之前包含了一个斜杠 /，表示着元素的结束。
2.HTML 代码是由 html、head、title、body 这四个元素组成的。一般情况下，这四个是每个 HTML 文档都会有的元素。
3.我们还能看到 HTML 标签是可以嵌套的，
一般情况下，一份符合标准的 HTML 文档最外层都是 <html> 标签，所有的内容都包含在 <html> 元素里。
因此 <html> 元素也叫根元素。
4.一般来说，<head> 和 <body> 标签也是必须的，直接嵌套在 <html> 元素里。
<head> 元素里的内容是 网页头，网页头中一般存放网页相关信息、加载样式和脚本等。
<body> 元素里的内容是 网页体，也就是存放网页内容的地方。
下面这张图，展示了 HTML 代码的层级关系：
https://img.imgdb.cn/item/60101afa3ffa7d37b3a80f85.jpg
我们一定要注意层级关系，不能错乱，像下面这样 <head> 和 <body> 交叉在一起是有问题的：
<html>
<head>
<title>我的第一个网页</title>
<body>
</head>
Hello，World
</body>
</html>
『 网 页 头 』
前面说过网页头中一般存放网页相关信息、加载样式和脚本等，我们来看一个例子：
<head>
<meta charset="utf-8" />
<title>我的第一个网页</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<meta charset="utf-8" /> 定义了网页的编码方式，是 utf-8。
当爬虫获取的数据乱码时，我们可以根据它来更正编码
<title>我的第一个网页</title> 指定了网页的标题，也就是浏览器标签栏中看到的标题；
剩下来的一个是加载样式文件的代码，一个是加载脚本文件的代码。对爬虫来说不必深入，了解一下即可。
或许你已经发现了，<meta charset="utf-8" /> 和前面说的需要有开始标签和结束标签不太一样，只有一个标签。
这就是接下来需要了解的标签的闭合性
标签分为开始标签和结束标签。
这是 HTML 的元素的一个重要特性——闭合性。
根据闭合性分为自闭合标签和非自闭合标签。
顾名思义，二者的区别就是闭合方式的不同。
前面讲过的 <meta charset="utf-8" /> 就属于自闭合标签。
下图就是自闭合标签和非自闭合标签的区别图
https://img.imgdb.cn/item/60192a513ffa7d37b3719b33.jpg
非自闭合元素必须有开始和结束标签，而自闭合元素没有结束标签，/> 意味着这个元素的结束。
对于自闭合元素和非自闭合元素，你只需要知道有这两种写法即可。
非自闭合元素有被开始标签和结束标签包裹住的内容，
而自闭合标签则没有元素内容，只有元素属性。元素属性是重点，我们后面再细说。
下面是常见的自闭合元素和非自闭合元素
https://img.imgdb.cn/item/60192aaa3ffa7d37b371b515.jpg
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
休息一下~
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
『 属 性 + 网 页 体 』
HTML 元素可以通过设置属性来为元素提供更多信息。在爬虫中，我们经常通过这些属性去筛选、提取数据。
<a> 元素是我们常见的超链接
<a> 元素的 href 属性中存储的是跳转网页的地址
被标签包裹的内容是网页中展示给我们看的实际内容。
（就是添加某些文字跳转链接）
https://img.imgdb.cn/item/601b8cc33ffa7d37b34d3bac.jpg
实际效果（蓝字）
https://img.imgdb.cn/item/601b8d293ffa7d37b34d5c7d.jpg
自闭合元素没有元素内容，因此元素属性对它们来说就是全部。
<meta charset="utf-8" /> 通过 charset="utf-8" 定义了网页编码为 utf-8。
<img> 元素有个 src 属性，里面储存图片的地址
https://img.imgdb.cn/item/601b8e193ffa7d37b34dbf16.jpg
id 和 class 都用于标识元素，是给 JavaScript 和 CSS 用的。
d 是唯一标识，其值在整个网页里是唯一的。而 class 是一类标识，其值可以用在同一类所有的元素中。
你可以简单的理解为：id 是学号，class 是班级。学号是全学校唯一的，而班级里有很多的人
https://img.imgdb.cn/item/601b8e853ffa7d37b34def86.jpg
应用：为什么要做标识呢？
是为了给 JavaScript 找到对应的元素做出交互，为了给 CSS 找到对应的元素设置样式。
而我们的爬虫正可以利用这一点找到我们需要的数据
比如我们想要找到所有的电影名称 只需要找到所有 class 为 movie-name 的元素
并提取出元素的内容即可。
『 编 辑 器 + 浏 览 器 』
编辑器是用来编写 HTML 的工具
搜索引擎里面搜索 vscode，找到它的官网（https://code.visualstudio.com），下载安装包然后电脑安装即可。安装完成后，我们打开 VSCode：
新建文件---保存（.html）---浏览器打开
浏览器自带元素审查工具，方便我们查看网页代码
甚至可以直接进行网页内容的修改！
https://s1.ax1x.com/2020/08/03/adUfk6.gif
{:5_95:} {:10_249:} {:10_249:}{:10_249:} 此生无悔入鱼C {:5_108:} 厉害了{:10_257:} 好 厉害啊 支持 学习学习嘻o(*^＠^*)o ...... 写的不错 默默学习 好强啊 很详细，实用，给楼主点赞赞赞 好强awa收藏一下嘿嘿 今日学习+1 不错
页:
[1]