HTML屬性

HTML屬性包含了元素的額外信息，它總是出現在HTML開始標簽中，并且，通常以名/值對的形式出現（空屬性除外，它可以只有屬性沒有值）。屬性的名稱和值是大小寫無關的，推薦使用小寫。

HTML屬性的值有以下四種表現形式：

1）空值：只有屬性名稱，隱含的意思是屬性的值為布爾類型。在HTML5中，一切化繁為簡，對于布爾型的屬性，可以不提供屬性的值。如果一定要提供一個值，值就是屬性名本身。如：

<input type="submit" disabled="disabled">

就可以直接寫成：

<input type="submit" disabled>

2）無引號值：如果屬性的值中不包含任何空格字符、單引號、雙引號、等號、大于號、小于號，也不為空，就可以省略屬性值兩邊的引號。如，<input type=submit value=submit>。

3）單引號值：如果屬性的值中不包含任何單引號，也不為空，就可以把屬性值放在單引號中。如，<input type='submit' value='submit'>。

4）雙引號值：如果屬性的值中不包含任何雙引號，也不為空，就可以把屬性值放在雙引號中。如，<input type="submit" value="submit">。

大多數的HTML元素都擁有多個屬性，多個屬性中，如果省略某個屬性，則該屬性使用默認值。在定義多個屬性時，各屬性之間沒有先后次序，但屬性的名/值對之間必須用空格分開。如，a 元素就擁有多個屬性，每個屬性都有各自的值。如圖 1?5 所示：

圖1-5 html屬性

有的屬性可以接受任何值，而有的屬性則只能接受預定義的值（也稱作枚舉值），即必須從一個標準列表中選擇一個值。如，link 元素的 href 屬性就可以接受任意值，而 media 屬性卻只能設置為 all、screen、print 等預定義值中的一個。如圖 1?6 所示：

圖1-6 html屬性取值

HTML的屬性中，有些屬性只能用于特定元素，而有些屬性可以用于任何元素?？捎糜谌魏卧氐膶傩员环Q作全局屬性。

HTML4中，提供了 6 個全局屬性，它們分別是 class、id、style、title、accesskey、tabIndex、dir，到了HTML5，又新增了 contenteditable、hidden、lang、spellcheck、translate、data-* 這6 個全局屬性：

class屬性

class屬性用來規(guī)定元素所使用的CSS類名（class name），該屬性對 html、head、title、style、base、meta、param、script等這些元素無效。

一個元素的 class屬性值中可以包含多個類名，類名之間用空格分隔，表示為該元素應用多個類選擇器合并后的樣式。

當元素應用多個類的樣式時，類名不分先后順序，元素的最終樣式就是所有這些樣式層疊后的效果。如：

.red { color: red; }

.bold { font-weight: bold; }

<p class = "red bold">本段落的文本將顯示為紅色、粗體。</p>

這個p元素同時應用了red和bold兩個類選擇器的樣式，則段落文本為紅色、粗體顯示。運行結果如圖 1?7 所示：

圖1-7 class屬性

id屬性

id屬性用來規(guī)定一個元素的 id，在一個 HTML 文檔中，id必須是唯一的。定義 id屬性后，就可以通過 CSS 為帶有指定 id 的元素添加樣式，也可以通過 Javascript 來操作元素。假設頁面上有一個段落：

<p id="paragraph">這里是段落的內容！</p>

上述段落元素的 id屬性值為 paragraph，就可以通過CSS的 id 選擇器，為段落元素添加樣式。如：

#paragraph {

??? color: red;

}

上述代碼就表示把段落文本的顏色設置為紅色。運行結果如圖 1?8 所示：

圖1-8 通過 id 選擇器定義樣式

通過 Javascript，可以對元素進行很多操作，如改變元素的內容、為元素添加樣式等?？梢詾樵刈阅呈录?#xff0c;當事件發(fā)生時，對元素進行相應的操作。

如，為上述段落注冊 onclick 事件，當用戶在段落上點擊時，調用 Javascript 函數來改變段落的內容：

<p id="paragraph" onclick="changeText()">這里是段落的內容！</p>

HTML文檔中的任何一個元素，都會生成一個DOM對象。通過Javascript 操作元素時，首先通過 document.getElementById() 方法獲取對象的句柄，再通過 Javascript 的屬性或方法來操作元素。如，通過innerHTML屬性，就可以改變元素的內容。請將以下代碼插入到HTML文檔的頭部：

