目錄
HTML 屬性
HTML 屬性速查表
一、通用屬性（所有元素適用）
二、鏈接與引用相關屬性
三、表單與輸入控件屬性
四、媒體與多媒體屬性
五、事件屬性（常用 JavaScript 事件）
六、其他常用屬性
核心通用屬性
id?屬性
class?屬性
style?屬性
title?屬性
lang?屬性
鏈接與資源屬性
href?屬性
src?屬性
target?屬性
alt?屬性
表單與交互屬性
name?屬性
type?屬性
value?屬性
placeholder?屬性
required?屬性
disabled?屬性
checked?屬性
媒體與尺寸屬性
width?與?height?屬性
controls?屬性
autoplay?屬性
loop?屬性
語義與結構屬性
rel?屬性
data-*?自定義屬性
表格屬性
border?屬性
colspan?與?rowspan?屬性
元信息屬性
charset?屬性
name?與?content?屬性（元標簽）
總結
?
HTML 屬性
在 HTML 中，屬性是添加在標簽內部的額外信息，用于對元素進行描述、配置或擴展功能。它們不會直接顯示在網頁內容中，但會影響元素的行為、外觀或數據傳遞方式。每個 HTML 標簽都有其預定義的屬性，部分通用屬性則可用于大多數標簽。下面按屬性的功能和適用范圍，分類介紹 HTML 中最常用的屬性。
好的，我根據常用 HTML 屬性整理了一份?按字母序和類型分類的 HTML 屬性速查表，方便查閱和開發使用。
HTML 屬性速查表
一、通用屬性（所有元素適用）
| 屬性名 | 說明 |
|---|---|
class | 為元素指定一個或多個類名，用于 CSS 或 JavaScript 選擇。 |
contenteditable | 指定元素是否可編輯。 |
data-* | 存儲自定義數據，可通過 JavaScript 訪問，常用于交互邏輯。 |
dir | 設置文本方向（ltr/rtl/auto）。 |
hidden | 隱藏元素，不顯示在頁面中。 |
id | 為元素指定唯一標識符，用于 CSS 或 JavaScript 選擇。 |
lang | 指定元素的語言代碼（如 zh-CN）。 |
spellcheck | 是否啟用拼寫檢查。 |
style | 直接在元素上應用 CSS 樣式。 |
tabindex | 設置元素的鍵盤導航順序。 |
title | 鼠標懸停時顯示提示信息。 |
二、鏈接與引用相關屬性
| 屬性名 | 適用元素 | 說明 |
|---|---|---|
href | <a>,?<link> | 指定鏈接目標 URL。 |
rel | <link>,?<a> | 定義鏈接與文檔的關系（如 stylesheet、nofollow 等）。 |
target | <a>,?<form> | 指定打開鏈接或提交表單的目標窗口，如?_blank、_self。 |
type | <a>,?<link> | 指定鏈接類型或 MIME 類型。 |
三、表單與輸入控件屬性
| 屬性名 | 適用元素 | 說明 |
|---|---|---|
autocomplete | 表單元素 | 指定輸入框是否啟用自動完成。 |
checked | <input type="checkbox">,?<input type="radio"> | 指定復選框或單選按鈕是否選中。 |
disabled | 表單元素 | 禁用元素，使其不可交互。 |
maxlength | <input>,?<textarea> | 最大輸入長度。 |
min | <input> | 數值或日期的最小值。 |
max | <input> | 數值或日期的最大值。 |
name | 表單元素 | 元素的名稱，用于提交表單數據。 |
placeholder | <input>,?<textarea> | 輸入框中的提示文本。 |
readonly | 表單元素 | 只讀屬性，用戶不能修改內容。 |
required | 表單元素 | 必填屬性，提交前必須填寫。 |
step | <input> | 設置數值變化步長。 |
value | <input>,?<button>,?<option> | 初始值。 |
四、媒體與多媒體屬性
| 屬性名 | 適用元素 | 說明 |
|---|---|---|
autoplay | <audio>,?<video> | 自動播放媒體。 |
controls | <audio>,?<video> | 顯示播放控件。 |
loop | <audio>,?<video> | 循環播放。 |
muted | <audio>,?<video> | 靜音播放。 |
preload | <audio>,?<video> | 預加載媒體，值為 none/metadata/auto。 |
poster | <video> | 視頻封面圖 URL。 |
src | <audio>,?<video>,?<img>,?<iframe>,?<script> | 指定資源路徑。 |
五、事件屬性（常用 JavaScript 事件）
| 屬性名 | 適用元素 | 說明 |
|---|---|---|
onclick | 所有元素 | 用戶點擊元素時觸發事件。 |
ondblclick | 所有元素 | 用戶雙擊元素時觸發事件。 |
onchange | 表單元素 | 元素值改變時觸發事件。 |
oninput | 表單元素 | 用戶輸入時觸發事件。 |
onmouseover | 所有元素 | 鼠標懸停元素時觸發事件。 |
onmouseout | 所有元素 | 鼠標離開元素時觸發事件。 |
onkeydown | 所有元素 | 按下鍵盤按鍵時觸發事件。 |
onkeyup | 所有元素 | 松開鍵盤按鍵時觸發事件。 |
六、其他常用屬性
| 屬性名 | 適用元素 | 說明 |
|---|---|---|
cols | <textarea> | 可見列數。 |
rows | <textarea> | 可見行數。 |
accept | <input type="file"> | 指定允許上傳的文件類型。 |
multiple | <input type="file">,?<select> | 允許多選。 |
form | 表單控件 | 指定元素所屬的?<form>。 |
rel | <a>,?<link> | 鏈接關系類型。 |
charset | <script> | 指定腳本的字符編碼。 |
crossorigin | <script>,?<img>,?<link> | 跨域資源請求方式。 |
核心通用屬性
這些屬性幾乎適用于所有 HTML 標簽，是配置元素基礎特性的核心工具。
id?屬性
- 作用：為元素定義唯一標識符，在整個 HTML 文檔中必須唯一。
- 用途：
- 配合 CSS 精準定位元素并設置樣式（如?
#header { color: red; }）。 - 作為錨點鏈接的目標（如?
<a href="#section1">?跳轉到?id="section1"?的元素）。 - 通過 JavaScript 快速獲取元素并操作（如?
document.getElementById("username")）。
- 配合 CSS 精準定位元素并設置樣式（如?
- 示例：
<div id="header">網站頭部</div>
class?屬性
- 作用：為元素定義一個或多個類名，用于對元素進行分組歸類。
- 用途：
- 批量為多個元素應用相同的 CSS 樣式（如?
.highlight { background: yellow; }）。 - 通過 JavaScript 篩選同類元素（如?
document.getElementsByClassName("item")）。
- 批量為多個元素應用相同的 CSS 樣式（如?
- 特點：一個元素可添加多個類名，用空格分隔。
- 示例：
<p class="text paragraph highlight">帶多個類的文本</p>
style?屬性
- 作用：為元素添加內聯 CSS 樣式，直接定義元素的外觀。
- 用途：快速設置元素的樣式（如顏色、字體、邊距等），優先級高于外部和內部樣式表。
- 語法：
style="屬性名1: 值1; 屬性名2: 值2;" - 示例：
<h1 style="color: blue; font-size: 24px;">藍色標題</h1>
title?屬性
- 作用：為元素添加額外說明文本，提升可訪問性。
- 表現：當鼠標懸停在元素上時，會顯示?
title?屬性的值作為提示框。 - 適用場景：解釋鏈接目標、補充圖片含義或說明復雜操作。
- 示例：
<a href="about.html" title="查看關于我們頁面">關于我們</a>
lang?屬性
- 作用：指定元素內容的語言類型，幫助瀏覽器和搜索引擎識別文本語言。
- 常見值：
zh-CN（簡體中文）、en（英文）、ja（日文）等。 - 用法：可用于?
<html>?標簽定義整個頁面語言，或單獨為某個元素指定語言。 - 示例：
<html lang="zh-CN">?或?<p lang="en">Hello World</p>
鏈接與資源屬性
這些屬性主要用于控制鏈接跳轉、資源加載路徑及相關行為。
href?屬性
- 作用：指定鏈接的目標地址，是?
<a>?標簽的核心屬性。 - 值類型：
- 外部 URL（如?
https://www.example.com）：跳轉到其他網站。 - 相對路徑（如?
page.html?或?../images/pic.jpg）：鏈接到站內資源。 - 錨點（如?
#section2）：跳轉到頁面內指定?id?的元素。 - 郵箱（如?
mailto:contact@example.com）：打開郵件客戶端。 - 電話（如?
tel:12345678）：在移動端觸發撥號。
- 外部 URL（如?
- 示例：
<a href="https://www.example.com" target="_blank">訪問示例網站</a>
src?屬性
-
作用：指定外部資源的路徑，用于引入圖片、音頻、視頻、腳本等。
-
常用標簽：
<img>、<audio>、<video>、<script>、<iframe>?等。 -
路徑類型：
- 絕對路徑（如?
https://example.com/image.jpg）：外部資源的完整 URL。 - 相對路徑（如?
images/photo.png）：站內資源的相對位置。
- 絕對路徑（如?
-
注意：
src?會觸發資源加載，對于?<script>?標簽，瀏覽器會暫停解析 HTML 直到腳本加載執行完成（除非使用?async?或?defer?屬性）。 -
示例：
<img src="images/cat.jpg" alt="貓咪圖片"> <script src="js/main.js"></script>
target?屬性
- 作用：指定鏈接或框架內容的打開方式，主要用于?
<a>?和?<iframe>?標簽。 - 常用值：
_self：默認值，在當前窗口打開目標內容。_blank：在新窗口或新標簽頁打開目標內容。_parent：在父框架中打開（用于框架頁面）。_top：在整個窗口中打開，忽略所有框架。- 框架名：在指定名稱的框架中打開內容。
- 示例：
<a href="news.html" target="_blank">在新窗口打開新聞</a>
alt?屬性
- 作用：為圖片等媒體元素提供替代文本，當資源無法加載時顯示。
- 重要性：
- 提升可訪問性：屏幕閱讀器會讀取?
alt?文本，幫助視覺障礙用戶理解內容。 - 優化 SEO：搜索引擎通過?
alt?文本識別圖片內容。 - 容錯性：圖片加載失敗時，用戶可通過替代文本了解圖片含義。
- 提升可訪問性：屏幕閱讀器會讀取?
- 示例：
<img src="logo.png" alt="網站logo，點擊返回首頁">
表單與交互屬性
這些屬性用于控制表單元素的行為、驗證規則和數據傳遞方式。
name?屬性
- 作用：為表單元素定義名稱，用于表單提交時標識數據字段。
- 重要性：
- 服務器接收表單數據時，通過?
name?屬性的值識別對應字段（如?username=張三）。 - 對于單選按鈕（
radio）和復選框（checkbox），相同?name?的元素會被視為一組。
- 服務器接收表單數據時，通過?
- 常用標簽：
<input>、<select>、<textarea>、<button>?等。 - 示例：
<input type="text" name="username" placeholder="請輸入用戶名">
type?屬性
-
作用：定義表單輸入框的類型，決定輸入方式和數據格式。
-
常用值（適用于?
<input>?標簽）：text：單行文本輸入框（默認值）。password：密碼輸入框，輸入內容會被隱藏為圓點或星號。radio：單選按鈕，允許從一組選項中選擇一個。checkbox：復選框，允許從一組選項中選擇多個。submit：提交按鈕，點擊后提交表單數據。reset：重置按鈕，點擊后將表單元素恢復到初始狀態。file：文件上傳控件，允許用戶選擇本地文件。email：郵箱輸入框，自帶基礎格式驗證。number：數字輸入框，只允許輸入數字。date：日期選擇器，提供日歷界面選擇日期。
-
示例：
<input type="email" name="email" placeholder="請輸入郵箱"> <input type="checkbox" name="hobby" value="reading"> 閱讀
value?屬性
- 作用：為表單元素設置初始值或提交值。
- 適用場景：
- 文本輸入框：預設初始文本（如?
<input type="text" value="默認內容">）。 - 單選/復選框：定義選中時提交的值（如?
<input type="radio" name="gender" value="male">）。 - 按鈕：設置按鈕上的顯示文本（如?
<button type="submit" value="submit">提交</button>）。
- 文本輸入框：預設初始文本（如?
- 示例：
<input type="text" name="username" value="張三">
placeholder?屬性
- 作用：為文本輸入框提供提示文本，當輸入框為空時顯示，輸入內容后消失。
- 用途：指導用戶輸入正確格式的內容（如郵箱、手機號等）。
- 常用標簽：
<input>（文本類類型）、<textarea>。 - 示例：
<input type="tel" placeholder="請輸入手機號" name="phone">
required?屬性
- 作用：標記表單元素為必填項，提交表單時若未填寫會觸發瀏覽器驗證并提示。
- 特點：無需屬性值，只需添加屬性名即可生效（布爾屬性）。
- 常用標簽：
<input>、<select>、<textarea>。 - 示例：
<input type="text" name="username" required placeholder="用戶名不能為空">
disabled?屬性
- 作用：禁用表單元素，使其無法交互（不可點擊、不可輸入），且不會提交數據。
- 特點：布爾屬性，添加后立即生效，通常用于條件性禁用（如未勾選協議時禁用提交按鈕）。
- 常用標簽：
<input>、<select>、<button>、<textarea>。 - 示例：
<button type="submit" disabled>提交（請先勾選協議）</button>
checked?屬性
-
作用：設置單選按鈕或復選框的初始選中狀態。
-
特點：布爾屬性，用于?
<input type="radio">?和?<input type="checkbox">。 -
示例：
<input type="radio" name="gender" value="male" checked> 男 <input type="checkbox" name="agree" checked> 我同意協議
媒體與尺寸屬性
這些屬性用于控制圖片、視頻、音頻等媒體元素的尺寸、播放行為和顯示方式。
width?與?height?屬性
- 作用：設置元素的寬度和高度，主要用于媒體標簽和表格等。
- 常用標簽：
<img>、<video>、<iframe>、<table>?等。 - 單位：
- 像素（px）：如?
width="300"?或?width="300px"（默認單位為像素）。 - 百分比：相對于父元素的比例，如?
width="50%"（響應式設計常用）。
- 像素（px）：如?
- 注意：對于圖片，只設置?
width?或?height?會自動按比例縮放，避免圖片變形。 - 示例：
<img src="banner.jpg" width="800" height="300" alt="橫幅圖片">
controls?屬性
-
作用：為音頻或視頻元素顯示默認播放控件（如播放/暫停按鈕、音量調節、進度條等）。
-
常用標簽：
<think>、<video>。 -
特點：布爾屬性，無需屬性值，添加后即顯示控件。
-
示例：
<audio src="music.mp3" controls></audio> <video src="movie.mp4" controls width="600"></video>
autoplay?屬性
- 作用：設置媒體元素在加載完成后自動播放。
- 常用標簽：
</think>、<video>。 - 限制：出于用戶體驗考慮，多數瀏覽器要求媒體靜音（設置?
muted?屬性）才能自動播放。 - 示例：
<video src="intro.mp4" autoplay muted loop controls></video>
loop?屬性
- 作用：設置媒體元素播放結束后自動循環播放。
- 常用標簽：
</think>、<video>。 - 示例：
<audio src="bgm.mp3" loop controls></audio>
語義與結構屬性
這些屬性用于增強元素的語義化，幫助瀏覽器、搜索引擎和輔助工具理解頁面結構。
rel?屬性
- 作用：定義當前文檔與鏈接目標文檔之間的關系，主要用于?
<link>?和?<a>?標簽。 - 常用值：
stylesheet：用于?<link>?標簽引入外部 CSS 樣式表（如?<link rel="stylesheet" href="style.css">）。icon：指定網站圖標（如?<link rel="icon" href="favicon.ico">）。noopener：配合?target="_blank"?使用，提升安全性（如?<a href="url" target="_blank" rel="noopener">）。nofollow：告訴搜索引擎不要跟蹤該鏈接（如?<a href="url" rel="nofollow">）。
- 示例：
<link rel="stylesheet" type="text/css" href="theme.css">
data-*?自定義屬性
-
作用：允許開發者為元素添加自定義數據，用于存儲頁面或應用的私有數據。
-
命名規則：以?
data-?為前綴，后跟自定義名稱（如?data-id、data-user）。 -
用途：通過 JavaScript 讀取或修改這些數據，實現數據與元素的關聯（如?
element.dataset.id）。 -
示例：
<div class="user" data-id="123" data-name="張三">用戶信息</div> <script>const userDiv = document.querySelector('.user');console.log(userDiv.dataset.id); // 輸出 "123"console.log(userDiv.dataset.name); // 輸出 "張三" </script>
表格屬性
這些屬性用于控制表格的邊框、單元格合并和布局方式（HTML5 中部分屬性已推薦用 CSS 替代，但仍需了解）。
border?屬性
- 作用：為表格添加邊框，屬性值為邊框寬度（像素）。
- 常用標簽：
<table>。 - 示例：
<table border="1">（添加 1 像素寬的邊框）。
colspan?與?rowspan?屬性
-
作用：實現單元格的跨列合并和跨行合并。
colspan：指定單元格橫跨的列數（如?colspan="2"?表示橫跨 2 列）。rowspan：指定單元格縱跨的行數（如?rowspan="3"?表示縱跨 3 行）。
-
常用標簽：
<th>、<td>。 -
示例：
<table border="1"><tr><th colspan="2">表頭（跨2列）</th></tr><tr><td rowspan="2">左側（跨2行）</td><td>內容1</td></tr><tr><td>內容2</td></tr> </table>
元信息屬性
這些屬性位于?<meta>?標簽中，用于定義網頁的元數據，影響頁面渲染、SEO 和瀏覽器行為。
charset?屬性
- 作用：指定網頁的字符編碼方式，確保文本正確顯示。
- 常用值：
UTF-8（支持多語言字符，包括中文）。 - 示例：
<meta charset="UTF-8">（必須放在?<head>?中靠前位置）。
name?與?content?屬性（元標簽）
- 作用：通過?
name?定義元數據類型，content?提供具體內容。 - 常用組合：
- 頁面描述：
<meta name="description" content="這是一個介紹HTML屬性的網頁"> - 關鍵詞：
<meta name="keywords" content="HTML,屬性,前端開發"> - 作者：
<meta name="author" content="張三"> - 視口設置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">（用于響應式設計，確保移動端正確顯示）。
- 頁面描述：
- 示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
總結
HTML 屬性是擴展標簽功能的關鍵工具，它們通過定義路徑、樣式、行為和數據，使簡單的標簽能夠實現豐富的功能。掌握常用屬性的用法，需要理解以下核心原則：
- 語義優先：優先使用具有明確語義的屬性（如?
alt、title），提升頁面可訪問性和 SEO 友好性。 - 功能分離：盡量通過?
class?和外部 CSS 控制樣式，而非過度依賴?style?屬性；通過 JavaScript 處理交互，而非依賴標簽的原生屬性限制。 - 兼容性：注意部分屬性在不同瀏覽器中的表現差異（如?
autoplay），必要時添加兼容處理。
≡
?
