html img 圆头像_第二关:爬虫HTML网页基础(附练习题)

下面小编就整理了在编程中,比较常用的【爬虫HTML网页基础】入门到进阶的用法。

1.  HTML是什么?

HTML(Hyper Text Markup Language)是用来描述网页的一种语言,也叫超文本标记语言 。它包括一系列标签,通过这些标签可以将网络上的文档格式统一。

1.1  查看网页的HTML代码

接下来,我们就来看看,每个漂亮的网页背后的HTML代码是怎样的,请一步一步跟着我操作。

【注:下面我们的示范,会用谷歌浏览器(Chrome)进行演示,火狐浏览器(Firefox)的操作方式是一样的。推荐你也使用这二者之一。】

先打开我们的参考网站:CSDN。https://www.csdn.net/

在网页任意空白地方点击鼠标右键,然后点击“显示网页源代码”。

1a09461147adfcaf6576a1966824f022.png

你会看到,浏览器弹出了一个新的标签页:

04514425509897dd0bcd04fe41c276f0.png

没错,这就是HTML源代码了。

这样查看的好处是,整个网页的源代码都完整地呈现在你面前。坏处是,在大部分情况下,它都会经过压缩,导致结构不够清晰,你不太容易懂每行代码的含义。而且,源代码和网页分开在两个页面展示。

所以更多时候,我们会用这样一种方法:

在网页的空白处点击右键,然后选择“检查”(快捷方式是ctrl+shift+i)。

接着,你会看到一个新的界面——开发者工具栏:

75657184c92a6ecac307fe2a18d52b7f.png

上图中标亮的部分就是网页的HTML代码。

将鼠标放在HTML源代码上,你会发现,左边网页上有一些内容会被标亮。这其实就是这行代码所描述的网页内容,它们一左一右,相互对应。

f7ab6a9e06d15da238870685553072eb.png

2.  HTML 元素

回归我们的 HTML 正题,接下来我先展示一个简单的 HTML 例子:

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

上面的代码展示了一个最简单的 HTML 代码,可以看到很多夹在尖括号 <> 中间的字母,它们叫做 标签

一般来说标签都是成对出现的,所以标签又分为 开始标签(比如 )和 结束标签(比如 )。开始标签、结束标签加上标签中间的内容就构成了 元素

结束标签与开始标签十分相似,只是结束标签在元素名之前包含了一个斜杠 /,表示着元素的结束。初学者常常会忘记结束标签,这可能会产生一些奇怪的结果。

我们重新看一下最开始的 HTML 代码,它是由 html、head、title、body 这四个元素组成的。一般情况下,这四个是每个 HTML 文档都会有的元素。

我们一定要注意层级关系,不能错乱,像下面这样 和 交叉在一起是有问题的:

<html>  <head>    <title>我的第一个网页title>  <body>    # 包含住了<head>的结束标签head>,错误的结构  head>    Hello,World  body>html>

2.1  网页头

网页头,前面说过网页头中一般存放网页相关信息、加载样式和脚本等,我们来看一个例子:

<head>  <meta charset="utf-8" />  <title>我的第一个网页title>  <link rel="stylesheet" href="style.css" />  <script src="script.js">script>head>

定义了网页的编码方式,是 utf-8。当爬虫获取的数据乱码时,我们可以根据它来更正编码;我的第一个网页 指定了网页的标题,也就是浏览器标签栏中看到的标题;

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

或许你已经发现了, 和前面说的需要有开始标签和结束标签不太一样,只有一个标签。别急,这个我们后面会说。

2.2  网页体

网页体,这个是爬虫要重点关注的,我们需要的数据都存放在里面。上面的示例代码中,为了简洁,直接在网页体内写了内容。但一般网页的网页体内会有很多其他的元素共同组成。后面我们会介绍一些比较常用的,不必着急。

3.  HTML 常见元素

一篇结构清晰的文章都有标题和段落,HTML 网页也是如此。

HTML 提供了 6 个等级的标题,即

,重要性依次递减,也就是说

是最大的标题,

是最小的标题。

同时,在HTML 里段落使用的是

标签,超链接使用的是 标签,图片使用的是 标签。老师整理了一些常见的 HTML 元素,眼熟就好,之后的课程里都会这些元素打交道,慢慢就熟悉了。

8bc87aaaf7e202654b702ff55c8df1ca.png

你要重点关注的是,超链接使用的 标签和图片使用的 标签,这对我们后续的爬虫很有帮助。

3.1  自闭合元素和非自闭合元素

<meta charset="utf-8" />    # 属于自闭合标签  <.../>的格式
<h1>hello world!h1>    # 非自闭合元素   <..>内容..>格式

非自闭合元素必须有开始和结束标签,而自闭合元素没有结束标签,/> 意味着这个元素的结束。非自闭合元素有被开始标签和结束标签包裹住的内容,而自闭合标签则没有元素内容,只有元素属性。元素属性是重点,我们后面再细说。

对于自闭合元素和非自闭合元素,你只需要知道有这两种写法即可。当你在别的网页源代码里看到这两种写法时,不要觉得陌生哦。

下图列出了常见的自闭合元素和非自闭合元素,了解一下即可:

f1a3f825359477bbf4f86b01f783496c.png

