【博学谷学习记录】超强总结，用心分享|前端开发图片属性总结

       成功没有捷径，只有靠自己的努力和付出才能取得胜利。在学习的路程上，有着许多困难和挫折，有人没有勇气度过，从而浑浑噩噩度过一生，有人则披荆斩棘，尝到了胜利的果实。

今天来分享一下HTML中图片的属性，

如图所示：

我们在书写时在body部分填写内容，

 

图片的路径有两种：绝对路径和相对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如：

盘符开头：D:\day01\images\1.jpg

完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif

相对路径：从当前文件开始出发找目标文件的过程

相对路径分类：同级目录；下级目录；上级目录；

同级目录

书写示例：<img src="目标图片.gif">、<img src="./目标图片.gif">

下级目录

音频标签: audio标签    视频·标签  video标签

属性同下

• src：视频路径

• controls：视频控件

• autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放

• loop：循环播放

书写示例：<img src="image/目标图片.gif">

上级目录

书写示例：<img src="../目标图片.gif">

附加一些关于音频和视频的知识点：

在网页中视频和音频必不可少，他们的存在丰富了我们的网站内容，正确的应用还增加了用户体验，是网页的好朋友。

音频标签: audio标签    视频·标签  video标签

属性同下

• src：视频路径

• controls：视频控件

• autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放

• loop：循环播放

以上就是关于图片相关属性的内容了，我们应该做到即时复习，巩固学过的知识，记忆得更牢固。也可以试试为自己制定一个学习计划，但不要天马行空，纸上谈兵，到头来还是竹篮打水一场空，学习方法因人而异，各不相同，愿同学们找到适合自己的学习方法，在学习生涯中绘上精彩的一笔!