文章目錄

• 保留屬性
• • id
  • style
  • class
  • dir
  • title
  • lang
  • accessKey
  • tabindex
• 新增屬性
• • contentEditable
  • designMode
  • hidden
  • spellcheck
  • contextmenu

保留屬性

id

id屬性用于為HTML元素指定唯一標識，當程序使用JavaScript編程時即可通過該屬性值來獲取該HTML元素。

style

style屬性用于為HTML元素指定CSS樣式。

class

class屬性用于匹配CSS樣式的class選擇器。

dir

對于大多數HTML元素而言，dir屬性用于設置元素中內容的排列方向。
dir通常支持ltr和rtl兩種取值：ltr是從左至右（左對齊）；rtl是從右至左（右對齊）。

title

title屬性用于為HTML元素指定額外信息。
通常的，當用戶把鼠標移動到指定title的元素上面時，瀏覽器將會顯示title屬性所指定的信息。

lang

lang屬性用于告知瀏覽器和搜索引擎：網絡或網頁中元素的內容所使用的的語言。
這個“語言”的取值應該是指定的語言代碼，比如：

• en：英文
• ja：日文
• zh：中文

accessKey

accessKey元素用于在HTML頁面有多個元素時指定激活所在元素的快捷鍵。
備注：Firefox暫不支持

tabindex

tabindex屬性用于控制窗口、HTML元素獲取焦點的順序。
用戶可以通過Tab鍵不斷切換窗口或網頁中的HTML元素來獲取焦點。
tabindex被設置為1時，第一次按下Tab鍵時該元素獲得焦點。

通常情況下，tabindex屬性用在<a>、<area>、<button>、<input>、<select>、<textarea>等可被激活、可與用戶交互的元素上才有明顯效果。
如果把tabindex元素用于非上述元素上（它們本身不需要被激活、與用戶交互，而是需要在js代碼中調用focus()使其獲得焦點），因此最好將tabindex設為-1，以避免Tab和focus()都能激活該元素。

新增屬性

contentEditable

contentEditable用于指定是否允許開發者直接編輯HTML元素中的內容，值為true或false。
這里的HTML元素并不是指那些原本就允許用戶輸入的表單元素，而是主要針對于<table>、<div>這種元素，將其中內容變為可編輯狀態。

HTML文檔是樹形結構，父元素被指定contentEditable="true"時，子元素默認也是true，除非特殊指定contentEditable=“false”。

若是用戶可編輯，用戶編輯后的內容就會顯示在該頁面中。可惜的是，這些內容不會被保存，一旦刷新頁面，編輯的內容就會“丟失”。
開發者可以通過innerHTML屬性獲取編輯后的內容。

designMode

designMode屬性就像是全局的contentEditable屬性，有on和off兩種取值。
當整個頁面的designMode被設置為on時，頁面上所有支持contentEditable屬性的元素都變成可編輯狀態。

hidden

hidden屬性告訴瀏覽器是否隱藏該元素，有true和false兩種取值。
一旦hidden是true，不僅意味著瀏覽器不顯示該組件，瀏覽器甚至不會保留該組件占有的空間。
hidden屬性可以代替CSS樣式單中的display屬性，設置hidden="true"相當于在CSS中設置display:none。

spellcheck

spellcheck屬性告訴瀏覽器對用戶輸入的內容進行拼寫檢查，有true和false兩種取值。
spellcheck屬性作用于<area>、<textarea>等元素，如果被開啟的時候遇到拼錯的單詞，瀏覽器會給出錯誤提示（紅色波浪下劃線）。
備注：Firefox暫不支持

contextmenu

contextmenu屬性用于為HTML元素設置右鍵菜單，該屬性目前不被主流瀏覽器支持。

總結

以上是生活随笔為你收集整理的【HTML5】HTML5支持的通用属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。