## 前言 也許你對標簽屬性的知識局限于style,class,id，作為技術縱深，這些事遠遠不夠的。 ## h5全局屬性（16個） accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang style tabindex title spellcheck data-* translate ### h5新增全局屬性（8個） contenteditable: true false 定義元素內容是否可編輯，默認false contextmenu: menu_id 定義元素的上下文菜單，屬性值是該菜單的id屬性,默認false draggable: true false auto 定義元素是否可拖拽,默認false dropzone: copy move link 定義元素被拖拽時是復制數據、移動元素、產生指向原數據的連接 hidden: hidden 定義元素是否隱藏, spellcheck: true false 定義是否對元素進行拼寫或語法檢查,,默認false data-*: 自定義 存儲頁面或應用程序的私有自定義屬性 translate: yes no 定義元素是否應該被翻譯,默認no ### 自定義屬性 * 首先，需要明確的是標簽中支持自定義屬性，但是一些特定的屬性是有特定含義的，例如以下幾種： class,style 屬于樣式修飾的； id,name,可以做標識的，title 做描述的 value ,data- 做值域的 readonly,disabled,selected,checked等用來區分元素的狀態屬性 oninput,onchange,onblur 用于事件屬性的， src 用于標簽需要的源文件 href ,target,用于關聯信息以及連接效果 type,多用于表單的輸入類型 placeholder,pattern用于輔助輸入，表單提示輸入的 所以，除了以上的幾種，就可以自定義屬性，用于做標識，做自定義數據，做標簽類型等，需要注意的是屬性不區分字母的大小寫。 * input type新增的屬性：可以支持更好的數據驗證 * email 郵箱驗證 * url 網絡地址 * number 數字，手機端調用輸入法的數字鍵盤 * range 范圍 * Date pickers (date, month, week, time, datetime, datetime-local)，日期 * search * color 顏色 * tel 電話，手機端會調用手機系統數字鍵盤 ## 事件屬性 * 事件屬性多用于用戶的交互體驗，超出1/2是h5新增的，下面摘抄出常用的作為知識儲備。 1. window事件： onload()，另外補充h5新增的事件。 onbeforeprint,onafterprint,打印前后觸發的事件 onerror 發生錯誤的時候 onhaschange 文檔發生改變的時候 ononline onoffline 文檔上線下線的腳本 onpagehide onpageshow 用于窗口隱藏和顯示 onresize 窗體大小發生改變時 onunload 一旦頁面已下載或者窗口關閉 onbeforeunload 文檔唄卸載前 2. form事件： onblur() onchange() onfocus() onselect() onsubmit()，onreset(),新增的事件有： oncontextmenu 上下文的菜單觸發 onformchange 表單改變時 onforminput 表單獲得用戶的輸入狀態時 oninput 元素獲得用戶的輸入狀態時 oninvalid 元素無效的時候使用 其中oninput 是目前應用很多的事件，可以用于輸入的實時內容類型驗證，避免非法字符的輸入 3. keyboard事件 : onkeypress()敲擊 onkeydown()按下 onkeyup()釋放 這三個均屬于新增的事件 4. mouse事件：onclick() ondbclick() onmousedown() onmousemove() onmouseover() onnouseout() onmouseup() ondrag 一系列的針對事件，包括拖動觸發，拖動開始結束觸發，拖到進入以及離開有效區域的， onmousewheel 鼠標滾動 onscroll 元素內的滾動唄觸發 5. media事件： onplay() onpause()，有興趣的可以查看官網w3c的介紹。