# 图片音频视频标签
# 图像 img 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body></body>
<img src="./img/timg.jpg" alt="加载不成功" width="240" height="160"/>
</body>
</html>
| 属性 | 说明 |
|---|---|
| src | 图片源地址 |
| alt | 加载不成功显示的内容 |
| title | 鼠标悬停在图片上显示的内容 |
| width | 图片的宽度 |
| height | 图片的高度 |
# 视频 video 元素
带控制器的视频播放器
<video src="./movie.mp4" controls></video>
如果考虑到不同浏览器对视频文件的兼容性
<video width="320" height="240" controls="controls">
<source src="./movie.ogg" type="video/ogg" />
<source src="./movie.mp4" type="video/mp4" />
<object data="./movie.mp4" width="320" height="240">
<embed src="./movie.swf" width="320" height="240">
</object>
<p>Your browser does not support the video tag.</p>
</video>
标签常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| src | url | 要播放的视频的 URL |
| width | pixels | 设置视频播放器的宽度。 |
| height | pixels | 设置视频播放器的高度。 |
注：设置自动播放autoplay属性后呢，一进来页面不会自动播放，因为浏览器做了限制，为了用户体验，怕用户以一打开页面就发出很大的声音，吓到用户。
如果还是想要自动播放呢，可以使用静音播放，就是使用muted这个属性
video 标签支持格式：
- MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器
- WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
- Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器
# 音频 audio 元素
带控制器的音频播放器
<audio src="./song.ogg" controls="controls"></audio>
如果考虑到不同浏览器对视频文件的兼容性
<audio width="320" height="240" controls="controls">
<source src="./song.ogg" type="audio/ogg" />
<source src="./song.mp3" type="audio/mpeg" />
<p>Your browser does not support the audio tag.</p>
</audio>
标签常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的 URL |
| muted | muted | 音频输出应该被静音。 |
# 图像热区 map 元素(扩展)
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
<area> 元素永远嵌套在 <map> 元素内部。<area> 元素可定义图像映射中的区域。
示例代码如下：
<img src="./img/onepiec.jpg" width="800px" title="海贼王" usemap="#map" />
<map id="map" name="map">
<area id="rect" shape="rect" coords="338,147,458,597" href="./lufei.png" />
<area id="circle" shape="circle" coords="225,75,75" href="./个人介绍.html" target="_blank" />
</map>
图像热区就是能够通过点击图片的某一部分跳转。
img的usemap属性值跟map的id或name值一样，并在前面加上'#'
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
定义图像映射中的区域
- href: 此区域的目标url
- coords：点击区域的坐标
- shape：定义区域的形状。
- shape="rect" coords="x1 y1 x2 y2" 矩形
- shape="circle" coords="x y radius" 圆形
- shape="poly" coords="x1 y1 x2 y2 x3 y3" 多边形，最后一个坐标不需要和第一个坐标一样，浏览器会自动闭合。
注意:
map标签里面写area标签，记得img标签的usemap属性值该写什么
area(区域)标签要有形状(shape), 有坐标(coords), 链接地址(href)
页面完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像热区</title>
<style>
body{
padding: 0;
margin: 0;
}
#rect{
display: inline-block;
position: absolute;
left: 338px;
top: 147px;
width: 120px;
height: 450px;
border: 1px solid #f00;
z-index: 1;
}
#circle{
display: inline-block;
position: absolute;
left: 150px;
top: 0;
width: 150px;
height: 150px;
border: 1px solid #f00;
border-radius: 50%;
z-index: 1;
}
</style>
</head>
<body>
<img src="./img/onepiec.jpg" width="800px" title="海贼王" usemap="#map" />
<map id="map" name="map">
<area id="rect" shape="rect" coords="338,147,458,597" href="./lufei.png" />
<area id="circle" shape="circle" coords="225,75,75" href="./个人介绍.html" target="_blank" />
</map>
</body>
</html>
图片也给大家，大家保存到自己电脑来学习使用