<script>

function changeText() {

??? document.getElementById("paragraph").innerHTML = "Hello World!";

}

</script>

上述代碼就表示，當在段落上點擊時，將段落的內容由“這里是段落的內容！”，動態(tài)修改為 "Hello World!"。運行結果如圖 1?9 所示：

圖1-9 通過 id 改變元素內容

style屬性

style屬性用來規(guī)定元素的內聯(lián)樣式。如：

<p style="color: red;font-weight: bold;">本段落的文本將顯示為紅色、粗體。</p>

上述代碼通過 p 元素的 style屬性，為段落元素定義了一個內聯(lián)樣式，讓段落中的文本以紅色、粗體顯示。

由于 style屬性定義的樣式優(yōu)先級最高，它將覆蓋任何在 <style> 標簽或外部樣式表中定義的全局樣式。

title屬性

title屬性用來規(guī)定元素的額外信息，當鼠標移到元素上時，會顯示一個文本提示信息，信息的內容是 title屬性的值。如：

<p title="我是測試文本">測試文本</a>

上述代碼就表示，當鼠標移到段落上時，會顯示"我是測試文本"的提示信息。運行結果如圖 1?10 所示：

圖1-10 title屬性

為鏈接，特別是圖片鏈接添加 title屬性，當把鼠標移動到鏈接上時，就會顯示 title屬性的值，可以達到補充說明或者提示的效果。

另外，由于搜素引擎無法直接讀取圖像的信息，而 title屬性可以為它提供文字信息，這對搜索引擎比較友好，是搜索引擎優(yōu)化的重要內容。因此，強烈建議為所有的鏈接元素添加 title屬性。

accesskey屬性用來規(guī)定激活元素的快捷鍵，定義accesskey屬性后，就可以通過快捷鍵來激活元素，使它獲得焦點。

支持 accesskey屬性的元素有 a、area、button、input、abel、legend、textarea。如，以下代碼為鏈接元素定義的快捷鍵是字母 w：

<a href="http://www.waibo.wang/" accesskey="w">歪脖網</a>

不幸的是，不同瀏覽的快捷鍵和訪問方式卻不完全相同。IE和 Chrome 瀏覽器的快捷鍵是 ALT+w，FireFox 瀏覽器是 Alt+Shift+w。IE要先使用快捷鍵使鏈接獲得焦點，再按回車，來跳轉到鏈接指定的地址；而 FireFox 和 Chrome 瀏覽器，僅僅使用快捷鍵便能自動跳轉鏈接指定的地址。

使用 accesskey屬性能夠增加應用的易用性，特別是對那些使用鍵盤的用戶。因此，為菜單和導航定義 accesskey屬性，是非常不錯的選擇。

tabIndex屬性

當頁面上有很多元素的時候，就可以通過Tab鍵讓元素獲得焦點，并在元素間進行移動。默認情況下，可以通過Tab鍵訪問的元素有 a、area、button、input、object、select、textarea，其他元素不能通過Tab鍵進行訪問。

通過 tabIndex屬性，任何元素（包括那些不能獲得焦點的元素，如 <span> 或 <div>）都能被包含在Tab鍵的序列中，可以極大提高應用的易用性。

tabIndex屬性的值大于0的元素，將按屬性值從小到大設置Tab鍵順序。使用Tab鍵訪問元素時，tabIndex屬性值最小的元素最先獲得焦點。如果兩個元素具有相同的 tabIndex屬性值，則以它們在源碼中出現的先后順序，前面的元素先獲得焦點。并且，tabIndex屬性的值可以不是從 1 開始，也可以不連續(xù)，瀏覽器會自動進行排序。

tabIndex屬性值等于 0的元素，將根據源代碼（或默認頁面行為）的順序設置Tab鍵順序，并且排在所有 tabIndex屬性值大于 0 的元素之后。

tabIndex屬性值為負值（如，tabIndex = "-1"）的元素，將變成可由代碼獲得焦點，但它本身并不在Tab鍵序列中。也就是說，在按下Tab鍵時，該元素不能獲得焦點，但可以通過代碼讓它獲得焦點。

假設頁面上有三個鏈接元素，它們的 tabIndex屬性值依次是5、1、8：

