網頁被修改為： <div id="test" data-user-list="user-list" data-name="starof">html5 data-*自定義屬性data-user-list屬性</div> jquery設置： $('#content').data('name','starof'); 4、getAttribute和setAttribute 也可以通過setAttribute()和getAttribute()方法來設置和獲取data-*自定義屬性 <div id='test' >html5 data-*自定義屬性 data-age</div> <script> var oDiv=document.getElementById("test"); oDiv.setAttribute("data-age","23"); alert(oDiv.getAttribute("data-age")); </script> 二、hidden布爾值 表示元素的不可見狀態，有2個值，true和false。 html:用css中display實現。 html5： <label hidden>看不見 </label> 三、spellcheck 規定是否必須對元素進行拼寫或語法檢查。用了spellcheck屬性，浏覽器會幫助檢查html元素文本內容拼寫是否正確，只有當html元素在可編輯狀態，sepllcheck屬性才有意義，所以一般是針對input[text],textarea元素用戶輸入內容進行拼寫和語法檢查，拼寫錯誤有紅色的波浪下劃線，右鍵會給提示。 舉例： <textarea spellcheck="true" cols="60" rows="5"> </textarea> 四、tabindex tabindex 屬性規定元素的 tab鍵切換順序（當 tab 鍵用於導航時），可將tabIndex屬性設成1到32767的一個值。 Note：tabindex屬性設為一個負值（如tabindex="-1")時，用戶使用tab鍵切換時該html元素將不會被選中。 舉例： ? 1 2 3 4 5 6 7 8 9 <form> <label>姓名: <input type="text" name="name" tabindex="2"/></label> <br/> <label>身份證號: <input type="text" name="city" tabindex="-1"/></label> </br> <label>准考證號: <input type="text" name="country" tabindex="1"/></label> </br> <input type="submit" value="查詢" tabindex="3"/> </form>
五、contenteditable
1、基本用法 是否允許用戶編輯內容，是個非常神奇的屬性，通常我們使用的輸入文本內容的標簽是input和textarea，使用contentEditable屬性後，可以在div,table,p,span,body等很多元素中輸入內容。。點擊時出現一個編輯框。配合js對網頁內容局部修改。過去要使用輸入框替代。 當一個元素的contenteditable狀態為true（contenteditable屬性為空字符串，或為true，或為inherit且其父元素狀態為true）時，意味著該元素是可編輯的。否則，該元素不可編輯。 舉例： <p contenteditable>我的內容可修改</p> 可以自定義樣式如下：使用輪廓線代替邊框，因為它不會向盒狀模型添加元素，所以頁面區域不會在觸發時突然閃現。 [contenteditable]:hover, [contenteditable]:focus { outline: 2px dotted red; } 如果想要整個網頁可編輯，可在body或html標簽內設置contentEditable。這樣就和下面將要介紹的desginMode效果很像了。 2、分享幾個有意思的應用 contenteditable在希望用戶能夠與演示交互和更改值的教程時它非常有用,比如CSS技巧演示。 另外一個神奇的東東：在浏覽器地址欄輸入data:text/html, <html contenteditable> ，即可打開一個簡單的在線編輯器。 source：one line browser notepad 也可用html5創建幻燈片，然後在演示時在浏覽器中實時編輯，非常酷。 六、desginMode 用來指定整個頁面是否可編輯，有兩個值，on和off。該屬性只能用javascript來修改值。如果design設置為on，則所有允許設置contenteditable的元素都可編輯。 用法： window.document.designmode="off"; designmode為on時，整個頁面都是可編輯的。全局都可修改不是很實用，還是contenteditable這種對局部的修改比較實用。 七、accesskey accesskey屬性允許設置一個或者多個鍵盤快捷鍵，實現快速選取頁面元素。 舉例： ? 1 2 3 4 5 6 7 8 <form> 用戶名： <input type="text" name="name" accesskey="n"/> <p/> 密碼： <input type="password" name="password" accesskey="p"/> <p/> <input type="submit" value="登錄" accesskey="s"/> </form>八、draggable和dropzone 這兩個屬性放在一起使用，因為它們是新的拖放API（DnD API）的一部分。draggable表示是否允許用戶拖動元素；dropzone規定元素被拖放到哪個區域。 draggable屬性有3個值：true表示元素可拖動；false表示元素不可拖動；auto表示使用用戶代理默認行為。 dropzone屬性有3個值：copy表示創建被拖動元素的一個副本；move實際將元素移動到新位置；link創建被拖動的數據的鏈接。 沒有過多研究不多介紹了。