HTML权威指南知识总结（三）

HTML权威指南知识总结（三）

HTML部分的最后一章–嵌入内容。主要包括 img、map、iframe、object、embed、progress和meter。

嵌入图像 img：src指定嵌入图像的URL，width和height是告诉浏览器图像的尺寸有多大，而不是你希望有多大。

创建客户端分区响应图 map： map元素包含一个或多个area元素，他们给代表了图像上可点击的一块区域。

-area元素分两类：a：第一类处理的是area所代表的图像被用户点击会跳转的URL。

b:第二类是shape和coords属性，coords属性的意思根据shape属性的值而定。

shape	coords
rect	代表矩形区域，coords值必须是四个由逗号间隔的整数组成，他代表了下列间隔的数据：（图像左边距矩形的左侧，图像上边距矩形的上侧，图像左边距矩形的右侧，图像上边距矩形的下侧）
circle	圆形区域，三个值组成：（图像左边到圆心的距离，图像上边距圆心的距离，圆的半径）
poly	多边形至少包含六个逗号隔开的值，每个值代表一个顶点t
default	默认值，整个图片

<img src="" usemap="#mymap" alt="">
<map name="mymap">
<area href="a.html" shape="rect" coords="3,5,68,62" alt="a"></area>
<area href="b.html" shape="rect" coords="70,5,130,62" alt="b"></area>
<area href="c.html" shape="default" alt="c"></area>
</map>

* 注意：给img添加usemap属性时，值必须加‘#’，这样就能把map元素与图像关联起来。*

嵌入另一张HTML文档 iframe：

<ul>
<li><a href="a.html" target="myframe"> a.html</a></li>
<li><a href="a.html" target="myframe"> a.html</a></li>
</ul>
<iframe name="myframe" width="300" height="100" ></iframe>

width和height指定尺寸，src指定iframe一开始载入并显示的URL，srvdoc定义一张用于内嵌显示的HTML文档。

通过sandbox属性独立启用各种功能：

allow-forms：启用表单

allow-script：启用脚本

allow-top-navigation：允许链接指向顶层的浏览上下文，这样可以用另一个文档替换当前文档或者歘·穿件·创建新的标签和窗口。

allow-same-origin：允许iframe里的内容被视为与文档其余部分拥有同一个来源位置。

<iframe sandbox="allow-forms" name="myframe" width="300" height="100" ></iframe>

通过插件嵌入内容

-1：使用embed。

假设引入一视频

<embed src="" type="application/x-shockwave-flash" width="" height="" allowfullscreen="true"></embed>

src为视频地址；type为MIME类型。width和height决定大小。allowfullscreen=”true”表示自动播放。

-2：使用object和param元素。

功能同上；

<object width="" height="" data="" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true">
对不起，资源不存在！//备用内容
</object>

object的最大优点是可以包含备用内容，在指定内容不可用是显示出来。

object同时也具有img、iframe的功能。

嵌入数字表现形式

-显示进度：progress元素可以用来表现某项任务逐渐完成的过程。

<progress value="10" max="100"></progress>

value定义了当前进度，max为最大值，当max省略时，默认为1，且用浮点数表示进度，0.3即为30%。

-显示范围里的值：meter元素显示某个范围内所有可能值的一个。

<meter value="" min="10" max="100" low="50" high="70" optimum="60"></meter>

value=40



value=55



value=80



min和max设定了可能值所在的范围边界，可以用浮点数表示。meter元素可以表示过低（low）、过高（high）和最佳（optimum）。