[07]嵌入元素

一&＃xff0e;嵌入元素汇总

这里所列出的元素&＃xff0c;并非全部涉及到&＃xff0c;比如音频 audio、视频 video、以及动态图像 canvas 和媒体资源 source、track 等。

二&＃xff0e;嵌入元素解析

1.嵌入图像

<img src&＃61;"img.png">

解释&＃xff1a;元素主要是插入一张外部的图片&＃xff0c;那么图片的路径问题和超链接一致。

img 的私有属性:

<a href&＃61;"index.html">
<img src&＃61;"img.png" width&＃61;"339" height&＃61;"229" alt&＃61;"风景图" ismap>
a>

2. 创建分区响应图

<img src&＃61;"img.png" alt&＃61;"风景图" width&＃61;"339" height&＃61;"229" usemap&＃61;"#Map">
<map name&＃61;"Map">
<area shape&＃61;"rect" coords&＃61;"31,28,112,100"
href&＃61;"http://www.baidu.com" target&＃61;"_blank" alt&＃61;"方形">
<area shape&＃61;"circle" coords&＃61;"187,142,47"
href&＃61;"http://www.google.com" target&＃61;"_blank" alt&＃61;"圆形">
<area shape&＃61;"poly" coords&＃61;"287,26,240,66,308,112"
href&＃61;"http://www.soso.com" target&＃61;"_blank" alt&＃61;"多边形">
map>

解释&＃xff1a;通过图片中的热点进行超链接&＃xff0c;这里我们采用 Dreamweaver 进行操作生成的。

3. 嵌入另一个文档

<a href&＃61;"index.html" target&＃61;"in">indexa> |
<a href&＃61;"http://www.baidu.com" target&＃61;"in">百度a>
<iframe src&＃61;"http://www.ycku.com" width&＃61;"600" height&＃61;"500"
name&＃61;"in">iframe>

解释&＃xff1a;表示内嵌一个 HTML文档。其下的 src 属性表示初始化时显示的页面&＃xff0c;width 和 height 表示内嵌文档的长度和高度&＃xff0c;name 表示用于 target 的名称。

4. 嵌入插件内容

<embed
src&＃61;"http://www.tudou.com/v/i4ZZvFwfluI/&bid&＃61;05&rpid&＃61;50797543&resourceI
d&＃61;50797543_05_05_99/v.swf" type&＃61;"application/x-shockwave-flash"
width&＃61;"480" height&＃61;"400">embed>

解释&＃xff1a;元素是扩展浏览器的功能&＃xff0c;大部分用于添加对插件的支持。这里添加了一个土豆网的 flash 视频。type 类型表示被插入内容的类型&＃xff0c;这里不列出所有&＃xff0c;后面如果遇到其他类型的文件&＃xff0c;再继续探讨&＃xff1b;width 和 height 表示宽高&＃xff1b;src 表示文件路径。

5.和元素

解释&＃xff1a;元素和一样&＃xff0c;只不过 object 是 html4的标准&＃xff0c;而 embed 是html5 的标准。而 object 不但可以嵌入 flash&＃xff0c;还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替&＃xff0c;我们这里暂时不对其详细讲解。

6. 显示进度

<progress value&＃61;"30" max&＃61;"100">progress>

解释&＃xff1a;元素可以显示一个进度条&＃xff0c;一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。

7.显示范围里的值

value&＃61;"90" min&＃61;"10" max&＃61;"100" low&＃61;"40" high&＃61;"80"
optimum&＃61;"60">

解释&＃xff1a;元素显示某个范围内的值。其下的属性包含&＃xff1a;min 和 max 表示范围边界&＃xff0c;low 表示小于它的值过低&＃xff0c;high 表示大于它的值过高&＃xff0c;optimum 表示最佳值&＃xff0c;但不出现效果。IE 浏览器不支持此元素。