HTML5 – 屬性

在 HTML5 中，屬性是一種用于添加附加信息、指定元素行為或修改元素外觀的標記。愛掏網 - it200.com屬性的作用是為了定制化 HTML 元素的行為和表現。愛掏網 - it200.com本文將會對 HTML5 中的常用屬性進行詳細介紹。愛掏網 - it200.com

任何 HTML 元素都可以具有屬性。愛掏網 - it200.com屬性通常是一個名稱和一個值之間的鍵值對結構，其中名稱和值之間使用等號 = 連接。愛掏網 - it200.com例如：

<a >Visit Google</a>

上述代碼中，<a > 中的 href 就是一個屬性，它的值是 "www.google.com"。愛掏網 - it200.com

值得注意的是，屬性名是不區分大小寫的。愛掏網 - it200.com這意味著 class 和 CLASS 在使用時是等價的。愛掏網 - it200.com

2. 常用屬性

2.1 id

id 屬性定義了元素的唯一標識。愛掏網 - it200.com在一個 HTML 文檔中，不能有兩個具有相同 id 屬性的元素。愛掏網 - it200.comid 屬性可用于 JavaScript 或 CSS 中，通過 getElementById 或者 #id 選擇器訪問該元素。愛掏網 - it200.com

<div id="myDiv">This div has an id of myDiv</div>

在 JavaScript 中，可以使用以下方法訪問該元素：

const myDiv = document.getElementById("myDiv");

2.2 class

class 屬性允許給 HTML 元素定義一個或多個類名。愛掏網 - it200.com類名可以在 CSS 中用于定義樣式。愛掏網 - it200.com一個元素可以同時擁有多個類名，并用空格來分隔它們。愛掏網 - it200.com

<p class="highlight">This paragraph has a class of highlight</p>

在 CSS 中，可以使用以下方式訪問該元素：

.highlight {
  background-color: yellow;
}

2.3 title

title 屬性為元素提供了一個“提示”或“工具提示”，即鼠標懸停在元素上時出現的文本。愛掏網 - it200.com通常，title 屬性用于提供元素的額外信息。愛掏網 - it200.com

<span title="This is a tooltip">This element has a tooltip</span>

2.4 href

href 屬性指定鏈接目標的 URL，它通常用于 <a> 元素和 <link> 或 <base> 標簽。愛掏網 - it200.com對于 <a> 元素，href 屬性將 URL 目標設置為當前文檔的某個位置，而對于 <link> 和 <base> 標簽，href 屬性定義了要鏈接的外部資源的 URL。愛掏網 - it200.com

<a >Visit Baidu</a>

2.5 src

src 屬性指定元素要嵌入的外部文件的 URL，例如圖片、音頻、視頻等等。愛掏網 - it200.com通常，src 屬性用于 <img>, <audio> 和 <video> 等元素。愛掏網 - it200.com

<img src="https://www.example.com/image.jpg" alt="A beautiful image">

2.6 alt

alt 屬性定義了當圖像不能被加載時要顯示的替代文本。愛掏網 - it200.com替代文本可以讓搜索引擎更好地理解圖片內容，同時也有助于輔助技術用戶（如殘障人士）理解頁面的內容。愛掏網 - it200.com此外，如果瀏覽器無法加載圖片，alt 屬性也可以用于顯示一段文本代替圖片。愛掏網 - it200.com

<img src="https://www.example.com/image.jpg" alt="A beautiful image">

2.7 width / height

width 和 height 屬性分別定義了圖像、表格單元格、按鈕和其他元素的寬度和高度。愛掏網 - it200.com對于圖像來說，這兩個屬性還支持百分比單位。愛掏網 - it200.com

<img src="https://www.example.com/image.jpg" alt="A beautiful image" width="300" height="200">

2.8 style

style 屬性用于為元素指定內聯樣式。愛掏網 - it200.com內聯樣式可以直接在元素上指定，而不需要在樣式表中定義。愛掏網 - it200.comstyle 屬性通常用于微調元素的視覺效果。愛掏網 - it200.com

<div style="background-color: #ffc107; color: #fff;">This div has an inline style</div>

2.9 data-*

data-* 屬性用于自定義 HTML 元素，以便于為 JavaScript 提供數據屬性。愛掏網 - it200.com任何自定義屬性都必須以 data- 為前綴。愛掏網 - it200.com

<div data-id="12345">This is a custom div</div>

在 JavaScript 中，可以使用以下方式訪問該元素的 data-* 屬性：

const customElement = document.querySelector("[data-id='12345']");

3. 全局屬性

除了上述提到的 HTML 元素特定屬性之外，HTML5 還提供了一組全局屬性，適用于所有 HTML 元素。愛掏網 - it200.com這些屬性包括：

3.1 class

在全局屬性中，class 屬性可以用于任何 HTML 元素，并提供了定義一個或多個類名的方式。愛掏網 - it200.com

3.2 id

id 屬性也可以用于任何 HTML 元素，用于指定元素的唯一標識符。愛掏網 - it200.com

3.3 tabindex

tabindex 屬性指定了當前元素的 tab 鍵順序。愛掏網 - it200.com如果元素不是一個表單控件，此屬性可以通過 JavaScript 使元素獲得焦點。愛掏網 - it200.com此外，元素的默認順序是按照文檔順序排列。愛掏網 - it200.com

<div tabindex="1">This div can be focused with the tab key</div>

3.4 accesskey

accesskey 屬性可以用于任何 HTML 元素，用于定義一個可以觸發元素的快捷鍵。愛掏網 - it200.com按下鍵盤上的快捷鍵，即可焦點當前元素。愛掏網 - it200.com

<button accesskey="B">Click</button>

3.5 contenteditable

contenteditable 屬性在任何 HTML 元素上都可以使用。愛掏網 - it200.com如果將其設置為 true，則該元素的內容可以被用戶編輯。愛掏網 - it200.com此屬性一般不推薦使用，因為使元素的內容可編輯會降低其可訪問性。愛掏網 - it200.com

<p contenteditable="true">This paragraph is editable</p>

結論

本文對 HTML5 中的常用屬性進行了詳細介紹，這些屬性使得元素可以通過屬性來實現自定義表現和行為。愛掏網 - it200.com熟練掌握這些屬性可以使你更加高效地定制和優化你的 HTML 元素，同時還能夠提升頁面的交互性和可訪問性。愛掏網 - it200.com