人生苦短，我用 Python

前文传送门：

先赞后看是个好习惯

网页的组成

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

网页是由 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 的嵌套。

这个页面的显示如下：