<a href="#" tabIndex ="5">商品分類</a>

<a href="#" tabIndex ="1">聯(lián)系我們</a>

<a href="#" tabIndex ="8">關于我們</a>

在通過Tab鍵遍歷這些鏈接元素時，它們的訪問順序依次是聯(lián)系我們->商品分類->關于我們，而不是源碼中定義的順序。

dir屬性

dir屬性用來規(guī)定元素內容的文本書寫方向，該屬性對 base、br、frame、frameset、hr、iframe、param、script 等這些元素無效。

dir屬性的取值為 ltr | rtl，默認值為 ltr。ltr表示從左向右的文本書寫方向，而 rtl 表示從右向左的文本書寫方向。

假設頁面上有兩個段落，第一個段落的 dir屬性設置為 ltr，第二個段落的 dir屬性設置為 rtl：

<p dir="ltr">這段落文本從左到右書寫。</p>

<p dir="rtl">這段落文本從右到左書寫。</p>

上述代碼的運行結果如圖 1?11 所示：

圖1-11 文本書寫方向

contenteditable屬性

在HTML4中，只有 type 屬性值為 text、password、file 的 input 元素，以及 textarea 元素的內容是可編輯的。

到了HTML5，通過 contenteditable屬性，可以讓任何元素的內容可編輯。如果一個元素沒有顯式設置 contenteditable屬性，它將從其父元素繼承該屬性的值。

contenteditable屬性是布爾屬性，取值為 true | false，默認值為false。true 表示元素的內容可編輯，false 表示元素的內容不可編輯。

如果一個元素的內容被設置為可編輯，當用戶用鼠標單擊該元素后，瀏覽器會向用戶提供一個插入符號，提示用戶該元素的內容允許編輯，用戶就可以編輯該元素的內容。

假設頁面上有一個段落，它的contenteditable屬性被設置為 true，則用戶可以編輯段落中的內容：

<p contenteditable="true">這是一個可編輯的段落。</p>

上述代碼的運行結果如圖 1?12 所示：

圖1-12 元素可編輯

在HTML5中，一切化繁為簡，對于任何布爾屬性，如果只提供屬性名，就等價于把該屬性設置為 true，如果沒有提供屬性名，就等價于把該屬性設置為 false。因此，上述代碼也可以寫成：

<p contenteditable>這是一個可編輯的段落。</p>

非常有趣的是，如果在現代瀏覽器地址欄輸入data:text/html, <html contenteditable>，即可打開一個簡單的在線文本編輯器。是不是很神奇呀！

hidden屬性

hidden屬性用來規(guī)定元素是否在頁面上顯示出來。該屬性是布爾屬性，取值為 true | false，默認值為true。true 表示顯示元素，false 表示不顯示元素。

假設整個頁面上只有一個段落，它被設置了 hidden屬性：

<p hidden>You can't see me!</p>

當一個元素設置了hidden屬性后，它的表現跟CSS的 display: none 作用非常相似，元素將會消失，而且不占用任何頁面空間。因此，運行上述代碼，頁面空空如也，看不到任何內容。

lang屬性

lang屬性用來規(guī)定元素內容所使用語言，其值為語言標記。語言標記用于幫助識別說話、書寫、或其他方式進行交流時的語言。格式為：

langtag = language

???????? ["-" script]

???????? ["-" region]

??????? ?*("-" variant)

???????? *("-" extension)

???????? ["-" privateuse]

由于 extension 和 privateuse 很少有人使用，這里只對比較常用的language、script、region、variant 進行簡單介紹：

1）language表示語言的文字種類，該屬性對 base、br、frame、frameset、hr、iframe、param、script 等這些元素無效。語言的文字種類包含主要語言文字種類和擴展語言文字種類兩部分內容，兩者之間通過 "-" 連接起來。主要語言文字種類可以是 2 個字母，如zh（中文）、en（英文），也可以是 3 個字母，如cmn（普通話或國語發(fā)音）、yue（粵語發(fā)音）；擴展語言文字種類必須為3個字母，如cmn、yue、lzh（Literary Chinese，文言文）。

2）script表示文本的書寫格式，必須是4個字母，如Hans（s 表示 simplified，即簡體中文）、Hant（t 表示 traditional?，即繁體中文）。

