HTML全局屬性 - 台部落

全局屬性是所有HTML元素共有的屬性; 它們可以用於所有元素，即使屬性可能對某些元素不起作用。

dir

枚舉屬性指示元素文本的方向性。

可以通過HTMLElement.dir來獲取/設置元素的方向

ltr，這意味着從左到右，用於從左到右書寫的語言（如英語）;
rtl，這意味着從右到左，用於從右到左書寫的語言（如阿拉伯語）;
auto，讓用戶代理決定。它使用基本算法，因爲它解析元素內的字符，直到找到具有強方向性的字符，然後將該方向性應用於整個元素。

todo

IE/Edge不支持auto關鍵字

accesskey

提供了爲當前元素生成快捷鍵的方式。屬性值必須包含一個可打印字符。

可以通過HTMLElement.accessKey來獲取/設置元素訪問的快捷鍵

HTMLElement.accessKeyLabel返回一個包含元素訪問的快捷鍵的字符串

各平臺激活accesskey的操作

圖片來自MDN

todo

IE觸發的是focus事件，其他瀏覽器是click事件
IE在元素被隱藏的情況下是觸發不了accesskey的，因爲隱藏的元素是不能被focus聚焦的
多個元素使用同一個accesskey
1. Chrome瀏覽器後面的會抵消前面的
2. Firefox瀏覽器都不會觸發click事件，而會變成focus事件
3. IE依然是按次序觸發focus事件
accesskey 值可能與系統或瀏覽器鍵盤快捷鍵或輔助技術功能相沖突。對於一個操作系統來說，輔助技術和瀏覽器組合可能無法與其他操作系統協同工作。
某些 accesskey 值可能不會出現在某些鍵盤上，特別是在國際化是一個問題的時候。
依賴於數字的 accesskey 值可能會讓那些經歷認知問題的人感到困惑，因爲他們的數字與它觸發的功能沒有邏輯關聯。
通知用戶accesskey存在，這樣他們就能意識到該功能。如果沒有公開這些信息的方法，accesskey可能會被意外激活。

autocapitalize

控制用戶輸入/編輯文本輸入時文本輸入是否自動大寫，以及如何自動大寫

none: 沒有應用自動大寫（所有字母都默認爲小寫字母）。
sentences: 每個句子的第一個字母默認爲大寫字母；所有其他字母都默認爲小寫字母。
words: 每個單詞的第一個字母默認爲大寫字母；所有其他字母都默認爲小寫字母。
characters: 所有的字母都默認爲大寫。

todo

autocapitalize 屬性可以覆蓋每個元素的行爲，比如關閉iOS中用戶開啓的首字母大寫。
當input元素的type屬性爲email，password，url時，autocapitalize不會生效

class

爲元素定義類名

contenteditable

定義元素是否可以被編輯，比如div使用此屬性來模擬textarea元素

可以通過HTMLElement.contentEditable來獲取/設置元素訪問的可編輯狀態

HTMLElement.isContentEditable返回元素的內容是否可以被編輯

true或者空字符串元素可被編輯
false元素不可被編輯

todo

如果未設置此屬性，默認值將從其父元素繼承。
屬性的值是枚舉屬性，且不允許簡寫
可以通過caret-color屬性改變插入符的顏色

data-*

可以讓用戶在HTML元素上嵌入自定義數據屬性的能力，並且可以通過js來進行操作

可以通過HTMLElement.dataset獲取元素的自定義屬性，是一個對象（key-value，只讀）

*的限制

不能以xml開頭，無論這些字母是大寫還是小寫；
不能包含任何分號 (U+003A)；
不能包含A至Z的大寫字母。

todo

任何破折號(U+002D) 都會被下個字母的大寫替代(駝峯拼寫)。
HTMLElement.dataset屬性是一個DOMStringMap
可以通過 HTMLElement.dataset.testValue ( 或者是HTMLElement.dataset["testValue"]) 來訪問

draggable

枚舉類型的屬性，標識元素是否允許使用拖放操作API拖動

true可以被拖動
false不可以被拖動
如果該屬性沒有設值，則默認值爲 auto ，表示使用瀏覽器定義的默認行爲

todo

枚舉屬性
不允許簡寫

dropzone

枚舉屬性，指示可以使用Drag and Drop API在元素上刪除哪些類型的內容

copy，表示drop將創建被拖動元素的副本。
move，表示拖動的元素將移動到此新位置。
link，這將創建拖動數據的鏈接。

hidden

布爾屬性，表示一個元素尚未或者不再相關。例如，它可以被用來隱藏一個頁面元素直到登錄完畢。如果一個元素設置了這個屬性，它就不會被顯示。

todo

如果某些內容被標記爲隱藏，它將從所有版塊中隱藏,包括例如屏幕閱讀器.
hidden屬性不能用於隱藏那些可以在其它板塊中合理顯示的內容
隱藏元素不應與非隱藏元素鏈接，作爲隱藏元素的後代的元素仍然是活動的，這意味着腳本元素仍然可以執行，表單元素仍然可以提交。
比如說，用 href標籤鏈接到一個帶有 hidden標籤的區塊是不對的。如果這個區塊和這個頁面不相干，或者這個區塊不適用於這個頁面，那沒有任何理由需要鏈接到它。

id

定義唯一標識符（ID），該標識符在整個文檔中必須是唯一的。其目的是在鏈接（使用片段標識符），腳本或樣式（使用CSS）時標識元素。

title

表示與元素相關的一些提示性文本，在鼠標放在元素上時呈現出來。

