HTML（HyperText Markup Language）是網頁開發的基石，而屬性（Attribute）則是HTML元素的重要組成部分。它們為標簽提供附加信息，控制元素的行為、樣式或功能。本文將從基礎到進階，全面解析HTML屬性的核心概念和應用場景。

---

一、HTML屬性的基本結構

屬性位于HTML元素的開始標簽中，由以下部分組成：

<元素名 屬性名="屬性值">內容</元素名>

• 屬性名：定義功能的名稱（如?href,?src）

• 屬性值：賦予屬性的具體參數（如?"https://example.com"）

• 引號規范：雙引號為標準寫法，單引號可在特殊場景使用

示例：

<a href="https://example.com" title="訪問示例網站">點擊這里</a>

---

二、常見屬性類型

1. 核心通用屬性

屬性	作用	示例
id	唯一標識元素	<div id="header">
class	定義CSS類選擇器	<p class="text-red">
style	直接內聯樣式	<span style="color: blue;">
title	鼠標懸停提示信息	<abbr title="World Wide Web">WWW</abbr>

2. 表單相關屬性

<input type="email" name="user_email" placeholder="輸入郵箱" required>
<textarea rows="4" cols="50" maxlength="200"></textarea>

• type: 定義輸入類型（text/password/checkbox等）

• disabled: 禁用表單控件

• pattern: 正則表達式驗證

3. 媒體資源屬性

<img src="logo.png" alt="公司標志" width="200" loading="lazy">
<video controls autoplay muted><source src="movie.mp4" type="video/mp4">
</video>

• src: 資源路徑

• alt: 圖片描述（SEO與可訪問性關鍵）

• preload: 視頻預加載策略

4. 元數據屬性

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">

---

三、全局屬性（Global Attributes）

適用于所有HTML元素的通用屬性：

1. 內容可編輯

<div contenteditable="true">用戶可編輯區域</div>

2. 數據存儲

<article data-author="張三" data-publish-date="2023-08-20"></article>

通過JavaScript訪問：

document.querySelector('article').dataset.author; // 返回"張三"

3. 無障礙訪問

<nav aria-label="主菜單"><button aria-expanded="false">菜單</button>
</nav>

4. 其他重要全局屬性

• hidden：隱藏元素（保持DOM存在）

• tabindex：控制Tab鍵導航順序

• lang：定義元素語言（如lang="en"）

---

四、自定義屬性規范

HTML5引入的data-*屬性規范：

<div data-user-id="U1234" data-role="admin"></div>

• 命名規則：必須小寫，包含連字符

• JavaScript訪問方式：

  element.dataset.userId; // 返回"U1234"

---

五、使用注意事項

1. 屬性順序：不影響功能但建議保持一致性

2. 引號省略：僅限無空格的值（不推薦）

3. 布爾屬性：存在即生效（如<input disabled>）

4. 語義化優先：優先使用標準屬性

5. 兼容性檢查：新屬性需驗證瀏覽器支持

---

六、最佳實踐

1. 可訪問性：為圖片添加alt，為表單添加label

2. 響應式設計：配合srcset和sizes屬性

3. 性能優化：使用loading="lazy"延遲加載

4. 安全防護：表單添加rel="noopener"防止釣魚