【Python】Python3网络爬虫实战-16、Web网页基础

我们平时用浏览器访问网站的时候，一个个站点形形色色，页面也各不相同，但有没有想过它是为何才能呈现出这个样子的？
那么本节我们就来了解一下网页的基本组成、结构、节点等内容。

1. 网页的组成

网页可以分为三大部分，HTML、CSS、JavaScript，我们把网页比作一个人的话，HTML 相当于骨架，JavaScript 则相当于肌肉，CSS 则相当于皮肤，三者结合起来才能形成一个完善的网页，下面我们分别来介绍一下三部分的功能。

HTML

HTML 是用来描述网页的一种语言，其全称叫做 Hyper Text Markup Language，即超文本标记语言。网页包括文字、按钮、图片、视频等各种复杂的元素，其基础架构就是 HTML。不同类型的文字通过不同类型的标签来表示，如图片用 img 标签表示，视频用 video 标签来表示，段落用 p 标签来表示，它们之间的布局又常通过布局标签 div 嵌套组合而成，各种标签通过不同的排列和嵌套才形成了网页的框架。
我们在 Chrome 浏览器中打开百度，右键单击审查元素或按 F12 打开开发者模式，切换到 Elements 选项卡即可看到网页的源代码，如图 2-10 所示：

图 2-10 源代码
这就是 HTML，整个网页就是由各种不同的标签嵌套组合而成的，这些不同标签定义的节点元素相互嵌套和组合形成了复杂的层次关系，就形成了网页的架构。

CSS

HTML 定义了网页的结构，但是只有 HTML 页面的布局会不美观，可能只是简单的节点元素的排列，那么为了让网页看起来更好看一点，在这里就借助于 CSS。
CSS，全称叫做 Cascading Style Sheets，即层叠样式表。“层叠”是指当在 HTML 中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。
CSS是目前唯一的网页页面排版样式标准，有了它的帮助，页面才会变得更为美观。
在上图的右侧即为 CSS，例如：

#head_wrapper.s-ps-islite .s-p-top {
    position: absolute;
    bottom: 40px;
    width: 100%;
    height: 181px;
}
Python资源分享qun 784758214 ,内有安装包，PDF，学习视频，这里是Python学习者的聚集地，零基础，进阶，都欢迎

这就是一个 CSS 样式，在大括号前面是一个 CSS 选择器，此选择器的意思是选中 id 为 head_wrapper 且 class 为 s-ps-islite 内部的 class 为 s-p-top 的元素。大括号内部写的就是一条条样式规则，例如 position 指定了这个元素的布局方式为绝对布局，bottom 指定元素的下边距为 40 像素，width 指定了宽度为 100% 占满父元素，height 则指定了元素的高度。也就是说我们将一些位置、宽度、高度等样式配置统一写成这样的形式，大括号括起来，然后开头再加上一个 CSS 选择器，就代表这一个样式对 CSS 选择器选中的元素生效，这样元素就会根据此样式来展示了。
所以在网页中，一般会统一定义整个网页的样式规则，写入到 CSS 文件，其后缀名为 css，在 HTML 中只需要用 li