HTML5&CSS3基础：HTML的图片、音频、视频（3）

本文链接：https://blog.youkuaiyun.com/weixin_45336315/article/details/110823499

本文介绍了HTML中图片、音频和视频的基本格式及使用方法。包括不同格式的特点、常用的标签及其属性，并提供了具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该篇文章对图片、音频、视频的格式和常用标签使用作了个简单总结，主要还是说明这三者在html中如何使用。

文章目录

历篇文章目录
第四节：HTML的图片、音频、视频
前言
一、图片
二、音频
三、视频
总结

历篇文章目录

点击访问历篇文章

第四节：HTML的图片、音频、视频

前言

从思维导图可以大概知道总结的知识内容，思维导图还有分支没展开，有需要的可自行下载。
在这里插入图片描述
网盘链接：https://pan.baidu.com/s/1LwUeEadq7cYORTyoFuFQcg
提取码：2t0a

一、图片

图片的格式很多，但总体上可以分为点阵图和矢量图两大类，我们常用PNG、JPG等格式都是点阵图形，而SWF、CDR、AI等格式的图形属于矢量图形。矢量图类似抖音小视频见到的由许多个名字构成图像，点阵图就是由一个个像素构成的。

1.格式

这里介绍在制作网页时常见的几种格式的图片

（1）jpeg(jpg)
支持颜色比较多，不支持透明效果，不支持动图。

（2）gif
例如与人聊天常发的表情包
支持的颜色比较少，支持简单透明，支持动图(适用颜色单一的图片，动图)。

（3）png
支持的颜色比较丰富，支持复杂透明，不支持动图；
颜色丰富，复杂透明图片(专为网页而生)。

（4）webp
这种格式的图片是谷歌新推出的，专门用来表示网页图片的一种格式。

具备其它几种图片格式的所有优点，而且该格式图片还特别小；
缺点：兼容性不好(旧的浏览器不适用)

（5）使用原则
效果一样，用较小图片，
效果不一样，用显示效果好的。

（6）base64(就是加密，类似磁力链接)
可以直接在网上搜索图片base64在线转换。

图片使用base64进行编码，这样可以将图片转换为字符，通过字符形式来引入图片。

2.标签

html中的内容都是通过相应的标签来渲染使用的，图片也不例外。

标记组成：
<img>图片标签
图片标记是个单标签，用于向当前页面引入一个外部图片。

标记属性：
（1）属性：src
用来表示图片的路径
         属性值：
         图片的相对路径；
         图片的绝对路径；
         也可以是部署在网上服务器的图片网址路径(运行网页时，图片加载要联网)。

（2）属性：alt
alt属性值是图片的描述，这个描述在默认情况下不会显示，而是浏览器在显示不了图片时对图片的文字描述。

（3）属性：width与height
设置图片在网页中显示的大小，width是图片的宽，height是图片的高。

3.示例

代码：

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片示例</title>
</head>
<body>
     <!-- jpg格式图片 -->
     <img src="./images/timg.jpg" width="200px" height="200px" alt="">

     <!-- gif格式图片 -->
     <img src="./images/zly.gif" width="200px" height="200px" alt="">

     <!-- png格式图片 -->
     <img src="./images/dm.png" width="200px" height="200px" alt="">

     <!-- webp格式图片 -->
     <img src="./images/123.webp" width="200px" height="200px" alt="">

     <!-- 图片描述 -->
     <img src="#" width="200px" height="200px" alt="空图片">
</body>
</html>

效果：
img标记一般被看作行内元素，但是img标记又具有块元素的特点，所以可以称为替换元素(介于行内元素与块元素之间，具有两种元素的特点)，也就是引入外部图片替换了img标记自身
在这里插入图片描述
注意：
（1）一般情况在PC端不建议修改图片大小，需要多大图片就裁多大，但在移动端，经常需要对图片进行缩放(大图缩小)；
（2）较小的图注意其宽高的设置，避免造成图片失真，就是小图放大会模糊；
（3）在网速较慢时一些内容会更多加载，因为浏览器是先加载代码，再发送请求加载外部资源，就导致有个先后顺序。

二、音频

1.格式

（1）MP3格式
MP3是一种音频压缩技术，它被设计用来大幅度地降低音频数据量。
优点：压缩后占用空间小，适用于移动设备的存储和使用。

（2）WAV格式
         是微软公司专门为Windows开发的一种标准数字音频文件。
         优点：能记录各种单声道或立体声的声音信息，并能保证声音不失真。
         缺点：就是它所占用的磁盘空间太大，因此多用于存储简短的声音片段。

