使用微信掃一掃
掃一掃關注官方微信 最全的HTML5全局屬性
- 來源：縱橫數據
- 作者：中橫科技
- 時間：2022/8/18 17:27:12
- 類別：新聞資訊
HTML5全局屬性匯總，首先我們要知道屬性是什么有哪些。屬性分為局部屬性和全局屬性，我們將簡單介紹一下。
局部屬性：有些元素能規定自己的屬性，這種屬性稱為局部屬性。
比如link元素，它具有的局部屬性有href、 rel、 hreflang、 media、 type、 sizes這六個。
全局屬性：可以用來配置所有元素共有的行為，這種屬性稱為全局屬性，可以用在任何一個元素身上。
1、accesskey屬性
使用accesskey屬性可以設定一個或幾個用來選擇頁面上的元素的快捷鍵。
| 12345678910111213141516171819202122 | <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML全局屬性測試</title></head><body> <form action=""> <p> Name: <input type="text" name="name" id="" accesskey="n"> </p> <p> Password: <input type="password" name="password" id="" accesskey="p"> </p> <p> Name: <input type="submit" name="" id="" value="Log In" accesskey="s"> </p> </form></body></html> |
在上面的例子中，三個input元素添加了accesskey屬性，這樣在Mac下就可以用Control + Alt(Option) + n快捷鍵訪問到Name的輸入框了。用來觸發accesskey機制的按鍵組合因平臺而異，具體如下：
| 瀏覽器/平臺 | 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 |
關于accesskey這個全局屬性的詳解，可以看一下HTML accesskey屬性與web自定義鍵盤快捷訪問
2、class屬性
class屬性用來將元素歸類，這個就無需多言了。
3、contenteditable屬性
contenteditable是HTML5中新增加的屬性，，其用途是讓用戶能夠修改頁面上的內容。
| 1234 | <body> <!-- contenteditable屬性應用 --> <p contenteditable="true">設置為 true 是可編輯的</p></body> |
如上例，p元素的contenteditable屬性值設置為true時，用戶可以單擊文字編輯內容。設置為false時禁止編輯。
4、dir屬性
dir屬性用來規定元素中文字的方向。有效值有兩個：ltr(從左到右)、rtl(從右到左)。
| 123 | <!-- dir屬性應用 --><p dir="ltr">從左到右</p><p dir="rtl">從右到左</p> |
5、draggable屬性
draggable屬性是HTML5支持拖放操作的方式之一，用來表示元素是否可被拖放。
6、dropzone屬性
dropzone屬性是HTML5支持拖放操作的方式之一，與draggable屬性搭配使用。
7、id屬性
id屬性用來給元素分配一個唯一的標識符。這個也無需多言。需要說明的一點是，id屬性還可以用來導航到文檔中的特定位置。
8、hidden屬性
hidden是個布爾屬性，表示相關元素當前不需要關注，瀏覽器對它的處理方式是隱藏相關元素（隱隱想起來控制一個元素的展示隱藏的時候，會自定義一個hidden類，然后在里面寫隱藏樣式），具體也可以看一下這篇介紹 HTML5的hidden屬性
| 12 | <!-- hidden屬性應用 --><p hidden>這個元素將會被隱藏</p> |
9、lang屬性
lang屬性用于說明元素內容使用的語言。lang屬性必須使用有效的ISO語音代碼，使用這個屬性的目的在于，讓瀏覽器調整其表達元素內容的方式，比如在使用了文字朗讀器的情況下正確發音。
| 12 | <!-- lang屬性應用 --><p lang="en">Hello - how are you?</p> |
10、spellcheck屬性
spellcheck屬性用來表明瀏覽器是否應該對元素的內容進行拼寫檢查，這個屬性只有用在用戶可以編輯的元素上時才有意義。
spellcheck屬性可以接受的值有兩個：true和false。至于拼寫檢查的實現方式則因瀏覽器而異。
| 12 | <!-- spellcheck屬性應用 --> <textarea name="" id="" cols="30" rows="10" spellcheck="true">This is some lalalala text</textarea> |
11、style屬性
style屬性用來直接在元素身上定義CSS樣式，這個也不做過多描述了。
12、tabindex屬性
HTML頁面的鍵盤焦點可以通過按Tab鍵在各元素之間切換。用tabindex屬性可以改變默認的轉移順序。
| 1234567 | <!-- tabindex屬性應用 --><form action=""> <label>Name: <input type="text" name="" id="" tabindex="2"></label> <label>City: <input type="text" name="" id="" tabindex="-1"></label> <label>Country: <input type="text" name="" id="" tabindex="1"></label> <input type="submit" value="" tabindex="3"></form> |
上面的代碼實現效果是：在按Tab鍵的過程中，tabindex為1的Country輸入框第一個被選中，接著焦點會跳到Name輸入框，最后是submit提交。tabindex設置為-1的元素不會在用戶按下Tab鍵后被選中。
13、title屬性
title屬性提供了元素的額外信息，瀏覽器通常用這些東西顯示工具條提示，這個在一些展示不全的文本標題也經常使用。
| 12 | <!-- title屬性應用 --><a href="//qiqihaobenben.github.io/" title="我的個人網站">qiqihaobenben.github.io</a> |
| 1 | <br> |
關于以上13種屬性的介紹，相信對大家有些幫助。