随着我们爬虫学习的深入,你会解析越来越多的网页,同时遇到越来越多的新元素,如果想知道某个标签的含义,比如 a 标签,去搜索引擎里搜索 html a 标签 自行学习即可。

4.  标签属性

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

元素是我们常见的超链接,是 HTML 里非常重要的元素。它将一个个网页全都链接在一起,形成了互联网。如果没有 元素,你就无法从一个网页跳入另一个网页,这会让我们的网上冲浪变得非常糟糕!

a href=\"www.baidu.com\"/aa href=\"www.baidu.com\"/a
"www.baidu.com">百度一下# 属于开始标签,属于结束标签# href为属性名,www.baidu.com为属性值,用 = 连接# 百度一下属于浏览器呈现内容
a href=\"www.baidu.com\"/aa href=\"www.baidu.com\"/a可以看到,HTML 元素属性的语法是 属性名="属性值",且必须在开始标签中。HTML 元素可以拥有多个属性,用空格分隔开即可。

接下来我们把刚刚学会的 元素加到我们之前的 HTML 代码里。

<html>    <head>        <title>我的第一个网页title>    head>    <body>        <h1>Hello,Worldh1>        <a href="www.baidu.com">百度一下a>    body>html>

上面的 HTML 代码会被浏览器渲染成下面这样的网页:

2dd26f85815b2db0cb5a479e09482d66.png

可以看到,元素内容是链接文字展示的内容。点击后便能跳转到对应 href 属性的定义的网页。

元素也是自闭合元素,它是图片元素,网页上面呈现的各种图片就是使用了 元素。 元素有个 src 属性,里面储存图片的地址,这样浏览器就能将图片展示在网页上。

img src=\"baidu.jpg\"/img ... /
"baidu.jpg"/># 为自闭合标签# src为属性名,baidu.jpg为属性值,用 = 连接
img src=\"baidu.jpg\"/img ... /现在,你了解了  元素的 href 属性和  元素的 src 属性。你肯定知道了之后写爬虫时从哪里获取网页链接和图片地址了吧!

除了 href 属性和 src 属性外,HTML 中还有两个很常用的属性——idclass

idclass 都用于标识元素,是给 JavaScript 和 CSS 用的。因为爬虫中经常用到它们,因此这里简单的介绍一下。

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

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

<html>    <head>        <title>我的第一个网页title>    head>    <style>    #h1{        color: pink;    }    .h2{        color: blue;    }style>    <body>        <h1 id="h1">Hello,Worldh1>        <h2 class="h2">Hello,Worldh2>        <h3 class="h2">Hello,Worldh3>        <a href="www.baidu.com">百度一下a>    body>html>

上面代码,我们把 id="h1" 和 class="h2" 属性加上去,注意喔 id 是唯一的,class可多个。

这里我们定义了一个 style 标签,style 属性标签可以用来定义网页文本的样式,比如字体大小、颜色、间距、对齐方式等等。

#h1 表示 id 的选择器,这样就可以对用了 id = "h1" 的标签设置样式了,这里我们设置了一个颜色为粉丝的字体颜色。

.h2 表示 class 的选择器,这样就可以对用了 class = "h2" 的标签统一设置样式了,这里我们设置了一个颜色为蓝色的字体颜色。

e8ab63c10fed197f0d83d68aeeddab90.png

5.  运行Html文件到浏览器

这里我们介绍一下,对入门同学比较友好的编辑器:vs code。(官网即可下载)

55031305217bde825681445f3f08da6b.png

VS code的插件商店搜索:browser,Install安装一下就搞定了。

574b0e3e90d5c33ff55d9392cc3ac93d.png

在新建的.html文件中,鼠标右键(注意是.html文件后缀,而不是.py文件后缀)

ccc84c67883e0a28b34f4c36de15abfb.png

通过默认的浏览器运行文件,通过其他的浏览器运行文件也可以。

练习题

同学们,先自觉练习,答案在公众号,公众号回复暗号【答案】即可。

1. 网页文件的扩展名是什么?

A.txtB.jsonC.csvD.html

2. 下面关于属性的说法,错误的是?

A.<a> 标签的链接放在 src 属性里B.<a> 标签的链接放在 href 属性里C.<img> 标签的图片资源放在 src 属性里

3. 下列关于 HTML 的标签,说法错误的是?

A.HTML 的标签可以嵌套B.HTML 的标签都有 href 属性C.HTML 的标签分为闭合标签和非闭合标签
4. 下列关于 id 和 class 属性,说法正确的是?
A.class 和 id 不能同时存在开始标签内。B.id的属性选择器为"." , class的属性选择器"#"。C.id是唯一标识,其值在整个网页里是唯一的。D.class是唯一标识,其值在整个网页里是唯一的。

(完)

看完本文有收获?请转发朋友圈分享给更多人吧

关注「Python家庭」一起轻松学Python

3aa9fa58d4095ed1b7955d5b28f6753e.gif 6d6778cdcaef1be5b3a2a0ff31a3ded5.png 58025d98b9d07d32bfa8cdec74a2c35c.png bdd83e66078cba2f25710e46257ccc67.gif

扫码关注我们

一起学Python

原创不易,点个 “在看” 分享吧 834b05ca1c19cc2d35165fed89d64d65.png  f9470660fb5ec64030784c4d4d0f2308.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值