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>
  • 效果

标签属性

  1. placeholder ="请填写用户名" 提示用户的信息
  2. autofocus 自动聚焦
  3. multiple 上传文件时可以多选文件上传
  4. autocomplete="on" 自动完成,记录你之前输入过的信息,可以设置在form属性上
  5. form="要加入form表单的id"给form表单加入多一个标签
  6. novalidate 关闭标签验证,是form上的属性
  7. require 要求此标签内容必须填
  8. pattern="" 正则表达式

html5对dom的拓展

获取元素

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

类名操作

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

自定义属性

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

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

注意细节

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