暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

第12讲:图片、音频、视频标签

何先振 2022-08-07
184

以下文章来源于Java何先振,责编行歌




图片标签

  • img标签介绍


图片标签用于向当前页面引入一个外部图片,使用 img标签 来引入外部图片,img标签 是一个自结束标签。


img 这种元素属于 替换元素(块和行内元素之间,具有两种元素的特点)


img标签 src 属性 指定的是外部图片的路径(路径规则和超链接是一样的)。


alt属性 指定的是图片的描述,这个描述默认情况不会显示,有些浏览器图片无法加载时才会显示。搜索引擎会根据 alt 中的内容来识别图片,如果不写 alt属性 则图片不会被搜索引擎所识别。





width  图片的宽度(单位是像素px)。

height  图片的高度(单位是像素px)。宽度和高度如果只修改了一个,则另外一个会等比例缩放。





注意:一般情况在PC端,不建议修改图片的大小,需要多大的图片就自己剪裁成多大。但是在移动端,经常需要对图片进行缩放(大图缩小)。



  • 图片格式介绍


  • jpeg(jpg):支持的颜色比较丰富,不支持透明动图,一般用来显示照片。


  • gif:支持的颜色比较少,支持简单透明,支持动图,一般颜色单一的图片、动图使用这种格式。


  • png:支持的颜色丰富,支持复杂透明,不支持动图,专为网页而生。


  • webp:这种格式是谷歌新推出的专门用来表示网页中图片的一种格式,它具有所有格式的优点,而且文件还特别小。缺点兼容性差。


  • base64:将图片使用base64进行编码。网上可以搜索base64编码的在线生成器,然后复制到src属性中。





使用图片格式的原则:效果一样,用小的。效果不一样,用好的。






音频和视频标签

audio标签 用来向页面中引入一个外部的音频文件,音频文件引入时,默认情况下不允许用户自己控制播放停止。


audio标签 的属性 controls:可以控制是否允许用户播放。加上这个属性就可以允许用户播放。




autoplay属性:音频文件是否自动播放。如果设置了 autoplay,则音乐在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音乐进行播放。


loop属性:控制音乐是否循环播放。




除了通过 src属性 来指定外部音频的路径外,还可以通过 source标签 来指定文件。也可以通过 embed标签 ,来设置音频。





使用 video 来向网页中引入一个视频,使用方式和 audio标签 基本上一样。






一般情况下,我们不会把视频放到软件的服务器中,而是放到专门的 视频托管服务器 中,因为看视频必须要服务器网络好,传输效率高,如果没有资金租用 视频托管服务器 ,可以发布到腾讯视频,然后引入链接。




iframe标签 用于向当前页面中引入一个其他页面,src 指定要引入的网页路径,iframborder 指定内联框架的 边框。








以上就是本期内容,点击下方公众号,学习更多软件开发知识



文章转载自何先振,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论