vlambda博客
学习文章列表

HTML5嵌入标签整理及使用介绍



本章主要探讨 HTML5 中嵌入元素,嵌入元素主要功能是把外部的一些资源插入到HTML 中。


一.嵌入元素总汇

这里所列出的元素,并非本节课全部涉及到,比如音频 audio、视频 video、以及动态图像 canvas 和媒体资源 source、track 等会在后面章节或季度讲解。


元素名称
说明
img
嵌入图片
map
定义客户端分区响应图
area 表示一个用户客户端分区响应图的区域
audio
表示一个音频资源
video
表示一个视频资源
iframe 嵌入一个文档
embed 用插件在 HTML 中嵌入内容
canvas  生成一个动态的图形画布
meter 嵌入数值在许可值范围背景中的图形表示
object 在 HTML 文档中嵌入内容
param 表示将通过 object 元素传递给插件的参数
progress 嵌入目标进展或任务完成情况的图形表示
source 表示媒体资源
svg 表示结构化矢量内容
track 表示媒体的附加轨道(例如字幕)


二.嵌入元素解析

1.<img>嵌入图像

解释:<img>元素主要是插入一张外部的图片,那么图片的路径问题和超链接一致。

<a href="index.html"><img src="img.png" width="339" height="229" alt="风景图" ismap></a>

img 的私有属性

属性名称 说明
src 嵌入图像的URL
alt 当图片不加载时显示的备用内容
width 定义图片的长度(单位是像素)
height 定义图片的高度(单位是像素)
ismap 创建服务器端分区响应图
usemap 关联<map>元素


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 进行操作生成的。


HTML5嵌入标签整理及使用介绍


HTML5嵌入标签整理及使用介绍


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

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

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


HTML5嵌入标签整理及使用介绍


4.<embed>嵌入插件内容

<embed src="v.swf" type="application/x-shockwave-flash" width="480" height="400"></embed>

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


HTML5嵌入标签整理及使用介绍


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 浏览器不支持此元素。



<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5嵌入标签</title> <style type="text/css"> *{padding: 0; margin: 0;} ul,li{ } a{ text-decoration: none; color:#000;} body{font-family: '微软雅黑';} dl{width:100%; height: auto; padding: 20px 0; border-bottom: 1px solid #ccc;} dl dt{ padding-bottom: 5px; color: red;} dl dd{ padding-bottom: 5px; }</style></head><body> <dl> <dt>"img" 嵌入图像</dt> <dd><a href="index.html"><img ismap src="img/logo.jpg" alt="logo" width="200" height="200"></a></dd> <dd>点击这个图片,点击的坐标将作为查询字符串发送到服务器。</dd> </dl>
<dl> <dt>"map" 创建分区响应图</dt> <dd> <img ismap src="img/logo.jpg" alt="logo" width="200" height="200" usemap="#Map"> <map name="Map"> <area shape="rect" coords="2,0,48,198" href="http://www.baidu.com"> <area shape="circle" coords="110,53,37" href="http://www.sogou.com"> <area shape="poly" coords="190,85,164,49,151,78" href="https://www.so.com"> </map> </dd> <dd>解释:通过图片中的热点进行超链接,这里我们采用 Dreamweaver 进行操作生成的。</dd> </dl>
<dl> <dt>"iframe" 嵌入另一个文档</dt> <dd> <a href="http://www.baidu.com" target="in">百度</a> <a href="http://www.sogou.com" target="in">搜狗</a> <iframe src="" frameborder="0" width="600" height="500" name="in"></iframe> </dd> <dd>解释:"iframe" 表示内嵌一个 HTML 文档。其下的 src 属性表示初始化时显示的页面,width 和 height 表示内嵌文档的长度和高度,name 表示用于 target 的名称。</dd> </dl>
<dl> <dt>"embed"嵌入插件内容</dt> <dd><embed src="img/v.flv" type="application/x-shockwave-flash" width="480" height="400"></embed></dd> <dd>解释:<embed>元素是扩展浏览器的功能,大部分用于添加对插件的支持。这里添加了 flash 视频。type 类型表示被插入内容的类型,这里不列出所有,后面如果遇到其他类型的文件,再继续探讨;width 和 height 表示宽高;src 表示文件路径。</dd> </dl>
<dl> <dt>"progress" 显示进度</dt> <dd><progress value="30" max="100"></progress></dd> <dd>解释:"progress"元素可以显示一个进度条,一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。</dd> </dl>
<dl> <dt>meter 显示范围里的值</dt> <dd><meter value="60" min="10" max="100" low="40" high="80" optimum="60"></meter></dd> <dd>解释:"meter" 元素显示某个范围内的值。其下的属性包含:min 和 max 表示范围边界,low 表示小于它的值过低,high 表示大于它的值过高,optimum 表示最佳值,但不出现效果。IE 浏览器不支持此元素。</dd> </dl></body></html>


如果您觉得有用,记得在下方点赞、关注、留言,小编会定期奉 上更多的惊喜哦,您的打赏支持才是小编继续努力的动力,么么哒。

每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!