[Python3网络爬虫开发实战] 2.2-网页基础
用浏览器访问网站时,页面各不相同,你有没有想过它为何会呈现这个样子呢?本节中,我们就来了解一下网页的基本组成、结构和节点等内容。
1. 网页的组成
网页可以分为三大部分——HTML、CSS和JavaScript。如果把网页比作一个人的话,HTML相当于骨架,JavaScript相当于肌肉,CSS相当于皮肤,三者结合起来才能形成一个完善的网页。下面我们分别来介绍一下这三部分的功能。
(1) HTML
HTML是用来描述网页的一种语言,其全称叫作Hyper Text Markup Language,即超文本标记语言。网页包括文字、按钮、图片和视频等各种复杂的元素,其基础架构就是HTML。不同类型的文字通过不同类型的标签来表示,如图片用img
标签表示,视频用video
标签表示,段落用p
标签表示,它们之间的布局又常通过布局标签div
嵌套组合而成,各种标签通过不同的排列和嵌套才形成了网页的框架。
在Chrome浏览器中打开百度,右击并选择“检查”项(或按F12键),打开开发者模式,这时在Elements选项卡中即可看到网页的源代码,如图2-9所示。
图2-9 源代码
这就是HTML,整个网页就是由各种标签嵌套组合而成的。这些标签定义的节点元素相互嵌套和组合形成了复杂的层次关系,就形成了网页的架构。
(2) CSS
HTML定义了网页的结构,但是只有HTML页面的布局并不美观,可能只是简单的节点元素的排列,为了让网页看起来更好看一些,这里借助了CSS。
CSS,全称叫作Cascading Style Sheets,即层叠样式表。“层叠”是指当在HTML中引用了数个样式文件,并且样式发生冲突时,浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。
CSS是目前唯一的网页页面排版样式标准,有了它的帮助,页面才会变得更为美观。
图2-9的右侧即为CSS,例如:
1
2
3
4
5
6
|
#head_wrapper.s-ps-islite .s-p-top {
position: absolute;
bottom: 40px;
width: 100%;
height: 181px;
}
|
就是一个CSS样式。大括号前面是一个CSS选择器,此选择器的意思是首先选中id
为head_wrapper
且class
为s-ps-islite
的节点,然后再选中其内部的class
为s-p-top
的节点。大括号内部写的就是一条条样式规则,例如position
指定了这个元素的布局方式为绝对布局,bottom
指定元素的下边距为40像素,width
指定了宽度为100%占满父元素,height
则指定了元素的高度。也就是说,我们将位置、宽度、高度等样式配置统一写成这样的形式,然后用大括号括起来,接着在开头再加上CSS选择器,这就代表这个样式对CSS选择器选中的元素生效,元素就会根据此样式来展示了。
在网页中,一般会统一定义整个网页的样式规则,并写入CSS文件中(其后缀为css)。在HTML中,只需要用link
标签即可引入写好的CSS文件,这样整个页面就会变得美观、优雅。
(3) JavaScript
JavaScript,简称JS,是一种脚本语言。HTML和CSS配合使用,提供给用户的只是一种静态信息,缺乏交互性。我们在网页里可能会看到一些交互和动画效果,如下载进度条、提示框、轮播图等,这通常就是JavaScript的功劳。它的出现使得用户与信息之间不只是一种浏览与显示的关系,而是实现了一种实时、动态、交互的页面功能。
JavaScript通常也是以单独的文件形式加载的,后缀为js,在HTML中通过script
标签即可引入,例如:
1
|
<script src="jquery-2.1.0.js"></script>
|
综上所述,HTML定义了网页的内容和结构,CSS描述了网页的布局,JavaScript定义了网页的行为。
2. 网页的结构
我们首先用例子来感受一下HTML的基本结构。新建一个文本文件,名称可以自取,后缀为html,内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a Demo</title>
</head>
<body>
<div id="container">
<div class="wrapper">
<h2 class="title">Hello World</h2>
<p class="text">Hello, this is a paragraph.</p>
</div>
</div>
</body>
</html>
|
这就是一个最简单的HTML实例。开头用DOCTYPE
定义了文档类型,其次最外层是html
标签,最后还有对应的结束标签来表示闭合,其内部是head
标签和body
标签,分别代表网页头和网页体,它们也需要结束标签。head
标签内定义了一些页面的配置和引用,如:
1
|
<meta charset="UTF-8">
|
它指定了网页的编码为UTF-8。
title
标签则定义了网页的标题,会显示在网页的选项卡中,不会显示在正文中。body
标签内则是在网页正文中显示的内容。div
标签定义了网页中的区块,它的id
是container
,这是一个非常常用的属性,且id
的内容在网页中是唯一的,我们可以通过它来获取这个区块。然后在此区块内又有一个div
标签,它的class
为wrapper
,这也是一个非常常用的属性,经常与CSS配合使用来设定样式。然后此区块内部又有一个h2
标签,这代表一个二级标题。另外,还有一个p
标签,这代表一个段落。在这两者中直接写入相应的内容即可在网页中呈现出来,它们也有各自的class
属性。
将代码保存后,在浏览器中打开该文件,可以看到如图2-10所示的内容。
图2-10 运行结果
可以看到,在选项卡上显示了This is a Demo字样,这是我们在head
中的title
里定义的文字。而网页正文是body
标签内部定义的各个元素生成的,可以看到这里显示了二级标题和段落。
这个实例便是网页的一般结构。一个网页的标准形式是html
标签内嵌套head
和body
标签,head
内定义网页的配置和引用,body
内定义网页的正文。
3. 节点树及节点间的关系
在HTML中,所有标签定义的内容都是节点,它们构成了一个HTML DOM树。
我们先看下什么是DOM,DOM是W3C(万维网联盟)的标准,其英文全称Document Object Model,即文档对象模型。它定义了访问HTML和XML文档的标准:
W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM标准被分为3个不同的部分。
- 核心DOM: 针对任何结构化文档的标准模型。
- XML DOM:针对XML文档的标准模型。
- HTML DOM:针对HTML文档的标准模型。
根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点。
- 整个文档是一个文档节点;
- 每个HTML元素是元素节点;
- HTML元素内的文本是文本节点;
- 每个HTML属性是属性节点;
- 注释是注释节点。
HTML DOM将HTML文档视作树结构,这种结构被称为节点树,如图2-11所示。
图2-11 节点树
通过HTML DOM,树中的所有节点均可通过JavaScript访问,所有HTML节点元素均可被修改,也可以被创建或删除。
节点树中的节点彼此拥有层级关系。我们常用父(parent)、子(child)和兄弟(sibling)等术语描述这些关系。父节点拥有子节点,同级的子节点被称为兄弟节点。
在节点树中,顶端节点称为根(root)。除了根节点之外,每个节点都有父节点,同时可拥有任意数量的子节点或兄弟节点。图2-12展示了节点树以及节点之间的关系。
图2-12 节点树及节点间的关系
本段参考W3SCHOOL,链接:http://www.w3school.com.cn/htmldom/dom_nodes.asp。
4. 选择器
我们知道网页由一个个节点组成,CSS选择器会根据不同的节点设置不同的样式规则,那么怎样来定位节点呢?
在CSS中,我们使用CSS选择器来定位节点。例如,上例中div
节点的id
为container
,那么就可以表示为#container
,其中#
开头代表选择id
,其后紧跟id
的名称。另外,如果我们想选择class
为wrapper
的节点,便可以使用.wrapper
,这里以点(.)开头代表选择class
,其后紧跟class
的名称。另外,还有一种选择方式,那就是根据标签名筛选,例如想选择二级标题,直接用h2
即可。这是最常用的3种表示,分别是根据id
、class
、标签名筛选,请牢记它们的写法。
另外,CSS选择器还支持嵌套选择,各个选择器之间加上空格分隔开便可以代表嵌套关系,如#container .wrapper p
则代表先选择id
为container
的节点,然后选中其内部的class
为wrapper
的节点,然后再进一步选中其内部的p
节点。另外,如果不加空格,则代表并列关系,如div#container .wrapper p.text
代表先选择id
为container
的div
节点,然后选中其内部的class
为wrapper
的节点,再进一步选中其内部的class
为text
的p
节点。这就是CSS选择器,其筛选功能还是非常强大的。
另外,CSS选择器还有一些其他语法规则,具体如表2-4所示。
表2-4 CSS选择器的其他语法规则
选择器 |
例子 |
例子描述 |
---|---|---|
|
|
选择 |
|
|
选择 |
|
|
选择所有节点 |
|
|
选择所有 |
|
|
选择所有 |
|
|
选择 |
|
|
选择父节点为 |
|
|
选择紧接在 |
|
|
选择带有 |
|
|
选择 |
|
|
选择 |
|
|
选择所有未被访问的链接 |
|
|
选择所有已被访问的链接 |
|
|
选择活动链接 |
|
|
选择鼠标指针位于其上的链接 |
|
|
选择获得焦点的 |
|
|
选择每个 |
|
|
选择每个 |
|
|
选择属于父节点的第一个子节点的所有 |
|
|
在每个 |
|
|
在每个 |
|
|
选择带有以 |
|
|
选择前面有 |
|
|
选择其 |
|
|
选择其 |
|
|
选择其 |
|
|
选择属于其父节点的首个 |
|
|
选择属于其父节点的最后 |
|
|
选择属于其父节点唯一的 |
|
|
选择属于其父节点的唯一子节点的所有 |
|
|
选择属于其父节点的第二个子节点的所有 |
|
|
同上,从最后一个子节点开始计数 |
|
|
选择属于其父节点第二个 |
|
|
同上,但是从最后一个子节点开始计数 |
|
|
选择属于其父节点最后一个子节点的所有 |
|
|
选择文档的根节点 |
|
|
选择没有子节点的所有 |
|
|
选择当前活动的 |
|
|
选择每个启用的 |
|
|
选择每个禁用的 |
|
|
选择每个被选中的 |
|
|
选择非 |
|
|
选择被用户选取的节点部分 |
另外,还有一种比较常用的选择器是XPath,这种选择方式后面会详细介绍。
本节介绍了网页的基本结构和节点间的关系,了解了这些内容,我们才有更加清晰的思路去解析和提取网页内容。
[Python3网络爬虫开发实战] 2.2-网页基础的更多相关文章
- Python3网络爬虫开发实战PDF高清完整版免费下载|百度云盘
百度云盘:Python3网络爬虫开发实战高清完整版免费下载 提取码:d03u 内容简介 本书介绍了如何利用Python 3开发网络爬虫,书中首先介绍了环境配置和基础知识,然后讨论了urllib.req ...
- 转:【Python3网络爬虫开发实战】 requests基本用法
1. 准备工作 在开始之前,请确保已经正确安装好了requests库.如果没有安装,可以参考1.2.1节安装. 2. 实例引入 urllib库中的urlopen()方法实际上是以GET方式请求网页,而 ...
- 崔庆才Python3网络爬虫开发实战电子版书籍分享
资料下载地址: 链接:https://pan.baidu.com/s/1WV-_XHZvYIedsC1GJ1hOtw 提取码:4o94 <崔庆才Python3网络爬虫开发实战>高清中文版P ...
- 《Python3 网络爬虫开发实战》开发环境配置过程中踩过的坑
<Python3 网络爬虫开发实战>学习资料:https://www.cnblogs.com/waiwai14/p/11698175.html 如何从墙内下载Android Studio: ...
- 《Python3 网络爬虫开发实战》学习资料
<Python3 网络爬虫开发实战> 学习资料 百度网盘:https://pan.baidu.com/s/1PisddjC9e60TXlCFMgVjrQ
- 《Python3网络爬虫开发实战》PDF+源代码+《精通Python爬虫框架Scrapy》中英文PDF源代码
下载:https://pan.baidu.com/s/1oejHek3Vmu0ZYvp4w9ZLsw <Python 3网络爬虫开发实战>中文PDF+源代码 下载:https://pan. ...
- 《Python3网络爬虫开发实战》
推荐:★ ★ ★ ★ ★ 第1章 开发环境配置 第2章 网页基础知识 第3章 网络爬虫基础 第4章 基本库的使用 第5章 解析库的使用 第6章 数据存储 第7章 Ajax数据爬取 第8章 动态渲染页面 ...
- [Python3网络爬虫开发实战] 3.1.4-分析Robots协议
利用urllib的robotparser模块,我们可以实现网站Robots协议的分析.本节中,我们来简单了解一下该模块的用法. 1. Robots协议 Robots协议也称作爬虫协议.机器人协议,它的 ...
- [Python3网络爬虫开发实战] 2.3-爬虫的基本原理
我们可以把互联网比作一张大网,而爬虫(即网络爬虫)便是在网上爬行的蜘蛛.把网的节点比作一个个网页,爬虫爬到这就相当于访问了该页面,获取了其信息.可以把节点间的连线比作网页与网页之间的链接关系,这样蜘蛛 ...
随机推荐
- Swift4 模式, 枚举型
创建: 2018/03/05 完成: 2018/03/05 更新: 2018/03/10 改变标题 [Swift4 模式] -> [Swift4 模式, 枚举型] 补充RawRepresenta ...
- NetBeans IDE For PHP 简体中文版 8.1安装配置
一.NetBeans IDE For PHP简介 NetBeans IDE 是一个开发环境 - 供程序员编写.编译.调试和部署程序的一个工具. 它是用 Java 编写的 - 但却可以支持任何编程语言. ...
- bind:Address alreasy is use
在bind邦定时,通常会出现bind:Address alreasy is use错误. 此错误可以用setsockopt函数避免 int setsockopt(int sockfd,int leve ...
- SpringBoot入门-15(springboot配置freemarker使用YML)
https://blog.csdn.net/fengsi2009/article/details/78879924 application.yml spring: http: encoding: fo ...
- 《Windows核心编程系列》十谈谈同步设备IO与异步设备IO之异步IO
同步设备IO与异步设备IO之异步IO介绍 设备IO与cpu速度甚至是内存访问相比较都是比较慢的,而且更不可预测.虽然如此,通过使用异步设备IO我们仍然能够创造出更高效的程序. 同步IO时,发出IO请求 ...
- 目标Python2+3
很多时候你可能希望你开发的程序能够同时兼容Python2+和Python3+. 试想你有一个非常出名的Python模块被很多开发者使用着,但并不是所有人都只使用Python2或者Python3.这时候 ...
- CoreText的绘制流程-转
来自:http://blog.sina.com.cn/s/blog_7c8dc2d50101lbb1.html 使用coreText进行文本绘制,需要在工程中添加CoreText.framework, ...
- UML 活动图(转载)
活动图:用于表示系统中各种活动的次序,它的应用非常广泛,即可用来描述用例的工作流程,也可用来描述类中某个方法的操作行为.常用于表示业务流程,对系统功能建模,强调对象之间的控制流.活动图是由状态图变化而 ...
- hihocoder编程练习赛52-3 部门聚会
思路: 树形dp. 实现: #include <bits/stdc++.h> using namespace std; ; int n, a[MAXN], in[MAXN]; vector ...
- Android优化方案之--Fragment的懒加载实现
一.背景 在Android应用中,ViewPager是我们不可避免使用的一个控件,因为它可以使我们在占用较少空间的同时,增强内容的丰富性,同时以其内部流淌着Google的血液,所以它几乎成了每一个Ap ...