Python中操作HTML网页 - 教程
HTML网页的介绍
HTML（超文本标记语言），是一种用于创建网页的标准标记语言。
网页文件的扩展名通常为.html或.htm
简单的HTML网页框架
每一个HTML网页都包含一个基础框架，其他内容都是在基础框架内进行扩充的
Title
在这里输入正文
严格来说，HTML并不属于编程语言，而是一种标记语言，其代码以标签的形式来表示网页的内容。标签是由角括号（<>）括起来的具有特定语法功能的关键词组合而成的
例如以上示例代码中第5行的<title>。标签通常成对出现，以<title>这里是标题</title>为例，第1个<title>表明<title>功能标签的开始，第2个</title>的标签名前面有一个/，表示<title>功能标签的结束，成对标签之间的内容为标签的内容，即“这里是标题”是<title>标签对的内容，一个完整的标签也可以称为网页中的一个元素。
框架分析
据上面的HTML网页代码框架可知，网页的基础框架包含6个标签，下面将分别介绍这些标签的含义。
<DOCTYPE html>标签：用于声明此HTML网页为HTML5网页，此标签在整个网页中只需要一个。HTML存在多个版本，例如HTML 2.0、HTML 3.2、HTML 4.1等。此标签的作用是帮助浏览器快速识别当前网页中的标签使用的是哪个版本，不同版本的HTML在标签上有差别。
示例代码（HTML 4.01的声明）：
<html lang="en">标签：表示HTML网页的根元素，此标签需要成对出现，第1个<html>标签表示HTML页面的开始，第2个</html>标签表示HTML网页的结束，标签之间是HTML网页的全部内容。此外标签中的属性lang是language的缩写，表示该网页使用哪种语言，en表示english，即该网页使用的是英文。如果是中文网页则使用lang="zh-CN"
<head>标签：网页的头部标签，此标签需要成对出现，标签内通常插入HTML网页的标题、样式、元数据等内容，这部分的内容并不会在网页窗口中显示。
<meta>标签：<meta charset="UTF-8">为示例，其中<meta>标签用于描述基本的元数据，此标签为单标签，通常用于表明网页的描述、关键词、字符编码等方式，在整个网页中只需要一个；charset="UTF-8"表示字符编码方式为UTF-8，浏览器获取到此标签信息会按照UTF-8编码方式翻译此网页内容。
示例代码：
该标签代码描述了网页的关键词为“Python语言、办公自动化、网页”，便于搜索引擎（例如百度）通过关键词搜索到此网页；在搜索引擎中输入一段中文时，首先使用分词功能（例如jieba）将中文划分为单词，再将其与网页中的关键词相匹配，匹配概率最大的网页往往会被优先搜索到。
<title>标签：用于设置网页的标题，此标签需要成对出现，标签中的内容为网页标题，网页窗口会显示该标题（示例显示的标题为“这里是标题”）。
<body>标签：用于显示在网页窗口中的内容，即网页的正文，此标签需要成对出现，标签之间的内容会显示在网页窗口中（示例的网页正文内容为“在这里填入正文”）；<body>标签中的内容可以插入多个内容标签来充分地展示多元化的网页信息。
常用标签
主要介绍在HTML网页中的常用标签，例如标题标签、段落标签、超链接标签、注释标签等等
标题标签
1. 标签作用：在HTML网页中，<h1>~<h6>标签用于表示网页正文内容的标题（和网页的<title>标题不同）。
2. 级别规则：不同标签的标题级别不同，<h1>的标题级别最高，<h2>次之，依次类推，<h6>的标题级别最低。
3. 使用格式：这类标签需要成对出现，标签内填写标题内容，且需嵌套在<body>标签内使用。
我是标题1
我是标题2
我是标题3
我是标题4
我是标题5
我是标题6
段落标签
在HTML网页中，可以使用<p>标签来表示一个段落的内容。
示例代码：
我是标题1
这里可以写一个段落的文字信息
超链接标签
超链接标签<a>可用于实现在网页中单击某个信息链接后自动跳转到另一个网页。其使用形式如下
<a href="链接的网址 ">链接的文字内容</a >。
示例代码：
我是标题1
这里可以写一个段落的文字信息
链接到人民邮电出版社
其中href表示标签的属性
注释标签
在HTML中也有和Python相同含义的注释功能，即当运行.html格式文件时，文件中的部分代码不会被执行，浏览器在读取标签时，也不会将此部分当成元素进行渲染。注释标签常用于开发人员对HTML网页的解释或备注中。注释标签由<!-->和<!-->构成。
示例代码：
我是标题1
这里可以写一个段落的文字信息
我是标题1
标签属性
一个标签除了标签名、标签内容外，还可以包含标签属性。标签属性用于给标签设置附加功能，类似Python类中的方法；给标签赋予属性后，标签能具备更多功能。
属性一般位于开始标签的标签名右边，属性值为字符串类型，需要用引号引起来。
示例代码：
链接到人民邮电出版社说明：这是<a>标签，属性href表示超链接，属性值为人民邮电出版社官网网址，单击“链接到人民邮电出版社”可跳转到该网站。
常用标签属性：
class：为HTML网页元素定义一个或多个类名。
id：定义元素的唯一id，此id值在整个网页中是唯一的。
style：定义标签的行内样式。
title：设置标签的额外信息，当鼠标指针移到此标签上时会显示一段提示文本。
示例代码：
我是标题1
这里可以写一个段落的文字信息
Python办公自动化
设置字体格式
HTML提供了大量不同样式的字体格式标签，将这些标签相互嵌套使用，可使网页正文内容显示不同的字体格式效果。
设置字体的字形与效果
给字体设置粗体格式使用<b>标签
示例代码：
我是标题1
这里可以写一个段落的文字信息
其他字形/效果标签：
斜体格式：<<i>标签
上标格式：<sup>标签
下标格式：<sub>标签
下划线格式：<u>标签
示例代码：
<我是标题1
这里可以写一个段落的文字信息
说明：第2行：<<i>将“我是”设为斜体，<sup>将“标”设为上标，<sub>将“题”设为下标
第3行：<b>将“段落”加粗，<u>给“文字信息”加下划线
设置字体颜色
HTML颜色由红、绿、蓝混合而成，可通过标签的style属性设置字体颜色，使用形式如下：
<标签名 style="color:颜色值">内容</标签名>
颜色值的3种使用方式：
1. 十六进制符号：需参考“常见颜色码对照表”；
2. RGB值：由红、绿、蓝的色值（0~255）组成；
3. 颜色名：如Blue（蓝色）、Black（黑色），不区分大小写。
当style样式值为background时，表示设置字体的背景颜色，background值的使用方式与字体颜色值（十六进制、RGB、颜色名）一致。
示例代码：
我是标题1
这里写一个段落的文字信息
我是第二段内容
我是标题2
注意：当style中存在多个值时，需要使用分号隔开，且style样式值为一个字符串。
设置字体大小
设置标签内容的字体大小，可通过给style样式赋予font-size的值实现，使用形式如下：
<标签名 style="font-size:38pt">我是标题1</标签名>
字体大小的单位有多种，如pt（磅）、cm（厘米）、inches（英寸）、mm（毫米）等。
示例代码：其使用形式如下：
< img src="网址" alt="文字" width="304px" height="228px">
我是标题1
我们一起学习Python办公自动化
添加多媒体
在HTML网页中可通过标签添加图片、音频、视频等多媒体，无需获取实际文件或上传，只需找到它们的网址（url）即可。
添加图片
在网页中插入图片使用<img>标签（<img>是单标签，整个网页中只需1个）
其使用形式如下：
< img src="网址" alt="文字" width="304px" height="228px">
属性src：指必须填入的属性，表明插入的图片的url。
属性alt：指当src链接的图片url失效了或因其他原因无法显示图片时出现的提示性文字。
属性width和height：表示图片的宽度和高度，其单位为px，表示像素。当只填入一个参数时，默认按原尺寸比例自动缩放。
示例代码：
我是标题1
< img src="https://cdn.ptpress.cn/uploading/Material/978-7-115-41773-2/7/23pg/417733400.jpg" alt="图片丢失了" width="200px">
当图片url错误或失效时都会显示图片丢失了
添加网页音频
在HTML中可以使用<audio>标签实现在网页中插入音频。其使用形式如下：
<audio controls="controls" src="音频地址.mp3" type="音频类型">当浏览器不支持播放时的提示信息</audio>
属性controls：为网页音频播放提供控件，例如暂停、播放、音量调节等。
属性src：用于链接音频文件的地址。音频文件的地址一般以.mp3、.wav等为后缀。读者需要找到一个纯音频的网址，而不是网页中包含音频和其他元素信息的网址。
属性type：表示音频文件的类型。通常情况下.mp3格式为audio/mpeg，.ogg格式为audio/ogg，.wav格式为audio/wav。
<audio>标签中包含文字信息。某些浏览器不支持<audio>标签，因此当浏览器无法播放音频时，网页会显示文字“当浏览器不支持播放时的提示信息”
示例代码：
我是标题1
添加网页视频
在HTML中可以使用<video>标签实现在网页中插入视频。其使用形式如下：
<video src="视频网址" controls="controls" width="宽度值" height="高度值" autoplay loop muted> </video>
属性src：需要播放的视频的url。视频文件的链接地址一般以.mp4为后缀。读者需要找到一个纯视频网址，而不是网页中包含视频和其他元素信息的网址。
属性controls：为网页视频播放提供控件，例如暂停、播放、音量调节等。
属性width和height：用于设置视频的宽度和高度，单位为px，即像素。
属性autoplay：表示一旦通过url链接到视频文件便会自动播放视频。
属性loop：设置视频循环播放。
属性muted：设置视频播放时默认静音。
示例代码：
播放视频啦
获取网页资源
鼠标右击检查或者F12快捷键
创建容器
为了让网页的布局更加美观，HTML提供了容器的概念，即在网页中占用一块区域，在此区域内可以添加多种标签，且这些标签只会在该区域内显示，使得标签有了各自的容器，能在各自的区域内显示内容。
<div>标签
在HTML中使用<div>标签来建立一个容器。其使用形式如：<div>其他标签</div>
被<div>标签所包含的标签都隶属于同一个容器，当使用<div>标签设置属性样式（即style通用样式）时，整个容器都会显示此样式。
示例代码：
我是标题1
我是标题2
我这里可以输入一个段落
布局
当需要对网页页面进行布局时，需要设置<div>标签的相应属性。例如以下使用形式：
<div style="width:容器宽度; height:容器高度;float:容器位置"></div>
参数width和height：表示容器的宽度和高度，长度单位为px，即像素。
参数float：表示容器的位置，值可以为right（靠右侧）、left（靠左侧）、bottom（靠底部）、top（靠顶部）。
创建表格
在HTML网页中能比较方便地创建表格，通常来说表格也可以作为网页页面的布局。本节将主要介绍如何在网页中创建表格。
表格标签
在HTML中可以使用表格标签<table>创建表格，其中表格的行数由<tr>标签的个数决定，表格的列数由<tr>标签中<td>标签的个数决定。
示例代码：
创建表格
第1行中的第1格
第1行中的第2格
第2行中的第1格
第2行中的第2格
添加表格表头
如果需要在表格中插入表头，可以使用<th>标签来实现。其使用形式如下：
<<th colspan='2'>表格表头内容</th>
属性colspan：表示表头单元格可横跨的列数。也可以使用rowspan属性，表示表头单元格可横跨的行数。
示例代码：
我是标题1
<
我是表格表头内容
第1行中的第1格
第1行中的第2格
第2行中的第1格
第2行中的第2格
添加表格标题
创建表格标题可以使用标签<caption>来实现。其使用形式如：<caption>标题内容</caption>
<caption>标签必须位于<table>标签内，且每个表格只能定义一个标题，默认标题位于表格的上方，且居中对齐。
示例代码：
添加表格标题
我是表格标题
第1行中的第1格
第1行中的第2格
第2行中的第1格
第2行中的第2格
浙公网安备 33010602011771号