元素的屬性 · HTML 教程

# 網頁元素的屬性 ## 簡介網頁元素的屬性（attribute）可以定制元素的行為，不同的屬性會導致元素有不同的行為。元素屬性的寫法是 HTML 標簽內部的“鍵值對”。 ```html <html lang="en"> ``` 上面代碼中，`<html>`標簽內部的鍵值對`lang="en"`，就稱為`html`元素的屬性。屬性名為`lang`，屬性值為`en`。屬性名與標簽名一樣，不區分大小寫，`lang`和`LANG`是同一個屬性。屬性名與屬性值之間，通過等號`=`連接。屬性值可以放在單引號或雙引號之中，建議統一使用雙引號。某些屬性值可以不使用引號，但是建議不要這樣寫。有些屬性是布爾屬性，即屬性值是一個布爾值，只有“打開”和“關閉”兩種情況。這時屬性值可以省略，只要添加了屬性名，就表示打開該屬性。 ```html <input type="text" required> ``` 上面代碼中，`required`就是`<input>`標簽的布爾屬性。如果加上這個屬性，就表示打開，沒有就是關閉。 ## 全局屬性全局屬性（global attributes）是所有元素都可以使用的屬性。也就是說，你可以把下面的屬性，加在任意一個網頁元素上面，不過有些屬性對某些元素可能不產生意義。下面是一些常見的全局屬性。 ### id `id`屬性是元素在網頁內的唯一標識符。比如，網頁可能包含多個`<p>`標簽，`id`屬性可以指定每個`<p>`標簽的唯一標識符。 ```html <p id="p1"></p> <p id="p2"></p> <p id="p3"></p> ``` 上面代碼中，三個`<p>`標簽具有不同的`id`屬性，因此可以區分。 `id`屬性的值必須是全局唯一的，同一個頁面不能有兩個相同的`id`屬性。另外，`id`屬性的值不得包含空格。 `id`屬性的值還可以在最前面加上`#`，放到 URL 中作為錨點，定位到該元素在網頁內部的位置。比如，用戶訪問網址`https://foo.com/index.html#bar`的時候，瀏覽器會自動將頁面滾動到`bar`的位置，讓用戶第一眼就看到這部分內容。 ### class `class`屬性用來對網頁元素進行分類。如果不同元素的`class`屬性值相同，就表示它們是一類的。 ```html <p class="para"></p> <p></p> <p class="para"></p> ``` 上面代碼中，第一個`<p>`和第三個`<p>`是一類，因為它們的`class`屬性相同。元素可以同時具有多個 class，它們之間使用空格分隔。 ```html <p class="p1 p2 p3"></p> ``` 上面的`p`元素同時具有`p1`、`p2`、`p3`三個 class。 ### title `title`屬性用來為元素添加附加說明。大多數瀏覽器中，鼠標懸浮在元素上面時，會將`title`屬性值作為浮動提示，顯示出來。 ```html <div title="版權說明"> <p>本站內容使用創意共享許可證，可以自由使用。</p> </div> ``` 上面代碼中，`title`屬性解釋了這一塊內容的目的。鼠標懸停在上面時，瀏覽器會顯示一個浮動提示。一旦鼠標移開，提示就會消失。 ### tabindex 網頁通常使用鼠標操作，但是某些情況下，用戶可能希望使用鍵盤，或者只有鍵盤可以用。因此，瀏覽器允許使用 Tab 鍵，遍歷網頁元素。也就是說，只要不停按下 Tab 鍵，網頁的焦點就會從一個元素轉移到另一個元素，選定焦點元素以后，就可以進行下一步操作，比如按下回車鍵訪問某個鏈接，或者直接在某個輸入框輸入文字。這里就有一個問題，按下 Tab 鍵的時候，瀏覽器怎么知道跳到哪一個元素。HTML 提供了`tabindex`屬性，解決這個問題。它的名字的含義，就是 Tab 的順序（index）。 `tabindex`屬性的值是一個整數，表示用戶按下 Tab 鍵的時候，網頁焦點轉移的順序。不同的屬性值有不同的含義。 - 負整數：該元素可以獲得焦點（比如使用 JavaScript 的`focus()`方法），但不參與 Tab 鍵對網頁元素的遍歷。這個值通常是`-1`。 - `0`：該元素參與 Tab 鍵的遍歷，順序由瀏覽器指定，通常是按照其在網頁里面出現的位置。 - 正整數：網頁元素按照從小到大的順序（1、2、3、……），參與 Tab 鍵的遍歷。如果多個元素的`tabindex`屬性相同，則按照在網頁源碼里面出現的順序遍歷。 ```html <p tabindex="0">這段文字可以獲得焦點。</p> ``` 上面代碼中，`<p>`標簽的`tabindex`為`0`，意味著該元素可以獲得焦點，并且也可以被 Tab 鍵遍歷，順序由其在源碼里面的位置決定。一般來說，`tabindex`屬性最好都設成`0`，按照自然順序進行遍歷，這樣比較符合用戶的預期，除非網頁有特殊布局。如果網頁所有元素都沒有設置`tabindex`，那么只有那些默認可以遍歷的元素（比如鏈接、輸入框等）才能參與 Tab 鍵的遍歷，順序由其在源碼的位置決定。因此實際上，只有那些無法獲得焦點的元素（比如`<span>`、`<div>`）需要參與遍歷，才有必要設置`tabindex`屬性。 ### accesskey `accesskey`屬性指定網頁元素獲得焦點的快捷鍵，該屬性的值必須是單個的可打印字符。只要按下快捷鍵，該元素就會得到焦點。 ```html <button accesskey="s">提交</button> ``` 上面代碼中，`<button>`的快捷鍵是`s`，按下快捷鍵，該元素就得到了焦點。 `accesskey`屬性的字符鍵，必須配合功能鍵，一起按下才會生效。也就是說，快捷鍵是“功能鍵 + 字符鍵”的組合。不同的瀏覽器與不同的操作系統，功能鍵都不一樣。比如，Chrome 瀏覽器在 Windows 系統和 Linux 系統的快捷鍵是`Alt + 字符鍵`，在 Mac 系統的快捷鍵是`Ctrl + Alt + 字符鍵`。注意，`accesskey`如果跟操作系統或瀏覽器級別的快捷鍵有沖突，這時不會生效。 ### style `style`屬性用來指定當前元素的 CSS 樣式。具體的設置，請看 CSS 教程。 ```html <p style="color: red;">hello</p> ``` 上面代碼指定文字顏色為紅色。 ### hidden `hidden`是一個布爾屬性，表示當前的網頁元素不再跟頁面相關，因此瀏覽器不會渲染這個元素，所以就不會在網頁中看到它。 ```html <p hidden>本句不會顯示在頁面上。</p> ``` 上面代碼中，這個`p`元素不會出現在網頁上。注意，CSS 的可見性設置，高于`hidden`屬性。如果 CSS 設為該元素可見，`hidden`屬性將無效。 ### lang，dir `lang`屬性指定網頁元素使用的語言。 ```html <p lang="en">hello</p> <p lang="zh">你好</p> ``` 上面代碼中，第一個`<p>`的`lang`屬性，表示使用英語，第二個`<p>`的`lang`屬性，表示使用中文。 `lang`屬性的值，必須符合 [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) 的標準。下面是一些常見的語言代碼。 - zh：中文 - zh-Hans：簡體中文 - zh-Hant：繁體中文 - en：英語 - en-US：美國英語 - en-GB：英國英語 - es：西班牙語 - fr：法語 `dir`屬性表示文字的閱讀方向，有三個可能的值。 - `ltr`：從左到右閱讀，比如英語。 - `rtl`：從右到左閱讀，阿拉伯語、波斯語、希伯來語都屬于這一類。 - `auto`：瀏覽器根據內容的解析結果，自行決定。 ### contenteditable HTML 網頁的內容默認是用戶不能編輯，`contenteditable`屬性允許用戶修改內容。它有兩個可能的值。 - `true`或空字符串：內容可以編輯 - `false`：不可以編輯 ```html <p contenteditable="true"> 鼠標點擊，本句內容可修改。 </p> ``` 上面代碼中，鼠標單擊句子，就可以進入編輯狀態，用戶可以改變句子的內容。當然，除非提交到服務器，否則刷新頁面還是顯示原來的內容。該屬性是枚舉屬性，不是布爾屬性，規范的寫法是最好帶上屬性值。 ### spellcheck 瀏覽器一般會自帶拼寫檢查功能，編輯內容時，拼錯的單詞下面會顯示紅色的波浪線。`spellcheck`屬性就表示，是否打開拼寫檢查。它有兩個可能的值。 - `true`：打開拼寫檢查 - `false`：關閉拼寫檢查 ```html <p contenteditable="true" spellcheck="true"> 英語單詞 separate 容易寫錯成 seperate。 </p> ``` 上面代碼中，`seperate`下面會有提示，表示拼錯了。注意，由于該屬性只在編輯時生效，所以這個例子必須加上`contenteditable`屬性，表示本段內容可編輯。鼠標單擊就可以進入編輯狀態，這時才會看到拼寫提示。不可編輯的狀態下，拼寫錯誤是不提示顯示的。對于那些不可編輯的元素，該屬性無效。這個屬性看上去像布爾屬性，但是其實是枚舉屬性，所以最好不要省略它的值。如果沒有指定這個屬性，瀏覽器將自行決定是否打開拼寫檢查。 ### `data-`屬性 `data-`屬性用于放置自定義數據。如果沒有其他屬性或元素合適放置數據，就可以放在`data-`屬性。 ```html <a href="#" class="tooltip" data-tip="this is the tip!">鏈接</a> ``` 上面代碼中，`data-tip`用于放置鏈接的提示文字。由于`data-`屬性只能通過 CSS 或 JavaScript 利用，所以這里不做詳細介紹了。下面是 CSS 的例子。 ```css /* HTML 代碼如下 <div data-role="mobile"> Mobile only content </div> */ div[data-role="mobile"] { display:none; } /* HTML 代碼如下 <div class="test" data-content="This is the div content">test</div>? */ .test { display: inline-block; } .test:after { content: attr(data-content); } ``` ### 事件處理屬性除了上面這些屬性，全局屬性還包括事件處理屬性（event handler），用來響應用戶的動作。這些屬性的值都是 JavaScript 代碼，請參考 JavaScript 教程，這里只列出這些屬性的名單。 > onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting