Python网络爬虫：HTML/CSS/JavaScript介绍

1 HTML语言

1.1 HTML简介

HTML指的是超文本标记语言：HyperText Markup Language，它不是一门编程语言，而是一种标记语言，即一套标记标签。HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的文本文件，可以使用任意的文本编辑器例如记事本打开HTML文件，查看并修改HTML源代码。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容。

1.2 HTML结构

下图是一个基本的HTML文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个网页</title>
</head>
<body>
    <img src="词云图.png" width="500" height="700">
</body>
</html>
</html>

该HTML文档的浏览器端显示如下：

其中，<!DOCTYPE html>用于指定文档的类型；<html>标签为文档的根标签，该标签不带任何属性；<head>标签是头标签，用来规定文件的标题、编码方式和url等信息；<body>标签为文档的主体标签，有很多的属性设置，如下表所示：

<body>标签的属性及其描述
属性	描述
text	设定页面文字的颜色
bgcolor	设定页面背景的颜色
background	设定页面的背景图像
bgproperties	设定页面的背景图像为固定，不随页面的滚动而滚动
link	设定页面默认的链接颜色
alink	设定鼠标正在单击时的链接颜色
vlink	设定访问过后的链接颜色
topmargin	设定页面的上边距
leftmargin	设定页面的左边距

2 CSS层叠样式表

2.1 CSS概述

CSS是Cascading Style Sheets的缩写，中文名叫层叠样式表，是一种标记语言，用于为HTML文档定义布局，涉及字体、颜色、边距、高度、宽度、高级定位等方面。

2.2 选择器

网页可以分为三个部分：结构（html）、表现（CSS）、行为（JavaScript）。CSS可以改变HTML中标签的样式，但是要告诉CSS改变谁、改什么。选择器就是用来告诉CSS改变谁，具体的有属性选择器、类和ID选择器。使用CSS改变元素样式有三种方式。

2.2.1 内联样式行内样式

在标签内部通过style属性设置元素样式，开发时不要使用内联样式。

<body>
    <p style="color: red; font-size: 50px;">人之初</p>
</body>

2.2.2 内部样式表

将样式表编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，修改时只需要修改一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        p{color: red; font-size: 30px;}
    </style>

</head>

<body>
    <p style="color: blue; font-size: 50px;">人之初</p>
    <p2>性本善</p2>
    <p>性相近</p>
    <p>习相远</p>
</body>
</html>

样式如下：

由图可以看出：内部样式表对设置过属性的标签都有效，但如果同时存在内联样式和内部样式表时以内联样式为准

2.2.3 外部样式表

可以将CSS编写为外部CSS文件，在html中通过link标签引入外部CSS文件。将样式编写到外部CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度。

p{
    color: blue;
    font-size: 90px;
}

上述代码是外部CSS文件index.css的代码，index.css放在和网页html文件的同级目录下（当然也可以自己指定目录）。html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>
    <p>人之初</p>
    <p>性本善</p>
    <p>性相近</p>
    <p>习相远</p>
</body>
</html>

网页效果如下：

3 JavaScript

JavaScript是一种可以嵌入在HTML代码中由客户端浏览器运行的脚本语言。在网页中使用JavaScript代码，不仅可以实现网页特效，还可以响应用户请求实现动态交互的功能。

通常情况下，在Web页面中使用JavaScript有三种方法，分别是行间事件、页面script标签嵌入、外部引入。

3.1 行间事件

行间事件主要用于事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS引入方式之行间事件</title>
</head>
<body>
    <!-- 第一种嵌入js的方式：行间事件  -->
    <input type="button" name="点我" value="点击" onclick="alert('hello!');">
</body>
</html>

页面效果如下：

3.2 页面script标签嵌入

在HTML文件中可以使用<script>...</script>标签将JavaScript脚本嵌入到其中。在HTML文档中可以使用多个<script>标签，每个<script>标签中可以包含多个JavaScript的代码集合。<script>标签常用的属性及其说明如下表所示：

<script>标签常用的属性及其说明
属性	说明
language	设置所使用的脚本语言及版本
src	设置一个外部脚本文件的路径位置
type	设置所使用的脚本语言，此属性已代替language属性
defer	此属性表示当HTML文档加载完毕后再执行脚本语言

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式一</title>
    <script type="text/javascript">
        alert("hello world!");
    </script>
</head>
<body>

</body>
</html>

效果如下：

3.3 外部引入js

在Web页面中引入JavaScript代码的另一种方法是采用链接外部JavaScript文件的形式。如果脚本代码比较复杂或是同一段代码可以被多个页面所使用，则可以将这些脚本代码放置在一个单独的文件中（保存文件的扩展名为.js），然后在需要使用该代码的Web页面中链接该JavaScript文件即可。示例代码如下：

这里，hello.js文件与html文件放在了同级目录下。