day005:HTML的图片标签

一：图片标签：<img src=" " alt=" " width=" " height=" " />

其中src属性值是图片的地址，alt属性值是图片的说明文字（比如图片丢失或加载错误时，会显示alt的属性值，也就是文本所写的内容）,width的属性值是图片的宽度，heigth的属性值是图片的高度。

---

二：举例。

操作步骤：

1.首先在WEBROOT下创建一个IMGS文档：右击webroot——>new——>Folder——>取名“imgs”。

2.右击imgs——>import——>双击 File System——>Browse 选择需要添加的图片即可。

3.在创建好的html文件里写入相应的图片标签代码，例如：<img src="../imgs/图片地址 " alt="不好意思，图片丢失了！" />

注：（1）图片地址的获取方法：左击imgs刚刚添加的图片，ctrl+c复制，在“图片地址“处ctrl+v复制一下即可。例如：<img src="../imgs/IMG_20210709_104223.jpg" alt="不好意思，图片遗失了" />  （2）src="../imgs/"中的"../imgs/"是上级目录的意思，涉及到相对路径和绝对路径的知识点。

（相对路径与绝对路径的图例详解：）

 

代码如下：

4.此时图片标签代码以完成，右击所创建的html文件，点击Open in explore 即可查看显示结果。

显示结果如下：

 5.当图片丢失或图片地址不正确时，会显示alt的属性值，即“不好意思，图片遗失了！”，效果如下：

---

三： 因为标签是可以嵌套使用的，所以我们可以加上<marquee> </marquee>标签来达到类似于弹幕的滚动图片的效果（滚动速度可以根据属性值设置，可百度查其属性）。例如：

 此时在浏览器上所显示的是类似于弹幕的滚动的图片。