Python爬虫编程思想：网页基础
Posted 蒙娜丽宁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python爬虫编程思想：网页基础相关的知识，希望对你有一定的参考价值。
目录
整个互联网拥有数以亿计的网页，这些网页的样式千差万别，但不管是什么样的网页，都离不开Web三剑客对其做的贡献，它们是html、CSS和javascript。这三种技术是Web的核心，它们分工不同。HTML决定了Web页面上有什么样的组件（如按钮、表格、复选框等），CSS决定了Web页面上的这些组件如何摆放（布局），以及它们的样式，而JavaScript是一种编程语言，可以运行在浏览器中，可以让Web页面中的组件动起来，例如，动态显示数据，动态设置组件的样式，以及动态从服务端获取数据。对于一个Web页面，JavaScript并不是必须的，但HTML和CSS必须使用，这样的页面就是纯的静态页面。如果爬虫要遇到这样的页面，那就幸福得多了，直接下载后分析即可。但关键是绝大多数页面还有JavaScript的参与，而且很多数据都是动态设置的。所以对于一个功能强大的爬虫来说，不仅要面对HTML和CSS这样的静态内容，还要应对像JavaScript这样的编程语言。而作为一名合格的爬虫程序员，了解Web三剑客的基础知识，对于分析处理这类复杂情况会有很大帮助，因此，本节会简单介绍Web三剑客，以及CSS选择器的一些基础知识。
1. HTML
HTML是用来描述网页的一种语言、全称是Hyper Text Markup Language，中文名称是超文本标记语言。HTML用不同的节点表示各种节点，这些节点可以组成任意复杂的网页，例如，文字、按钮、图片、表格、视频、段落标记、容纳其他节点的div等。各种节点通过不同的排列和嵌套形成了网页的框架。
在Chrome浏览器中打开京东商城首页，在右键菜单中单击“检查”菜单项，打开开发者工具，这时在Elements选项卡中就可以看到京东商城首页的源代码，如图1所示。
这些代码就是HTML，整个网页就是由各种节点嵌套组合而成的。这些节点定义的节点节点相互嵌套和组合形成了复杂的层次关系，这些层次关系就形成了网页的架构。
2. CSS
HTML定义了页面有哪些节点，但如果只有这些节点，会让Web页面看起来杂乱无章，为了让Web页面看起来更美观，需要借助CSS。
CSS的全称是Cascading Style Sheets，中文名称是层叠样式表。CSS的主要作用有如下2个：
- 将由HTML定义的页面节点安排到合适的位置，这种操作称为布局。
- 设置页面节点的样式，如背景颜色、文字颜色、字体尺寸等。
CSS是目前唯一的Web页面布局样式标准，有了CSS的帮助，Web页面才会更加美观。图2-15右侧Styles选项卡中显示的就是京东商城首页使用的CSS代码，例如，下面是这些代码中的一个片段。
body {
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft
YaHei,tahoma,arial,Hiragino Sans GB,\\\\5b8b\\4f53,sans-serif;
color: #666;
}
CSS的核心是选择器。选择器的作用就是让CSS知道需要设置哪些HTML节点。通过选择器，CSS可以对HTML节点进行任何复杂规则的过滤，例如，只设置所有按钮的背景色为蓝色，或范围更小一点，设置所有class属性值为mybutton的按钮的文字颜色为红色。上面的代码使用了element选择器，选择了页面中所有的<body>节点。由于一个页面只有一个<body>节点，所以这段代码设置了这个唯一的<body>节点的样式，包括背景色、文字颜色等。在编写爬虫时，经常会通过样式名来过滤符合某一特种的节点，如要提取class属性值为title的<a>节点中的URL，还有更复杂的爬虫，需要直接分析CSS代码，例如，要提取页面中所有背景色为蓝色的按钮中的文本，所以作为一名爬虫程序员，要对CSS选择器有一定的了解，在下一节会介绍一些常用的CSS选择器。
3. CSS选择器
CSS选择器的作用很简单，就是过滤HTML代码中符合条件的节点，然后针对这些节点设置相应的样式，以及安排合适的位置。所以CSS选择器也可以看做是过滤器。CSS选择器非常多，尤其是最新的CSS3。也没有必要记住所有的CSS选择器以及其用法（一般人也记不住），但有一些常用的CSS选择器还是需要牢记于心的。最常用的过滤节点的方式就是根据节点名称、id属性和class属性。每一个选择器后面需要跟一对大括号（{...}），用于设置具体的样式。像上一节的CSS代码，直接使用了body，这就是根据节点名设置样式。如果要根据id属性设置样式，需要以井号（#）开头，代码如下：
#button1 {
background-color: #f00;
}上面的CSS代码会将Web页面中所有id属性值为button1的节点的背景色设置为红色。
如果要根据class属性设置样式，需要以点（.）开头，代码如下：
.title {
color: #f00;
}上面的CSS代码将Web页面中所有class属性值为title的节点的文字颜色设为红色。
除了这些常用的CSS选择器外，还有很多其他的常用CSS选择器，这些CSS选择器如表1所示。
表1 常用的CSS选择器
| 选择器 | 例子 | 描述 |
| .class | .title | 选择 class=title 的所有节点 |
| #id | #button1 | 选择 id=button1 的所有节点 |
| * | * | 选择所有节点 |
| element | a | 选择所有 节点 |
| element,element | div,a | 选择所有 节点和所有 节点 |
| element>element | div>a | 选择父节点为 节点的所有 节点 |
| element+element | div+a | 选择紧接在 节点之后的所有 节点 |
| [attribute] | [target] | 选择带有 target 属性所有节点 |
| [attribute=value] | [target=_blank] | 选择 target=_blank 的所有节点 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 flower 的所有节点 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 en 开头的所有节点 |
| :link | a:link | 选择所有未被访问的链接 |
| :visited | a:visited | 选择所有已被访问的链接 |
| :active | a:active | 选择活动链接 |
| :hover | a:hover | 选择鼠标指针位于其上的链接 |
| :focus | input:focus | 选择获得焦点的 input 节点 |
| :first-letter | p:first-letter | 选择每个 节点的首字母 |
| :first-line | p:first-line | 选择每个 节点的首行 |
| :first-child | p:first-child | 选择属于父节点的第一个子节点的每个 节点 |
| :before | p:before | 在每个 节点的内容之前插入内容 |
| :after | p:after | 在每个 节点的内容之后插入内容 |
| :lang(language) | p:lang(it) | 选择带有以 it 开头的 lang 属性值的每个 节点 |
| element1~element2 | p~ul | 选择前面有 节点的每个
|
| [attribute^=value] | a[src^=https] | 选择其 src 属性值以 https 开头的每个 节点 |
| [attribute$=value] | a[src$=.pdf] | 选择其 src 属性以 .pdf 结尾的所有 节点 |
| [attribute*=value] | a[src*=abc] | 选择其 src 属性中包含 abc 子串的每个 节点 |
| :first-of-type | p:first-of-type | 选择属于其父节点的首个 节点的每个 节点 |
| :last-of-type | p:last-of-type | 选择属于其父节点的最后 节点的每个 节点 |
| :only-of-type | p:only-of-type | 选择属于其父节点唯一的 节点的每个 节点 |
| :only-child | p:only-child | 选择属于其父节点的唯一子节点的每个 节点 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父节点的第二个子节点的每个 节点 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子节点开始计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父节点第二个 节点的每个 节点 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子节点开始计数 |
| :last-child | p:last-child | 选择属于其父节点最后一个子节点每个 节点 |
| :root | :root | 选择文档的根节点 |
| :empty | p:empty | 选择没有子节点的每个 节点（包括文本节点） |
| :target | #news:target | 选择当前活动的 #news 节点 |
| :enabled | input:enabled | 选择每个启用的 节点 |
| :disabled | input:disabled | 选择每个禁用的 节点 |
| :checked | input:checked | 选择每个被选中的 节点 |
| :not(selector) | :not(p) | 选择非 节点的每个节点 |
| ::selection | ::selection | 选择被用户选取的节点部分 |
除了CSS选择器外，还可以用XPath来过滤节点，XPath会在后面的内容中讲解。
4 .JavaScript
JavaScript，简称JS，是一种脚本语言。HTML与CSS配合，只能让Web页面变得更美观，但无法提供动态的效果，例如，实现页面特效，或从服务端使用AJAX获取数据，并动态显示在Web页面中，因此，要实现一个拥有动态效果的Web页面，JavaScript是必不可少的。
对于爬虫来说，通常不需要直接分析JavaScript代码，但有一些Web API返回的并不是纯的JSON或XML代码，而是一段JavaScript代码，所以需要解析这段代码，将必要的信息提取出来，或干脆模拟浏览器执行这段代码，直接获取某些变量的信息，例如，下面的代码将json数据保存在了一个名为data的变量中。
var data = '{"name":"李宁","country":"China"}';要想获得json文档内容，或者直接解析这行代码，或者执行这行，得到data变量的值。
如果JavaScript代码比较多，并不建议直接写在HTML页面中，而是单独创建一个或多个文件扩展名为js的文件，然后使用<script>节点引用这行脚本文件，例如，下面的代码引用了jQuery脚本文件。引用脚本文件后，就可以在引用脚本文件的HTML页面中使用该脚本文件中的JavaScript代码了。
<script src="jquery-3.3.1.min.js"></script>以上是关于Python爬虫编程思想：网页基础的主要内容，如果未能解决你的问题，请参考以下文章
Python爬虫编程思想（11）：用urllib请求基础验证页面
Python爬虫编程思想（104）：Splash基础（支持Lua的轻量级浏览器）