第四单元：丰富的网页媒体

最新推荐文章于 2024-09-21 15:27:16 发布

HelloAkr

最新推荐文章于 2024-09-21 15:27:16 发布

阅读量193

点赞数

分类专栏： html 文章标签： css html html5 javascript css3

本文链接：https://blog.csdn.net/wanshi1405088661qq/article/details/105300455

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第四单元：丰富的网页媒体

看看字总会烦的丰富的媒体更具有表达性，更好的阅读体验和美的享受，所以我们这一章学习一下如果在html中插入图片与视频，当然也只需要插入几个标签，就可以完成相应的效果。

常见的图片类型

特点	Gif	Jpeg	Png	Svg	Webp
透明性	布尔透明类型，它可以是全透明，可以是不透明，它并没有半透明（alpha透明）	不支持透明	Png是完全支持alpha透明的（透明，半透明，不透明）
动画	支持动画	不支持动画	不支持动画
损耗性	Gif是一种无损耗的图像格式(LZW压缩算法进行编码)	损耗性，有损压缩格式，因此在编辑过程一般用png作为过渡格式	无损的	无损的、矢量图	同时支持有损和无损压缩的、使用直接色的、点阵图。
颜色	Gif只能显示 256种颜色,	可以显示全部颜色,全色显示	1.PNG8 256色PNG的别名2.PNG24全色PNG的别名3.PNG32全色PNG的别名
适合场景	不适合用来做照片，但它适合对颜色要求不高的图形（比如说图标，图表等）	最适web上面的摄影图片和数字照相机中		非常适合用来绘制企业Logo、Icon等
图片大小	得益于数据的压缩，GIF格式的图片文件大小远远小于其他格式的图片。				相同质量的图片，WebP具有更小的文件体积
分类			大致可以分为256色的png和全色的png，可以用256色的png代替gif(因为在相同的图片效果下，PNG-8具有更小的文件体积)，用全色的png24(体积比jpeg大的多)代替jpeg

如上这些常见的图片文件类型我已经打包成表格你们可以去大概了解，根据需求来选择使用哪一种文件类型。

2.图像映射（图像热点）

图像映射就是指我们通过一个链接可以由这个链接到的图像，显示到网页上，支持：矩形、圆形、多边形。使用img标记，map标记以及一个或多个area标记

img标记用来显示图片
map标签标识所有热点的容器，这个标签的name和id标签，两者值是一致的。
将img标签里面usemap属性值设置为map的name指。
在map标签中嵌套area标签，使用area标签shape属性和cooras属性指定热点在图片上的形状和位置等等各种大小。

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
	<map name="planetmap" id="planetmap" >
  	<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  	<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  	<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
	</map>
</body>
</html>

3.网页上的视频和音频

为了更好的去体现你想要呈现的信息表达，就是要使用听不止静态的看，就是使用视频和音频

1.音频

音频我们使用的标签为aduio标签，我们从一开始就默认我们所讲述的HTML5标准，所以这个我们讲到这个标签时我要强调一点就是这个标签在HTML4标准中是非法的，但在现如今的浏览器都全部支持。

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<audio src="song.ogg" controls="controls"</audio>
</body>
</html>

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

2.视频

在如今我们最新的HTML5标准中，我们是用video标签来显示我们视频，这是如今支持的video标签支持的视频格式

浏览器	Internet Explorer	Edge	Chrome	Firefox	Safari	Opera
MP4	√	√	√	√	√	√
WebM		√	√	√		√
Ogg			√	√		√

实例

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<video src="movie.ogg" width="320" height="240" controls="controls">
</video>
</body>
</html>

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。
height	pixels	设置视频播放器的高度。