一招教你搞定操作HTML网页

荼蘼

16289人浏览 · 2025-07-16 11:00:09

荼蘼 · 2025-07-16 11:00:09 发布

一.简单的HTML网页框架

1.新建HTML文件

方法1：右键项目目录 → New → HTML File → 输入文件名（如index.html ）

方法2：快捷键 Ctrl+N（Windows/Linux）或 Cmd+N（macOS）→ 选择 HTML File

`2.默认模板生成`

PyCharm自动生成基础HTML结构：

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

严格来说,HTML并不属于编程语言，而是一种标记语言，其代码以标签的形式来表示网页的内容。标签是由角括号(<>)括起来的具有特定语法功能的关键词组合而成的，
签通常成对出现，以<title>Tiltle</title>为例，第1个<title>表明<title>功能标签的开始，第2 </title>的标签名前面有一个/，表示<title>功能标签的结束，成对标签之间的内容为标签的内容，即“Title"

是<title>标签对的内容，，一个完整的标签也可以称为网页中的一个元素。

3.框架分析

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

<!DOCTYPE html>标签:用于声明此HTML网页为HTML5网页，此标签在整个网页中只需要一个。 HTML存在多个版本，例如HTML2.0、HTML 3.2、HTML4.1等。此标签的作用是帮助浏览器快速识别当前网页中的标签使用的是哪个版本，不同版本的HTML在标签上有差别。

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

<head>标签:网页的头部标签。此标签需要成对出现。标推之间通常值入HTML网页的标题、样式、元数据等信息
<meta charset>='UTF-8'>标签：,其中的<meta>标签用于描述基本的元数据，此标签在整个网页中只需要一个为单标签，通常用于表明网页的描述、关储词、字符编码方式等。 charset="UTF-8”表示字符编码方式为UTF-8, 浏览器获取到此标签信息会按照UTF-8编码方式翻译此网页内容。

<title>标签:用于设置网页的标题,此标签需要成对出现，标签中的内容为网页标题。

<body>标签:用于显示在网页窗口中的内容，即网页的正义，此标签需要成对出现，表示标签之间的内容都会显示在网页窗口中，<body>标签中插入多个内容标签来充分地展示多元化的网页信息。

二.常用标签

1.标题标签

在HTML网页中，可以使用标签<h1>~<h6>来表示网页中正文内容的标题(不同于网页的标题)，不同标题的显示效果不同，<h1>标签的标题级别高于<h2>标签的标题级别，依次类推,<h6>标签的标题级别最低。示例代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
        <h1>我是标题1</h1>
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <h4>我是标题4</h4>
        <h5>我是标题5</h5>
        <h6>我是标题6</h6>
    </body>
</html>

字体大小为<hl>大于<h2>大于<h3>大于<h4>大于<h5>大于<h6>。

2.段落标签

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

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
        <h1>我是标题1</h1>
        <p>这里可以写一个段落的文字信息</p>
    </body>
</html>

3.超链接标签

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
        <h1>我是标题1</h1>
        <p>这里可以写一个段落的文字信息</p>
        <a href="https://www.baidu.com/">链接到百度</a>
    </body>
</html>

第4行代码中的超链接标签内容为“链接到百度"，链接的网址为https://www.biadu.com,单击文字链接到百度，网页会自动跳转到百度官网。

4.注释标签

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
     <h1>我是标题1</h1>
     <!--下面的p标签被注释了>
         <p>这里可以写一个段落的文字信息</p>
     <!-->
     <h2>我是标题1</h2>
    </body>
</html>

第3行-第5行使用了注释标签，因此第4行代码不会被执行。

5.标签属性

一个标签除了标签名、标签内容外，还可以包含标签属性。标签属性用于给标签设置附加功能。

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
<body>
<h1>我是标题1</h1>
<p>这里可以写一个段落的文字信息</p>
<h3 id = 'python' , title = '我是提示信息', style="color: #799961;">Python办公自动化</h3>
</body>
</html>

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

class:为HTML网页元素定义一个或多个类名。
id:定义元素的唯一id,此id值在整个网页中是唯一的。

style:定义标签的行内样式。
title:设置标签的额外信息，当鼠标指针移到此标签上时会显示一段提示文本。

三.设置字体格式

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

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
        <h1>我是标题1</h1>
        <p>这里可以写一个<b>段落</b>的文字信息</p>
    </body>
</html>

给字体设置斜体格式使用<i>标签，设置上标格式使用<sup>标签，设置下标格式使用<sub>标签，设置下画线格式使用<u>标签。代码与加粗字体雷同不再演示。

2.设置字体颜色

字体颜色可以通过标签的属性style设置。其使用形式如下:<标签名 style="color:颜色值">内容</标签名>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <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>
</html>

3.设置字体大小

设置标签内容的字体大小可以通过给样式style赋予font-size的值来实现。其使用形式如下:保签名style-"font-=ize:38pt">我是标题1</标签名>以上形式表示设置“我是标题1”标签的字体大小为38pt，其单位可以有多种形式，例如pt(磅)、cm(厘米).inches(英寸)、mm(毫米)等。示例代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
        <h1 style="font-size:38pt">我是标题1</h1>
        <p style="font-size:1cm">我们一起学习Python办公自动化</p>
    </body>
</html>

四.添加多媒体

1.插入图片

在网页中插入图片可以使用<img>标签(<img>是单标签，即在整个网页中只需要1个<img>标签)来实现。

其使用形式如下：

<ing src-"网址" alt-"文字" width="304px"  height="228px">

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
    <h1 >我是标题1</h1>
    <img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-48382-9/72jpg/48382.jpg" alt="图片丢失了" width="200px">
    </body>
</html>

<img>标签中存在多个属性，这里列举了常见的src、alt、width和height属性。

属性src:指必须填入的属性，表明插入的图片的url。
属性alt:指当src链接的图片url失效了或因其他原因无法显示图片时出现的提示性文字。

属性width和height:表示图片的宽度和高度，其单位为px，表示像素。当只填入一个参数时,默认按原尺寸比例自动缩放。

2.添加音频

在HTML中可以使用<audio>标签实现在网页中插入音频。其使用形式如下:

<audio controls='controls' src="音频地址.mp3”type="音频类型">当浏览器不支持播放时的提示信息</audio>

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
    <h1 >我是标题1</h1>
    <audio controls="controls" src="音乐.mp3">音乐丢失了</audio>
    </body>
</html>

属性src:用于链接音频文件的地址。音频文件的地址一般以.mp3、.wav等为后缀。需要找到一个纯音频的网址，而不是网页中包含音频和其他元素信息的网址。

controls:为网页音频播放提供控件，例如暂停、播放、音量调节等。

属性type:表示音频文件的类型。通常情况下.mp3格式为audio/mpeg,.ogg格式为audio/ogg,.wav格
式为audio/wav。

<audio>标签中包含文字信息。某些浏览器不支持<audio>标签，因此当浏览器无法播放音频时，网页会显示文字“当浏览器不支持播放时的提示信息”

3.添加视频

在HTML中可以使用<video>标签实现在网页中插入视频。其使用形式如下:

<video src='视频网址' controls=controls" width="宽度值” height=高度值"autoplay loop muted> </video>

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>这里是标题</title>
    </head>
    <body>
    <h1 >播放视频啦</h1>
    <video src="https://ips.ifeng.com/video19.ifeng.com/video09/2021/09/07/p6840864516666822656-102-123317.mp4" controls="controls" width="500"></video>
    </body>
</html>