摘要:在这篇文章,你将会看到在负责网页结构的HTML中如何插入图片和视频。非常适合初学者!大鹏一日同风起,扶摇直上九万里!一起学习,一起进步!
1.HTML中的图片
HTML5的
代码如下:
alt="《肖申克的救赎》海报"
height="300">
效果图如下:
alt="《肖申克的救赎》海报"
height="300">
小结:如果图像对您的内容有意义,则应该使用HTML图像。若纯粹是装饰,则应该使用CSS背景图片,能更好的控制图片和设置图片的位置。
2.HTML中的视频和音频
先看代码:
你的浏览器不支持HTML5视频,可点击此链接观看
效果如下(前提是你需要有该视频的资源方可打开视频):
你的浏览器不支持HTML5视频,可点击此链接观看
其中,src指向你要嵌入到网页中的视频资源;controls可控制回放以及音量功能。 标签内的内容叫后备内容,当浏览器不支持的时候,就会显示这段内容。
接下来,
我们把src从 中移除,把它放在几个单独的中,这样浏览器会先检查,并且播放第一个与其自身相匹配的媒体,你的视频应当包括webm和mp4两种格式,目前这两种格式已经足够支持大多数平台和浏览器。中的 type属性可选,建议加上,它包含了视频文件的MIME types,同时会跳过那些不支持的格式。若你不加的话,浏览器会尝试加载每一个文件,直到找到一个正确的格式,这样会消耗大量的时间和资源。
你的浏览器不支持HTML5视频,可点击此链接观看
注意:用法几乎与 完全一样。此处就不赘述了。再来看一个非常有意义的标签 ,它可以给听不懂音频的/不方便播放音频的/听觉有障碍的人提供字幕。当然这就需要用到一个WebVTT文本格式,一个典型的WebVTT文件如下(这种文件的具体写法可以在查查相关资料,网上很多博客都有写到相关写法):WEBVTT
1
00:00:22.230 --> 00:00:24.606
第一段字幕
2
00:00:30.739 --> 00:00:34.074
第二段
...要以.vtt后缀名保存文件;
链接.vtt文件,需放在或中,之后,用kind指明是哪种类型(eg:subtitles/captions/descriptions),用srclang告诉浏览器你使用的语言。
你的浏览器不支持HTML5视频,可点击此链接观看
你的浏览器不支持HTML5视频,可点击此链接观看
以上均是参考最权威的MDN web docs,总结出来的比较重要的知识点,与君共勉。不完善之处,评论区欢迎您!