2.5　HTML5新的全局屬性

HTML5除了支持HTML4原有的全局屬性之外，還添加了8個新的全局屬性。所謂全局屬性是指可以用于任何HTML元素的屬性。

2.5.1　contentEditable——可編輯內容

視頻講解

contentEditable屬性的主要功能是允許用戶在線編輯元素中的內容。contentEditable是一個布爾值屬性，可以被指定為true或false。

注意，該屬性還有個隱藏的inherit（繼承）狀態，屬性為true時，元素被指定為允許編輯；屬性為false時，元素被指定為不允許編輯；未指定true或false時，則由inherit狀態來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。

【示例】在下面示例中為正文文本包含框<div>標簽加上contentEditable屬性后，該包含框包含的文本就變成可編輯的了，瀏覽者可自行在瀏覽器中修改內容，執行結果如圖2.22所示。

圖2.22　可編輯文本

在編輯完元素中的內容后，如果想要保存其中內容，只能使用JavaScript腳本把該元素的innerHTML發送到服務器端進行保存，因為改變元素內容后該元素的innerHTML內容也會隨之改變，目前還沒有特別的API來保存編輯后元素中的內容。

2.5.2　contextmenu——快捷菜單

視頻講解

contextmenu屬性用于定義元素的上下文菜單。所謂上下文菜單，就是會在用戶右擊元素時出現。

【示例】下面示例使用contextmenu屬性定義<div>元素的上下文菜單，其中contextmenu屬性的值是要打開的<menu>元素的id屬性值。

當用戶右擊元素時，會彈出一個上下文菜單，從中可以選擇指定的快捷菜單項目，如圖2.23所示。

圖2.23　打開上下文菜單

2.5.3　data——自定義屬性

視頻講解

使用data-*屬性可以自定義用戶數據。具體應用包括：

　data-*屬性用于存儲頁面或元素的私有數據。

　data-*屬性賦予所有HTML元素嵌入自定義屬性的能力。

存儲的自定義數據能夠被頁面的JavaScript腳本利用，以創建更好的用戶體驗，方便Ajax調用或服務器端數據庫查詢。

data-*屬性包括兩部分：

　屬性名：不應該包含任何大寫字母，并且在前綴"data-"之后必須有至少一個字符。

　屬性值：可以是任意字符串。

當瀏覽器解析時，會忽略前綴"data-"，取用其后的自定義屬性。

【示例1】下面示例使用data-*屬性為每個列表項目定義一個自定義屬性type。這樣在JavaScript腳本中可以判斷每個列表項目包含信息的類型。

【示例2】以上面示例為基礎，下面示例使用JavaScript腳本訪問每個列表項目的type屬性值，演示效果如圖2.24所示。

圖2.24　訪問列表項目的type屬性值

訪問元素的自定義屬性，可以通過元素的dataset.對象獲取，該對象存儲了元素所有自定義屬性的值。訪問規則與CSS腳本化訪問相同。對于復合屬性名，通過駝峰命名法訪問，如animal-type，訪問時使用animalType，避免連字符在腳本中引發的歧義。

2.5.4　draggable——可拖動

draggable屬性可以定義元素是否可以被拖動。屬性取值說明如下：

　true：定義元素可拖動。

　false：定義元素不可拖動。

　auto：定義使用瀏覽器的默認行為。

draggable屬性常用在拖放操作中，詳細說明請參考第15章拖放API。

2.5.5　dropzone——拖動數據

dropzone屬性定義在元素上拖動數據時，是否復制、移動或鏈接被拖動數據。屬性取值說明如下：

　copy：拖動數據會產生被拖動數據的副本。

　move：拖動數據會導致被拖動數據被移動到新位置。

　link：拖動數據會產生指向原始數據的鏈接。

例如：

    <div dropzone="copy"></div>

2.5.6　hidden——隱藏

視頻講解

在HTML5中，所有元素都包含一個hidden屬性。該屬性設置元素的可見狀態，取值為一個布爾值，當設為true時，元素處于不可見狀態；當設為false時，元素處于可見狀態。

【示例】下面使用hidden屬性定義段落文本隱藏顯示。

    <p hidden><img src="images/1.jpg" width="200" /></p>

hidden屬性可用于防止用戶查看元素，直到匹配某些條件，如選擇了某個復選框。然后，在頁面加載之后，可以使用JavaScript腳本刪除該屬性，刪除之后該元素變為可見狀態，同時元素中的內容也即時顯示出來。

2.5.7　spellcheck——語法檢查

視頻講解

spellcheck屬性定義是否對元素進行拼寫和語法檢查。可以對以下內容進行拼寫檢查：

　input元素中的文本值（非密碼）。

　<textarea>元素中的文本。

　可編輯元素中的文本。

spellcheck屬性是一個布爾值的屬性，取值包括true和false，為true時表示對元素進行拼寫和語法檢查，為false時則不檢查元素。用法如下所示：

    <!--以下兩種書寫方法正確-->
    <textarea spellcheck="true" >
    <input type=text spellcheck=false>
    <!--以下書寫方法為錯誤-->
    <textarea spellcheck >

注意，如果元素的readOnly屬性或disabled屬性設為true，則不執行拼寫檢查。

【示例】下面示例設計兩段文本，第一段文本可編輯、可語法檢查；第二段文本可編輯，但不允許語法檢查。當編輯文本時，第一段文本顯示檢查狀態，而第二段忽略，如圖2.25所示。

圖2.25　段落文本檢查狀態比較

2.5.8　translate——可翻譯

translate屬性定義是否應該翻譯元素內容。取值說明如下：

　yes：定義應該翻譯元素內容。

　no：定義不應翻譯元素內容。

【示例】下面示例演示了如何使用translate屬性。

    <p translate="no">請勿翻譯本段。</p>
    <p>本段可被譯為任意語言。</p>