操作HTML网页(PyCharm版)

一、HTML网页介绍

HTML是一种用于创建网页的标准标记语言,是一种与python不同的编程语言。网页文件的扩展名通常为.html或.htm。

1、简单的HTML网页框架

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

<!DOCTYPE html>标签:用于声明此HTML网页为HTML5网页,此标签在整个网页中只需要一个

<html lang="en">标签:表示HTML网页的根元素,此标签需要成对出现,第一个<html>标签表示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>标签中的内容可以插入多个内容标签来充分地展示多元化的网页信息 注意:运行操作和python不同,而是点击右上角出现的软件直接跳转执行,但是要注意电脑里要有这个软件才能执行。

二、常用标签

1、标题标签

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

2、段落标签

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

3、超链接标签

超链接标签<a>可用于实现在网页中单击某个信息链接后自动跳转到另一个网页

4、注释标签

注释标签由<!-- ->和<!-->

5、标签属性

一个标签除了标签名、标签内容外,还可以包含标签属性。标签属性用于给标签设置附加功能,类似于python语言中的方法,当通过类创建一个对象时,如果对象包含其他的属性和方法,该对象便具备更多的功能

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

class:为HTML网页元素定义一个或多个类名

id:定义元素的唯一id,此id值在整个网页中都是唯一的

style:定义标签的行内样式

title:设置标签的额外信息,当鼠标指针移到此标签上时会显示一段提示文本

三、设置字体格式

1、设置字体格式的字形与效果

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

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

2、设置字体颜色

字体颜色可以通过标签的属性style设置,形式如下:

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

3、设置字体大小

可以通过给样式style赋予font-size的值来使用,形式如下:

<标签名 style="font-size:38pt">内容</标签名>

设置字体大小的单位可以有多种形式

4、添加多媒体

1)添加网页图片

在网页中插入图片可以使用<img>标签(<img>标签是单标签,即整个网页中只需要1个此标签)来实现,形式如下:

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

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

属性src:指必须填入的属性,表面插入的图片的网址(url)

属性alt:指当src链接的图片url失效了或因其他原因无法显示图片时出现的提示性文字

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

2)添加网页音频

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

<audio controls='controls' src="音频地址.mp3" type="音频类型">当浏览器不允许播放时就会出现这段文件</audio>

属性controls:为网页音频播放提供控件,例如暂停、播放、音频调节等

属性src:用于链接音频文件的地址

属性type:表示音频文件的类型

3)添加网页视频

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

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

四、创建容器

为了让网页的布局更加美观,HTML提供了容器的概念

1、<div>标签

在HTML中使用<div>标签来建立一个容器,形式如下:

<div>其他标签</div>

被<div>标签所包含的标签都隶属于同一个容器,当使用<div>标签设置属性形式时,整个容器都会显示此样式

2、布局

当需要对网页页面进行布局时,需要设置<div>标签的相应属性,形式如下:

<div style="width:容器宽度;height:容器高度;float:容器位置"></div>

参数width和height:表示容器的宽度和高度,长度单位为px,即像素

参数float:表示容器的位置,值可以为right(靠右侧)、left(靠左侧)、bottom(靠底部)、

top(靠顶部)

五、创建表格

1、表格标签

在HTML中可以使用表格标签<table>创建表格,其中表格的行数由<tr>标签的个数决定,表格的列数由<tr>标签中<td>标签的个数决定

其中的border用来控制表格边框的显示和粗细,border="2"边框粗度

2、添加表格表头

可以使用<th>标签来实现在表格中插入表头的操作

其中的colspan="2"代表将两列合并成了一列

3、添加表头标题

创建表格标题可以使用标签<caption>来实现,形式如下:

<caption>标题内容</caption>

相关推荐
清静诗意2 小时前
Python 异步编程与 Gevent 实战指南
python·协程·gevent
linzeyang2 小时前
Advent of Code 2025 挑战全手写代码 Day 8 - 游乐场
后端·python
超级种码2 小时前
JVM 字节码指令活用手册(基于 Java 17 SE 规范)
java·jvm·python
子午2 小时前
【垃圾识别系统】Python+TensorFlow+Django+人工智能+深度学习+卷积神经网络算法
人工智能·python·深度学习
CHANG_THE_WORLD2 小时前
Python 推导式详细教程
开发语言·python
ljh5746491192 小时前
用vscode怎么运行conda中的python环境
vscode·python·conda
秋邱2 小时前
AR 技术创新与商业化新方向:AI+AR 融合,抢占 2025 高潜力赛道
前端·人工智能·后端·python·html·restful
Stara05112 小时前
LangChain—大语言模型应用开发框架的体系化架构解析
python·langchain·llm·agent·提示工程·rag
只与明月听2 小时前
一个有趣的面试题
前端·后端·python