目录
1、嵌入图像
1.1在超链接里嵌入图像
1.2创建客户端分区响应图
2、嵌入另一种html文档
3、通过插件嵌入内容
3.1、使用embed元素
3.2、使用object和param元素
指定备用内容
4、object元素的其他用途
4.1、使用object元素嵌入图像
4.2、使用object元素创建分区响应图
4.3、将object元素作为浏览器上下文环境
5、嵌入数字表现形式
5.1、显示进度
5.2、显示范围里的值
6、其他嵌入元素
6.1、嵌入音频和视频
6.2、嵌入图像
1、嵌入图像
img元素允许我们在html文档里嵌入图像
要嵌入一张图像需要使用src和alt属性。
<img src="triathlon.png" alt="triathlon image" width="200" height="67"/>
src属性：指定欲嵌入图像的URL。
⚠️width和height属性告诉浏览器图像尺寸有多大，而不是你希望它有多大。
1.1在超链接里嵌入图像
结合a元素创建一个基于图像的超链接。
<a href="otherpage.html"> <img src="triathlon.png"ismapalt="Triathlon Image" width="200" height="67"/> </a>
1.2创建客户端分区响应图
创建一个客户端分区响应图，通过点击某张图像上的不同区域让浏览器导航到不同的URL上。
客户端分区响应图的关键元素：map
map元素包含一个或多个area元素，它们各自代表了图上可被点击的一块区域。
area元素的属性分为两类：
1、处理area所代表的图像区域被用户点击后浏览器会导航到的URL。
与目标地址相关的area元素类型：
2、包含了更有意思的属性：shape和coords属性。可以用这些属性来标明用户可以点击的各个图像区域。
<map name="mymap"> <area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/> <area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/> <area href="otherpage.html" shape="default" alt="default"/> </map>
⚠️在制作客户端分区响应图时，无需使用a元素来显式创建超链接。
2、嵌入另一种html文档
iframe元素：允许在现有的html文档中嵌入另一张文档
<iframe name="myframe" width="300" height="100"></iframe>
html5引入了两个新的iframe元素属性。
（1）seamless：指示浏览器把iframe的内容显示得像主html文档的一个整体组成部分。默认情况下会有一个边框，如果内容比width和height属性所指定的尺寸要大，还会出现一个滚动条。
（2）sandbox：对html文档进行限制。脚本、表单、插件、指向其他浏览器上下文的链接会被禁用。
<iframe name="myframe" width="300" height="100"></iframe>
⚠️iframe的内容被视为与html文档的其余部分来源不同，这样会引发额外的安全措施。
iframe的sandbox属性所接受的allow值：
3、通过插件嵌入内容
html5添加了对embed元素的支持
3.1、使用embed元素
<embed src="http://www.youtube.com/v/qzA60hHca9s? version=3" type="application/x-shockwave-flash" width="560" height="349" allowfullscreen="true"/> <！--src属性指定了内容的地址，type属性指定了内容的mime类型， width和height属性决定嵌入内容接在屏幕上占据的空间大小。 allowfullscreen属性可以启用全屏观看-->
3.2、使用object和param元素
object元素实现的效果和embed元素一样，工作方式稍有不同，带有一些额外的功能。
<object width="560" height="349"data="http://www.youtube.com/v/qzA60hHca9s? version=3"type="application/x-shockwave-flash"> <param name="allowFullScreen" value="true"/> </object>
- data属性：提供内容的地址；type属性指定了内容的mime类型；
- width和height属性决定嵌入内容接在屏幕上占据的空间大小；
- param元素：定义将要传递给插件的参数，每个需要定义的参数都各自使用一个param元素。
指定备用内容
object元素可以包含备用内容，在指定内容不可用时显示出来。
<object width="560" height="349" data="http://titan/myimaginaryfile"> <param name="allowFullScreen" value="true"/> <b>Sorry! </b> We can't display this content </object>
让data属性引用一个不存在的文件，浏览器会尝试载入这个不存在的内容，如果失败了，就会转而显示object元素中的内容，parame元素会被忽略，只剩下短语和流内容会被显示出来。
4、object元素的其他用途
form属性让object元素可以关联html表单
4.1、使用object元素嵌入图像
用object元素在html文档里嵌入图像。
<object data="triathlon.png" type="image/png"></object>
4.2、使用object元素创建分区响应图
用object元素来创建客户端分区响应图，usemap属性可以用来关联map元素和object元素。
<map name="mymap"> <area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/> <area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/> <area href="otherpage.html" shape="default" alt="default"/> </map>
⚠️不是所有的浏览器都支持用object元素创建客户端分区响应图。
4.3、将object元素作为浏览器上下文环境
可以用object元素来将一张html文档嵌入到另一张文档之中，就像用iframe元素一样。
<object type="text/html" name="frame" width="300" height="100"></object> <!--这个功能仅仅在把type属性设置为text/html时可用。-->
5、嵌入数字表现形式
5.1、显示进度
progress元素：用来表现某项任务逐渐完成的过程。
value属性：定义了当前的进度，它位于0和max属性的值所构成的范围之间。当Max属性被省略时，范围是0至1 。用浮点数来表示进度，比如0.3=30%
<progress id="myprogress" value="10" max="100"></progress>
5.2、显示范围里的值
meter元素：显示了某个范围内所有可能值中的一个。
min和max属性设定了可能值所处范围的边界，它们可以用浮点数来表示。
meter元素的显示可以分为：过低、过高、最佳。
- low属性：设定一个值，在他之下的所有值都被认为是过低。
- high属性：设定一个值，在他之上的所有属性都被认为是过高。
- optimum属性：指定最佳值。
<meter id="mymeter" value="90"min="10" max="100" low="40" high="80" optimum="60"></meter>
将meter元素的value属性设置成过低和过高范围内的值，以及最佳值。
6、其他嵌入元素
6.1、嵌入音频和视频
audio、video、source、track
6.2、嵌入图像
canvas
