Python爬虫(2)网页信息

最新推荐文章于 2024-09-16 07:18:09 发布

演技拉满的白马

最新推荐文章于 2024-09-16 07:18:09 发布

阅读量379

点赞数 4

分类专栏： python 爬虫文章标签：爬虫 javascript 开发语言

本文链接：https://blog.csdn.net/qq_34786604/article/details/126551361

版权

python 同时被 2 个专栏收录

31 篇文章 5 订阅

订阅专栏

爬虫

13 篇文章 9 订阅

订阅专栏

Python爬虫（2）认识HTML

作为基础部分，我们还需要了解一下我们的爬取目标–网页信息。

从现在开始网页信息在我们的认知里应该是各类信息的集合体。而不是简单的直观化面。

我们需要从用户视角切换到程序员视角！！！

本节预计耗时15min。

在这里插入图片描述

知道自己为什么不够优秀了吗？

看到那放光的脑门没有？

网页信息

在程序员的认知里网页信息就是前端部分，可以细分为三个技术性的部分，HTML、CSS、JavaScript。
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。

一、HTML的初认识

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

所以我们需要一个网站地址，还需要一个浏览器。我们用firefox为例，这个体验还是比较好的。
学爬虫的时候避免微软家的浏览器。。。和其他的不大一样，最好是火狐和谷歌。

包子漫画的HTML如下：
在这里插入图片描述
这个是用户视角，现在我们切换为程序员视界！！！

绝大部分的浏览器都是F12，或者Ctrl+shift+i。或者最喽的就是右上角菜单里面的开发者工具。

然后就会如下：

在这里插入图片描述
一般大家都是调整到右侧。火狐默认下面，调整一下比较好。。。
前端的技能里面最重要的一条，你有一块很大的屏幕！！！

我相信大家都很喜欢看漫画吧。所以选了一个这样的画廊网站，我们的很多图片比较多的网站都是类似的结构。

展开这些小箭头，我们可以看到压缩的内容，我相信各位猜到了这些就是图片链接。

在这里插入图片描述

所以我们知道HTML本身是一个树状的结构。我们平时见到的所有信息，都是这些信息节点。

接下来我们要学习读HTML内容。

二、HTML的基本结构

元素

HTML就是文本内容，只不过是有结构的有修饰的文本内容。是高级的TXT。

压力是不是小了很多？
不要急，玩弄读者要循序渐进。。。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>快乐的汪</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

这是最基本的结构，你可以拷贝到txt里面，然后改一下末尾的文件格式为HTML，然后浏览器打开。
然后恭喜你，你的第一个网页被我玷污了。。。

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

当然还有其他的组件（botton,table等），但是基本是见名知义的居多。总体而言就是元素层层嵌套的树状结构。
在这里插入图片描述

属性

细心的同学们都注意到了，实际网页标签里面内容有点长，不光是元素。而且用=号连接，
这些东西成为属性。理论上属性只要存在意义可以是内置的一些意义，也可以是自定义的意义，
就是合法的属性。

我们谈谈内置的属性
必须掌握的有如下几个：

#　链接href
<a href="http://www.runoob.com">这是一个链接</a>
# class,为html元素定义一个或多个类名（classname）(类名从样式文件引入)
<p class="important">注意：这是一个很重要的段落。 :)</p>
# id 唯一标识符
<h1 id="myHeader">Hello World!</h1>
# style 内联样式表
<h1 style="color:blue;text-align:center">这是一个标题</h1>

这是最常用的几个，也是基本所有浏览器都支持的。
没错你没听错，元素和属性的合法性和HTML本身有关还和解析的浏览器有关。
你可以认为浏览器在这里是解释器。
至于是里面的这些内容什么意思？

对于前端程序员当然是要记住的，但是对于爬虫程序员，对不起他们都只是相互区分的名字而已，

唯一的价值就是可以帮助目标信息的定位！！！
所以理解到这一层就可以了。

三、实战

找出图片的元素对应的HTML，以及漫画名对应的HTML

选择

我们首先要选择目标元素。
简单的HTML，直接看内容，反正基本从上到下，由粗到细。
但是元素太多，层次太多怎么办？

选择器
右边分栏的左上角，点击选择。

在这里插入图片描述

左侧分栏中选中目标元素

在这里插入图片描述

定位HTML

右侧分栏里面就会显示

在这里插入图片描述
然后我们看到元素标签是img。成功！！！

同样的
在这里插入图片描述

还是很简单的。
如果你觉得点击精准，主要是div层数太多的时候，可以点击右侧的HTML元素。反正左右是同步高亮显示的。
反复选择确认我们的直接目标。

四、总结

HTML是前端三大件的基础与核心。是内容的主要载体。

直接打开就能看到网页上很多文字。

但是我们需要精准的定位。尤其容易定位到父元素。
所以要反复确认一下。下一讲主要是CSS。
其他的工具随便摸索一下咯大家。以后有机会了，聊聊火狐
在这里插入图片描述

演技拉满的白马

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录