教你快速入门，了解html基本标签

签是由：小于号+中间字符+大于号组成的代码（注:代码的所有字符都由英文字符组成）

作用是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息

									<!doctype html>

单标签<<!doctype html>只有开始标签

双标签<html></html>开始标签和结束标签成双出现

"/”：网页上如果某个标签的小于号后面有此符号的即为结束标签，没有此符号的则为双标签

的专业术语称为注释标签

我们可以将一行代码的作用，含义，意图等信息写在这四个减号中间，让自己后期能够看懂之前写的什么

div标签的作用就在网页内容中间划分出若干个矩形区域，用以存放不一样的内容

网页中间有部分内容重要程度明显高于其他区域：比如网页标题，网页logo，新闻标题等，这些重要区域就使用h系列的标签来划分

h系列标签重要度按以下顺序：

h1>h2>h3>h4>h5>h6

ul（ Unordered List ）无序列表标签

网页中间还有一些内容相似、结构相仿、布局接近的区域，像这一类区域我们就使用无序列表来进行区域划分

ol（ ordered lists ）有序列表标签

网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的的区域，像这一类区域我们就使用有序列表来进行区域划分，这一类区域大多用在详细法律条文、政府公告、产品说明等内容上

dl（ definition list ）自定义列表标签

网页中间还有一些内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的的区域，像这一类区域我们就使用有自定义列表来进行区域划分，这一类区域大多用在专业名词条目的解释，或是网页底部信息分类等内容上

大段文字展示之p标签

标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域

大段引用文字展示之blockquote标签

blockquote标签的作用就是：在网页内容中间划分展示大段引用自古典，古籍或是名人名言的区域

小行文字标注之span标签

span标签的作用就是在网页内容的大段文字中间标注一行或是数行文字，并给这些文字设置一些不一样的展示效果，比如：下划线，颜色

重要文字标注之strong标签

strong标签的作用就是在网页内容中的某段文字中间标注出特别重要的文字

注：

<em></em>标签的效果与strong类似，区别在于em标签包裹的文字重要性比strong标签低，但是em标签内的文字会产生倾斜效果

<i></i>标签的效果则是包裹一段文字，使被包裹的文字产生倾斜效果，但是被包裹文字的重要性不会有什么变化

跳转链接之a标签

href=“网页地址”: href是Hypertext Reference的缩写，意思是超文本引用，作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去

traget=“页面打开方式”： ‘_blank’新页面打开; _self 默认打开方式,当前页打开

网页图片展示之img标签

src=“图片地址”:src是sourse的缩写，表示我们需要显示的图片文件所在的位置

alt=“图片名称”：每个图片都是为了展示某些内容，alt里面的文字则是为了描述图片内容的

width=“图片文件的实际宽度”：用以标注图文文件的实际高度，此处高度数据不可修改，不可因为布局需要改成其他非实际尺寸

height=“图片文件的实际高度”：同下

img标签的文件地址代码详解

src: 路径写法,不能出现中文

相对路径: 从本地文件(该代码所在文件的当前位置)出发寻找到目标文件

./ (当前目录)

../(上级目录)

../../(上上级目录)类推

绝对路径:

从本地: D:/project/demo/pic.jpg

从网络: :https://www.baidu.com/img/blabla.jpg

网页图片展示之video标签

video标签的作用就是在网页上展示一个视频

文件，这个标签也是HTML5时代的一个代表性存在

src=“视频地址”:src是sourse的缩写，表示我们需要显示的视频文件所在的位置

controls=“controls”：这是视频文件的控制按钮区域

网页图片展示之audio标签

audio标签的作用就是在网页上展示一个音频文件，这个标签也是HTML5时代的一个代表性存在

src=“视频地址”:src是sourse的缩写，表示我们需要显示的视频文件所在的位置

controls=“controls”：这是音频文件的控制按钮区域

喜欢小编文章的可以点个赞关注小编哦，小编每天都会给大家更新文章。

我自己是一名从事了多年的web程序员，小编为大家准备了新出的web学习资料，免费分享给大家！

如果你也想学习web前端，那么帮忙转发一下然后再关注小编后私信“01”可以得到我整理的这些web资料了（私信方法：点击我头像进我主页有个上面有个私信按钮）。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

天不言而四时行，

地不语而百物生。

- 2024.03.11 -

在数字世界的构建中，字体不仅仅是文字的外衣，更是情感和风格的传递者。作为网页设计师和前端开发者，掌握HTML中的字体标签，能够让我们创造出更加丰富和吸引人的用户体验。

今天，就让我们一起走进HTML字体标签的世界，探索它们如何让网页变得生动有趣。

一、认识基本字体标签

语法结构：<标签属性=“值”> 内容 </标签>

标签通常是成对出现的，分为开始标签（p）和结束标签(/p)，结束标签只是在开始标签前加一个斜杠“/”。
标签可以有属性，属性必须有值(align=“center” )。
开始标签与结束标签中包含的内容称之为区域。
标签不区分大小写，p和P是相同的。

1、标题标签< h1> - < h6>

标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行。

标题标签是块元素

示例：