3）region表示語言的國家地區(qū)，可以為2個字母，如CN（中國）、HK（香港），也可以為3個字母。

4）variant表示方言，它必須在IANA注冊后，才能使用。

以下代碼定義了三個段落，第一個段落的語言為文言文的簡體中文，第二個段落的語言為文言文的繁體中文，第三個段落的語言為簡體中文的大陸語言（非香港語言）：

<p lang="zh-lzh-Hans">驢不勝怒，蹄之</p>

<p lang="zh-lzh-Hant">驢不勝怒，蹄之</p>

<p lang="zh-Hans-CN">驢非常憤怒，用蹄子踢它</p>

上述代碼的運行結果如圖 1?13 所示：

圖1-13 元素內容的語言

從上圖可以看出，瀏覽器渲在染頁面時，并不關心 lang屬性，無論 lang屬性的值是什么，它都會將元素中的文本內容原封不動顯示出來。

然而，搜索引擎、語音合成工具、翻譯工具等，卻要通過 lang屬性來確定內容所使用的語言。因此，強烈建議為 html 根元素或某些特定語言的元素指定 lang屬性，來為文檔或相應元素設置正確的語言，這將有助于搜索引擎根據語言搜索、或語音合成工具根據語言確定發(fā)音、或翻譯工具根據語言確定遵守的規(guī)則等等。

translate屬性

translate屬性規(guī)定是否應該翻譯元素的內容，目前為止，所有主流瀏覽器都無法正確地支持 translate屬性。

spellcheck屬性

spellcheck屬性規(guī)定是否對元素的文本內容進行拼寫或語法檢查。只有當元素在可編輯狀態(tài)時，sepllcheck屬性才有意義。因此，一般是針對input[text]、textarea、contenteditable屬性值為 true 的元素進行拼寫和語法檢查。如：

<textarea cols="53" rows="3" spellcheck ></textarea>

設置 spellcheck屬性后，瀏覽器會幫助對元素的文本內容進行拼寫或語法檢查，若發(fā)現拼寫或語法錯誤，則用紅色的波浪下劃線進行標識。運行結果如圖 1?14 所示：

圖1-14 標識拼寫錯誤

當在被標識的文本上單擊鼠標右鍵，瀏覽器就會給出相應的提示，供用戶選擇。運行結果如圖 1?15 所示：

圖1-15 拼寫錯誤提示

data-*屬性

data-*屬性允許開發(fā)人員為一個元素自定義私有屬性，通過這些私有屬性的值來存儲頁面或應用程序的私有數據。如，

<p id="user" data-user-list="Bill Gates,Bill Clinton">用戶列表</p>

一個元素允許定義多個私有屬性，屬性值可以是任意字符串，但屬性名不允許包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符。

定義私有屬性后，就可以通過 Javascript 讀寫私有屬性的值。可以通過 dataset 對象的 "." 操作，也可以通過 setAttribute() 和 getAttribute() 方法來操作私有屬性的值。

1）使用 dataset 對象

當使用 dataset 對象時，屬性名要去掉 "data-" 前綴，如果屬性名中包含連字符，還需要轉化為駝峰命名。因此，上述代碼中，私有屬性名為 user-list，當使用 dataset 對象操作私有屬性時，需要轉化為駝峰命名，即userList。如：

var user = document.getElementById("user");

alert(user.dataset.userList);? // 讀取屬性值

user.dataset.userList = "Barack Hussein Obama";? // 設置屬性值

當然，也可以使用 jQuery，不過要記住的是，jQuery使用的是 data 方法來操作私有屬性。如：

alert($("#user").data('userList'));? // 讀取屬性值

$("#user").data("userList", "Barack Hussein Obama");? // 設置屬性值

2）使用 setAttribute() 和 getAttribute() 方法

由于 setAttribute() 和 getAttribute() 方法可以操作任何屬性，它并不關心這個屬性是否為私有屬性。因此，屬性名不必去掉 "data-" 前綴，也無需轉化為駝峰命名。如：??????

alert(user.getAttribute("data-user-list"));? // 讀取屬性值

user.setAttribute("data-user-list", "Barack Hussein Obama");? // 設置屬性值

版權聲明：本文出自?歪脖網?的《HTML5 寶典》，歡迎在線閱讀，并提出寶貴意見。

總結

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

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