1、多媒体标签:video、audio、canvas
<audio src="1.mp3" controls="controls">
<audio controls="controls" autoplay loop><source src="1.mp3" type="audio/mpeg"/><source src="1.ogg" type="audio/ogg"/></audio>
1.2 视频标签video
<video src="1.mp3" controls="controls" autoplay><video controls="controls"><source src="1.mp4" type="video/mpeg"/><source src="1.mp4" type="video/ogg"/></video>
音视频播放、暂停、停止方法:
var audio = ElementById('music1');audio.play();//播放audio.pause();//暂停audio.pause();audio.currentTime=0;//停止
3.1 <datalist> 标签定义选项列表。
<input type="text" list="taglist" /><datalist id="taglist"><option>苹果</optionhtml input type属性><option>橘子</option><option>西红柿</option></datalist>
3.2 details标签定义文档细节
<details><summary>Copyright 2011.</summary><p>All pages and graphics on this web site are the property of W3School.</p></details>
3.3 menu标签定义列表
<menu> <li>home</li> <li>home</li> <li>home</li></menu>
3.4 address地址标签
<address>Written by <a href="mailto:webmaster@example">Donald Duck</a>.<br> Visit us at:<br>Example<br>Box 564, Disneyland<br>USA</address>
3.5 progress进度条标签
下载进度:<progress></progress>
3.6 mark高亮显示
<mark>中国</mark>人民最伟大
3.7 <time> 标签定义日期或时间,或者两者
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
3.8 新增的表单元素
<input type="email" /><input type="url" /><input type="tel" /><input type="number" min="1"
max="20" step="4" /><input type="range" min="1" max="20" step="4" /><input type="search" /><input type="color" /><input type="date" /><input type="month" /><input type="week" /><input type="time" />
3.9 新增的input属性
3.9.1 用户输入自动完成功能
<form autocompelete="on"><input type="text" list="citylist" /><datalist id="citylist"> <option>BeiJing</option> <option>QingDao</option> <option>QingZhou</option> <option>QingHai</option></datalist></form>
3.9.2 页面加载的时候获取焦点
<input type="text" autofocus="autofocus" />
3.9.3 form外也可以做数据提交
<form action="" method="get" id="form1"></form><input type="text" name="address1" form="form1" />
3.9.4 form内的内容也可以改action地址
<form action="1.aspx"> <input type="submit" value="提交" formaction="2.aspx" /></form>
3.9.5 file可以支持多文件上传了
<input type="file" name="img" multiple="multiple" />
3.9.6 支持自定义验证功能了
<form action="1.aspx"> 请输入:<input type="text" pattern="[0-9]{6}" title="请输入6位数的邮编" /> <input type="submit" /></form>
3.9.4 新增默认内容提示了
<input type="text" placeholder="请输入用户名"/>
3.9.5 新增不能为空属性
<form action="1.aspx"> 请输入:<input type="text" required="required" /> <input type="submit" /></form>
3.10 新增全局属性
3.10.1 contenteditable 属性规定是否可编辑元素的内容。
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
3.10.2 hidden 属性规定对元素进行隐藏。
<p hidden="hidden">这是一段隐藏的段落。</p><p>这是一段可见的段落。</p>
3.10.3 tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。
<a href="www.w3school/" tabindex="2">W3School</a><br /><a href="w
ww.google/" tabindex="1">Google</a><br /><a href="www.microsoft/" tabindex="3">Microsoft</a>
3.11 其他属性
3.11.1 ol的reversed属性对列表顺序进行降序
<ol reversed start="5" > <li>SHUFFLE!/三界恋曲</li> <li>扑杀天使</li> <li>零之使魔</li> <li>不要撒娇哦/极乐天师/纯情和尚俏尼姑</li> <li>to love/出包王女</li></ol>
3.11.2 js的async 属性规定一旦脚本可用,则会异步执行。
<p id="p1">Hello World!</p><script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>
3.11.3 js的defer 属性规定当页面已完成加载后,才会执行脚本。
<script type="text/javascript" src="/example/html5/demo_defer.js" defer="defer"></script><p>上面的脚本从下面的段落请求信息。通常,这是不可能的,因为脚本在段落加载之前已
经执行了。</p><p id="p1">Hello World!</p><p>不过,defer 属性规定脚本稍后执行。这样脚本就可以从段落中请求信息了。</p>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论