03 # 網頁元素的屬性

說明

​​網道HTML 教程​​學習筆記

1、簡介

網頁元素的屬性（attribute）可以定制元素的行為，不同的屬性會導緻元素有不同的行為。

注意：

1、屬性名與标簽名一樣，不區分大小寫。

2、屬性名與屬性值之間，通過等号=連接配接。

3、有些屬性是布爾屬性，屬性值可以省略，表示打開該屬性。

2、全局屬性

全局屬性（global attributes）是所有元素都可以使用的屬性。

2.1、id

id 屬性是元素在網頁内的唯一辨別符。

2.2、class

class 屬性用來對網頁元素進行分類。

2.3、title

title 屬性用來為元素添加附加說明。

2.4、tabindex

浏覽器允許使用 Tab 鍵，周遊網頁元素。

按下 Tab 鍵的時候，浏覽器怎麼知道跳到哪一個元素。HTML 提供了tabindex屬性，解決這個問題。它的名字的含義，就是 Tab 的順序（index）。

tabindex屬性的值是一個整數，表示使用者按下 Tab 鍵的時候，網頁焦點轉移的順序。

不同的屬性值有不同的含義：

• 負整數：該元素可以獲得焦點（比如focus()方法），但不參與 Tab 鍵對網頁元素的周遊。這個值通常是-1。
• 0：該元素參與 Tab 鍵的周遊，順序由浏覽器指定，通常是按照其在網頁裡面出現的位置。
• 正整數：網頁元素按照從小到大的順序（1、2、3、……），參與 Tab 鍵的周遊。如果多個元素的tabindex屬性相同，則按照在網頁源碼裡面出現的順序周遊。

2.5、accesskey

accesskey屬性指定網頁元素獲得焦點的快捷鍵，該屬性的值必須是單個的可列印字元。隻要按下快捷鍵，該元素就會得到焦點。

2.6、style

style屬性用來指定目前元素的 CSS 樣式。

2.7、hidden

hidden是一個布爾屬性，表示目前的網頁元素不再跟頁面相關，是以浏覽器不會渲染這個元素，是以就不會在網頁中看到它。

<div hidden>本句不會顯示在頁面上。</div>      

注意：

CSS 的可見性設定，高于hidden屬性。如果 CSS 設為該元素可見，hidden屬性将無效。

2.8、lang，dir

1、lang 屬性指定網頁元素使用的語言。

lang 屬性的值，必須符合 ​​BCP47​​ 的标準。下面是一些常見的語言代碼。

• ​

  ​zh​

  ​：中文
• ​

  ​zh-Hans​

  ​：簡體中文
• ​

  ​zh-Hant​

  ​：繁體中文
• ​

  ​en​

  ​：英語
• ​

  ​en-US​

  ​：美國英語
• ​

  ​en-GB​

  ​：英國英語
• ​

  ​es​

  ​：西班牙語
• ​

  ​fr​

  ​：法語

2、dir 屬性表示文字的閱讀方向，有三個可能的值。

• ​

  ​ltr​

  ​：從左到右閱讀，比如英語。
• ​

  ​rtl​

  ​：從右到左閱讀，阿拉伯語、波斯語、希伯來語都屬于這一類。
• ​

  ​auto​

  ​：浏覽器根據内容的解析結果，自行決定。

2.9、contenteditable

HTML 網頁的内容預設是使用者不能編輯，contenteditable屬性允許使用者修改内容。

• ​

  ​true​

  ​ 或 空字元串：内容可以編輯
• ​

  ​false​

  ​：不可以編輯

注意：

該屬性是枚舉屬性，不是布爾屬性，規範的寫法是最好帶上屬性值。

2.10、spellcheck

spellcheck 屬性表示：是否打開拼寫檢查。

浏覽器一般會自帶拼寫檢查功能，編輯内容時，拼錯的單詞下面會顯示紅色的波浪線。

注意：

• 該屬性是枚舉屬性，最好帶上屬性值。
• 如果沒有指定這個屬性，浏覽器将自行決定是否打開拼寫檢查。

2.11、data-屬性

data-屬性用于放置自定義資料。

css樣式使用

/* 例子1
<div data-role="mobile">
    Mobile only content
</div>
*/
div[data-role="mobile"] {
  display:none;
}

/* 例子2
<div class="test" data-content="This is the div content">test</div>
*/
.test:after {
  content: attr(data-content);
}      

2.12、事件處理屬性

全局屬性還包括事件處理屬性（event handler），用來響應使用者的動作。