HTML网页开发,如果只是文字的堆叠,那么就会略显无聊。若是引入多媒体,网页才会多姿多彩。因此有必要了解多媒体的嵌入方式。
多媒体,一般指的是图片、音频和视频等资源。
图片
嵌入图片最基本的方式就是<img>。如下所示:
<img src="images/showimage.jpg" alt="这是一张用于显示的图片" />
src属性代表图片在站点的相对路径,也可以使用绝对路径,但不安全,有版权风险。
alt属性代表因为一些原因(比如相对路径不对)找不到图片,而使用默认文字替代。图片正常显示,是不会显示这段文字的。比如我故意写错路径,打开网页会显示:
大家可以试试,新建一个扩展名为.html的文件,将上述HTML代码粘贴进去,双击用默认浏览器打开(将src中的路径替换为本地随便一张图片的路径)。显示如下:
<img>标签的属性还有几个常用的,显示如下:
width/height:图片资源的宽/高。填写宽高会让浏览器提前缓存出宽高位置,不会因为网络的快慢影响用户的体验。至于宽高大小,建议使用图片默认宽高。否则会出现失真、拉伸等现象,影响用户体验。
另外如果需要使用文字来解释图片,那么需要用到<figure>和<figcaption>。如下所示:
<figure>
<img
src="http://skycreator.top/wp-content/uploads/2024/07/image-5.png"
alt="这是我的测试图片"
width="296"
height="296" />
<figcaption>
一名强悍的女子
</figcaption>
</figure>
将<img>套在<figure>内部,将要解释的文字放在<figcaption>内并与<img>并列即可。上面的示例中,我将<figcaption>放在了<img>下方,你可以试试放在上方,感受一下。
音频
嵌入音频的标签是<audio>。如下所示:
<audio controls>
<source src="http://skycreator.top/wp-content/uploads/2024/07/mp3.mp3" type="audio/mp3" />
</audio>
其中controls是控制属性,允许用户控制音频的播放。
<source>是表示音频信息的。src属性是音频的具体相对或绝对路径,type属性说明音频的格式。
视频
嵌入视频的标签是<video>,属性和<audio>差不多。如下所示:
<video controls
width="720"
height="480">
<source src="http://skycreator.top/wp-content/uploads/2024/07/rabbit.webm" type="video/webm" />
</video>
视频不同于音频,它和图片一样是有宽高的,因此可以设置宽高属性。
以上就是HTML自媒体的嵌入方式。