1 概述
在上一篇文章中我们知道了，爬虫可以代替人工模拟浏览器进行网页操作。那我们当然需要具备一定的前端基础，只有这样我们才能面对各类网站进行数据的精准采集。
2 网页的基本构成
一个网页主要的框架如下所示，框架的基础是 HTML，它是用来描述网页的一种语言。常见的网页源码文件后缀为 .html，可以利用浏览器打开，浏览器能够解析文件内容样式呈现网页。
<!doctype html>
<html>
<head>
<meta charset="utf-8"> 这里是声明一个字符编码，utf-8国际上最通用的字符编码
<title>无标题文档</title> 网页的页面标题，显示在窗口栏
</head>
<head>与</head> 之间是不可见的，是给浏览器做信息配置用的
<body>
这里是我们这个网页的主体部分，内容就写在这里
</body>
</html> html元素是文档开始和结尾的元素，它是一个双标签
结合上述网页的基本结构，我们不难知道我们所需网页页面数据一般都来自网页的主体部分。
百度网页源码
DOCTYPE 是 Document Type 简写，中文翻译为文档类型。在网页中通过在首行代码中定义文档类型，用来指定页面所使用的 HTML 的版本类型。构建符合标注的网页中，只有确定正确的 DOCTYPE（文档类型），HTML 文档的结构和样式才能被正常解析和呈现。DOCTYPE 声明必须放在 (X)HTML 文档的顶部。
在网页设计中，HTML、CSS、JavaScript 并列为网页前端设计的 3 种基本语言。其中 HTML 负责构建网页的基本结构，CSS 负责设计网页的显示效果，JavaScript 负责开发网页的交互效果。
2.1 HTML
HTML(Hyper Text Markup Language)，超文本标记语言，通过的 <>...</> (一对尖括号) 标签形式组织不同类型的信息。HTML 构成网页的骨架，是网页的基础。
常用的 HTML 标签：
1.文本格式标签
<p> </p> 标识段落文本
<pre> </pre> 标识预定义文本
<blockquote> </blockquote> 标识引用文本
2.字符格式标签
<b> </b> 标识强调文本，以加粗效果显示
<i> </i> 标识引用文本，以斜体效果显示
<blink> </blink> 标识文本，以闪烁效果显示，IE浏览器不支持
<big> </big> 标识放大文本，以放大效果显示
<small> </small> 标识缩小文本，以缩小效果显示
<sup> </sup> 标识上标文本，以上标效果显示
<sub> </sub> 标识下标文本，以下标效果显示
<cite> </cite> 标识引用文本，以引用效果显示
3.列表标签
<ul><li> </li></ul> 标识无序列表
<li><li> </li></li> 标识有序列表
<dl><dt><dd> </dd></dt></dl> 标识定义列表
4.链接标签
超链接:<a href=“http://www.baidu.com”>百度首页</a>
锚链接:<a href=“#btm”>跳转到底部</a>
<div id=“box” style=“height:2000px; border:solid 1px red;”>撑开浏览器滚动条</div>
<span id=“btm”>底部锚点位置</span>
6.多媒体标签
<img />:嵌入图像
利用 HTML 的相关标签，我们可以进行简单的网页设计。但作为网络爬虫的开发者，我们只需要了解 HTML 的基本标签，了解具体标签的作用，在分析网页时能够认出即可。
2.2 CSS
如果说 HTML 是网页内容的载体，那么 CSS 样式就是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
CSS(Cascading Style Sheets)，层叠样式表，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。CSS 是在 HTML 语言基础上发展而来的，是为了克服 HTML 网页布局所带来的弊端。
样式是 CSS 的最小、最基本单元。从本质上来看，CSS 样式就是网页格式化的规则列表。一个样式单元必须包含两部分组成：
1.样式作用的对象：选择器（Selector）。
2.作用对象的效果：声明块（Declaration Block）。
CSS 样式
选择器：定义样式作用的对象。为了能准确选定页面中特定对象，CSS 提供了很多类型的选择器，这些选择器功能各异，但是它们的共同目标就是帮助设计师精确选择对象或对象范围。
声明块：声明块必须紧跟在选择器的后面。声明块由大括号包括，大括号内列表显示一个或无数个声明。声明之间必须使用分号进行分隔，最后一个声明可以省略分号。
2.2.1 CSS的三种样式：
行内样式，就是把 CSS 样式直接放在代码行内的标签中，一般都是放在标签的 style 属性中。
<p style="text-indent:2em; font-size:12px; line-height:1.6em; color:gray;">段落样式</p>
内部样式：HTML 提供了一个 style 元素，使用该元素能够在文档内定义仅供当前页面内使用的样式，因此称其为内部样式。style 元素必须位于页面的头部区域，即必须包含在 <head> 和 </head> 标签之间。
<style type="text/css">
p {
text-indent:2em;
font-size:12px;
line-height:1.6em;
color:gray;
}
</style>
外部样式，就是把样式代码存放在独立的文件中，使用时再把这个独立的文件导入或链接到 HTML 文档中。这个样式表文件就是我们常说的 CSS 文件，其扩展名为 .css。CSS 文件实际上就是一个文本文件，使用任何文本编辑器都可以打开并进行编辑。
<link href="images/6-6.css " type="text/css" rel="stylesheet" media="all" />
在网页中，一般会统一定义整个网页的样式规则，并写入 CSS 文件中。在 HTML 中，利用 link 标签引入写好的 CSS 文件。
也可以在内部样式表中使用 @import 命令导入外部样式表。用法如下：
<style type="text/css" media="all">
<!--@import url("images/6-6.css");-->
</style>
2.2.2 CSS选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| .class | .instro | 选择 class='intro' 的所有节点 |
| #id | #firstname | 选择 id='firstname' 的所有节点 |
这里仅例举几个作为示例，更多选择器可以自行搜索了解。
在爬虫中后面会学习相关的网页解析库，其中需要定位标签并提取内容，我们可以利用CSS选择器提取指定内容。
2.2.3 CSS的继承性
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它所包含的后代。但需要注意的是并不是所有属性都可以继承。
2.3 JavaScript
JavaScript 简称 JS，是一种解释型的脚本语言。JavaScript 是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。可以这么理解，有动画的，有交互的一般都是用 JavaScript 来实现的。
<script> 和 </script> 标签配合使用作为脚本语言的标识符来分隔其他源代码。在解析网页源代码时，浏览器检索到它们时就知道其中包含的字符信息是脚本，而不是 HTML 源代码或者 CSS 样式码。
一般来说，这些 JavaScript 代码可以被嵌入到网页中任何位置，如 <head> 标签的顶部、<head> 和 </head> 标签之间、<body> 标签内部，甚至可以被放在 <html> 或 </html> 标签的外部。
与其它计算机语言的作用域类似，JavaScript 也有作用范围。
一般来说，我们习惯于把通用功能模块都写在独立的外部文件中，然后在需要的页面中引入该文件即可。JavaScript 文件实际上也是一个文本类型的文件，JavaScript 文件的扩展名为 js。<script> 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。
<script src="file.js"></script>
以上便是Python爬虫所需要了解的一些前端知识，大家不必过分在意是否完全理解(当然能够理解最好)，只要在Python爬虫开发过程中能够灵活运用就行。
欢迎大家关注点赞，作者会持续更新专题文章。
网友评论