对HTML 排版、媒体、链接等基础标签的了解

排版标签

标题标签

场景:在知识分享文章的页面中，都离不开标题，用来突出显示文章主题
➢ 代码:h系列标签

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

语义:1~6级标题，重要程度依次递减

➢ 特点:

• 文字都有加粗
• 文字都有变大，并且从h1 → h6文字逐渐减小
• 独占一行

➢ 注意点:h1标签对于网页尤为重要，开发中有特定的使用场景，如:知识分享文章的标题、网页的logo部分

小结

标题标签一共有几个?分别表示什么含义?

• h1标签:一级标题
• h2标签:二级标题
• h3标签:三级标题
• h4标签:四级标题
• h5标签:五级标题
• h6标签:六级标题

标题标签有哪些特点?

• 文字都有加粗
• 文字都有变大，但是从h1 → h6文字逐渐减小
• 独占一行

段落标签

场景:在知识分享文章的页面中，用于分段显示

<p>我是一段文字</p>

语义:段落
特点:

• 段落之间存在间隙
• 独占一行

小结

段落标签的标签名是?

• p标签

段落标签有哪些特点?

• 段落之间存在间隙
• 独占一行

换行标签

场景:让文字强制换行显示

<br>

语义:换行
特点:

• 单标签
• 让文字强制换行

小结

换行标签的标签名是?

• br标签

水平线标签

场景:分割不同主题内容的水平线

<hr>

语义:主题的分割转换
特点:

• 单标签
• 在页面中显示一条水平线

小结

水平标签的标签名是?

• hr标签

文本格式化标签

文本格式化标签的介绍

场景:需要让文字加粗、下划线、倾斜、删除线等效果
代码:

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

语义:突出重要性的强调语境

标签语义化(了解)

实际项目开发中选择标签的原则:标签语义化

• 即:根据语义选择对应正确的标签
• 如:需要写标题，就使用h系列标签
• 如:需要写段落，就使用p标签
• …

好处:

• 对人:好理解，好记忆
• 对机器:有利于机器解析，对搜索引擎(SEO)有帮助

推荐:

•strong、ins、em、del，表示的强调语义更强烈!

小结

文字加粗用什么标签?

• strong标签

文字下划线用什么标签?

• ins标签

文字倾斜用的什么标签?

• em标签

文字删除线用什么标签?

• del标签

媒体标签

图片标签

图片标签的介绍
场景:在网页中显示的图片
代码:

<img src="" alt="" >

特点:

• 单标签
• img标签需要展示对应的效果，需要借助标签的属性进行设置!

图片标签的介绍
标签的完整结构图:

属性注意点:

1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分

图片标签的src属性
属性名:src
➢ 属性值:目标图片的路径
注意点:
➢ 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可(包括后缀名)
➢ 路径的情况有很多，这里就不一一介绍了

图片标签的alt属性
属性名:alt
属性值:替换文本
• 当图片加载失败时，才显示alt的文本
• 当图片加载成功时，不会显示alt的文本

图片标签的title属性
属性名:title
属性值:提示文本
• 当鼠标悬停时，才显示的文本
注意点:title属性不仅仅可以用于图片标签，还可以用于其他标签

图片标签的width和height属性
属性名:width和height
属性值:宽度和高度(数字)
注意点:
• 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放(此时图片不会变形)
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形

图片标签小结
在页面中展示一张图片，需要使用什么标签?
• img标签
图片的常见属性有哪些?

属性	说明
src	指定需要展示图片的路径
alt	替换文本，当图片加载失败时，才显示的文字
title	提示文本，当鼠标悬停时，才显示的文字
width	图片的宽度
height	图片的高度

路径

路径的介绍
场景:页面需要加载图片，需要先找到对应的图片
类似于:生活中两个人，我要去找你，需要通过一定的路径才能找到!
同理:页面需要找到图片，也是需要通过路径才能找到
路径可分为:
• 绝对路径(了解)
• 相对路径(常用)

绝对路径(了解)
绝对路径:指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如:
• 盘符开头:D:\day01\images\1.jpg
• 完整的网络地址:https://www.mxf.cn/2022code/images/logo.gif(了解)

相对路径(常用)
概念:
• 当前文件:当前的html网页
• 目标文件:要找到的图片
相对路径:从当前文件开始出发找目标文件的过程
相对路径分类:
• 同级目录
• 下级目录
• 上级目录

