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

柔光的暖阳◎ 2022-07-14 08:21 125阅读 0赞

# 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属性的值而定。

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

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

*  嵌入另一张HTML文档 iframe：

width和height指定尺寸，src指定iframe一开始载入并显示的URL，srvdoc定义一张用于内嵌显示的HTML文档。  
通过sandbox属性独立启用各种功能：  
allow-forms：启用表单  
allow-script：启用脚本  
allow-top-navigation：允许链接指向顶层的浏览上下文，这样可以用另一个文档替换当前文档或者歘·穿件·创建新的标签和窗口。  
allow-same-origin：允许iframe里的内容被视为与文档其余部分拥有同一个来源位置。

*  通过插件嵌入内容  
    \-1：使用embed。  
    假设引入一视频

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

\-2：使用object和param元素。  
功能同上；

object的最大优点是可以包含备用内容，在指定内容不可用是显示出来。  
object同时也具有img、iframe的功能。

*  嵌入数字表现形式  
    \-显示进度：progress元素可以用来表现某项任务逐渐完成的过程。

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

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

value=40  
![40][]  
value=55  
![55][]  
value=80  
![80][]

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

[20161203184055894]: /images/20220714/94276640b5914e62814284a150e37176.png
[40]: /images/20220714/0d1fe5b69bd74e7f8e2a9d331845fa57.png
[55]: /images/20220714/59cc5457e41241aca0bab232cf95c84e.png
[80]: /images/20220714/d5c91958d3a64f7fa392d7e51f035ac5.png