H5复习知识

1.H5的兼容

支持html5的浏览器包括Firefox（火狐浏览器）,IE9及其最高版本，Chrome(谷歌浏览器)

Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。

---

2.H5新增的标签

 

 3.video视频文件

 autoplay自动播放 

controls出现该属性 则向用户显示控件 比如播放按钮

loop循环播放

preload出现该属性，则音频在页面加载时进行加载并预备播放，如果使用“autoplay”，则忽略该属性

 

 4.H5新增加的表单type属性值

 5.H5新增加的表单属性

 required  验证不能为空

 6.H5新增加的表单标签

（1）datalist标签

• datalist元素规定输入域的选项列表
• datalist标签和input结合在一起使用，<input>元素使用<datalist>预定义值
• 注意：①input身上的属性：<input list="cityList" name="cityList">  

                  ②datalist身上的属性:<datalist id="cityList">

 <!-- datalist标签 规定 输入域 的 选项列表 
  （1）要结合input一起用
  （2）input输入域 要有属性 list="cityList"
  （3）datalist选项列表 要有属性id="cityList"
  -->
    <div>
        <input type="text" list="cityList" autocomplete=“off”>
        <datalist id="cityList">
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="合肥">合肥</option>
        </datalist>
    </div>

（2）output输出显示数据标签

特点：

• <output>元素用于不同类型的输出，比如计算或脚本输出
• name="result"定义对象的唯一名称(表单提交时使用)   当前output标签的属性name="result",代表数据输出显示的位置
• <form method="post" οninput="result.value=num1.value+num2.value">  当前 数据计算输出 num1.value+num2.value ，这样的输出，是一个字符串，连上 另一个字符串，变成一个大字符串。

    <!-- output输出显示数据 标签 -->
    <!-- oninput 事件在用户输入时触发。 -->
    <form method="post" oninput="result.value = parseFloat(num1.value)+parseFloat(num2.value)" >
        <div>
            <input type="text" name="" id="num1">+
            <input type="text" name="" id="num2">=
            <output name="result" for="num1 num2"></output>
        </div>
    </form>