HTML5标签三
2016-05-03 10:39
615 查看
<img> // ismap/src/alt
<map> // 用来创建客户端分区响应图(如果使用id,id必须和name属性相同)
<area> // alt/href/target/rel/media/hreflang/type/shape/coords area {display: none;}
案例:
<img src="pic.png" usemap="#name"/>
<map id="name" name="name">
<area href="rect.html" shape="rect" coords="0,0,200,200" alt="this is rect"/>
<area href="circle.html" shape="circle" coords="400,200,200" alt="this is circle"/>
<area href="other.html" shape="default" alt="This is default"/>
</map>
<iframe> // src/srcdoc/name/width/height/sandbox/seamless iframe { border: 2px inset;}
iframe(浏览上下文):
a/form/button/input/base的target// 结合使用
width/height
srcdoc
// 可以定义一张用于内嵌显示的HTML文档
seamless
// 指浏览器会把iframe的内容显示的像主HTML文档的一个整体组成部分
sandbox
// sandbox不设置任何值(脚本,表单,插件,指向其他浏览上下文的链接就会被禁用)
sandbox对应的值:
allow-forms(启用表单)
allow-scripts(启动脚本)
allow-same-origin
allow-top-navigation
iframe可用来做导航:
<header>
<nav>
<ul>
<li><a href="datalist.html" target="myframe">datalist</a> </li>
<li><a href="button.html" target="myframe">button</a> </li>
</ul>
</nav>
</header>
<iframe sandbox="allow-forms" name="myframe" width="300px" height="300px">
</iframe>
<object><embed> // 通过插件嵌入内容(都是需要安装插件的)
<embed> // src/type/width/height
src:指定内容的地址
allowfullscreen:允许全屏
<embed src="" type="application/x-shockwave-flash" height="" width="">
<object> // data/type/height/width/usemap/name/form
<object height="400" width="600"
data="../audio/Wildlife.wmv"
type="application/x-ShockWave-flash">
<param name="allowFullScreen" value="true">
</object>
<object data="../image/bg.png" type="image/png"></object>
type属性和mime类型全部要会
<progress> // 表现某项任务逐渐完成的过程 value/max/form
案例:
<body>
<p><progress value="10" max="100" id="myProgress"/></p>
<p><button value="30" type="button">30%</button>
<button value="60" type="button">60%</button>
<button value="90" type="button">90%</button></p>
<script>
var pro = document.getElementById("myProgress");
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(e) {
pro.value = e.target.value;
}
}
</script>
</body>
<meter> // 显示某个范围内所有可能值中的一个
value/min/max/low/high/optimum/form
min/max
// 设置可能值所处范围边界
meter // 显示可以分为三个部分:过低过高最佳
<meter id="mymeter" value="90" min="10" max="100" low="40" high="80" optimum="60">
HTML文档嵌入音频和视频(audio/video/source/track),嵌入图形(canvas) --------会在HTML5标签4中讲解
<map> // 用来创建客户端分区响应图(如果使用id,id必须和name属性相同)
<area> // alt/href/target/rel/media/hreflang/type/shape/coords area {display: none;}
案例:
<img src="pic.png" usemap="#name"/>
<map id="name" name="name">
<area href="rect.html" shape="rect" coords="0,0,200,200" alt="this is rect"/>
<area href="circle.html" shape="circle" coords="400,200,200" alt="this is circle"/>
<area href="other.html" shape="default" alt="This is default"/>
</map>
<iframe> // src/srcdoc/name/width/height/sandbox/seamless iframe { border: 2px inset;}
iframe(浏览上下文):
a/form/button/input/base的target// 结合使用
width/height
srcdoc
// 可以定义一张用于内嵌显示的HTML文档
seamless
// 指浏览器会把iframe的内容显示的像主HTML文档的一个整体组成部分
sandbox
// sandbox不设置任何值(脚本,表单,插件,指向其他浏览上下文的链接就会被禁用)
sandbox对应的值:
allow-forms(启用表单)
allow-scripts(启动脚本)
allow-same-origin
allow-top-navigation
iframe可用来做导航:
<header>
<nav>
<ul>
<li><a href="datalist.html" target="myframe">datalist</a> </li>
<li><a href="button.html" target="myframe">button</a> </li>
</ul>
</nav>
</header>
<iframe sandbox="allow-forms" name="myframe" width="300px" height="300px">
</iframe>
<object><embed> // 通过插件嵌入内容(都是需要安装插件的)
<embed> // src/type/width/height
src:指定内容的地址
allowfullscreen:允许全屏
<embed src="" type="application/x-shockwave-flash" height="" width="">
<object> // data/type/height/width/usemap/name/form
<object height="400" width="600"
data="../audio/Wildlife.wmv"
type="application/x-ShockWave-flash">
<param name="allowFullScreen" value="true">
</object>
<object data="../image/bg.png" type="image/png"></object>
type属性和mime类型全部要会
<progress> // 表现某项任务逐渐完成的过程 value/max/form
案例:
<body>
<p><progress value="10" max="100" id="myProgress"/></p>
<p><button value="30" type="button">30%</button>
<button value="60" type="button">60%</button>
<button value="90" type="button">90%</button></p>
<script>
var pro = document.getElementById("myProgress");
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(e) {
pro.value = e.target.value;
}
}
</script>
</body>
<meter> // 显示某个范围内所有可能值中的一个
value/min/max/low/high/optimum/form
min/max
// 设置可能值所处范围边界
meter // 显示可以分为三个部分:过低过高最佳
<meter id="mymeter" value="90" min="10" max="100" low="40" high="80" optimum="60">
HTML文档嵌入音频和视频(audio/video/source/track),嵌入图形(canvas) --------会在HTML5标签4中讲解
相关文章推荐
- 基于HTML5的有弹幕功能的视频播放器
- HTML5新标签
- html5 基本语法详解
- HTML5——新增表单元素与属性(3)
- HTML5——新增表单元素与属性(2)
- HTML5——表单新增元素与属性(1)
- HTML5——增强页面元素
- HTML5 Canvas游戏开发(二)高级功能
- h5学习笔记:横排导航
- HTML5之按钮背景不同动画特效设计
- [转载]50个Demo展示HTML5无穷的魅力
- 分享9款用HTML5/CSS3制作的动物、人物动画
- Html5 Egret游戏开发 成语大挑战(九)设置界面和声音管理
- 客户端存储
- h5添加音乐
- 数据可视化的实现技术和工具比较(HTML5 canvas(Echart)、SVG、webGL等等)
- HTML5新增结构标签
- 一种解决h5页面背景音乐不能自动播放的方案
- Hadoop集群安装-CDH5(3台服务器集群)
- Hadoop集群安装-CDH5(5台服务器集群)