HTML 屬性

本章介紹 HTML 的標簽內屬性控制方式以及幾種通用的屬性的簡單介紹。屬性是 HTML 標簽內提供的附加信息，一般用于描述標簽或者控制標簽的展現形式。

屬性大部分情況下以鍵值對方式出現，比如 key='value'。

1. 全局屬性

全局屬性是大部分標簽都可以使用的屬性，常用到的有以下 8 個：

1. accesskey
2. class
3. id
4. lang
5. style
6. tabindex
7. dir
8. title

下面我們具體來看一下他們的用法。

1.1 accesskey

accessKey 屬性定義了使元素獲得焦點的快捷鍵。
例如，定義了一組表單元素 ：

在瀏覽器中，當你同時按下 ALT+h 鍵，焦點會自動切換到上邊的表單標簽。
目前有 <a> <area> <button> <input> <label> <legend> <textarea>元素支持 accessKey 屬性。

1.2 class

class 屬性規定了元素的類名，類名命名必須以字母為開頭，內容中可以包含大小寫字母和下劃線("_")或者橫杠("-")，類名是區分大小寫的，類名可以定義多個，以 “ ” 空格隔開，例如定義了段落元素。

<p class="class1 class2 class3"></p>

相當于給 p 元素定義了 class1 class2 class3 3個類。
給元素定義類相當于給元素打了個標簽，在 JavaScript 中操作 DOM 提供了便捷，例如可以通過：

以上 demo 通過點擊按鈕，基于操控對應 DOM 的 class 來控制按鈕的顯示與隱藏。

1.3 id

id 屬性類似于 class，不同的是 id 是唯一標簽，不能重復；

<div id='test'></div>

類似于class，id 也是用于操作 dom 的標記，例如：

以上 demo 通過點擊按鈕，基于操控對應 dom 的 class 來控制按鈕的顯示與隱藏。

1.4 lang

lang 屬性定義了網頁或者元素的語言，是否定義 lang 屬性對網頁或者標簽的展現影響不大，但是可以幫助搜索引擎或者瀏覽器區分出網頁的語言。ISO 639-1 為各種語言定義了縮略詞。

1.5 style

style 屬性定義了元素的行內樣式（也叫內聯樣式），行內樣式優先于任何其他形式定義的樣式。

其他兩種定義元素樣式的方式是：

• style 標簽；
• 引入 css 樣式文件。

<style>
.test{
}
</style><!-- 使用標簽的方式 -->

<link href="/css/test.css" /> <!-- 使用引用的方式 -->

其中 css 樣式的優先級是： 行內樣式 > 標簽方式 > 引用文件 方式。
關于樣式的內容本章節不做具體討論。

1.6 tabindex

tabindex 屬性用于定義元素的 tab 鍵的控制順序，即焦點的順序。

tabindex 的值可以在 1 到 32767 之間的任意數字。當用戶使用 tab 鍵在網頁中移動控件時，將首先移動到具有最小 tabindex 屬性的控件上，然后依次按從小到大移動。

如果兩個元素的 tabindex 的屬性值相等，瀏覽器會按照代碼出現的順序移動。當一個元素的 tabindex 設置為 -1，那么這個元素會排除在 tab 的移動順序之外。

在上述示例中，通過點擊鍵盤的 tab 鍵可以看到焦點依次按順序通過鏈接標簽。

1.7 dir

dir 屬性定義元素內文本的方向。參數值有 2 種：

• ltr 默認值。文字按從左到右的方向；
• rtl 文字按照從右到左的方向。

1.8 title

title 屬性用于指定元素的備注信息。這些信息通常是指，鼠標移動到元素上并且停留一段時間時，瀏覽器的提示框內的文本。

上面的代碼實現的功能是：當段落文字超出段落寬度時，顯示省略號，并且鼠標移上去可顯示全部內容：

2. HTML5 新增全局屬性

2.1 contentEditable

這個屬性是用來將一個標簽變成可編輯的類型，可能了解的人并不太多，在加入 HTML5 標準以前，瀏覽器也有部分支持。比較通用的創建一個可編輯標簽的方式是，使用表單 input 或者 textarea 的方式，不過都有一定的局限性。

• 會跟隨 form 表單提交內容，有時候你可能并不需要；
• 展現樣式比較單一。

使用 div + css + contentEditable 可以解決以上的問題，例如：

以上定義了一個段落，如果沒有加 contentEditable 屬性的話，段落只是展示作用，當加了 contentEditable 屬性之后，鼠標點擊此段落之后可以編輯段落文字。

2.2 contextmenu

contextmenu 屬性用于制定 div 元素的右鍵單擊菜單，需要配合 menu 標簽使用，例如：

這個功能類似于桌面應用的右鍵菜單功能，但是目前只有 Firefox 瀏覽器支持 contextmenu 屬性，不支持的瀏覽器可以使用 div + css 模擬實現。

2.3 data-*

這個屬性是 HTML5 中用于存儲自定義屬性值，自定義屬性值用于方便開發者存儲一些簡單的數據內容，而不需從服務器端獲取。

在 HTML4 中自定義屬性的方式很有可能會跟系統關鍵字沖突，而 data-* 會被客戶端忽略。

• data- 后邊必須至少有一個字符，不要包含大寫字符；
• JavaScript 可以用 getAttribute 函數獲取自定義屬性；
• HTML5 原生函數支持使用 dataset / setAttribute 來 獲取/操作自定義屬性。

下面是 JavaScrip t使用 getAttribute 函數獲取自定義屬性的例子：

以上示例通過 data-type 保存了無序列表中每個條目的類型值，通過點擊列表條目可以彈出類型值。

2.4 draggable

這個屬性用來標識元素是否支持被拖動，如果沒有被設置則按照瀏覽器默認的方式來執行，屬性可選值有 true/false/auto 。默認情況下，只有圖片、鏈接是可以拖動的。需要配合定義 ondragstart 事件來實現拖動之后的響應機制。

上述標簽，當鼠標點擊段落且移動時，呈現出可拖動樣式：

如果未定義 draggable 屬性，鼠標點擊段落且拖動會選中文本：

2.5 dropzone

dropzone 屬性是指在元素上拖動數據時，是否拷貝、移動或鏈接被拖動數據。目前所有主流瀏覽器暫不支持該屬性。

2.6 hidden

hidden 用來設置元素是否應該被隱藏，當該屬性設置為 hidden 或者 true 時，瀏覽器將不再渲染該元素。在早期的 HTML4 中，通過設置 css 樣式 display:none 可以實現相同的效果。

上述表單在瀏覽器不顯示任何效果，只有當提交表單時數據才會提交到服務器端。

2.7 spellcheck

spellcheck 屬性定義是否對元素進行拼寫檢查，目前該屬性支持非密碼的 input 標簽、textarea 中的文本，可編輯元素中的文本。spellcheck 的值有 true 和 false。

2.8 translate

translate 屬性定義渲染元素時是否需要對內容進行翻譯，目前所有主流瀏覽器都不支持該屬性。

3. 總結

回顧本章，介紹了 HTML 通用的 8 個屬性，以及 HTML5 新增的 8 個通用屬性。通用的屬性一般對大部分元素標簽都支持，但是 HTML5 目前是新標準，所有有些屬性不能百分之百兼容所有的瀏覽器。因為瀏覽器更新迭代速度較快，所以在此沒有對瀏覽器兼容性做深入講解，大家在實際使用的時候可以在 w3c 官網或者其他網站手冊中查詢對照。