HTML5新标签和属性

1.<time>标签(支持IE9以上和其他浏览器)
今年是<time datetime="2015-12-12">2015年</time>
<script type="text/javascript">
onload=function(){
   var time=document.getElementsByTagName("time")[0];
   //alert(time.innerHTML);
   }
</script>
SEO捕捉datetime属性如果改变则加载最新的否则不加载

2.<progress>标签展示忙碌的效果(支持IE10以上)
<progress></progress>

3.<meter>标签显示进度(不支持IE)
<script type="text/javascript">
onload=function(){
   var meter=document.getElementsByTagName("meter")[0];
   meter.onclick=function(){
     meter.value+=1;
    }
   }
</script>
<meter value="1" max="30" min="0"></meter>

4.<datalist> 标签(支持IE10以上)
<input type="text" list="dals">
<datalist id="dals">
<option value="haha">哈哈</option>
<option value="houhou">吼吼</option>
</datalist>

5.<menu>标签(仅仅支持火狐)
<div style="border:red solid 1px; 100px;height:100px;" contextmenu="mm"></div>
<menu id="mm" type="context">
***如果标签内部和label都有值则展示label的值***
<menuitem label="文本" icon="要展示的图标" onclick="alert('这里是回掉函数')"</menuitem>
<menuitem>哈哈</menuitem>
</menu>

6.contenteditable属性 (所有浏览器都支持div的可编辑性)
contenteditable="inherit"  继承父级元素的contenteditable属性值
<div contenteditable="true" hidden style="border:red solid 1px; 100px;height:100px;"></div>
<table contenteditable="true" border="1"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table>

  

原文地址:https://www.cnblogs.com/zzq-include/p/4308669.html