您的位置：首页 > Web前端 > HTML5

HTML5标签三

2016-05-03 10:39 555 查看

<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中讲解

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航