HTML5嵌入元素

maolai 1390次浏览 0个评论

HTML5中嵌入元素主要功能是把外部的一些资源插入到HTML 中。
一、嵌入元素总汇
img   嵌入图片
map  定义客户端分区响应图
area   表示一个用户客户端分区响应图的区域
audio  表示一个音频资源
video  表示一个视频资源
iframe  嵌入一个文档
embed  用插件在 HTML 中嵌入内容
canvas  生成一个动态的图形画布
meter  嵌入数值在许可值范围背景中的图形表示
object  在 HTML 文档中嵌入内容
param  表示将通过 object 元素传递给插件的参数
progress  嵌入目标进展或任务完成情况的图形表示
source  表示媒体资源
svg  表示结构化矢量内容
track  表示媒体的附加轨道(例如字幕)
二、嵌入元素解析
1、<img> 嵌入图像
<img src="img.png">
解释:<img>元素主要是插入一张外部的图片,那么图片的路径问题和超链接一致。
img的私有属性
src   嵌入图像的 URL
alt    当图片不加载时显示的备用内容
width  定义图片的长度(单位是像素)
height  定义图片的高度(单位是像素)
ismap  创建服务器端分区响应图
usemap 关联<map>元素
<a href="index.html">
<img src="img.png" width="339" height="229" alt="风景图" ismap></a>
2、<map> 创建分区响应图
<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map">
<map name="Map">
<area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47" href="http://www.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112" href="http://www.soso.com" target="_blank" alt="多边形">
</map>
解释:通过图片中的热点进行超链接,这里我们采用 Dreamweaver 进行操作生成的。
3、<iframe> 嵌入另一个文档
<a href="http://www.lmlblog.com/%E9%9F%B3%E4%B9%90%E7%9B%92" target="in">音乐盒</a> |
<a href="http://www.lmlblog.com/categor/wzseo" target="in">网站SEO</a><br>
<iframe src="http://www.lmlblog.com" width="500" height="500"
name="in"></iframe>

<iframe> 嵌入另一个文档
解释:<iframe>表示内嵌一个 HTML 文档。其下的 src 属性表示初始化时显示的页面,width 和 height 表示内嵌文档的长度和高度,name 表示用于 target 的名称。
4、<embed> 嵌入插件内容
<embed src="http://www.beidj.com/qf4.swf?id=qq885320" type="application/xshockwave-flash" width="480" height="400"></embed>
解释:<embed>元素是扩展浏览器的功能,大部分用于添加对插件的支持。这里添加了一个音乐盒的 flash 视频。type 类型表示被插入内容的类型,这里不列出所有,后面如果遇到其他类型的文件,再继续探讨;width 和 height 表示宽高;src 表示文件路径。
5、<object> 和<param> 元素
解释:<object>元素和<embed>一样,只不过 object 是 html4 的标准,而 embed 是html5 的标准。而 object 不但可以嵌入 flash,还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替,这里暂时不对其详细讲解。
6、<progress> 显示进度
<progress value="30" max="100"></progress>
解释:<progress>元素可以显示一个进度条,一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。
7、<meter> 显示范围里的值
<meter value="90" min="10" max="100" low="40" high="80"optimum="60"></meter>
解释:<meter>元素显示某个范围内的值。其下的属性包含:min 和 max 表示范围边界,low 表示小于它的值过低,high 表示大于它的值过高,optimum 表示最佳值,但不出现效果。IE 浏览器不支持此元素。


本文由MAOLAI博客编辑整理发布,欢迎分享,转载请注明出处!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址