H5基础

Posted 2020-10-06

1.DOCTYPE标签简化
2.新的语义标签

• header
• footer
• main
• aside
• nav

3.表单

• type
• email
• tel
• url
• number

属性

• placeholder(占位提示)
• novalidate
• required
• pattern
• auto-complete="on" //记录用户输入
• auto-focus //指定页面中默认选中的元素
• multiple

• form="表单id"

表单自定义提示(事件)

• dom.oninput = function(){}
• dom.oninvalid = function(){}
• setCustomValidity(‘格式错误,请重新输入‘);

4.新媒体
音频 audio标签
src
source子标签(兼容性)
视频 Video标签

5.DOM扩展

进度条

<progress></progress>

 

<meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
<br/>
<meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
<br/>
<meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
<br/>
<meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>

 

form新标签 datalist

网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移动">移动</option>
    <option value="187xxx" label="联通">联通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>