大家好，我是 哈士奇 ，一位工作了十年的"技术混子"， 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。

💬 人生格言：优于别人,并不高贵,真正的高贵应该是优于过去的自己。💬

📫 如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀

🔥 如果感觉博主的文章还不错的话，还请 👍 关注、点赞、收藏三连支持 👍 一下博主哦

🏆 CSDN博客专家认证、新星计划第三季全栈赛道MVP 、华为云享专家、阿里云专家博主 🏆

专栏系列（点击解锁）	学习路线（点击解锁）	知识定位
🔥Python全栈白皮书🔥	零基础入门篇	以浅显易懂的方式轻松入门，让你彻底爱上Python的魅力。
	语法进阶篇	主要围绕多线程编程、正则表达式学习、含贴近实战的项目练习 。
	自动化办公篇	实现日常办公软件的自动化操作，节省时间、提高办公效率。
	自动化测试实战篇	从实战的角度出发，先人一步，快速转型测试开发工程师。
	数据库开发实战篇	掌握关系型与非关系数据库知识，提升数据库实战开发能力。
	爬虫入门与实战	更新中
	数据分析篇	更新中
	前端入门+flask 全栈篇	更新中
	django+vue全栈篇	更新中
	拓展-人工智能入门	更新中
🔥全域运营实战白宝书🔥	运营角色认知篇	初识运营，明晰运营的学习路径
	高转化文案速成篇	三种文案形式，抓住特点才能下笔如有神。
	策划活动与执行篇	更新中
	新媒体运营篇	更新中
	社区运营篇	更新中
	私域社群运营篇	更新中
	运营数据分析篇	更新中
	低成本渠道推广篇	更新中
网络安全之路	踩坑篇	记录学习及演练过程中遇到的坑，便于后来居上者
	网安知识扫盲篇	三天打鱼，不深入了解原理，只会让你成为脚本小子。
	vulhub靶场漏洞复现	让漏洞复现变得简单，让安全研究者更加专注于漏洞原理本身。
	shell编程篇	不涉及linux基础，最终案例会偏向于安全加固方向。 [待完结]
	WEB漏洞攻防篇	2021年9月3日停止更新，转战先知社区等安全社区及小密圈
	渗透工具使用集锦	2021年9月3日停止更新，转战先知社区等安全社区及小密圈
点点点工程师	测试神器 - Charles	软件测试数据包抓包分析神器
	测试神器 - Fiddler	一文学会 fiddle ，学不会倒立吃翔，稀得！
	测试神器 - Jmeter	不仅是性能测试神器，更可用于搭建轻量级接口自动化测试框架。
	RobotFrameWork	Python实现的自动化测试利器，该篇章仅介绍UI自动化部分。
	Java实现UI自动化	文档写于2016年，Java实现的UI自动化，仍有借鉴意义。
	MonkeyRunner	该工具目前的应用场景已不多，文档已删，为了排版好看才留着。

前面我们学习了标题标签、段落标签、列表标签等，都是在网页上插入文本格式的内容，那么网页上常见的图片、视频音频、超级链接等是怎么插入的呢？这就用到了多媒体标签，多媒体标签包括图片标签、超级链接、音频和视频。

⭐️ 图片标签

接下来，就开启 “多媒体与语义化标签” 的学习之路吧，从 “图片标签” 开始学习!

🌟 标签

图片标签就是<img>标签，img是image(图片)的缩写。用来在网页中插入图片。

我们先来看一个例子：

浏览效果如下：

在使用<img >标签时，需要注意，我们的图片必须要复制到项目文件夹中，拿上面的例子来说，这个 “哈士奇” 的图片存放在了 first_porject\images 下面，与我的当前文件（图片标签.html）属于同一个项目文件夹，这样我们才能读取到这张图片。

PS：在实际项目中，网站用到的图片一般都会集中存放到一个images或img文件夹中，方便管理使用。比如下面这个路径：

<img src="images/husky.png">

• 图片插入网页的本质：

• 图片本质上没有被插入网页中，只是被引入到了网页中。所以我们如果要将图片标签的代码上传到服务器上时，需要把src里的图片也一起上传到服务器，否则服务器找不到src路径对应的图片也就无法显示在网页中了。

🌟 标签的 alt 属性

alt属性是alternate(替代品)的缩写，它是对图像的文本描述，不是强制性的。

<img src="images/husky.png" alt="TFS_CLUB">

• alt属性的作用：
• 当网页由于某种原因(如：网速太慢或者图片不小心被删除or无法加载图像时，浏览器会在页面上显示alt属性中的文本。
• 还有一个作用，如果浏览网页的人需要网页朗读器朗读网页，会朗读alt中的文本。

<img> 标签的 width、height属性

想要设置网页图片的大小时，就需要用到width、height属性。分别设置宽度和高度，单位是像素，注意必须写单位。

width和height不需要两个一起设置，也可以只设置一个。比如只设置宽度width，height则会按图片的原始比例自动缩放。

🌟 网页上支持的图片格式

格式	描述
.bmp	windows画图软件默认保存的格式，位图
.gif	支持动图，如表情包
.jpeg(.jpg)	有损压缩图片，用于照片
.png	便携式网络图像，可以又损也可以无损。用于logo、背景图形等，支持透明和半透明
.svg	矢量图片
.webp	最新的压缩算法非常优秀的图片格式

大致了解一下这几种格式的特点就可以，我们最常用的就是 .jpg 和 .png 格式。

🌟 相对路径&绝对路径

相对路径：描述从当前文件出发，找到图片的路径。相对路径如果需要回退层级，使用"../"的写法

绝对路径：描述图片的精准地址。生活中，我们的收货地址就是一个绝对地址。

下面举个例子来帮助大家理解：

代码示例：

<!--相对路径：-->
<img src="../images/husky_1.png" alt="TFS_CLUB">
<!--绝对路径：找了百度首页的图片的路径举例-->
<img src="https://www.yuucn.com/wp-content/uploads/2023/04/1682330425-2d94b2ccde14b5e.png">

浏览效果如下：