相对路径-同级目录
同级目录:当前文件和目标文件在同一目录中

类似于:我(当前文件)和你(目标文件)都在大厅(一个文件夹中)

• 生活中:两个人独处一室，我想找你，直接喊名字即可!
代码步骤:直接写目标文件的名字即可
• 方法一:
• 方法二:
VS Code快捷操作:直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可!
相对路径-下级目录

类似于:我在大厅，你累了去卧室休息了，我现在要找到你!

1. 先知道你去了哪一个房间 → 房间名:卧室
2. 进入这个房间 → 进入
3. 此时又独处一室 → 直接喊你名字
   
   代码步骤:
4. 先知道在哪个文件夹里面 → 文件夹名字
5. 进入这个文件夹 → /
6. 此时看到目标文件直接喊她 → 直接写目标文件名字
   VS Code快捷操作:直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可!

相对路径-上级目录

类似于:乾坤大挪移，我在卧室，你还在大厅，我现在要找到你!

1. 先要出卧室，来到大厅 → 出去
2. 此时又独处一室 → 直接喊你名字
   代码步骤:
3. 先出当前文件夹，到上一级目录 → …/
4. 此时看到目标文件直接喊她 → 直接写目标文件
   VS Code快捷操作:直接敲…/后，会自动提示上级目录下有文件，直接选择即可!

路径小结
相对路径有哪三种情况:

• 同级目录:直接写:目标文件名字!
• 下级目录:直接写:文件夹名/目标文件名字!
• 上级目录:直接下:…/目标文件名字!

VSCode中路径的快捷操作?

• 同级和下级目录:./ 之后选择即可
• 上级目录:…/ 之后选择即可

音频标签

音频标签的介绍
场景:在页面中插入音频
代码:

<audio src="./music.mp3" controls></audio>

常见属性:

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意点:

• 音频标签目前支持三种格式:MP3、Wav、Ogg

小结
要在网页中插入音频使用什么标签?

• audio标签

音频标签有哪些常见属性?

• src:音频路径
• controls:音频控件
• autoplay:自动播放
• loop:循环播放

视频标签

视频标签的介绍
场景:在页面中插入视频
代码:

<video src="./video.mp4" controls></video>

常见属性:

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop	循环播放

注意点:

• 视频标签目前支持三种格式:MP4 、WebM 、Ogg

小结
要在网页中插入视频使用什么标签?

• video标签

视频标签有哪些常见属性?

• src:视频路径
• controls:视频控件
• autoplay:自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放
• loop:循环播放

链接标签

链接标签的介绍

场景:点击之后，从一个页面跳转到另一个页面
称呼: a标签、超链接、锚链接
代码:

<a href="./目标网页.html"></a>

特点:

• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的href属性

属性名:href
属性值:点击之后跳转去哪一个网页(目标网页的路径)
• 外部链接:

<a href="https://www.baidu.com">百度一下</a>

• 内部链接:

<a href="./目标网页.html">目标网页</a>

链接标签的显示特点(了解)

显示特点:

• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色(清除浏览器历史记录可恢复蓝色)

链接标签的target属性

属性名:target
属性值:目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

<a href="https://www.baidu.com" target="_blank">百度一下</a>

链接标签小结

如果需要实现点击之后，从一个页面跳转到另一个页面，需要使用什么标签?

• 链接标签:a标签

通过什么属性可以设置a标签的到底跳转去哪里?

• href属性

通过什么属性可以设置a标签的跳转方式?取值有哪些?

• target属性
• 取值1:_self:在当前窗口中跳转
• 取值2:_blank:在新窗口中跳转

空链接(拓展补充)

代码:

<a href="#" >空链接</a>

功能:

• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置，用空链接占个位置

总结

1. 排版标签:

• 标题h系列、段落p、换行br、水平线hr

2. 文本格式化标签:

• 加粗strong、下划线ins、倾斜em、删除线del

3. 图片标签:

• img标签 + src属性 + alt属性 + title属性 + width属性 + height属性

4. 路径:

• 相对路径:同级目录 + 下级目录 + 上级目录

5. 音频标签、视频标签:

• audio标签、 video标签 + src属性 + controls属性

6. 链接标签:

• a标签 + href属性 + target属性