小白学 Python 爬虫（8）：网页基础

时间 2019-12-02

标签白学 python 爬虫网页基础栏目 Python 繁體版

原文原文链接

人生苦短，我用 Pythoncss

前文传送门：html

小白学 Python 爬虫（1）：开篇node

小白学 Python 爬虫（2）：前置准备（一）基本类库的安装数据库

小白学 Python 爬虫（3）：前置准备（二）Linux基础入门浏览器

小白学 Python 爬虫（4）：前置准备（三）Docker基础入门app

小白学 Python 爬虫（5）：前置准备（四）数据库基础框架

小白学 Python 爬虫（6）：前置准备（五）爬虫框架的安装dom

小白学 Python 爬虫（7）：HTTP 基础ide

先赞后看是个好习惯工具

网页的组成

咱们的数据来源是网页，那么咱们在真正抓取数据以前，有必要先了解一下一个网页的组成。

网页是由 HTML 、 CSS 、JavaScript 组成的。

HTML 是用来搭建整个网页的骨架，而 CSS 是为了让整个页面更好看，包括咱们看到的颜色，每一个模块的大小、位置等都是由 CSS 来控制的， JavaScript 是用来让整个网页“动起来”，这个动起来有两层意思，一层是网页的数据动态交互，还有一层是真正的动，好比咱们都见过一些网页上的动画，通常都是由 JavaScript 配合 CSS 来完成的。

咱们打开 Chrome 浏览器，访问博客站的首页，打开 F12 开发者工具，能够看到：

在选项 Elements 中能够看到网页的源代码，这里展现的就是 HTML 代码。

不一样类型的文字经过不一样类型的标签来表示，如图片用 <img> 标签表示，视频用 <video> 标签表示，段落用 <p> 标签表示，它们之间的布局又常经过布局标签 <div> 嵌套组合而成，各类标签经过不一样的排列和嵌套才造成了网页的框架。

在右边 Style 标签页中，显示的就是当前选中的 HTML 代码标签的 CSS 层叠样式，“层叠”是指当在HTML中引用了数个样式文件，而且样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。

而 JavaScript 就厉害了，它在 HTML 代码中一般使用 <script> 进行包裹，能够直接书写在 HTML 页面中，也能够以文件的形式引入。

网页结构

咱们来手写一个简单 HTML 页面来感觉下。

首先建立一个文本文件，将后缀名改成 .html ，名字能够自取，写入以下内容：

<!DOCTYPE  html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <h1>Hello World</h1>
                <div>Hello Python.</div>
            </div>
        </div>
    </body>
</html>

首先，整个文档是以 DOCTYPE 来开头的，这里定义了文档类型是 html ，整个文档最外层的标签是 <html> ，而且结尾还以 </html> 来表示闭和。

这里简单讲一下，浏览器解析 HTML 的时候，并不强制须要每一个标签都必定要有闭和标签，可是为了语义明确，最好每一个标签都跟上对应的闭和标签。各位同窗能够尝试删除其中的闭和标签进行尝试，并不会影响浏览器的解析。

整个 HTML 文档通常分为 head 和 body 两个部分，在 head 头中，咱们通常会指定当前的编码格式为 UTF-8 ，而且使用 title 来定义网页的标题，这个会显示在浏览器的标签上面。

body 中的内容通常为整个 html 文档的正文，这里小编简单写了几个 div 的嵌套。

这个页面的显示以下：

HTML DOM

在 HTML 中，全部标签订义的内容都是节点，它们构成了一个 HTML DOM 树。

根据 W3C 的 HTML DOM 标准，HTML 文档中的全部内容都是节点：

整个文档是一个文档节点
每一个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每一个 HTML 属性是属性节点
注释是注释节点

HTML DOM 将 HTML 文档视做树结构。这种结构被称为节点树：

经过 HTML DOM，树中的全部节点都可经过 JavaScript 进行访问。全部 HTML 元素（节点）都可被修改，也能够建立或删除节点。

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每一个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展现了节点树的一部分，以及节点之间的关系：

CSS

前面咱们介绍到 CSS 能够用来美化网页，那么咱们简单加一点 CSS 修改下页面的显示效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style type="text/css">
            .wrapper {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <h1>Hello World</h1>
                <div>Hello Python.</div>
            </div>
        </div>
    </body>
</html>

咱们在 head 中添加了 style 标签，并注明其中的内容解析方式为 CSS 。其中的内容的含义是让文本居中显示，先看下增长 CSS 后的页面效果吧：

能够看到，原来居左的文字已经居中显示了。

那么，CSS 是如何表示它要修饰的文档结构的呢？这就要说到 CSS 选择器了。

在CSS中，咱们使用CSS选择器来定位节点。例如，上例中 div 节点的 id 为 container ，那么就能够表示为 #container ，其中 # 开头表明选择 id ，其后紧跟 id 的名称。另外，若是咱们想选择 class 为 wrapper 的节点，即可以使用 .wrapper ，这里以点 . 开头表明选择 class ，其后紧跟 class 的名称。

另外， CSS 选择器还支持嵌套选择，各个选择器之间加上空格分隔开即可以表明嵌套关系，如 #container .wrapper p 则表明先选择 id 为 container 的节点，而后选中其内部的 class 为 wrapper 的节点，而后再进一步选中其内部的 p 节点。另外，若是不加空格，则表明并列关系，如 div#container .wrapper p.text 表明先选择 id 为 container 的 div 节点，而后选中其内部的 class 为 wrapper 的节点，再进一步选中其内部的 class 为 text 的 p 节点。这就是 CSS 选择器，其筛选功能仍是很是强大的。

参考

https://www.w3school.com.cn/htmldom/dom_nodes.asp

https://cuiqingcai.com/5476.html