1.3 HTML基础_Python网络爬虫入门到实战-QQ阅读男生都市网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

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所示，收集姓名、性别、爱好、邮箱、照片等信息，需要填写个人登录密码，确保填写为本人。

分析：可以将表单需要填写的内容放在一个表格中。只需要在中间填写需要的信息即可。例如下面的几个例子：