HTML属性
HTML屬性
HTML屬性包含了元素的額外信息，它總是出現(xiàn)在HTML開始標(biāo)簽中，并且，通常以名/值對(duì)的形式出現(xiàn)（空屬性除外，它可以只有屬性沒有值）。屬性的名稱和值是大小寫無關(guān)的，推薦使用小寫。
HTML屬性的值有以下四種表現(xiàn)形式：
1）空值：只有屬性名稱，隱含的意思是屬性的值為布爾類型。在HTML5中，一切化繁為簡(jiǎn)，對(duì)于布爾型的屬性，可以不提供屬性的值。如果一定要提供一個(gè)值，值就是屬性名本身。如：
就可以直接寫成：
2）無引號(hào)值：如果屬性的值中不包含任何空格字符、單引號(hào)、雙引號(hào)、等號(hào)、大于號(hào)、小于號(hào)，也不為空，就可以省略屬性值兩邊的引號(hào)。如，<input type=submit value=submit>。
3）單引號(hào)值：如果屬性的值中不包含任何單引號(hào)，也不為空，就可以把屬性值放在單引號(hào)中。如，<input type='submit' value='submit'>。
4）雙引號(hào)值：如果屬性的值中不包含任何雙引號(hào)，也不為空，就可以把屬性值放在雙引號(hào)中。如，<input type="submit" value="submit">。
大多數(shù)的HTML元素都擁有多個(gè)屬性，多個(gè)屬性中，如果省略某個(gè)屬性，則該屬性使用默認(rèn)值。在定義多個(gè)屬性時(shí)，各屬性之間沒有先后次序，但屬性的名/值對(duì)之間必須用空格分開。如，a 元素就擁有多個(gè)屬性，每個(gè)屬性都有各自的值。如圖 1?5 所示：
圖1-5 html屬性有的屬性可以接受任何值，而有的屬性則只能接受預(yù)定義的值（也稱作枚舉值），即必須從一個(gè)標(biāo)準(zhǔn)列表中選擇一個(gè)值。如，link 元素的 href 屬性就可以接受任意值，而 media 屬性卻只能設(shè)置為 all、screen、print 等預(yù)定義值中的一個(gè)。如圖 1?6 所示：
圖1-6 html屬性取值HTML的屬性中，有些屬性只能用于特定元素，而有些屬性可以用于任何元素。可用于任何元素的屬性被稱作全局屬性。
HTML4中，提供了 6 個(gè)全局屬性，它們分別是 class、id、style、title、accesskey、tabIndex、dir，到了HTML5，又新增了 contenteditable、hidden、lang、spellcheck、translate、data-* 這6 個(gè)全局屬性：
class屬性
class屬性用來規(guī)定元素所使用的CSS類名（class name），該屬性對(duì) html、head、title、style、base、meta、param、script等這些元素?zé)o效。
一個(gè)元素的 class屬性值中可以包含多個(gè)類名，類名之間用空格分隔，表示為該元素應(yīng)用多個(gè)類選擇器合并后的樣式。
當(dāng)元素應(yīng)用多個(gè)類的樣式時(shí)，類名不分先后順序，元素的最終樣式就是所有這些樣式層疊后的效果。如：
這個(gè)p元素同時(shí)應(yīng)用了red和bold兩個(gè)類選擇器的樣式，則段落文本為紅色、粗體顯示。運(yùn)行結(jié)果如圖 1?7 所示：
圖1-7 class屬性id屬性
id屬性用來規(guī)定一個(gè)元素的 id，在一個(gè) HTML 文檔中，id必須是唯一的。定義 id屬性后，就可以通過 CSS 為帶有指定 id 的元素添加樣式，也可以通過 Javascript 來操作元素。假設(shè)頁面上有一個(gè)段落：
上述段落元素的 id屬性值為 paragraph，就可以通過CSS的 id 選擇器，為段落元素添加樣式。如：
上述代碼就表示把段落文本的顏色設(shè)置為紅色。運(yùn)行結(jié)果如圖 1?8 所示：
圖1-8 通過 id 選擇器定義樣式通過 Javascript，可以對(duì)元素進(jìn)行很多操作，如改變?cè)氐膬?nèi)容、為元素添加樣式等。可以為元素注冊(cè)某事件，當(dāng)事件發(fā)生時(shí)，對(duì)元素進(jìn)行相應(yīng)的操作。
如，為上述段落注冊(cè) onclick 事件，當(dāng)用戶在段落上點(diǎn)擊時(shí)，調(diào)用 Javascript 函數(shù)來改變段落的內(nèi)容：
HTML文檔中的任何一個(gè)元素，都會(huì)生成一個(gè)DOM對(duì)象。通過Javascript 操作元素時(shí)，首先通過 document.getElementById() 方法獲取對(duì)象的句柄，再通過 Javascript 的屬性或方法來操作元素。如，通過innerHTML屬性，就可以改變?cè)氐膬?nèi)容。請(qǐng)將以下代碼插入到HTML文檔的頭部：
上述代碼就表示，當(dāng)在段落上點(diǎn)擊時(shí)，將段落的內(nèi)容由“這里是段落的內(nèi)容！”，動(dòng)態(tài)修改為 "Hello World!"。運(yùn)行結(jié)果如圖 1?9 所示：
圖1-9 通過 id 改變?cè)貎?nèi)容style屬性
style屬性用來規(guī)定元素的內(nèi)聯(lián)樣式。如：
上述代碼通過 p 元素的 style屬性，為段落元素定義了一個(gè)內(nèi)聯(lián)樣式，讓段落中的文本以紅色、粗體顯示。
由于 style屬性定義的樣式優(yōu)先級(jí)最高，它將覆蓋任何在 <style> 標(biāo)簽或外部樣式表中定義的全局樣式。
title屬性
title屬性用來規(guī)定元素的額外信息，當(dāng)鼠標(biāo)移到元素上時(shí)，會(huì)顯示一個(gè)文本提示信息，信息的內(nèi)容是 title屬性的值。如：
上述代碼就表示，當(dāng)鼠標(biāo)移到段落上時(shí)，會(huì)顯示"我是測(cè)試文本"的提示信息。運(yùn)行結(jié)果如圖 1?10 所示：
圖1-10 title屬性為鏈接，特別是圖片鏈接添加 title屬性，當(dāng)把鼠標(biāo)移動(dòng)到鏈接上時(shí)，就會(huì)顯示 title屬性的值，可以達(dá)到補(bǔ)充說明或者提示的效果。
另外，由于搜素引擎無法直接讀取圖像的信息，而 title屬性可以為它提供文字信息，這對(duì)搜索引擎比較友好，是搜索引擎優(yōu)化的重要內(nèi)容。因此，強(qiáng)烈建議為所有的鏈接元素添加 title屬性。
accesskey屬性用來規(guī)定激活元素的快捷鍵，定義accesskey屬性后，就可以通過快捷鍵來激活元素，使它獲得焦點(diǎn)。
支持 accesskey屬性的元素有 a、area、button、input、abel、legend、textarea。如，以下代碼為鏈接元素定義的快捷鍵是字母 w：
不幸的是，不同瀏覽的快捷鍵和訪問方式卻不完全相同。IE和 Chrome 瀏覽器的快捷鍵是 ALT+w，FireFox 瀏覽器是 Alt+Shift+w。IE要先使用快捷鍵使鏈接獲得焦點(diǎn)，再按回車，來跳轉(zhuǎn)到鏈接指定的地址；而 FireFox 和 Chrome 瀏覽器，僅僅使用快捷鍵便能自動(dòng)跳轉(zhuǎn)鏈接指定的地址。
使用 accesskey屬性能夠增加應(yīng)用的易用性，特別是對(duì)那些使用鍵盤的用戶。因此，為菜單和導(dǎo)航定義 accesskey屬性，是非常不錯(cuò)的選擇。
tabIndex屬性
當(dāng)頁面上有很多元素的時(shí)候，就可以通過Tab鍵讓元素獲得焦點(diǎn)，并在元素間進(jìn)行移動(dòng)。默認(rèn)情況下，可以通過Tab鍵訪問的元素有 a、area、button、input、object、select、textarea，其他元素不能通過Tab鍵進(jìn)行訪問。
通過 tabIndex屬性，任何元素（包括那些不能獲得焦點(diǎn)的元素，如 <span> 或 <div>）都能被包含在Tab鍵的序列中，可以極大提高應(yīng)用的易用性。
tabIndex屬性的值大于0的元素，將按屬性值從小到大設(shè)置Tab鍵順序。使用Tab鍵訪問元素時(shí)，tabIndex屬性值最小的元素最先獲得焦點(diǎn)。如果兩個(gè)元素具有相同的 tabIndex屬性值，則以它們?cè)谠创a中出現(xiàn)的先后順序，前面的元素先獲得焦點(diǎn)。并且，tabIndex屬性的值可以不是從 1 開始，也可以不連續(xù)，瀏覽器會(huì)自動(dòng)進(jìn)行排序。
tabIndex屬性值等于 0的元素，將根據(jù)源代碼（或默認(rèn)頁面行為）的順序設(shè)置Tab鍵順序，并且排在所有 tabIndex屬性值大于 0 的元素之后。
tabIndex屬性值為負(fù)值（如，tabIndex = "-1"）的元素，將變成可由代碼獲得焦點(diǎn)，但它本身并不在Tab鍵序列中。也就是說，在按下Tab鍵時(shí)，該元素不能獲得焦點(diǎn)，但可以通過代碼讓它獲得焦點(diǎn)。
假設(shè)頁面上有三個(gè)鏈接元素，它們的 tabIndex屬性值依次是5、1、8：
在通過Tab鍵遍歷這些鏈接元素時(shí)，它們的訪問順序依次是聯(lián)系我們->商品分類->關(guān)于我們，而不是源碼中定義的順序。
dir屬性
dir屬性用來規(guī)定元素內(nèi)容的文本書寫方向，該屬性對(duì) base、br、frame、frameset、hr、iframe、param、script 等這些元素?zé)o效。
dir屬性的取值為 ltr | rtl，默認(rèn)值為 ltr。ltr表示從左向右的文本書寫方向，而 rtl 表示從右向左的文本書寫方向。
假設(shè)頁面上有兩個(gè)段落，第一個(gè)段落的 dir屬性設(shè)置為 ltr，第二個(gè)段落的 dir屬性設(shè)置為 rtl：
上述代碼的運(yùn)行結(jié)果如圖 1?11 所示：
圖1-11 文本書寫方向contenteditable屬性
在HTML4中，只有 type 屬性值為 text、password、file 的 input 元素，以及 textarea 元素的內(nèi)容是可編輯的。
到了HTML5，通過 contenteditable屬性，可以讓任何元素的內(nèi)容可編輯。如果一個(gè)元素沒有顯式設(shè)置 contenteditable屬性，它將從其父元素繼承該屬性的值。
contenteditable屬性是布爾屬性，取值為 true | false，默認(rèn)值為false。true 表示元素的內(nèi)容可編輯，false 表示元素的內(nèi)容不可編輯。
如果一個(gè)元素的內(nèi)容被設(shè)置為可編輯，當(dāng)用戶用鼠標(biāo)單擊該元素后，瀏覽器會(huì)向用戶提供一個(gè)插入符號(hào)，提示用戶該元素的內(nèi)容允許編輯，用戶就可以編輯該元素的內(nèi)容。
假設(shè)頁面上有一個(gè)段落，它的contenteditable屬性被設(shè)置為 true，則用戶可以編輯段落中的內(nèi)容：
上述代碼的運(yùn)行結(jié)果如圖 1?12 所示：
圖1-12 元素可編輯在HTML5中，一切化繁為簡(jiǎn)，對(duì)于任何布爾屬性，如果只提供屬性名，就等價(jià)于把該屬性設(shè)置為 true，如果沒有提供屬性名，就等價(jià)于把該屬性設(shè)置為 false。因此，上述代碼也可以寫成：
非常有趣的是，如果在現(xiàn)代瀏覽器地址欄輸入data:text/html, <html contenteditable>，即可打開一個(gè)簡(jiǎn)單的在線文本編輯器。是不是很神奇呀！
hidden屬性
hidden屬性用來規(guī)定元素是否在頁面上顯示出來。該屬性是布爾屬性，取值為 true | false，默認(rèn)值為true。true 表示顯示元素，false 表示不顯示元素。
假設(shè)整個(gè)頁面上只有一個(gè)段落，它被設(shè)置了 hidden屬性：
當(dāng)一個(gè)元素設(shè)置了hidden屬性后，它的表現(xiàn)跟CSS的 display: none 作用非常相似，元素將會(huì)消失，而且不占用任何頁面空間。因此，運(yùn)行上述代碼，頁面空空如也，看不到任何內(nèi)容。
lang屬性
lang屬性用來規(guī)定元素內(nèi)容所使用語言，其值為語言標(biāo)記。語言標(biāo)記用于幫助識(shí)別說話、書寫、或其他方式進(jìn)行交流時(shí)的語言。格式為：
由于 extension 和 privateuse 很少有人使用，這里只對(duì)比較常用的language、script、region、variant 進(jìn)行簡(jiǎn)單介紹：
1）language表示語言的文字種類，該屬性對(duì) base、br、frame、frameset、hr、iframe、param、script 等這些元素?zé)o效。語言的文字種類包含主要語言文字種類和擴(kuò)展語言文字種類兩部分內(nèi)容，兩者之間通過 "-" 連接起來。主要語言文字種類可以是 2 個(gè)字母，如zh（中文）、en（英文），也可以是 3 個(gè)字母，如cmn（普通話或國語發(fā)音）、yue（粵語發(fā)音）；擴(kuò)展語言文字種類必須為3個(gè)字母，如cmn、yue、lzh（Literary Chinese，文言文）。
2）script表示文本的書寫格式，必須是4個(gè)字母，如Hans（s 表示 simplified，即簡(jiǎn)體中文）、Hant（t 表示 traditional?，即繁體中文）。
3）region表示語言的國家地區(qū)，可以為2個(gè)字母，如CN（中國）、HK（香港），也可以為3個(gè)字母。
4）variant表示方言，它必須在IANA注冊(cè)后，才能使用。
以下代碼定義了三個(gè)段落，第一個(gè)段落的語言為文言文的簡(jiǎn)體中文，第二個(gè)段落的語言為文言文的繁體中文，第三個(gè)段落的語言為簡(jiǎn)體中文的大陸語言（非香港語言）：
上述代碼的運(yùn)行結(jié)果如圖 1?13 所示：
圖1-13 元素內(nèi)容的語言從上圖可以看出，瀏覽器渲在染頁面時(shí)，并不關(guān)心 lang屬性，無論 lang屬性的值是什么，它都會(huì)將元素中的文本內(nèi)容原封不動(dòng)顯示出來。
然而，搜索引擎、語音合成工具、翻譯工具等，卻要通過 lang屬性來確定內(nèi)容所使用的語言。因此，強(qiáng)烈建議為 html 根元素或某些特定語言的元素指定 lang屬性，來為文檔或相應(yīng)元素設(shè)置正確的語言，這將有助于搜索引擎根據(jù)語言搜索、或語音合成工具根據(jù)語言確定發(fā)音、或翻譯工具根據(jù)語言確定遵守的規(guī)則等等。
translate屬性
translate屬性規(guī)定是否應(yīng)該翻譯元素的內(nèi)容，目前為止，所有主流瀏覽器都無法正確地支持 translate屬性。
spellcheck屬性
spellcheck屬性規(guī)定是否對(duì)元素的文本內(nèi)容進(jìn)行拼寫或語法檢查。只有當(dāng)元素在可編輯狀態(tài)時(shí)，sepllcheck屬性才有意義。因此，一般是針對(duì)input[text]、textarea、contenteditable屬性值為 true 的元素進(jìn)行拼寫和語法檢查。如：
設(shè)置 spellcheck屬性后，瀏覽器會(huì)幫助對(duì)元素的文本內(nèi)容進(jìn)行拼寫或語法檢查，若發(fā)現(xiàn)拼寫或語法錯(cuò)誤，則用紅色的波浪下劃線進(jìn)行標(biāo)識(shí)。運(yùn)行結(jié)果如圖 1?14 所示：
圖1-14 標(biāo)識(shí)拼寫錯(cuò)誤當(dāng)在被標(biāo)識(shí)的文本上單擊鼠標(biāo)右鍵，瀏覽器就會(huì)給出相應(yīng)的提示，供用戶選擇。運(yùn)行結(jié)果如圖 1?15 所示：
圖1-15 拼寫錯(cuò)誤提示data-*屬性
data-*屬性允許開發(fā)人員為一個(gè)元素自定義私有屬性，通過這些私有屬性的值來存儲(chǔ)頁面或應(yīng)用程序的私有數(shù)據(jù)。如，
一個(gè)元素允許定義多個(gè)私有屬性，屬性值可以是任意字符串，但屬性名不允許包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個(gè)字符。
定義私有屬性后，就可以通過 Javascript 讀寫私有屬性的值。可以通過 dataset 對(duì)象的 "." 操作，也可以通過 setAttribute() 和 getAttribute() 方法來操作私有屬性的值。
1）使用 dataset 對(duì)象
當(dāng)使用 dataset 對(duì)象時(shí)，屬性名要去掉 "data-" 前綴，如果屬性名中包含連字符，還需要轉(zhuǎn)化為駝峰命名。因此，上述代碼中，私有屬性名為 user-list，當(dāng)使用 dataset 對(duì)象操作私有屬性時(shí)，需要轉(zhuǎn)化為駝峰命名，即userList。如：
當(dāng)然，也可以使用 jQuery，不過要記住的是，jQuery使用的是 data 方法來操作私有屬性。如：
2）使用 setAttribute() 和 getAttribute() 方法
由于 setAttribute() 和 getAttribute() 方法可以操作任何屬性，它并不關(guān)心這個(gè)屬性是否為私有屬性。因此，屬性名不必去掉 "data-" 前綴，也無需轉(zhuǎn)化為駝峰命名。如：??????
版權(quán)聲明：本文出自?歪脖網(wǎng)?的《HTML5 寶典》，歡迎在線閱讀，并提出寶貴意見。
總結(jié)
- 上一篇： 红包系统流量高并发技术详解
- 下一篇： 七分钟学会 HTML 网页制作