Html5新标记

<video>

<video src="movie.ogg" controls="controls">   
 您的浏览器不支持 video 标签。    
</video> 

<audio>

<audio src="someaudio.wav">    
您的浏览器不支持 audio 标签。    
</audio>

<canvas>

HTML5 的canvas 元素使用JavaScript在网页上绘制图像

<canvas id="myCanvas"></canvas>    
<script type="text/javascript">    
    var canvas=document.getElementById('myCanvas');    
    var ctx=canvas.getContext('2d');   
    ctx.fillStyle='#FF0000';    
    ctx.fillRect(0,0,80,100);   
 </script>

<figure>

<figure>
    <img src="img.gif" alt="figure标签"  title="figure标签" />
    <figcaption>这儿是图片的描述信息</figcaption>
</figure>

增型表单标签

<input type="number" name="demoNumber" min="1" max="100" step="1"/>

name: 标识表单提交时的key值 min: 标识当前输入框输入的最小值 max: 标识当前输入框输入的最大值 step: 标识点击增大/减小的时候,增加/减小的步长

<input type="email" name="email" placeholder="请输入注册邮箱"/>

当表单在提交前,此文本框会自动校验是否符合邮箱的正则表达式

<input type="url" placeholder="请输入网址" name="url"/>
<input type="tel" placeholder="输入电话" name="phone"/>
 <input type="range" min="0" max="100" step="5" name="range" value="0"/>
 <output name="output">0<output/>
<input type="date" name="datedemo"/>

日期属性还包括:monthtimeweekdatetime-localdatetime

颜色选择

<input type="color" name="colordemo"/>

实现自动完成或者输入提示功能

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
<datalist id="autoNames">
       <option  value="AA" ></option>
       <option  value="BB" ></option>
       <option  value="CC" ></option>
</datalist>

 

posted @ 2016-01-12 09:17  慕尘  阅读(158)  评论(0编辑  收藏  举报