1.4 多媒体与语义化标签

一、图片与超链接标签

1.图片标签

（1）<img>标签：<img>标签用来在网页中插入图片

<img src=“images/gugong.jpg>”

img 是images(图片)的缩写

src是source(来源)的缩写

图片的存储目录和完整的文件名

（2）注意点

①图片必须要复制到项目文件夹中，一般将图片保存到项目文家中的images子文件中

②images/表示images文件夹

③后缀名一定要写

④图片路径必须正确 <img src=“images/gugong.jpg>”

⑤图片只是被引入到了网页（图片本质上没有被插入到网页中，只是被引入到了网页中，所以将来要将图片也一起上传到服务器上，将图片复制到项目文件中，即可整体上传）

（3）<img>标签的属性

①src属性

②alt属性：alt属性是alternate"替代品"的缩写，它是对图像的文本描述，不是强制性的

​ 如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本

​ 供视力不方便的朋友使用的网页朗读器，也会朗读alt中的文本

③width属性、height属性分别设置宽度和高度，单位是像素，但是不需要写单位；如果省略其中一个属性，则表示按原比例缩放图片

（3）网页上支持的图片格式

格式 说明

.bmp wimdows画图软件默认保存的格式、位图

.gif 支持动画(比如表情包)

.jpeg（jpg） 有损压缩图片,用于照片

.png 便携式网络图像，用于logo、背景图像等，支持透明和半透明

.svg 矢量图片

.webp 最新的压缩算法非常优秀的图片格式

（4）相对路径

相对路径：描述从网页出发，如何找到图片。比如“前面路口左转，直走100米后右转就到了”

<images/gugong.jpg&