站長(zhǎng)資訊網(wǎng)
在html中，全局屬性是指可以用來(lái)配置所有元素共有行為、可以用在任何一個(gè)元素身上的屬性。常用全局屬性有：class、hidden、id、lang、style、title、dir、contenteditable等等。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
局部屬性：有些元素能規(guī)定自己的屬性，這種屬性稱為局部屬性。 比如 link 元素，它具有的局部屬性有 href、 rel、 hreflang、 media、 type、 sizes 這六個(gè)。
全局屬性：可以用來(lái)配置所有元素共有的行為，這種屬性稱為全局屬性，可以用在任何一個(gè)元素身上。
1、accesskey 屬性
使用 accesskey 屬性可以設(shè)定一個(gè)或幾個(gè)用來(lái)選擇頁(yè)面上的元素的快捷鍵。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta > <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML全局屬性測(cè)試</title> </head> <body> <form action=""> <p> Name: <input type="text" > </p> <p> Password: <input type="password" > </p> <p> Name: <input type="submit" > </p> </form> </body> </html>
在上面的例子中，三個(gè) input 元素添加了 accesskey 屬性，這樣在 Mac 下就可以用 Control + Alt(Option) + n快捷鍵訪問(wèn)到 Name 的輸入框了。用來(lái)觸發(fā) accesskey 機(jī)制的按鍵組合因平臺(tái)而異，具體如下：
| 瀏覽器 / 平臺(tái) | Window | Linux | Mac |
|---|---|---|---|
| Firefox | Alt + Shift + key | Alt + Shift + key | Control + Alt + key |
| Internet Explorer | Alt + key | N/A | N/A |
| Google Chrome | Alt + key | Alt + key | Control + Alt + key |
| Safari | Alt + key | N/A | Control + Alt + key |
| Opera | 同 Google Chrome | 同 Google Chrome | 同 Google Chrome |
關(guān)于 accesskey 這個(gè)全局屬性的詳解，可以看一下 HTML accesskey 屬性與 web 自定義鍵盤(pán)快捷訪問(wèn)
2、class 屬性
class 屬性用來(lái)將元素歸類，這個(gè)就無(wú)需多言了。
3、contenteditable 屬性
contenteditable 是 HTML5 中新增加的屬性，，其用途是讓用戶能夠修改頁(yè)面上的內(nèi)容。
<body> <!-- contenteditable屬性應(yīng)用 --> <p contenteditable="true">設(shè)置為 true 是可編輯的</p> </body>
如上例，p 元素的 contenteditable 屬性值設(shè)置為 true 時(shí)，用戶可以單擊文字編輯內(nèi)容。設(shè)置為 false 時(shí)禁止編輯。
4、dir 屬性
dir 屬性用來(lái)規(guī)定元素中文字的方向。有效值有兩個(gè)：ltr(從左到右)、rtl(從右到左)。
<!-- dir屬性應(yīng)用 --> <p dir="ltr">從左到右</p> <p dir="rtl">從右到左</p>
5、draggable 屬性
draggable 屬性是 HTML5 支持拖放操作的方式之一，用來(lái)表示元素是否可被拖放。
6、dropzone 屬性
dropzone 屬性是 HTML5 支持拖放操作的方式之一，與 draggable 屬性搭配使用。
7、id 屬性
id 屬性用來(lái)給元素分配一個(gè)唯一的標(biāo)識(shí)符。這個(gè)也無(wú)需多言。需要說(shuō)明的一點(diǎn)是，id 屬性還可以用來(lái)導(dǎo)航到文檔中的特定位置。
8、hidden 屬性
hidden 是個(gè)布爾屬性，表示相關(guān)元素當(dāng)前不需要關(guān)注，瀏覽器對(duì)它的處理方式是隱藏相關(guān)元素（隱隱想起來(lái)控制一個(gè)元素的展示隱藏的時(shí)候，會(huì)自定義一個(gè) hidden 類，然后在里面寫(xiě)隱藏樣式），具體也可以看一下這篇介紹 HTML5 的 hidden 屬性
<!-- hidden屬性應(yīng)用 --> <div hidden>這個(gè)元素將會(huì)被隱藏</div>
9、lang 屬性
lang 屬性用于說(shuō)明元素內(nèi)容使用的語(yǔ)言。lang 屬性必須使用有效的 ISO 語(yǔ)音代碼，使用這個(gè)屬性的目的在于，讓瀏覽器調(diào)整其表達(dá)元素內(nèi)容的方式，比如在使用了文字朗讀器的情況下正確發(fā)音。
<!-- lang屬性應(yīng)用 --> <p>Hello - how are you?</p>
10、spellcheck 屬性
spellcheck 屬性用來(lái)表明瀏覽器是否應(yīng)該對(duì)元素的內(nèi)容進(jìn)行拼寫(xiě)檢查，這個(gè)屬性只有用在用戶可以編輯的元素上時(shí)才有意義。 spellcheck 屬性可以接受的值有兩個(gè)：true 和 false。至于拼寫(xiě)檢查的實(shí)現(xiàn)方式則因?yàn)g覽器而異。
<!-- spellcheck屬性應(yīng)用 --> <textarea >This is some lalalala text</textarea>
11、style 屬性
style 屬性用來(lái)直接在元素身上定義 CSS 樣式，這個(gè)也不做過(guò)多描述了。
12、tabindex 屬性
HTML 頁(yè)面的鍵盤(pán)焦點(diǎn)可以通過(guò)按 Tab 鍵在各元素之間切換。用 tabindex 屬性可以改變默認(rèn)的轉(zhuǎn)移順序。
<!-- tabindex屬性應(yīng)用 --> <form action=""> <label>Name: <input type="text" ></label> <label>City: <input type="text" ></label> <label>Country: <input type="text" ></label> <input type="submit" value="" tabindex="3"> </form>
上面的代碼實(shí)現(xiàn)效果是：在按 Tab 鍵的過(guò)程中，tabindex 為 1 的 Country 輸入框第一個(gè)被選中，接著焦點(diǎn)會(huì)跳到 Name 輸入框，最后是 submit 提交。tabindex 設(shè)置為 – 1 的元素不會(huì)在用戶按下 Tab 鍵后被選中。
13、title 屬性
title 屬性提供了元素的額外信息，瀏覽器通常用這些東西顯示工具條提示，這個(gè)在一些展示不全的文本標(biāo)題也經(jīng)常使用。
<!-- title屬性應(yīng)用 --> <a href="https://qiqihaobenben.github.io/" title="我的個(gè)人網(wǎng)站">qiqihaobenben.github.io</a>
14、contextmenu 屬性
自定義鼠標(biāo)右鍵彈出菜單內(nèi)容
15、data-* 屬性
為元素增加自定義屬性
16、translate 屬性
元素和子孫節(jié)點(diǎn)內(nèi)容是否需要本地化
推薦教程：《html視頻教程》
