重学 HTML —— 图片和多媒体（一）

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」

这一节看一下浏览器中的多媒体元素，图片和视频的渲染很重要，flash 早已退出历史的舞台，html5 多媒体相关的内容已经成为在现代网站中不可或缺的一部分。

img

img 标签是最常用的多媒体标签，通过 src 可以设置图片链接加载图片，基本的使用上应该没什么疑问，接下来主要来看几个需要注意的地方。

首先是 alt 属性，这个属性不是必须添加的，但是强烈建议添加。首先在浏览器没能正确加载图片时，alt 会作为占位信息展示。此外对于非浏览器设备，alt 是重要的内容提示，在 a11y 场景下非常重要。

不同的浏览器对图片格式的支持程度是不同的，具体的信息可以参考这个文档。

在图片 src 无法正常加载时，img 标签会抛出 onerror 事件，利用这个技巧可以处理埋点上报需求：

function report(data) {
	const img = new Image();
	img.onerror = () => {
		postReportData(data);
	};
	img.src = '';
}

为了防止图片未渲染出来之前页面出现塌陷，我们通常需要指定容器宽高，这样可以防止浏览器布局回流带来的浪费，用户体验也会更好。

img 标签有很多属性，一些属性我们在其他标签上见过，如 crossorigin、importance 等，这些与加载本身有关。

有一个比较有意思的属性 usemap，它可以为图片添加点击效果，usemap 需要与 map 和 area 标签共同使用。

map 和 area

前面提到了这两个标签与 usemap 属性相关联，这里首先来看一个例子：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="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>

可以看到 usemap 通过 name 来与一个 map 元素进行关联，在 map 中可以添加多个 area 属性，每个 area 为一个点击区域，使用 coords 可以指定区域的坐标大小，我们可以为点击特定的区域块添加不同的处理，这样就实现了图片的局部点击效果添加。

除了 img 和 map 标签，多媒体标签还有 audio 和 video，用来渲染音频和视频，这一部分放到下一篇中。