Web前端5：img元素以及和map元素联用、和figure元素联用；多媒体元素

1. img元素的使用

img元素是一个空元素，它主要使用两个属性。
①src。该属性是必须有的，表示你想嵌入的图片的文件路径，相对路径或绝对路径都可以。
②alt。当图片文件被删除、路径不正确或者网不好等原因，导致图片加载不出来，就会显示一个“图裂”图标 + alt的内容。
正常情况：

<img src="./img/Yuki.jpg" alt="图裂">

图裂情况：

<img src="./img/不存在的图片.jpg" alt="图裂">

2. 和a元素联用

<a href="http://www.baidu.com">
    <img src="./img/baidu.png">
</a

可以看到当鼠标指向baidu.png这张图片时，变为了小手形状，表示存在超链接，点击就会跳转到百度了。

3. 和map元素联用

map元素与area元素一起定义一个可点击的超链接区域。这个区域可以是很多形状。img元素和map元素、area元素的联用可以实现点击图片上的某些区域跳转到另外指定的超链接这个功能。
比如，这里有一张太阳系的图片：

现在我们想实现如下功能：点击“木星”本身以及“木星”汉字都跳转到木星的百度百科，点击图片的其他位置跳转到银河系的百度百科。
这就要使用到map了。
map的shape属性表示区域形状，coords表示坐标。
shape取值circle表示圆形，取值rect表示矩形。
circle的coords属性值分别是“圆心x，圆心y，半径”。
rect的coords属性值分别是“矩形左上角x，矩形左上角y，矩形右下角x，矩形右下角y”。
坐标系规定如图，左上角是坐标原点，向右是x轴正方向，向下是y轴正方向，单位是像素：

推荐使用mspaint进行坐标测量。使用QQ截图也可以，但在那之前你得检查一下你的电脑的屏幕显示是不是100%，一般的笔记本都推荐设置为了125%，导致测量得不对。

<a href="https://baike.baidu.com/item/%E9%93%B6%E6%B2%B3%E7%B3%BB/189795?fr=aladdin" target="_blank" title="银河系">
    <img usemap="#solarMap" src="./img/galaxy.png" >
</a>
<map name="solarMap">
    <area shape="circle" coords="448,295,40" target="_blank" title="木星"
          href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" >
    <area shape="rect" coords="519,281,590,320" target="_blank" title="木星"
          href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" >
</map>

效果：

4. 和figure元素联用

通常用figure元素把图片、图片标题、图片说明等元素打包在一起。用法很简单，但在语义化上的意义很重要。

<figure>
    <a href="https://baike.baidu.com/item/%E9%93%B6%E6%B2%B3%E7%B3%BB/189795?fr=aladdin" target="_blank" title="银河系">
        <img usemap="#solarMap" src="./img/galaxy.png" >
    </a>
    
    <figcaption>
        <h2>太阳系</h2>
    </figcaption>

    <a>
        太阳系（英文：Solar system）是一个以太阳为中心，受太阳引力约束在一起的天体系统，包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质。<br>
        太阳系位于距银河系中心大约2.4~2.7万光年的位置（银河系的恒星数量约在1000亿到4000亿之间，太阳只是其中之一）。
    </a>
</figure>

figcaption是figure的子元素，表示图片标题。

5. 多媒体元素

①video
值得注意的是，video元素不是空元素。在 <video></video> 标签中间的内容，是针对浏览器不支持此元素时候的降级处理。

<video controls src="./video/test.mp4" style="width:500px;">
    Sorry, your browser doesn't support embedded videos.
</video>

图示视频是我从《真探第一季》中截的一段。
其中，controls属性的功能是显示控件。像controls、autoplay这样的属性，取值只有两种状态：
1）不写
2）取值为属性名
这种属性称为布尔属性。布尔属性在HTML5中可以不写属性值。
另外常用的布尔属性有autoplay、muted、loop。autoplay表示打开网页自动播放。有些浏览器不允许自动播放，也就是说你写了autoplay它也不自动播放。这么做的原因是避免打开网页就放出了视频声音，吓到用户（个人体验确实不自动播放好些）。为此，有时也会再加上muted这个自动静音的布尔属性，然后允许自动播放。loop即循环播放。很多游戏的主页就是不断重复播放的、静音的、代表游戏的视频。

②audio
用法和video差不多相同。

<audio controls src="./audio/FELT - Beautiful Trick.mp3">
    Your browser does not support the audio element.
</audio>

6. 兼容性

不同的浏览器支持的音视频格式可能不一致，控件样式可能也不同。
为了使开发出的网站有获得更好的兼容性，在嵌入多媒体元素时会这样写：

<video controls>
    <source src="./video/test.mp4">
    <source src="./video/test.webm">
    <p>对不起，你的浏览器不支持video元素，请换个新一点的浏览器。</p>
</video>