html5常用的标签

音频的多浏览器兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<audio controls>
    <source src="source/chengdu.mp3" >
    <source src="./source/chengdu.wav">
    <source src="./source/chengdu.ogg">
    浏览器不支持html5音频播放
</audio>

</body>
</html>

音频格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支持	支持	支持	支持	不支持
MP3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支持

视频的多浏览器兼容

<video controls autoplay loop="3">
    <source src="./source/movie.mp4">
    <source src="./source/movie.ogg">
    <source src="./source/movie.webm">
    浏览器不支持html5视频播放
</video>

浏览器／影音格式	Ogg Theora	MP4(H.264)	WebM
Microsoft Internet Explorer9	不支持	支持	不支持
Mozilla Firefox5+	支持	不支持	支持
Google Chrome13+	支持	支持	支持
Apple Safari5+	不支持	支持	不支持
Opera11+	支持	不支持	支持

表单

input的新型type

html5新增了很多input的type类型，详细请参考W3C,新型的type不同浏览器有兼容性问题，小心使用。手机的网站尽量使用label标签，手机对html5的兼容性都不错。

<form action="">
    <fieldset>
        <legend>输入类型</legend>
        <label for="email">
            email:<input type="email" id="email"></input>
        </label>
        <br/>
        <label for="num">
            number:<input type="number" id="num" min="4" max="50" step="4"></input>
        </label>
        <br/>
        <label for="rag">
            number:<input type="range" id="rag" value="40"></input>
        </label>
        <br/>
        <label for="time">
            date:<input type="date" id="time" value="40"></input>
        </label>
        <br/>
        <label for="sub">
            <input type="submit" value="提交"></input>
        </label>
        <br/>
    </fieldset>
</form>

html5的新增两个form组件

keygen标签

<label for="">
            加密类型：<keygen name="jiami">
</label>x- 效果

加密类型：

注意不同的浏览器有兼容性问题，safari浏览器对html5支持最好。keygen标签就是给服务器发送一个公钥，以后每次你的消息发送到服务器都是信息+秘钥进行加密，服务器因为已经有你的公钥，你发加密信息，服务器用公钥进行解密。

度量器meter标签

<label for="">
            度量器：<meter min="0" max="100" low="60" high="80" value="50"></meter>
            度量器：<meter min="0" max="100" low="60" high="80" value="70"></meter>
            度量器：<meter min="0" max="100" low="60" high="80" value="90"></meter>
</label>

效果

度量器：<meter min="0" max="100" low="60" high="80" value="50"></meter>
度量器：<meter min="0" max="100" low="60" high="80" value="70"></meter>
度量器：<meter min="0" max="100" low="60" high="80" value="90"></meter>

标签属性

placeholder ="请填写用户名" input便签上，提示用户的信息
autofocus input便签上，自动聚焦
multiple 上传文件时可以多选文件上传
autocomplete="on" 自动完成，记录你之前输入过的信息,可以设置在form属性上
form="要加入form表单的id"给form表单加入多一个标签
novalidate 关闭标签验证，是form上的属性
require input便签上，要求此标签内容必须填
pattern="" input便签上，正则表达式
formmethod input便签上的属性，指定用什么方法提交
formaction input便签上的属性，提交到哪里
list 和html5上的datalist一起用，list的值指向datalist的id

html5对dom的拓展

获取元素

document.getElementsByClassName() 获取类属性的元素
document.querySelector() 通过css选择器来获取第一个元素
document.querySelectorAll()通过css选择多个元素

类名操作

node.classList.add() 给元素添加一个类
node.classList.remove() 给元素删除一个类
node.classList.contains() 检查元素是否有一个类
node.classList.toggle() 给元素若没有添加一个类，若有删除

自定义属性

自定义属性必须是 data- 开头的

node.dataset 获取此节点的所有自定义属性

注意细节

var demo=document.querySelector("p a");
var Att =demo.dataset;
Att.testDemo="测试";//会自动转换成下划线命名
Att.test_Demo="测试";//会自动转换成驼峰

CSDN的markdown不支持嵌套html写，原文地址：http://biyongyao.com/archives/137

秒客网

html5常用的标签&对JavaScript的拓展