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

文章目录

历篇文章目录
第四节：HTML的图片、音频、视频
前言
一、图片
- 1.格式
- 2.标签
- 3.示例
二、音频
- 1.格式
- 2.标签
- 3.示例
三、视频
- 1.格式
- 2.标签
- 3示例
总结

历篇文章目录

点击访问历篇文章

第四节：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中的图片、音频、视频的格式和常用标记的总结，如若上面有错误，还望大家不吝赐教! 同时欢迎大家点赞收藏！

HTML5CSS3基础：HTML的图片、音频、视频（3）相关推荐

day10 多媒体(文字图片音频视频)
1计算机表示图形的几种方式 bmp:以高质量保存用于计算机 jpg:以良好的质量保存用于计算机或者网络 png:以高质量保存图片大小的计算公式:图片的总像素*每个像素的大小 ...
CTF-MISC文件隐写总结(图片,音频,视频,压缩包等文件)
前置知识 file 命令根据文件头,识别文件类型,如果文件头前边有数据就识别不出来了 strings 输出文件中的可打印字符可以发现一些提示信息或者特殊编码的信息可以配合-o参数获取所有的ASCI ...
图片/音频/视频/文字相关软件
图像方面图片方面的软件,分类一是图片查看器, 二是图片管理器, 三是图片编辑器, 四是图片截图工具 1.格式工厂 2.画图 3.PS 4.iconlover 5.FastStone Image V ...
mysql存储音频视频文件_如何在mysql 或者其他的数据库中存放图片音频视频
root@ytt:/var/lib/mysql-files# for i in `seq 1 100`; do cp 微信图片_20190711095019.jpg "$i".jp ...
浏览器下载图片前端下载图片/音频/视频/PDF等所有浏览器可以解析的文件格式；解决通过window.open打开链接后是新标签页面而不是下载文件；
拷贝走放上文件路径直接使用(存在跨域的处理下跨域问题即可) this.$axios.get('要下载的文件路径', { responseType: 'blob'}).then(res=>{ ...
Java使用JDBC向数据库存取二进制数据(如图片，视频，音频等)
前言上次写了一个用JDBC向数据库存取小说等大文本的案例用到了PreparedStatement和io流的相关知识.Java使用JDBC向数据库存取大文本(比如小说等)https://blog.cs ...
计算机硬件音频,浅析计算机硬件基础第9章(音频和视频设备).ppt
浅析计算机硬件基础第9章(音频和视频设备) * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 第9章音频与视频设备音频适配器音 ...
html照片怎么用作背景音乐,怎么把图片做成视频加字幕加音频怎么把图片做成视频有背景音乐和文字说明...
在现如今来说,把图片制作成视频已经不是什么新鲜事了,但却是个经久不衰的永恒,因为制作好了的视频有很好的纪念价值,这一意义就足矣.这个把图片成视频也还是需要花些心思.花些精力才能做得效果好的哦.下面一起 ...
搭建Nginx+Vsftp图片、视频、音频服务器
所需工具包地址:http://download.csdn.net/detail/qierkang/9659233 所需环境: # 安装vsftpd yum -y install vsftpd # 启动 ...
用计算机进行运算视频,小新计算器，即是好用的计算器，又是私密图片、视频、音频保险箱...
大家好,最近发现一款完美隐藏私密文件的APP,有了它顿时感觉神清气爽,再也不担心私密的东西没地方存放了,那种看了就得闪有特别不舍得感觉终于不再有了.同时它还是一个很好用的计算器,基本实现了小明计算器的 ...

HTML5CSS3基础：HTML的图片、音频、视频（3）

文章目录

历篇文章目录

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

前言

一、图片

1.格式

2.标签

3.示例

二、音频

1.格式

2.标签

3.示例

三、视频

1.格式

2.标签

3示例

总结

HTML5CSS3基础：HTML的图片、音频、视频（3）相关推荐

最新文章

热门文章