嵌入元素

最新推荐文章于 2022-07-24 19:04:46 发布

ZeZe88818

最新推荐文章于 2022-07-24 19:04:46 发布

阅读量654

点赞数

嵌入元素主要功能是把外部的一些资源插入到HTML中。

一.嵌入元素总汇

元素名称：

img:嵌入图片

map:定义客户端分区响应图

area：表示一个用户客户端分区响应图的区域

audio：表示一个音频资源

video：表示一个视频资源

iframe：嵌入一个文档

embled：用插件在HTML中嵌入内容

canvas:生成一个动态的图形画布

meter: 嵌入数值在许可值范围背景中的图形表示

object:在HTML文档中嵌入内容

param:表示将通过object元素传递给插件的参数

progress：嵌入目标进展或任务完成情况的图形表示（进度条）

source：表示媒体资源

svg:表示结构化矢量内容

track:表示媒体的附加轨道（例如字幕）

二.嵌入元素解析

1.<img>嵌入图像解释：<img>元素只要是插入一张外部的图片，那么图片的路径问题和超链接一致。

img的私有属性：

属性名称：

src:嵌入图像的URL

alt：当图片不加载时显示的备用内容

width:定义图片的长度（单位是像素）

height:定义图片的高度（单位是像素）

ismap：创建服务器端分区响应图

usemap:关联<map>元素

2.<map>创建分区响应图

解释：通过图片中的热点进行超链接，这里我们采用DW进行操作生成的

3.<iframe>嵌入另一个文档

解释：<iframe>表示内嵌一个HTML文档。其下的src属性表示初始化是显示的页面，width和height表示内嵌文档的长度和高度，name表示用于target的名称。

4.<embed>嵌入插件内容

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

5.<object>和<param>元素

解释：<object>元素和<embed>元素一样，object不但可以嵌入flash,还可以嵌入图片等其他内容。由于图片，音频，视频，插件都有相应标签元素代替，我们这里暂时不对其详细讲解。

6.<progress>显示进度

解释：<progress>元素可以显示一个进度条，一般通过JS控制内部的值，IE9以及更低版本不支持此元素。

7.<meter>显示范围里的值

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

例子1：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入元素</title>
</head>
<body>
<figure>当你沉睡时</figure>
<a href="嵌入元素.html"><img ismap src="1.jpg"alt="风景图" width="339 " height="229"/></a>

<img src="1.jpg"alt="风景图" width="339 " height="229" usemap="#Map"/>usemap 用来关联map标签
<map name="Map">
<area shape="rect" coords="47,33,132,102" href="http://www.baidu.com" target="_blank" alt="百度" />矩形面积标签
<area shape="circle" coords="232,115,40" href="http://www.sougou.com" target="_blank" alt="搜狗" />
<area shape="poly" coords="56，151，177，182，50，217" href="http://www.hao123.com" target="_blank" alt="hao123" />
</map>

<br />
ctrl+F5为深度刷新
<a href="http://www.baidu.com" target="in">百度</a>|<a href="http://www.so.com" target="in">搜狗</a>
<br />
<iframe src="http://www.google.com" width="600" height="800" name="in"></iframe>

</body>
</html>

例子2：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe元素的使用</title>
</head>
<body>
<a href="http://www.baidu.com" target="in">百度</a>|<a href="http://www.so.com" target="in">搜狗</a>
<br />
<iframe src="http://www.google.com" width="600" height="800" name="in"></iframe>

</body>
</html>

例子3：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>embed元素的使用</title>
</head>
<body>
<embed src="">swf是插入的类型

</embed>

<progress value="30" max="100"></progress>
<meter value="90" min="10" max="100" low="20" high="80" optimum="60"></meter>范围值，有一个提醒功能
最佳值不会有什么效果
</body>
</html>