第5章〓HTML5多媒体与嵌入 多媒体是我们可以看到和听到的一切，如文本、图片、音乐、声音、动画和视频等。大多数多媒体存储在媒体文件中，以独立的文件形式存在，一般通过文件的扩展名区分不同类型的多媒体，HTML5可以通过多种方式使用多媒体。本章首先重点介绍图像元素和响应式图像，然后介绍音视频文件的格式及如何在HTML5中使用，接下来介绍嵌入元素，最后介绍在“叮叮书店”项目首页添加超链接和多媒体元素的操作过程。 本章要点  图像 响应式图像  HTML5音频/视频 嵌入元素 5.1图像 HTML5经常使用位图和矢量图两种类型的图像。 1. 位图 位图由排列在网格中的点(即像素)组成。图像是由网格中每个像素的位置和颜色值决定的，每个像素被指定一种颜色。 编辑位图图像时，修改的是像素，而不是线条和曲线。位图图像与分辨率有关，这意味着描述图像的数据被固定到一个特定大小的网格中。放大位图图像将使这些像素在网格中重新分布，这会使图像的边缘呈锯齿状。图5.1中自行车位图放大后，可以看出明显的栅格化。 位图图像的主要格式有GIF、JPEG和PNG。 2. 矢量图 矢量图使用包含颜色和位置信息的直线和曲线(矢量)呈现图像。如图5.2所示的一辆自行车 的图像，可以使用一系列描述车子轮廓的路径来定义。车子的颜色由其轮廓(即笔触)的颜色和该轮廓所包围区域(即填充)的颜色决定。 图5.1位图图形示意图 图5.2矢量图形示意图 矢量图与分辨率无关，这意味着当更改矢量图的颜色、移动矢量图、调整矢量图的大小、更改矢量图的形状时，其外观品质不会发生变化。图5.2中自行车的轮廓放大了6倍，但图像依然清晰。 矢量图的主要格式有CDR、AI、WMF、EPS和SVG。 表5.1列出了HTML5可以使用的图像标签。 表5.1图像标签 标签描述 定义图像 通过包含零个或多个元素和一个元素为不同的显示设备提供图像。浏览器会选择最匹配的元素，否则选择元素src属性中的URL 定义媒体源 定义带有可单击区域的图像映射 定义图像地图中的可单击区域
定义媒体内容的分组，以及它们的标题
定义
元素的标题 5.1.1标签 图像由标签定义，是空元素。Web标准并没有给出必须支持的图像格式，一般浏览器都支持JPEG、GIF、PNG、BMP、ICO和SVG等格式。表5.2列出了标签常用属性。 表5.2标签常用属性 属性值描述 alttext必需，图像的替换文本 srcURL必需，图像的URL heightpixels或% 可选，图像的高度 widthpixels或% 可选，图像的宽度 srcsettext定义允许浏览器选择的图像集 sizestext定义一组媒体条件，当媒体条件为真时，根据图像预期布局宽度的值从srcset图像集选择一个合适的图像显示 usemapURL将图像定义为客户器端图像映射 1. 显示位图 要在页面上显示图像，必须使用src属性声明图像的URL地址,格式如下。 其中，URL指图像文件的位置，浏览器将图像显示在文档中图像标签出现的地方。 当浏览器不能显示图像时(如无法载入图像或浏览器禁止图像显示)，可以在显示图像的位置上显示alt属性定义的文本。为页面上的每幅图像加上替换文本属性有利于更好地显示信息。例如： 船 元素的内容和大小由外部资源的图像文件所决定，而不是元素自身，这样的元素称为替换元素。 由于搜索引擎需要读取图像的文件名并纳入SEO，所以应该给图像文件定义一个描述性的文件名。 网络上大多数图片是有版权的，在未得到授权之前不要把src属性指向其他网站上的图像。 由于图像是独立文件存在的，如某个HTML文件包含10幅图像，要正确显示这个页面，需要加载10个图像文件和一个HTML文件，HTTP需要11次请求才能完成，加载图片是需要时间的，所以要合理地在文档内容中加入图像，如果过度使用图像，用户在浏览该页面时，会增加很多不必要的等待时间。 扫一扫 视频讲解 【例5.1】img.html说明了标签的用法，如图5.3所示。源码如下。 img标签
鼠标指针指向图像，会显示title属性值。
叮叮书店
如果无法显示图像，将显示alt属性值。
叮叮书店 提示： 标签的alt属性不能省略，否则在https://validator.w3.org/检验时会提示错误。 2. 添加矢量图 HTML5支持SVG矢量图，可缩放矢量图形(Scalable Vector Graphics，SVG)是一种用于描述二维矢量图形的基于XML的标记语言。SVG于1999年推出，2003年成为W3C推荐标准，2011年SVG 1.1成为推荐标准的第2个版本。SVG 2.0正在制定当中。 SVG用于标记图形，而不是内容，可以使用一些基本元素创建简单图形，如和，也可以使用更高级的功能元素，如(使用变换矩阵转换颜色)和(矢量图形动画)等。 HTML5可以直接嵌入SVG标记，称为内联SVG，Internet Explorer 9、Firefox、Opera、Chrome和Safari都支持内联SVG。 同样可以使用标签显示SVG图像。 扫一扫 视频讲解 【例5.2】SVG.html使用了内联SVG方式和标签显示矢量图，如图5.4所示。源码如下。 SVG矢量图 SVG SVG 图5.3img.html页面显示 图5.4SVG.html页面显示 内联SVG要使用标签，xmlns属性定义SVG命名空间，width和height属性设置SVG画布的宽度和高度。version属性定义SVG 版本，baseProfile属性说明正确渲染内容所需最小的SVG语言配置，值为full表示适用于个人计算机。version和baseProfile属性是必不可少的。 如果可能的话，使用SVG替代JPEG、GIF或PNG，这样能够轻松解决多屏幕分辨率的问题，而且也比位图图像小得多。可以通过网站https://www.vectorizer.io/在线把位图转换为矢量图。 5.1.2标签和标签 和标签用于创建图像地图，图像地图是指已被分为多个区域(图像的一部分)的图像，这些区域称为热点，可以创建多个热点，热点支持超链接。 元素必须使用name属性定义imagemap名称，name属性与标签的 usemap属性相关联，创建图像与映射之间的关系。 元素包含元素，定义图像映射中的可单击区域。表5.3列出了标签常用属性。 表5.3标签常用属性 属性值描述 coordsx1,y1,x2,y2 x,y,radius x1,y1,x2,y2,…,xn,yn 定义可单击区域坐标。coords属性与shape属性配合使用，规定区域的尺寸、形状和位置。图像左上角的坐标是"0,0" x1,y1,x2,y2： 如果shape属性为"rect"，该值规定矩形左上角和右下角的坐标 x,y,radius： 如果shape属性为"circ"，该值规定圆心的坐标和半径 x1,y1,x2,y2,…,xn,yn： 如果shape属性为"poly"，该值规定多边形各边的坐标。如果第1个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标 hrefURL定义此区域的目标URL nohrefnohref规定该区域没有相关的链接 shapedefault rect，circle，poly定义区域的形状。default规定全部区域，rect定义矩形区域，circle定义圆形，poly定义多边形区域 target_blank _self规定在何处打开链接文档。其中,_blank为在新窗口中打开被链接文档； _self为默认，在相同的窗口中打开被链接文档 例5.2中map.html说明了和标签的用法，如图5.5所示。源码如下。 map和area标签 封面 图5.5map.html页面显示 当鼠标指针指向图像中的“权威指南”4个字和熊的头部时，鼠标指针变成手状，并且在浏览器窗口的状态栏中显示链接的地址。 5.1.3
标签和
标签 如果需要为图像搭配说明文字，可以使用
标签，
标签规定独立的内容，如图像；
标签配合使用，定义
标签的标题，说明
标签的内容。 扫一扫 视频讲解 【例5.3】figure.html说明了
标签的用法，如图5.6所示。源码如下。 figure标签
图书封面
封面
图5.6figure.html页面显示 5.2响应式图像 在网页上显示图像，最理想的是当访问网站时根据不同的设备提供不同的分辨率图像或不同尺寸的图像，响应式图像技术可以通过让浏览器提供多个图像文件解决这个问题，如使用相同的图像但包含多个不同的分辨率，或者使用相同图像的裁剪和不同的图像以适应不同的空间分配。 5.2.1像素与设备像素比 像素是图像分辨率的单位，分辨率又称为解析度，图像分辨率是图像清晰度或浓度的度量标准，通常以横向和纵向点的数量——像素来表示。像素可以看作组成图像的小方格，这些小方格都有一个明确的位置和被分配的色彩数值，小方格颜色和位置决定了图像呈现出来的样子。通常情况下，图像的分辨率越高，所包含的像素就越多，图像就越清晰。 像素可分为设备像素和设备独立像素。 1. 设备像素(物理像素) 显示器分辨率是指计算机显示器本身的物理分辨率，对液晶显示器(Liquid Crystal Display,LCD)来说，是指显示屏上的像素点数量，这些像素称为物理像素，也叫设备像素(Device Pixels)，设备像素已经在生产制造时固定，不能改变。 2. 设备独立像素(逻辑像素) 设备独立像素(Device Independent Pixels)是操作系统定义的一种像素单位，也叫逻辑像素或设备无关像素，允许应用程序以设备独立像素为单位进行测量，然后系统将应用程序的设备独立像素测量值转换为适合特定设备的物理像素。 在Chrome浏览器开发者工具的控制台中输入screen.width和screen.height得到的数值就是整个屏幕设备独立像素的宽度和高度，这个值不会随页面内容的缩放或浏览器窗口大小而改变。 提示： 可以通过操作系统的分辨率设置改变设备独立像素的大小。 在Web开发中一般使用CSS像素(CSS Pixel)，即CSS样式代码中使用的逻辑像素，可以看作设备独立像素，CSS像素是一个相对单位，相对的是设备像素。设备像素和CSS像素一般使用px作为单位，在浏览器缩放比例为100%的情况下，一个CSS像素大小等于一个设备像素。 在不同的设备或不同的环境中，CSS中的1px所代表的设备像素长度是不同的，也就是说CSS中的1px并不总是代表设备像素的1px，特别是在移动设备上。 3. 设备像素比 设备像素比(Device Pixel Ratio，DPR)是设备像素和设备独立像素的比例，即设备像素比=物理像素/逻辑像素，表示设备独立像素和设备像素的转换关系。 在Chrome浏览器开发者工具的控制台中输入window.devicePixelRatio可以得到这个值。 CSS像素也是设备独立像素，所以通过devicePixelRatio的值可以知道该设备上一个CSS像素代表多少个物理像素。当设备像素比为1时，使用1(1×1，横向和纵向)个设备像素显示1个CSS像素； 当设备像素比为2时，使用4(2×2，横向和纵向)个设备像素显示1个CSS像素； 当设备像素比为3时，使用9(3×3，横向和纵向)个设备像素显示1个CSS像素。 5.2.2标签的srcset和sizes属性 标签提供了srcset和sizes两个新属性，可以根据设备的宽度显示不同的分辨率图像或让高分辨率设备显示高质量图像。例如： 新措 srcset属性定义了允许浏览器选择的图像集，属性值由逗号分隔的列表组成，列表项由图像URL与图像宽度或像素密度描述符组成。其中，图像宽度是一个正整数，单位使用w(像素)，表示图像分辨率的真实大小； 像素密度是一个正浮点数，单位使用x，表示设备像素比，1x是默认值。图像URL与图像宽度或像素密度用空格分隔，图像宽度和像素密度不能同时使用。 例如，images/320.jpg 320w列表项中，images/320.jpg表示图像的URL，320w表示这个图像实际的宽度为320像素。 sizes属性定义了一组媒体条件和资源大小，属性值由逗号分隔的列表组成，列表项由媒体条件和资源大小组成，用空格分隔。媒体条件的设定可参照10.3节中的CSS媒体查询。资源大小是指图像预期布局的宽度，也就是显示指定图像的最大宽度，可能影响指定图像显示的大小，使用CSS长度单位px。当媒体条件为真时，浏览器根据资源大小的值从srcset图像集选择一个合适的图像显示。如果没有设置srcset属性，那么sizes属性不起作用。 例如，(maxwidth:320px) 320px列表项中，(maxwidth:320px)表示媒体条件，意思是当可视窗口的宽度是320像素或更少时条件为真； 320px是资源大小，表示当媒体条件为真时显示指定图像填充的最大宽度。 浏览器从srcset图像集选择图像的原则是在实际尺寸大于或等于资源大小值的图像中，选择最接近的那一幅图像，当浏览器成功匹配第1个媒体条件时，剩下的都会被忽略，所以媒体条件的列表顺序最好是根据具体条件从小到大排列(如maxwidth)或从大到小排列(如minwidth)。 sizes属性列表中最后一个资源大小默认是没有媒体条件的，当没有任何一个媒体条件为真时，它会起作用。 【例5.4】img_srcset.html使用标签srcset属性根据设备像素比在相同的CSS像素宽度下，显示不同的分辨率图像，实现让高分辨率设备显示高质量图像。源码如下。 img标签的srcset属性
新措 新措
在本例中，img{width:320px;}这个CSS样式会应用在图片上，图像的宽度在屏幕上是320像素(CSS像素)。在Firefox浏览器84以上版本中直接打开浏览，按Ctrl+Shift+M组合键，进入Web开发者响应式设计模式，改变设备的像素比，可以看到，当访问页面的设备具有标准和低分辨率时，一个设备像素表示一个CSS像素，images/320.jpg会被加载(1x)。如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，images/640.jpg(2x)和images/800.jpg(3x)会被加载，如图5.7所示。 图5.7img_srcset.html页面显示 扫一扫 视频讲解 【例5.5】img_srcset_sizes.html使用标签srcset和sizes属性根据不同的分辨率切换显示不同尺寸的同一图像，实现根据设备的宽度显示不同的分辨率图像。源码如下。 img标签的srcset和sizes属性
新措
新措
在Firefox浏览器84以上版本中直接打开浏览，按Ctrl+Shift+M组合键，进入Web开发者响应式设计模式，可以看到在设备的像素比始终为1的情况下，可视窗口的宽度为320像素时，显示images/320.jpg图像，可视窗口的宽度设为640像素时，显示images/640.jpg图像，如图5.8所示。图中下边的图像看起来比上边的图像小是由于图像预期布局的宽度设置得比较小（(maxwidth:320px) 280px）。 图5.8img_srcset_sizes.html页面显示 提示： 目前Chrome浏览器对标签srcset和sizes属性支持不完整。 5.2.3标签 标签通过包含零个或多个标签和一个标签为不同的显示设备或场景提供不同的图像。浏览器会选择最匹配的子标签，如果没有，就选择标签src属性中的URL。 标签为、