H5 學習整理

1. 語義標籤

     nav 導航   header頭部  footer底部  main主體  article文章  aside主體內容之外

    注意：行級元素在設置寬高是無效的；在ie9裏面把所有的語義標籤解析爲行級元素，如果想裝換爲行級元素設置 display：                 block，ie8完全不支持語義標籤，不支持H5，解決方法： ①手動創建標籤，默認創建爲行級元素                                 document.createElement("header") header{display:block} ② 引入文件 <script src="../js/html5shiv.min.js"></script>

 標籤新添加屬性：placeholder 提示信息 ；autofocus 自動獲取焦點；autocomplete=“on/off” 自動完成（前提：①必須提交過②當前添加的autocomplete的標籤必須有name屬性）；required 不允許爲空 ；pattern=‘^(\+86)?1\d{10}’ 校驗 （* 任意個；？0個或1個；+ 一個或多個）

---

2. 報一個input標籤嵌入到form裏

<form id="MyForm">//id
 用戶名：<input type="text" name="username"/>
        <input type="submit" value="提交"/>
</form>
密碼：<input type="password" name="userpwd" form="MyForm">//form與form的id對應上

密碼可以掛到form裏面

3.可以輸入的下拉框

//firefox 不支持 一般別用
<input type="text" list="subjects">
<datalist>
 <option value="Java" label="有前景">Java</option>//label屬於輔助
</datalist>

4.keygen 加密（圖解：）

 

使用：

<form action="">
 用戶名：<input type="text" name="username"/><br>
 密 碼：<input type="password" name="username"/>
 <keygen></keygen>
<input type="submit" value="提交"/>
</form>

 output 顯示輸出信息<output>顯示信息</output>

5.oninput / onvalid / onkeyup

 oninput:監聽當前指定元素內容的改變，只要內容改變就會觸發

 onkeyup：鍵盤彈起的時候觸發，每彈起一次觸發一次

 onvalid：驗證不通過的時候觸發

6.進度條progress

<progress></progress>//max value min high low 屬性