（3）OGG格式
Ogg是一种音频压缩格式，类似于MP3等的音乐格式.
优点：Ogg是完全免费、开放和没有专利限制的，Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。

2.标签

标记组成：
<audio></audio>音频标签
<audio>标记用来向页面引入一个外部的音频文件，音频文件引入时，默认情况下不允许用户自己控制播放或停止。

标记属性：
（1）属性：controls
没有属性值的属性，如果没有设置该属性的话，不会显示用户控件
作用：是否允许用户控制播放

（2）属性：autoplay
同样没有属性值的属性
作用：音频文件是否自动播放
如果设置了autoplay，则音乐在打开页面时会自动播放。但目前大部分浏览器都不会对音乐进行自动播放，避免用户不好体验，而是当用户点击过一次播放后，在进入网站就会自动播放了

（3）属性：loop
作用：音乐是否循环播放

3.示例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频</title>
</head>
<body>
    <!-- controls、autoplay、loop没有属性值，直接写即可 -->
    <audio src="./music/HITA _ 小曲儿 - 丹青客.mp3" controls  loop></audio>

    <!-- 除了通过src来指定外部文件的路径外，还可以通过source标记来指定外部文件路径 -->
    <audio controls>
        对不起，您的浏览器不支持播放音频！请升级浏览器！
        <source src="./music/银临 _ 云の泣 - 锦鲤抄.mp3">
        <source src="./music/银临 _ 云の泣 - 锦鲤抄.ogg">  
    </audio>

</body>
</html>

效果：
在这里插入图片描述
注意：
（1）从上面代码可以看到<source>标记引用了同一首音乐的两种格式版本，引用的两种格式版本音乐并不会同时使用，而是会先使用前面格式版本，前面的不行再使用后面的格式版本，这样就解决了浏览器对不同格式音乐的兼容问题，如果引入的音乐格式或则audio标记无效，则显示那段文字。

（2）如果要适用老版本浏览器也可以使用下面的一种标记写法，这种写法需要设置宽高来调节控件大小，如果正常显示也可以不设置宽高。

<embed src="./music/银临 _ 云の泣 - 锦鲤抄.mp3" type="audio/mp3" width="200px" height="200px">

三、视频

1.格式

（1）mp4
mp4是一套用于音频、视频信息的压缩编码标准。

（2）webm
WebM由Google提出，是一个开放、免费的媒体文件格式。

2.标签

标签组成：
视频的引入使用方式与音频基本一致

<video></video>视频标记
<video>标记用来向页面引入一个外部的视频文件，视频文件引入时，默认情况下不允许用户自己控制播放或停止。

标签属性：

（1）属性：controls
没有属性值的属性，如果没有设置该属性的话，不会显示用户控件
作用：是否允许用户控制播放

（2）属性：autoplay
同样没有属性值的属性
作用：视频文件是否自动播放
如果设置了autoplay，则音乐在打开页面时会自动播放。但目前大部分浏览器都不会对音乐进行自动播放，避免用户不好体验，而是当用户点击过一次播放后，在进入网站就会自动播放了

（3）属性：loop
作用：视频是否循环播放

3示例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频</title>
</head>
<body>
    <!-- controls、autoplay、loop没有属性值，直接写即可 -->
    <!-- <vedio src="./video/胡歌-白冰-美丽的神话 (《神话》电视剧片尾曲)(标清).mp4" controls></vedio> -->

    <!-- 除了通过src来指定外部文件的路径外，还可以通过source标记来指定外部文件路径 -->
    
    <video controls width="250">

        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
                type="video/webm">
    
        <source src="./video/胡歌-白冰-美丽的神话 (《神话》电视剧片尾曲)(标清).mp4"
                type="video/mp4">
    
        Sorry, your browser doesn't support embedded videos.
    </video>

    <!-- IE浏览器可访问,谷歌不适用 -->
    <embed src="./video/胡歌-白冰-美丽的神话 (《神话》电视剧片尾曲)(标清).mp4" type="video/mp4">
</body>
</html>

效果：

注意：
（1）使用source标记引入视频时，记得给source添加type属性，否则可能会出现视频无法播放或者不显示控件的情况。

总结

1.上面的实现效果都是通过谷歌浏览器进行渲染实现的；
2.音频、视频一般不会放入服务器中，而是找第三方托管音频、视频，或者把视频上传到其它视频网站中(例腾讯、爱奇艺、哔哩哔哩等)；
3.以上就是html中的图片、音频、视频的格式和常用标记的总结，如若上面有错误，还望大家不吝赐教! 同时欢迎大家点赞收藏！