HTML入门8

　　今天开始接触HTML里面的多媒体和嵌入内容

　　前面只讲了文字，下面来讲能够让网页动起来，更加有趣的嵌入元素，包含多媒体，包含图像的不同方式，以及怎样嵌入视频。

　　HTML中图片，下面将深入使用它，以及<figure>标题注解，怎么关联到CSS背景图片。

　　视频和音频 <video><audio> 兼容各个浏览器的访问方式。增加标题和副标题，能够优雅降级

从<object>到<iframe> 嵌入技术， 在页面中嵌入不同类型的内容<iframe><embed><object>元素，其中用<iframe>嵌入其他网页，其他两个用来嵌入PDF，SVG甚至可以是FLASH。

　　在页面中添加矢量图像，  矢量图像在一些特定场景非常游泳，不同于常见格式例如PNG/JPG，矢量图不会在放大的时候变得扭曲或者显示出像素格，可以保持光滑。下面具体来介绍矢量图像，以及如何在网页中添加SVG格式图像。

　　响应式图片  在到响应式设计，指的时可以自动更改功能以适应不同屏幕尺寸、分辨率等网页，<picture>元素用来创建响应式图像的工具；图像映射，点击图像某个区域映射到不同的网页；  具体怎么实现呢下面简单阐述下流程。  将图像嵌入a,整个图像会链接到另一个网页，图像区域包含几个活动区域被称为热点，每个活动区域链接到不同的资源，文本链接更取，相对来说文本链接更加轻量级可维护，也利于SEO友好，支持可访问性需求。图像部分不是任何图像都能接受图像映射，首先说明关注图像链接会发生说明，alt说明替代文字，强制性的，图像必须指出开始和结束位置。热点必须足够大，以便在任何适口大小时轻松敲击，72*72CSS像素是一个很好的最小值，响应地使用一个usemap属性，为图像映射提供一个唯一的名称，不包含空格，名称以哈希开头为usemap属性的值。   第二步、激活热点，将所有代码放到map元素里，然后map里需要添加一个属性与img里的usemap属性的值保持一致，

<img src="imgae-map.png" alt="" usemap="#example-map-1">  <map name="example-map-1"></map> 在map元素里，需要一个<area>元素一个该元素对应一个单一的热点，保持导航的直观性

　　shape coords 其中shape有四个值可选circle,rect.poly default  

　　默认area占据整个图像，选择的形状决定您需要提供坐标信息coords 对于圆提供中心的x和y坐标，然后是半径长度；对于矩形提供左上角和右下角的坐标，对于多边性提供每个x/y坐标。以CSS给出。

　　href  链接到资源的url, 如果不希望链接到别的地方可以将属性留空。alt 强制属性告诉人们链接的去向或用途，仅在图像不可用时显示。给一段样例照着代码理解。

<map name="example-amp-1">

　　<area shape="circle" coords="200,250,25" href="page2.html" alt="circle example" />

　　<area shape="rect" coords="10,5,20,15" href="page-3.html" alt="rectangle example" />

</map> 

=========================================================================

　　html 中的图片， 将一副图片展示到网页上，图片作为嵌入的是要给空元素，嵌入内容有src指向位置，也叫source来使其生效，就想a的href属性一样，其路径方式与url链接文本的方式相同；为了利于SEO src属性应该包含一个描述性的文件名。同样地址也可以填写绝对路径但是不推荐因为浏览器同样会做DNS服务去查询ip降低效率。关于授权问题，不要讲src属性指向别的网页上的图片，这被称为盗链(hotlinking) 类似于<img><video>元素被称为替换元素，因为元素的内容和尺寸由外部资源给定，即图片本身的大小决定而不是标签元素自己指定。

　　备选文本，alt.整个属性用来对图片的文字描述，在图片看不到时作用发挥，不同于title鼠标悬停时出现，同样支持可访问性 使用阅读器的用户体验更好。

　　如果图片不呈现内容仅作为装饰最好用CSS background属性来指定，如果图片提供了重要信息，就要在alt文本里提供相同的信息，如果文本已经对图片内容做了阐述，就不要在alt里再设置冗余文本了；链接  把图片嵌套a里，变成图片链接，。

　　宽度和高度，可以用宽度和高度来指定图片的宽度和高度，这样做会预留一片空白，等到图片加载完再显示其中，使得页面加载的更快和更流畅，在此之前应该调整图片尺寸适应再img标签里的宽高属性值相等；title图片标题不必须包含主要图片信息， .

　　为了语义化，可以通过文字来解说图片，以什么方式呈现呢，简单的img  p 搭配关联性不强，在引入另外一个元素，figure 和figcaption 元素为图片提供一个语义容器，建立清晰的关联。大概以下面方式呈现：

<figure>

　　<img src="" alt="" width="" height="">

　　<figcaption>图片描述部分可以写在这儿而不是p标签，这样显得关联性更强</figcaption>

</figure>

其中figcaption元素来告诉浏览器和其他辅助技术工具说明文字描述figure的内容。在figure里还可以是其他代码，音视频，方程，表格等等；

　　CSS背景图片  可以使用CSS把背景图片嵌入网站中，background-image 和其他background-*属性用来放置背景图片。区别去HTML嵌入图片和CSS插入图片。如果仅仅是装饰那么CSS插入图片，如果是为了结合上下文呈现内容那么就用HTML嵌入图片的方式；所以就看图片的作用怎么看待吧。