鱼C论坛

 找回密码
 立即注册
查看: 4874|回复: 18

[学习笔记] 爬虫学习笔记3-----网页基础 New!

[复制链接]
发表于 2021-2-4 17:58:04 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 极品召唤兽 于 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 文档。



                               
登录/注册后可看大图



『 网 页 开 发 』


在学习 HTML 前,我们先了解一些网页开发的知识。

Web 开发也称为前端开发,需要同时使用三把利器——HTML、CSS、JavaScript。

接下来我们会把网页开发和熟悉的 PPT 制作来对比理解,我想你对 PPT 的制作应该不陌生吧?

PPT 的制作过程:

1.新建 PPT 文件;
2.插入标题、文本框、图片等元素;
3.调整字体大小、颜色等,进行排版;
4.添加动画,比如为页面元素设置进入和退出的动画。


网页的开发过程:

1.新建 HTML 文件;
2.添加 HTML 元素;
3.通过 CSS 来调整元素样式;
4.通过 JavaScript 来配置页面的交互动作等。



                               
登录/注册后可看大图


HTML 负责为网页添加内容
CSS 负责美化网页

JavaScript 负责让网页动起来。


                               
登录/注册后可看大图



『 HTML 元 素 』


HTML 是什么?

HTML(Hyper Text Markup Language)是一种超文本标记语言,它是由一堆标记(或者称为标签)组成的。

举个栗子

<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    Hello,World
  </body>
</html>

这是一个最简单的 HTML 代码

可以看到很多夹在尖括号 <> 中间的字母,它们叫做 标签

一般来说标签都是成对出现的,所以标签又分为 开始标签(比如 <title>)和 结束标签(比如 </title>)

开始标签、结束标签加上标签中间的内容就构成了 元素


                               
登录/注册后可看大图


1.结束标签与开始标签十分相似,只是结束标签在元素名之前包含了一个斜杠 /,表示着元素的结束。

2.HTML 代码是由 html、head、title、body 这四个元素组成的。一般情况下,这四个是每个 HTML 文档都会有的元素。



3.我们还能看到 HTML 标签是可以嵌套的,

一般情况下,一份符合标准的 HTML 文档最外层都是 <html> 标签,所有的内容都包含在 <html> 元素里。

因此 <html> 元素也叫根元素



4.一般来说,<head> 和 <body> 标签也是必须的,直接嵌套在 <html> 元素里。

<head> 元素里的内容是 网页头,网页头中一般存放网页相关信息、加载样式和脚本等。

<body> 元素里的内容是 网页体,也就是存放网页内容的地方。

下面这张图,展示了 HTML 代码的层级关系:



                               
登录/注册后可看大图


我们一定要注意层级关系,不能错乱,像下面这样 <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>

[b]<meta charset="utf-8" /> 定义了网页的编码方式,是 utf-8。

当爬虫获取的数据乱码时,我们可以根据它来更正编码

<title>我的第一个网页</title> 指定了网页的标题,也就是浏览器标签栏中看到的标题;

剩下来的一个是加载样式文件的代码,一个是加载脚本文件的代码。对爬虫来说不必深入,了解一下即可。


或许你已经发现了,<meta charset="utf-8" /> 和前面说的需要有开始标签和结束标签不太一样,只有一个标签。

这就是接下来需要了解的标签的闭合性

标签分为开始标签和结束标签。[/b]

这是 HTML 的元素的一个重要特性——闭合性


根据闭合性分为自闭合标签和非自闭合标签

顾名思义,二者的区别就是闭合方式的不同。

前面讲过的 <meta charset="utf-8" /> 就属于自闭合标签。

下图就是自闭合标签和非自闭合标签的区别图


                               
登录/注册后可看大图


非自闭合元素必须有开始和结束标签,而自闭合元素没有结束标签,/> 意味着这个元素的结束。

对于自闭合元素和非自闭合元素,你只需要知道有这两种写法即可。

非自闭合元素有被开始标签和结束标签包裹住的内容,

而自闭合标签则没有元素内容,只有元素属性。元素属性是重点,我们后面再细说。


下面是常见的自闭合元素和非自闭合元素


                               
登录/注册后可看大图



*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
                                                                                              休息一下~
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

『 属 性 + 网 页 体 』

HTML 元素可以通过设置属性来为元素提供更多信息。在爬虫中,我们经常通过这些属性去筛选、提取数据。

<a> 元素是我们常见的超链接

<a> 元素的 href 属性中存储的是跳转网页的地址

被标签包裹的内容是网页中展示给我们看的实际内容。

(就是添加某些文字跳转链接)


                               
登录/注册后可看大图


实际效果(蓝字)


                               
登录/注册后可看大图


自闭合元素没有元素内容,因此元素属性对它们来说就是全部。

<meta charset="utf-8" /> 通过 charset="utf-8" 定义了网页编码为 utf-8。

<img> 元素有个 src 属性,里面储存图片的地址


                               
登录/注册后可看大图


id 和 class 都用于标识元素,是给 JavaScript 和 CSS 用的。

d 是唯一标识,其值在整个网页里是唯一的。而 class 是一类标识,其值可以用在同一类所有的元素中。

你可以简单的理解为:id 是学号,class 是班级。学号是全学校唯一的,而班级里有很多的人


                               
登录/注册后可看大图


应用:为什么要做标识呢?

是为了给 JavaScript 找到对应的元素做出交互,为了给 CSS 找到对应的元素设置样式。

而我们的爬虫正可以利用这一点找到我们需要的数据

比如我们想要找到所有的电影名称 只需要找到所有 class 为 movie-name 的元素

并提取出元素的内容
即可。


『 编 辑 器 + 浏 览 器 』

编辑器是用来编写 HTML 的工具

搜索引擎里面搜索 vscode,找到它的官网(https://code.visualstudio.com),下载安装包然后电脑安装即可。安装完成后,我们打开 VSCode:

新建文件  ---  保存(.html)---  浏览器打开

浏览器自带元素审查工具,方便我们查看网页代码

甚至可以直接进行网页内容的修改





                               
登录/注册后可看大图



评分

参与人数 1荣誉 +5 鱼币 +1 贡献 +3 收起 理由
longzhou520 + 5 + 1 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-4 18:01:55 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-4 21:30:20 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-4 21:30:53 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-5 10:32:39 | 显示全部楼层

回帖奖励 +1 鱼币

此生无悔入鱼C
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-5 15:06:24 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-5 16:50:18 | 显示全部楼层
厉害了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-5 18:48:12 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-6 12:06:19 | 显示全部楼层
厉害啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-6 16:10:00 | 显示全部楼层
支持
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-7 00:21:22 | 显示全部楼层
学习学习嘻o(*^@^*)o
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-7 00:46:39 | 显示全部楼层
......
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-7 10:36:01 | 显示全部楼层

回帖奖励 +1 鱼币

写的不错
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-7 10:54:59 | 显示全部楼层

回帖奖励 +1 鱼币

默默学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-7-23 09:40:49 | 显示全部楼层
好强啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-11-24 21:10:38 | 显示全部楼层
很详细,实用,给楼主点赞赞赞
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-11-24 21:20:10 From FishC Mobile | 显示全部楼层
好强awa收藏一下嘿嘿
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-4-17 07:43:31 | 显示全部楼层
今日学习+1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-4-18 17:41:55 | 显示全部楼层
不错
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 22:55

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表