- Python网络爬虫入门到实战
- 杨涵文 周培源 陈姗姗
- 3055字
- 2025-02-23 15:06:54
1.3 HTML基础
HTML作为网页中最基础的内容，大多数爬虫书籍忽略了网页基本知识的讲解，这也有可能是相关作者默认读者已经掌握了这些知识。然而从笔者所接触的大部分读者来看，并没有系统学习网站的基本知识，就直接开始学习爬虫了，从而导致学习过程比较辛苦。
HTML、CSS、JS为网站搭建的三件套，下面开始学习HTML架构。
1.3.1 基本架构
正如开始创建一个HTML一样，这是一个最基本的HTML模板，如下所示。
我们来分析一下这个架构：
1）<!DOCTYPE html>：文档类型，这一行是必须写的声明。
2）<html></html>:<html>元素，其包含一个网页页面的所有元素。
3）<head></head>:<head>元素，相当于页面内容的一个容器。
4）＜meta charset=＂UTF-8＂＞：设置默认编码方式为UTF-8，否则容易乱码。
5）<title></title>：<title>元素，用于设置页面的标题。
6）<body></body>:<body>元素，这里包含网页的所有内容（如文本、图像、视频、音频）。
补充：注释快捷键为<Ctrl+/>。
1.3.2 标题和段落标签
1.标题标签
注意：n的取值范围为1~6的整数。
作用：通常在网页中表示标题，数值越大，标题越小，例如下面的内容。
将其添加在<body>与</body>标签之间，如图1-14所示。
单击浏览器按钮，运行结果如图1-15所示。
•图1-14 代码界面
•图1-15 运行结果
2.文本段落标签
<p>元素用于包含文本段落。p标签一般也放到body之间，比如下面的小段落。
完整的代码如图1-16所示（写完记得保存，否则网页不会更新，这是初学者常犯的错误）。
直接刷新网页，浏览界面如图1-17所示。
•图1-16 代码界面
•图1-17 浏览界面
<p>标签还有一些别的方法，比如：
1）注明版权。
2）使用空格符。
3）使用引号符。
运行或者刷新之前的页面，运行结果如图1-18所示。
•图1-18 运行结果
1.3.3 文字标签
如果想要设置字体样式，就要用到＜font＞＜/front＞设置文字的样式（外观）。它的常用属性如下。
1）color：设置颜色，用英语单词表示，比如red、blue、green等。也可以传入rgb，具体可以查看rgb表，比如rgb（0，250，125）。也可以传入十六进制，比如#ff0000（红色），#000000（黑色）等。
2）size：设置字体大小，取值范围为1～7，如果超出了最大值，使用默认最大值。
以下是对上述方法的实践。
代码界面如图1-19所示。
•图1-19 代码界面
保存后刷新页面，即可看到运行结果，如图1-20所示。
•图1-20 运行结果
1.3.4 图像标签
图像标签：<img/>，它有以下几个主要参数：
1）src设置图片的路径。
2）width设置图片的宽度。
3）height设置图片的高度。
4）alt设置图片的替换文本，如果图片资源加载不出来，可显示文本。
5）title设置鼠标悬浮标题。
默认情况下，使用图片默认宽高，比如＜img src=＂1.png＂/＞。
使用width和height，设置宽和高：＜img src=＂1.png＂width=＂300px＂height=＂300px＂/＞。
如果图片加载不出来，替换文本：＜img src=＂1.png＂alt=＂努力奋斗＂//＞。
鼠标悬浮标题：＜img src=＂1.png＂title=＂奋斗＂width='200px'height='200px'/＞。
保存刷新（或者运行）浏览器，运行结果如图1-21所示。
•图1-21 运行结果
注意：路径一定要读取到图片，与Python中的绝对路径和相对路径是相同的，下面两点是需要读者注意的。
1）如果图片和HTML文件在同级目录，可以直接读取，如＜img src=＂pic.jpg＂/＞。
2）如果图片文件夹img和HTML文件在同级目录，则书写格式为：＜img src=＂img/pic3.jpg＂/＞。
1.3.5 超链接标签
如果想通过单击跳转到另一个网址，可以设置链接标签，这里只需要使用＜a/＞标签即可。它的属性有href参数，在href中传入的是链接。比如文字超链接：＜a href=＂https://cn.bing.com/＂＞我爱学习＜/a＞，标签依然在body之间。还可以用href做弹出框，比如＜a href=＂javascript：void（0）＂onclick=＂alert（'你敢点我吗？'）＂＞弹出框＜/a＞。
完整代码如图1-22所示。
•图1-22 完整代码
超链接标签运行结果如图1-23所示。
•图1-23 超链接标签运行结果
1.3.6 块标签
一般有以下这几种分块标签，它们主要用于内容排版：
1）<p></p>：内容会自动换行，一般作为段落。
2）<div></div>：内容会自动换行，一般作为网页不同区域划分。
3）<span></span>：内容不会换行，同一行显示，比如“登录”和“注册”按钮。
来看一下这个例子，文件名为4.html。
运行结果如图1-24所示。
•图1-24 运行结果
1.3.7 列表标签
列表标签相信读者是很熟悉的，比如随便打开一个图片网站，单击鼠标右键，选择菜单栏中的“检查网页”命令，如图1-25所示。
•图1-25 列表标签
每张图片都在一个<div></div>标签中，所有div标签又是同级的，它们有一个共同的父标签，这样的标签叫作列表标签。列表标签常用的标签有以下两种：
1）有序列表：<ol></ol>表示有序标签的父标签。
2）无序列表：<ul></ul>表示无序列表的父标签。
现在来创建一个文件名为6.html的文件。
如上使用的是无序列表，ul中type参数的属性值为：square（表示方框）、circle（表示空心圆）、disc（表示实心圆）。无序列表运行结果如图1-26所示。
•图1-26 无序列表运行结果
下面创建一个名为7.html的文件，案例代码如下。
有序列表运行结果如图1-27所示。
•图1-27 有序列表运行结果
1.3.8 音频视频标签
音频使用标签<audio></audio>，视频使用标签<video></video>，它们的属性如下：
1）src需要加载资源的路径。
2）autoplay自动播放。
3）controls显示进度控制条。
4）loop循环播放。
首先下载一个音频和视频，并放在与HTML文件同级的目录下，下面创建一个名为5.html的文件，案例代码如下。
运行结果如图1-28所示，单击播放按钮即可播放（IE浏览器支持自动播放，其他浏览器需要手动点击播放）。
•图1-28 音频和视频标签
1.3.9 表格标签
表格标签为<table></table>，它的内部基本属性有如下几个。
1）<tr></tr>子标签：表示表格里面的行。
2）<td></td>子标签：表示表格里面的列。
3）<caption></caption>：设置表格的标题。
4）Border：设置表格的边框。
5）borderColor：设置边框的颜色。
6）cellspaing：设置单元格的间隔。
7）width：设置表格的宽度。
8）height：设置表格的高度。
9）lign：设置文本内容的对齐方式（left：左对齐；right：右对齐；center：居中对齐）。
案例：制作一个学生信息表格，要求包含姓名、性别、学号（文件名：8.html），案例代码如下。
运行结果如图1-29所示。
•图1-29 学生信息表格
1.3.10 表单标签
表单标签的作用是提交不同的数据到后台服务器。在实际生活中，常常会遇到填写问卷调查、账号注册等，需要录入个人信息，这些都是表单。下面来学习如何制作简单的表单标签。表单标签一般使用：<from></from>，表单提交属性一般有以下两种。
1）action：提交到服务器的地址。
2）method：提交采用的方式 如get或post。post相对比较安全。
<input/>一般叫作输入标签，它的内部可以传入type参数。type表示输入内容的类型，一般有以下的选项：
1）普通输入项：type=＂text＂。
2）密码输入项：type=＂password＂。
3）单项输入项：type=＂radio＂。
4）多项输入项：type=＂checkbox＂。
5）文件输入项：type=＂file＂。
6）邮箱输入项：type=＂email＂。
7）重置按钮：type=＂reset＂。
8）提交按钮：type=＂submit＂。
9）普通按钮：type=＂button＂。
下拉框一般使用＜select＞＜/select＞标签，比如选择城市、年份等信息。子标签为＜option＞＜/option＞，它可以传的值有name：名称、value、selected=＂selected＂。名称（name）和值（value）是自定义的。为了更好地理解表单标签，可以通过实战来学习一下，比如制作个人信息表单，如图1-30所示，收集姓名、性别、爱好、邮箱、照片等信息，需要填写个人登录密码，确保填写为本人。
分析：可以将表单需要填写的内容放在一个表格中。只需要在中间填写需要的信息即可。例如下面的几个例子：
•图1-30 个人信息表单
1）填写密码。
2）填写邮箱。
3）图片上传（图片也是文件）。
上述例子几乎只修改一下type的形式即可，完整文件以及其他类型的代码见随书资源中的9.html文件，读者可以自行下载获取。
1.3.11 框架标签
我们也可以使用框架标签<frameset></frameset>，将多个HTML合并到一起，它的属性如下：
1）rows：按照行进行划分，根据填写的百分比进行划分。
2）cols：按照列进行划分，根据填写的百分比进行划分。
它的子标签为<frame/>，用于显示具体的页面。案例：将前面案例中部分的HTML合并到一起。如果按照行划分，则案例代码如下所示。
按行划分的运行结果如图1-31所示。
•图1-31 按行划分的运行结果
如果按照列划分，案例代码如下所示。
按列划分的运行结果如图1-32所示。
•图1-32 按列划分的运行结果
同样也可以混合起来使用，案例代码如下所示。
混合使用的运行结果如图1-33所示。
•图1-33 混合使用的运行结果