<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>

2、字体标签<font>

在HTML中，最常用的字体标签非<font>莫属，虽然现代开发中更推荐使用CSS来控制字体样式，但了解它的历史仍然有其必要性。<font>标签允许我们通过color、size和face属性来改变字体的颜色、大小和类型。

例如，如果我们想要显示红色Arial字体的文字，我们可以这样写：

<font color="red" size="5" face="Arial">这是红色Arial字体的文字</font>

这行代码的意思是：

<font> 开始一个字体样式的定义。
color="red" 设置字体颜色为红色。
size="5" 设置字体大小为5。
face="Arial" 设置字体类型为Arial。
这是红色Arial字体的文字是我们要显示的文字。
</font> 结束字体样式的定义。

注意：虽然标签在HTML4.01中是有效的，但在HTML5中已经被废弃，建议使用CSS来进行样式定义。

3、字号大小：<font size="n">

字号大小在网页设计中同样重要，它直接影响着阅读体验。HTML允许我们通过<font size="n">来调整字体的大小，其中“n”可以是1到7的数字。

例如：

<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>

运行结果：

不过，现代网页设计更倾向于使用CSS来控制字号，以便更精细地调整字体大小。

4、粗体标签

<b>：这个标签用于将文本加粗显示，相当于英文中的bold。它不会改变字体，只是使文本看起来更粗体。

<p><b>这是加粗的文本</b></p>

<strong>：与<b>标签类似，<strong>标签也用于表示加粗的文本。

<p><strong>这是重要的文本</strong></p>

但在HTML5中，<strong>标签被赋予了语义，用来表示重要的文本内容。

5、斜体字标签

<i>：这个标签用于将文本设置为斜体，相当于英文中的italic。

<p><i>这是斜体的文本</i></p>

<em>：与<i>标签类似，<em>标签也用于表示斜体文本。

<p><em>这是强调的文本</em></p>

但在HTML5中，<em>标签被赋予了语义，用来表示强调的文本内容。

6、删除字标签

<del>：这个标签用于表示删除的文本，常用于表示不再准确或已过时的内容。比如原价与现价。

<p>原价：<del>100元</del></p>
<p>现价：80元</p>

运行之后是这样子的：

在上述示例中，原价为100元，但已被删除，因此使用标签将其包围起来。这样，浏览器会显示删除线来表示该文本已被删除。

7、文本格式化标签 < div> < span>

< div> 标签用来布局，但是一行只能放一个< div> //大盒子，块元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>
<p>这是一个div</p>
</div>
<p>
<div>云端源想</div>
</p>
</body>
</html>

<div>标签可以看出是一个盒子容器，这里面可以放别的标签。
<div>标签是一个块元素。

如上图控制台所示（打开控制台的方式：F12）：<div>标签里面可以包含<p>标签，<p>标签，里面不可以放<div>标签。

< span> 标签用来布局，一行上可以多个 < span>//小盒子，行元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>

<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<span>标签不同于<p>标签是一个行内元素（不独占一行）。

8、其它字体标签

<mark>：这个标签用于突出显示文本，通常用于表示高亮的部分。

<ins>：这个标签用于表示插入的文本，常用于表示新增的内容。

<sub> 和 <sup>：这两个标签分别用于表示下标和上标文本，常用于数学公式或化学方程式中。

二、总结与建议

尽管上述标签可以直接在HTML中使用，但现代网页设计越来越倾向于使用CSS来控制文本的样式，因为CSS提供了更多灵活性和控制能力。

使用CSS类和样式规则可以更有效地管理网站的整体样式，并且可以更容易地适应不同设备和屏幕尺寸。

因此，如果您正在学习或更新您的网页设计知识，建议学习和使用CSS来控制字体和其他文本样式，关于HTML的这些标签了解一下就可以了。

总之，字体是网页设计中不可或缺的元素，它们就像是网页的语言，传递着信息和情感。通过HTML字体标签的学习和应用，我们可以让我们的网页“字”得其乐，让每一位访问者都能享受到更加美妙的网络体验。不断探索和实践，让我们的网页在字体的世界里绽放光彩吧！

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

例

播放录像：

您的浏览器不支持 video 标签。

</video>

浏览器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <video> 标签。

标签定义及使用说明

<video> 标签定义视频，比如电影片段或其他视频流。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES从 Firefox 21 版本开始Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES从 Opera 25 版本开始	YES	YES

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

音频格式的 MIME 类型

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 的新标签。

提示和注释

提示：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

可选属性

New：HTML5 中的新属性。

属性	值	描述
autoplayNew	autoplay	如果出现该属性，则视频在就绪后马上播放。
controlsNew	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
heightNew	pixels	设置视频播放器的高度。
loopNew	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
mutedNew	muted	如果出现该属性，视频的音频输出为静音。
posterNew	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preloadNew	autometadatanone	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
srcNew	URL	要播放的视频的 URL。
widthNew	pixels	设置视频播放器的宽度。

全局属性

<video> 标签支持 HTML 的全局属性。

事件属性

<video> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：html网页的代码大全
下一篇：浏览器常用快捷键大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商