首页 > html5+css > html5基础知识 > HTML5中的嵌入元素标签
2016
12-16

HTML5中的嵌入元素标签

img 嵌入图片
map 定义客户端分区响应图
area 表示一个用户客户端分区响应图的区域
audio 表示一个音频资源
video 表示一个视频资源
source 表示媒体资源
track 表示媒体的附加轨道(例如字幕)
iframe 嵌入一个文档
embed 用插件在 HTML 中嵌入内容
canvas 生成一个动态的图形画布
meter 嵌入数值在许可值范围用进度条表示
object 向 HTML 代码添加一个对象,一般配合param使用
param 表示将通过 object 元素传递给插件的参数
progress 显示一个进度条,一般通过 JS 控制内部的值。<progress value="30" max="100"></progress>
svg 表示结构化矢量内容

一、map:属性ismap,单属性,创建服务器端分区响应图,如果图片包含在a标签中,记录用户点击该图的具体坐标,如目标链接为:http://abc.com,点击图片后地址栏地址为:http:abc.com/?215,31。左上角为0,0。

usemap:关联<map>元素。

二、创建客户端分区响应图,即热区创建:
<img src="img.png" alt="风景图" width="339" height="229" usemap="#Mapname">
<map name="Mapname">
<area shape="rect" coords="31,28,112,100" href="#" alt="方形">
<area shape="circle" coords="187,142,47" href="#" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112" href="#" alt="多边形">
</map>
三、iframe:
scrolling:是否显示滚动条,值为:yes,no,auto。
seamless:单属性,规定了 <iframe> 看上去像是文档的一部分(无边框或滚动条)。
srcdoc:规定在 <iframe> 中显示的页面的 HTML 内容。该属性的值为html源码,设置了该属性,在文档页面中会显示该属性的值在html页面的显示内容,即会覆盖iframe中src属性url显示或者说会忽略src属性。如:<iframe srcdoc="<p>Hello world!</p>" src="http://www.baidu.com"></iframe>,该标签在文档页面中显示内容为Hello world!,而不会显示百度的首页。
sandbox:规定iframe标签的内容将带有额外的限制,
值为allow-same-origin时允许 iframe 内容被视为与包含文档有相同的来源但限制另外3个功能。
值为allow-top-navigation时允许 iframe 内容从包含文档导航(加载)内容但限制另外3个功能。
值为allow-forms时允许表单提交但限制另外3个功能。
值为allow-scripts时允许脚本执行但限制另外3个功能。
值为空("")时应用以上所有的限制。
name:表示用于 target 的名称。

四、embed:标签定义嵌入的内容,比如插件。

src:嵌入内容的 URL。
type:定义嵌入内容的类型。
五、video:视频元素,以往视频播放需要借助 Flash 插件才可以实现。但 Flash 插件的不稳定性经常让浏览器导致崩溃, 因此很多浏览器或系统厂商开始抛弃它。 而取代它的正是 HTML5 的 video元素。 .mp4、 .ogg、.webm、.avi、 .flv、.mkv
src:视频资源的URL
width:视频宽度
height:视频高度
preload:设置后,表示没有播放时预先载入视频,如果设置了autoplay属性则忽略该属性。该属性有三个值:none 表示播放器什么都不加载;metadata 表示播放之前只能加载元数据(宽高、第一帧画面等信息);auto 表示请求浏览器尽快下载整个视频(没有播放时就已经开始自动加载视频)。
poster:指定视频数据载入时显示的预览图,默认显示视频的第一帧做为预览图。。
如:<video src="test.flv" width="800" height="600" controls poster="img.png"></video>
autoplay:单属性,设置后,表示自动开始播放视频
controls:单属性,设置后,表示显示播放控件
loop:单属性,设置后,表示反复播放视频
muted:单属性,设置后,表示视频处于静音状态
为了兼容多个浏览器:
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>这里引入 flash 播放器实现 IE9 以下兼容,但没必要了</object>
</video>
解释:通过<source>元素引入多种格式的视频,让更多的浏览器保持兼容。
六、audio:音频元素。常见格式:.mp3,.m4a,.ogg,.wav。
属性:autoplay、controls、loop、muted、poster,用法和视频元素video一样。
七、meter:嵌入数值在许可值范围内显示进度条。
<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
value:当前值、min:最小值、max:最大值、low:小于将提醒、high:大于将提醒、optimun:表示最佳值。
当value小于最小值进度条为空。当value大于最大值进度条为满的,小于low或者大于high进度条颜色将改变(正常为绿色,提醒颜色为黄色),设置optimun值显示效果不会改变(没有具体的显示效果)。
最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。