如果省略了這個屬性，就意味着這個元素的最近祖先的標題仍然是相關的（並且可以用作元素的提示信息）。如果這個屬性設爲空字符串，它就明確意味着，它的最近祖先的標題是不相關的（並且不應用於這個元素的提示信息）。

應用

鏈接：被鏈接文檔的標題或描述
媒體元素，例如圖像：描述或關聯信息
段落：腳註或者相關的評論
引用：作者信息，以及其他

translate

對應元素的屬性值及其子文本節點內容，是否跟隨系統語言作出對應的翻譯變化。

yes或者不設置,網頁在進行本地化的時候，對應內容要被翻譯。
no對應的內容無需做任何翻譯。

tabindex

元素是否可以聚焦，以及在何處參與聚焦

tabindex=負值 (通常是tabindex="-1")，表示元素是可聚焦的，但是不能通過鍵盤導航來訪問到該元素，用JS做頁面小組件內部鍵盤導航的時候非常有用。
tabindex="0" ，表示元素是可聚焦的，並且可以通過鍵盤導航來聚焦到該元素，它的相對順序是當前處於的DOM結構來決定的。
tabindex=正值，表示元素是可聚焦的，並且可以通過鍵盤導航來訪問到該元素；它的相對順序按照tabindex 的數值遞增而滯後獲焦。如果多個元素擁有相同的 tabindex，它們的相對順序按照他們在當前DOM中的先後順序決定。

todo

在div上設置了tabindex屬性，子元素的內容將不能使用箭頭鍵來滾動，除非在子元素上也設置tabindex

style

內聯的css樣式

spellcheck

枚舉屬性，標識是否可以檢查元素內容的拼寫錯誤

true會檢查
false不會檢查

如果沒有設置這個屬性，默認值由元素自身類型和瀏覽器設置決定。默認值也可以被繼承，當有祖先元素的 spellcheck 設置爲 true 的情況下，子元素的默認值也是 true。

todo

這個屬性僅僅是瀏覽器上的提示: 瀏覽器並不會強制去檢查拼寫錯誤，通常不可編輯的元素是不會去檢查拼寫錯誤的，就算它的spellcheck 屬性被設置爲true而且瀏覽器支持拼寫檢查。

各瀏覽器的默認設置和元素依賴: 來自MDN

瀏覽器	`html`	`textarea`	`input`	其他	附註
Firefox	`false`	`false`	`false`	inherited	當 `layout.spellcheckDefault` 值爲 `0`
false	true	inherited	inherited	當 layout.spellcheckDefault 值爲 1 (default value)
`false`	`true`	`true`	inherited	當 `layout.spellcheckDefault` 值爲 `2`
Seamonkey	`false`	`false`	`false`	inherited	當 `layout.spellcheckDefault` 值爲 `0`
false	true	inherited	inherited	當 layout.spellcheckDefault 值爲 1（默認如此）
`false`	`true`	`true`	inherited	當 `layout.spellcheckDefault` 值爲 `2`
Camino	`false`	`false`	`false`	inherited	當 `layout.spellcheckDefault` 值爲 `0`
`false`	`true`	inherited	inherited	當 `layout.spellcheckDefault` 值爲 `1`
false	true	true	inherited	當 layout.spellcheckDefault 值爲 2（默認如此）
Chrome	`false`	`true`	?	inherited
Internet Explorer	`false`	`true`	?	inherited
Opera	`false`	`true`	?	inherited
Safari	`false`	`true`	?	inherited

slot

行爲參考VUE的slot

lang

幫助定義元素的語言：不可編輯元素所在的語言，或者用戶應該編寫可編輯元素的語言。該屬性包含一個“語言標記”（由連字符分隔的“語言子標記”組成），其格式爲標識語言標記（BCP47）中定義的格式。xml：lang優先與它

:lang()基於元素語言來匹配元素

爲什麼要使用lang

W3C

microdata

具體信息可以查看前端的基礎修養

itemid

元素的唯一的全局標識符

todo

itemid 屬性只能爲同時擁有 itemscope 和 itemtype 的元素指定。
itemid 只能爲擁有 itemscope 的元素指定，它的相應 itemtype 引用或定義了支持全局標識符的詞彙

itemprop

向元素中添加屬性。每一個HTML元素都可以指定一個itemprop屬性，一個itemprop屬性由name-value對組成。每一個鍵值對稱爲一個屬性，一個元素可以有一個或者多個屬性。屬性值可以是一個string或者一個URL，並且可以和大部分元素進行組合。

itemref

在特殊情況，元素不能寫在itemscope中時，可以用itemref來標識，itemref使用元素的id來進行關聯

todo

itemref 屬性只能在指定了 itemscope 的元素上指定。

itemscope

值爲布爾值。定義了一個與元數據關聯的數據項。就是說一個元素的 itemscope 屬性會創建一個項，包含了一組與元素相關的鍵值對

todo

每個 HTML 元素都可以有指定的 itemscope 屬性。一個具有 itemscope 屬性的元素可以沒有關聯的 itemtype ，但必須有相關的 itemref。

itemtype

用於定義數據結構中的 itemprop（條目屬性）

todo

值必須是唯一標識的無序集合（大小寫敏感），並且每個標識都是有效的絕對 URL，並且所有都使用相同詞彙定義。屬性的值必須至少擁有一個標識。
條目的類型必須全部爲定義在適用規範（例如 schema.org）中的類型，並且必須使用相同詞彙定義。
只能在指定了 itemscope 屬性的元素上指定。

參考

全局屬性