小白学HTML，操作HTML网页篇（1）

一、HTML网页的介绍

[1.简单的 HTML 网页框架](#1.简单的 HTML 网页框架)

2.框架分析

3.常用标签

一、HTML网页的介绍

HTML（Hypertext Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言，是一种与 Python 不同的编程语言。网页文件的扩展名通常为.html 或.htm，这两种扩展名都可使用，并不会影响文件内容。

1.简单的 HTML 网页框架

每一个 HTML 网页都包含一个基础框架，其他的内容都是在基础框架内进行扩充的。

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这里是标题</title>
</head>
<body>在这里填入正文</body>
</html>

运行结果：

这是一个较为基础的 HTML 网页代码框架，读者可以将此代码单独保存为一个文件，需要注意的是文件的扩展名为.html 而不是.py，如图所示。使用浏览器打开此文件将会显示图所示的网页，网页标题名称显示为 "这里是标题"，网页中的内容显示为 "在这里填入正文"。

严格来说，HTML 并不属于编程语言，而是一种标记语言，其代码以标签的形式来表示网页的内容。标签是由角括号（<>）括起来的具有特定语法功能的关键词组合而成的，例如以上示例代码中第 5 行的<title>。标签通常成对出现，以<title>这里是标题</title>为例，第 1 个<title>表明<title>功能标签的开始，第 2 个</title>的标签名前面有一个 /，表示<title>功能标签的结束，成对标签之间的内容为标签的内容，即 "这里是标题" 是<title>标签对的内容，一个完整的标签也可以称为网页中的一个元素。

2.框架分析

据 HTML 网页代码框架可知，网页的基础框架包含 6 个标签，下面将分别介绍这些标签的含义。

标签：用于声明此HTML网页为HTML5网页，此标签在整个网页中只需要一个。HTML存在多个版本，例如HTML 2.0、HTML 3.2、HTML 4.1等。此标签的作用是帮助浏览器快速识别当前网页中的标签使用的是哪个版本，不同版本的HTML在标签上有差别。

<html lang="en">标签：表示HTML网页的根元素，此标签需要成对出现，第1个<html>标签表示HTML页面的开始，第2个</html>标签表示HTML网页的结束，标签之间是HTML网页的全部内容。此外标签中的属性lang是language的缩写，表示该网页使用哪种语言，en表示english，即该网页使用的是英文。如果是中文网页则使用lang="zh-CN"。

<head>标签：网页的头部标签，此标签需要成对出现。标签之间通常插入HTML网页的标题、样式、元数据等内容（此部分的内容并不是网页窗口中显示的内容）。

示例代码：

html 复制代码

<meta name="keywords" content="Python语言、办公自动化、网页">

该标签代码描述了网页的关键词为 "Python 语言、办公自动化、网页"，便于利用搜索引擎（例如百度）通过关键词搜索到此网页。在搜索引擎中输入一段中文时，首先使用分词功能（例如 jieba 库）将中文划分为单词，再将其与网页中的关键词相匹配，匹配概率最大的网页往往会被优先搜索到。

<title>标签：用于设置网页的标题，此标签需要成对出现，标签中的内容为网页标题。如上图所示的网页最顶端显示了网页的标题为"这里是标题"。

<body>标签：用于显示在网页窗口中的内容，即网页的正文，此标签需要成对出现，表示标签之间的内容都会显示在网页窗口中，例如上图所示的网页正文内容为"在这里填入正文"。<body>标签中的内容可以插入多个内容标签来充分地展示多元化的网页信息。

3.常用标签

（1）标题标签

在 HTML 网页中，可以使用标签<h1>～<h6>来表示网页中正文内容的标题（不同于网页的标题），不同标题的显示效果不同，<h1>标签的标题级别高于<h2>标签的标题级别，依次类推，<h6>标签的标题级别最低。

示例代码：

html 复制代码

<body>
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>
</body>

运行结果：

该代码仅编写了网页正文<body>部分。使用浏览器打开该代码文件，会显示如图所示的内容，其中<h1>标签对中的内容显示在网页的上方，且标签的内容显示效果（字体大小）为<h1>大于<h2>大于<h3>大于<h4>大于<h5>大于<h6>。

（2）段落标签

在 HTML 网页中，可以使用<p>标签来表示一个段落的内容。

示例代码：

html 复制代码

<body>
    <h1>我是标题1</h1>
    <p>这里可以写一个段落的文字信息</p>
</body>

运行结果：

第 3 行代码使用<p>标签对输入一段文字，用浏览器打开该代码文件后的网页显示效果如图所示。

（3）超链接标签

超链接标签<a>可用于实现在网页中单击某个信息链接后自动跳转到另一个网页。其使用形式如下：

html 复制代码

<a href="链接的网址">链接的文字内容</a>

示例代码：

html 复制代码

<body>
    <h1>我是标题1</h1>
    <p>这里可以写一个段落的文字信息</p>
    <a href="https://www.ptpress.com.cn/periodical">链接到人民邮电出版社</a>
</body>

运行结果：

第 4 行代码中的超链接标签内容为 "链接到人民邮电出版社"，链接的网址为人民邮电出版社。其中href表示标签的属性，使用浏览器打开该代码文件后的网页显示效果如图所示。

单击文字 "链接到人民邮电出版社" 时，网页会自动跳转到人民邮电出版社的官网，如图所示。

（4）注释标签

在 HTML 中也有和 Python 相同含义的注释功能，即当运行.html 格式文件时，文件中的部分代码不会被执行，浏览器在读取标签时，也不会将此部分当成元素进行渲染。注释标签常用于开发人员对 HTML 网页的解释或备注中。注释标签由构成。其使用形式如下：

html 复制代码

<!-- 在此处写注释 -->
...内容 
<!-- -->

注释标签中的两个横线之间（在此处写注释）可用于描述备注，由注释标签包括起来的内容将不会被执行。

示例代码：

html 复制代码

<body>
    <h1>我是标题1</h1>
    <!--下面的<p>标签被注释了->
        <p>这里可以写一个段落的文字信息</p>
    <!-->
    <h2>我是标题1</h2>
</body>

运行结果：

第 3 行～第 5 行代码使用了注释标签，因此第 4 行代码不会被执行，且第 3 行代码给这段被注释的代码的备注为 "下面的<p>标签被注释了"。

将该代码文件保存并使用浏览器打开后的网页显示效果如图所示，网页中没有显示<p>标签的内容。

（5）标签属性

一个标签除了标签名、标签内容外，还可以包含标签属性。标签属性用于给标签设置附加功能，类似于 Python 语言中类的方法，当通过类创建出一个对象时，如果对象包含其他的属性和方法，该对象便具备更多的功能。同理当给标签赋予多种不同含义的属性后，标签也能具备更多的功能。

属性一般位于开始标签的标签名右边，且属性的值为字符串类型，需要用引号引起来。

示例代码：

html 复制代码

<a href="https://www.ptpress.com.cn">链接到人民邮电出版社</a>

这是一个名为a的标签，其属性href表示超链接，可以实现单击<a>标签的内容便能链接到其他网站、标签、图片等。该标签的属性值为人民邮电出版社官网网址，单击 "链接到人民邮电出版社" 即可自动跳转到该网址。

常用的标签属性有class、id、style和title。

class：为 HTML 网页元素定义一个或多个类名。
id：定义元素的唯一 id，此 id 值在整个网页中是唯一的。
style：定义标签的行内样式。
title：设置标签的额外信息，当鼠标指针移到此标签上时会显示一段提示文本。

示例代码：

html 复制代码

<body>
    <h1>我是标题1</h1>
    <p>这里可以写一个段落的文字信息</p>
    <h3 id='python', title='我是提示信息', style="color: #799961;">Python</h3>
</body>

运行结果：

第 4 行代码使用了<h3>，设置其属性id为'python'，以便获取标签内的信息。属性title的值为'我是提示信息'，当用户把鼠标指针放在<h3>标签的内容上时，网页会自动弹出提示信息，如图所示。属性style="color: #799961;"表示定义此标签的样式，其中样式值为"color: #799961;"，即设置标签内容的颜色（颜色为十六进制符号）。

二、设置字体格式

HTML 提供了大量的、不同样式的字体格式标签，将这些标签相互嵌套使用，可以使得网页正文内容呈现不同的字体格式效果。

1.设置字体的字形与效果

给字体设置粗体格式使用<b>标签。

示例代码：

html 复制代码

<body>
    <h1>我是标题1</h1>
    <p>这里可以写一个<b>段落</b>的文字信息</p>
</body>

运行结果：

第 3 行代码在段落标签中嵌套了一个粗体格式标签，使得 "段落" 两个字的字体被加粗，保存代码文件并使用浏览器打开后的网页显示效果如图所示。

给字体设置斜体格式使用<i>标签，设置上标格式使用<sup>标签，设置下标格式使用<sub>标签，设置下画线格式使用<u>标签。

示例代码：

html 复制代码

<body>
    <h1><i>我是 </i><sup>标</sup><sub>题</sub>1</h1>
    <p>这里可以写一个<b>段落</b>的<u>文字信息</u></p>
</body>

运行结果：

第 2 行代码在<h1>标签中嵌套使用斜体格式标签<i>将 "我是" 设置为斜体格式，嵌套使用上标格式标签<sup>将 "标" 设置为上标格式，嵌套使用下标格式标签<sub>将 "题" 设置为下标格式。

第 3 行代码在<p>标签中使用粗体格式标签<b>将 "段落" 加粗，嵌套使用下画线格式标签<u>将 "文字信息" 设置为下画线格式。

2.设置字体颜色

HTML 颜色由红色、绿色和蓝色混合而成，字体颜色可以通过标签的属性style设置。其使用形式如下：

html 复制代码

<标签名 style="color:颜色值">内容</标签名>

将style样式值设置为color，并且对color设定相应的颜色值，颜色值有以下 3 种使用方式。

第 1 种，使用十六进制符号。

第 2 种，使用 RGB 值。RGB 值由红色、绿色和蓝色的色值组成，每种颜色的色值范围是 0～255，可以在 Word 软件中字体颜色的自定义颜色选项卡中查看。

第 3 种，使用颜色名。例如Blue表示蓝色、Black表示黑色。

当style样式值为background时表示设置字体的背景颜色，background值的使用方式与上面 3 种颜色值的使用方式一致。

示例代码（实现不同的颜色效果）：

html 复制代码

<body>
    <h1 style="color:rgb(168,168,168)">我是标题1</h1>
    <p style="color:#FF0000">这里写一个段落的文字信息</p>
    <p style="color:blue">我是第二段内容</p>
    <h2 style="background: LightSeaGreen ; color:blue">我是标题2</h2>
</body>

运行结果：

第 2 行代码使用 RGB 值设置标题 1 的颜色。

第 3 行代码使用十六进制符号设置段落的颜色。

第 4 行代码使用颜色名设置段落的颜色为蓝色。

第 5 行代码设置标题 2 的背景颜色为LightSeaGreen，字体颜色为蓝色。

注意，当style中存在多个值时，需要使用分号隔开，且style样式值为一个字符串。

3.设置字体大小

设置标签内容的字体大小可以通过给样式style赋予font-size的值来实现。其使用形式如下：

html 复制代码

<标签名 style="font-size:38pt">我是标题1</标签名>

以上形式表示设置 "我是标题 1" 标签的字体大小为38pt，其单位可以有多种形式，例如pt（磅）、cm（厘米）、inches（英寸）、mm（毫米）等。

示例代码：

html 复制代码

<body>
    <h1 style="font-size:38pt">我是标题1</h1>
    <p style="font-size:1cm">我们一起学习Python办公自动化</p>
</body>

第 2 行代码设置 "我是标题 1" 的字体大小为38pt。

第 3 行代码设置段落标签的字体大小为1cm。