HTML 屬性參考

HTML 中的元素具有**屬性**；這些是配置元素或以各種方式調整其行為以滿足使用者所需標準的附加值。

屬性列表

屬性名稱 元素 描述
accept <form>, <input> 伺服器接受的型別列表，通常是檔案型別。
accept-charset <form> 支援的字元集列表。
accesskey 全域性屬性 啟用或將焦點新增到元素的鍵盤快捷鍵。
action <form> 處理透過表單提交的資訊的程式的 URI。
align <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> 指定元素的水平對齊方式。
allow <iframe> 為 iframe 指定一個功能策略。
alt <area>, <img>, <input> 如果影像無法顯示，則顯示備用文字。
as <link> 指定連結載入的內容型別。
async <script> 非同步執行指令碼。
autocapitalize 全域性屬性 設定使用者輸入時是否自動大寫。
autocomplete <form>, <input>, <select>, <textarea> 指示此表單中的控制元件是否可以預設情況下由瀏覽器自動完成其值。
autoplay <audio>, <video> 音訊或影片應儘快播放。
background <body>, <table>, <td>, <th> 指定影像檔案的 URL。

注意：儘管瀏覽器和電子郵件客戶端可能仍然支援此屬性，但它已過時。請使用 CSS background-image 代替。
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

元素的背景顏色。

注意：這是一個遺留屬性。請使用 CSS background-color 屬性代替。
border <img>, <object>, <table>

邊框寬度。

注意：這是一個遺留屬性。請使用 CSS border 屬性代替。
capture <input> 來自 媒體捕獲規範，指定可以捕獲新檔案。
charset <meta> 宣告頁面或指令碼的字元編碼。
checked <input> 指示元素在頁面載入時是否應選中。
cite <blockquote>, <del>, <ins>, <q> 包含指向引文或更改來源的 URI。
class 全域性屬性 通常與 CSS 一起使用，以使用常見屬性對元素進行樣式化。
color <font>, <hr>

此屬性使用命名顏色或以十六進位制 #RRGGBB 格式指定的顏色設定文字顏色。

注意：這是一個遺留屬性。請使用 CSS color 屬性代替。
cols <textarea> 定義 textarea 中的列數。
colspan <td>, <th> colspan 屬性定義單元格應跨越的列數。
content <meta> 根據上下文與 http-equiv 或 name 關聯的值。
contenteditable 全域性屬性 指示元素的內容是否可編輯。
controls <audio>, <video> 指示瀏覽器是否應向用戶顯示播放控制元件。
coords <area> 一組指定熱點區域座標的值。
crossorigin <audio>, <img>, <link>, <script>, <video> 元素如何處理跨域請求
csp <iframe> 指定嵌入式文件必須同意對其本身實施的內容安全策略。
data <object> 指定資源的 URL。
data-* 全域性屬性 允許您將自定義屬性附加到 HTML 元素。
datetime <del>, <ins>, <time> 指示與元素關聯的日期和時間。
decoding <img> 指示解碼影像的首選方法。
default <track> 指示除非使用者的偏好指示其他情況，否則應啟用軌道。
defer <script> 指示應在頁面解析後執行指令碼。
dir 全域性屬性 定義文字方向。允許的值為 ltr（從左到右）或 rtl（從右到左）
dirname <input>, <textarea>
disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> 指示使用者是否可以與元素互動。
download <a>, <area> 指示超連結用於下載資源。
draggable 全域性屬性 定義元素是否可以拖動。
enctype <form> method 為 POST 時定義表單資料的型別。
enterkeyhint <textarea>, contenteditable enterkeyhint 指定在虛擬鍵盤上為回車鍵呈現的操作標籤（或圖示）。該屬性可與表單控制元件（如 textarea 元素的值）一起使用，或在編輯主機中的元素中使用（例如，使用 contenteditable 屬性）。
for <label>, <output> 描述屬於此元素的元素。
form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> 指示擁有元素的表單。
formaction <input>, <button> 指示元素的操作，覆蓋 <form> 中定義的操作。
formenctype <button>, <input> 如果按鈕/輸入是 提交按鈕（例如 type="submit"），則此屬性設定表單提交期間要使用的編碼型別。如果指定此屬性，它將覆蓋按鈕的 表單 擁有者的 enctype 屬性。
formmethod <button>, <input> 如果按鈕/輸入是 提交按鈕（例如 type="submit"），則此屬性設定表單提交期間要使用的提交方法（GET、POST 等）。如果指定此屬性，它將覆蓋按鈕的 表單 擁有者的 method 屬性。
formnovalidate <button>, <input> 如果按鈕/輸入是 提交按鈕（例如 type="submit"），則此布林屬性指定在提交表單時不驗證表單。如果指定此屬性，它將覆蓋按鈕的 表單 擁有者的 novalidate 屬性。
formtarget <button>, <input> 如果按鈕/輸入是 提交按鈕（例如 type="submit"），則此屬性指定在其中顯示提交表單後收到的響應的瀏覽上下文（例如，選項卡、視窗或內聯框架）。如果指定此屬性，它將覆蓋按鈕的 表單 擁有者的 target 屬性。
headers <td>, <th> <th> 元素的 ID，適用於此元素。
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

指定此處列出元素的高度。對於所有其他元素，請使用 CSS height 屬性。

注意：在某些情況下，例如 <div>，這是一個遺留屬性，在這種情況下應使用 CSS height 屬性代替。
hidden 全域性屬性 防止呈現給定元素，同時保持子元素（例如指令碼元素）處於活動狀態。
high <meter> 指示上範圍的上限。
href <a>, <area>, <base>, <link> 連結資源的 URL。
hreflang <a>, <link> 指定連結資源的語言。
http-equiv <meta> 定義一個語義指令。
id 全域性屬性 通常與 CSS 一起使用，以對特定元素進行樣式化。此屬性的值必須是唯一的。
integrity <link>, <script>

指定 子資源完整性 值，該值允許瀏覽器驗證它們獲取的內容。
intrinsicsize <img> 此屬性告訴瀏覽器忽略影像的實際內在大小，並假裝它是屬性中指定的大小。
inputmode <textarea>, contenteditable 提供有關使用者編輯元素或其內容時可能輸入的資料型別的提示。該屬性可與表單控制元件（例如textarea元素的值）一起使用，或在編輯主機中的元素中使用（例如，使用contenteditable屬性）。
ismap <img> 指示影像屬於伺服器端影像地圖的一部分。
itemprop 全域性屬性
kind <track> 指定文字軌道的型別。
label <optgroup>，<option>，<track> 指定元素的使用者可讀標題。
lang 全域性屬性 定義元素中使用的語言。
language <script> 定義元素中使用的指令碼語言。
loading <img>，<iframe> 指示元素是否應延遲載入 (loading="lazy") 或立即載入 (loading="eager")。
list <input> 標識一個預定義選項列表，以建議給使用者。
loop <audio>，<marquee>，<video> 指示媒體在播放結束後是否應從頭開始播放。
low <meter> 指示下限範圍的上限。
max <input>，<meter>，<progress> 指示允許的最大值。
maxlength <input>, <textarea> 定義元素中允許的最大字元數。
minlength <input>, <textarea> 定義元素中允許的最小字元數。
media <a>，<area>，<link>，<source>，<style> 指定連結資源設計的媒體的提示。
method <form> 定義在提交表單時要使用的HTTP方法。可以是GET（預設）或POST。
min <input>，<meter> 指示允許的最小值。
multiple <input>，<select> 指示是否可以在email或file型別的輸入中輸入多個值。
muted <audio>, <video> 指示音訊在頁面載入時是否會最初靜音。
name <button>，<form>，<fieldset>，<iframe>，<input>，<object>，<output>，<select>，<textarea>，<map>，<meta>，<param> 元素的名稱。例如，伺服器使用它來識別表單提交中的欄位。
novalidate <form> 此屬性指示在提交表單時不應驗證表單。
open <details>，<dialog> 指示內容當前是否可見（對於<details>元素）或對話方塊是否處於活動狀態並且可以互動（對於<dialog>元素）。
optimum <meter> 指示最佳數值。
pattern <input> 定義一個正則表示式，元素的值將針對該表示式進行驗證。
ping <a>, <area> ping屬性指定一個以空格分隔的 URL 列表，如果使用者點選了超連結，則會通知這些 URL。
placeholder <input>, <textarea> 向用戶提供有關可以在欄位中輸入內容的提示。
playsinline <video> 一個布林屬性，指示影片將“內聯”播放；也就是說，在元素的播放區域內。請注意，沒有此屬性並不意味著影片始終將在全屏模式下播放。
poster <video> 一個 URL，指示一個海報幀，在使用者播放或尋求之前顯示該幀。
preload <audio>, <video> 指示應預載入整個資源、部分資源還是不預載入資源。
readonly <input>, <textarea> 指示元素是否可以編輯。
referrerpolicy <a>，<area>，<iframe>，<img>，<link>，<script> 指定在獲取資源時傳送哪個推薦者。
rel <a>，<area>，<link> 指定目標物件與連結物件之間的關係。
required <input>，<select>，<textarea> 指示此元素是否需要填寫。
reversed <ol> 指示列表是否應按降序而不是升序顯示。
role 全域性屬性 為輔助技術定義元素的顯式角色。
rows <textarea> 定義文字區域中的行數。
rowspan <td>, <th> 定義表格單元格應跨越的行數。
sandbox <iframe> 阻止在 iframe 中載入的文件使用某些功能（例如提交表單或開啟新視窗）。
scope <th> 定義標題測試（在th元素中定義）相關的單元格。
scoped <style>
selected <option> 定義頁面載入時將選擇的 value。
shape <a>, <area>
size <input>，<select> 定義元素的寬度（以畫素為單位）。如果元素的type屬性是text或password，那麼它是字元數。
sizes <link>，<img>，<source>
slot 全域性屬性 將影子 DOM 影子樹中的一個槽分配給一個元素。
span <col>，<colgroup>
spellcheck 全域性屬性 指示是否允許對元素進行拼寫檢查。
src <audio>，<embed>，<iframe>，<img>，<input>，<script>，<source>，<track>，<video> 可嵌入內容的 URL。
srcdoc <iframe>
srclang <track>
srcset <img>，<source> 一個或多個響應式影像候選者。
start <ol> 定義第一個數字（如果不同於 1）。
step <input>
style 全域性屬性 定義將覆蓋先前設定的樣式的 CSS 樣式。
summary <table>
tabindex 全域性屬性 覆蓋瀏覽器的預設選項卡順序，並改為遵循指定的順序。
target <a>，<area>，<base>，<form> 指定在何處開啟連結文件（對於<a>元素）或在何處顯示接收到的響應（對於<form>元素）。
title 全域性屬性 將滑鼠懸停在元素上時在工具提示中顯示的文字。
translate 全域性屬性 指定元素的屬性值和其Text節點子節點的值在頁面本地化時是否應被翻譯，或者是否應保持不變。
type <button>，<input>，<embed>，<object>，<ol>，<script>，<source>，<style>，<menu>，<link> 定義元素的型別。
usemap <img>，<input>，<object>
value <button>，<data>，<input>，<li>，<meter>，<option>，<progress>，<param> 定義頁面載入時將在元素中顯示的預設值。
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

對於此處列出的元素，這將確定元素的寬度。

注意：對於所有其他情況，例如<div>，這是一個遺留屬性，在這種情況下，應使用 CSS width屬性。
wrap <textarea> 指示文字是否應換行。

內容與 IDL 屬性

在 HTML 中，大多數屬性有兩個方面：內容屬性和IDL（介面定義語言）屬性。

內容屬性是您從內容（HTML 程式碼）中設定的屬性，您可以透過 element.setAttribute() 或 element.getAttribute() 設定或獲取它。內容屬性始終是字串，即使預期值為整數也是如此。例如，要使用內容屬性將 <input> 元素的maxlength設定為 42，您必須在該元素上呼叫setAttribute("maxlength", "42")。

IDL 屬性也稱為 JavaScript 屬性。這些是您可以使用 JavaScript 屬性（如element.foo）讀取或設定的屬性。IDL 屬性始終使用（但可能會轉換）底層內容屬性以在您獲取它時返回一個值，並在您設定它時在內容屬性中儲存一些內容。換句話說，IDL 屬性本質上反映了內容屬性。

大多數情況下，IDL 屬性會以其實際使用的方式返回其值。例如，<input> 元素的預設 type 為“text”，因此如果您設定 input.type="foobar"，<input> 元素將是 text 型別（在外觀和行為方面），但“type”內容屬性的值將為“foobar”。但是，type IDL 屬性將返回字串“text”。

IDL 屬性並不總是字串；例如，input.maxlength 是一個數字（一個有符號的 long）。使用 IDL 屬性時，您讀取或設定所需型別的 value，因此 input.maxlength 將始終返回一個數字，當您設定 input.maxlength 時，它需要一個數字。如果您傳遞其他型別，它將根據標準 JavaScript 型別轉換規則自動轉換為數字。

IDL 屬性可以 反映其他型別，例如無符號 long、URL、布林值等。不幸的是，沒有明確的規則，IDL 屬性與其對應的內容屬性的行為方式取決於屬性本身。大多數情況下，它將遵循 規範中規定的規則，但有時它不會。HTML 規範試圖使它儘可能地對開發人員友好，但由於各種原因（主要是歷史原因），一些屬性的行為很奇怪（例如 select.size），您應該閱讀規範以瞭解它們的行為方式。

布林屬性

某些內容屬性（例如 required、readonly、disabled）被稱為 布林屬性。如果布林屬性存在，其值為 true，如果不存在，其值為 false。

HTML 對布林屬性的允許值進行了限制：如果屬性存在，其值必須是空字串（等效地，屬性可能具有未分配的值），或者是一個與屬性的規範名稱進行 ASCII 不區分大小寫匹配的值，沒有前導或尾隨空格。以下示例是標記布林屬性的有效方法

html
<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>

為了清楚起見，true 和 false 值不允許在布林屬性中使用。要表示 false 值，必須完全省略該屬性。此限制消除了一些常見的誤解：例如，對於 checked="false"，元素的 checked 屬性將被解釋為 true，因為該屬性存在。

事件處理程式屬性

警告： 不建議使用事件處理程式內容屬性。HTML 和 JavaScript 的混合通常會產生難以維護的程式碼，並且事件處理程式屬性的執行也可能會被內容安全策略阻止。

除了上表中列出的屬性之外，全域性 事件處理程式（例如 onclick）也可以作為 內容屬性 指定給所有元素。

所有事件處理程式屬性都接受一個字串。該字串將用於合成一個 JavaScript 函式，例如 function name(/*args*/) {body}，其中 name 是屬性的名稱，而 body 是屬性的值。處理程式接收與其 JavaScript 事件處理程式對應項相同的引數——大多數處理程式僅接收一個 event 引數，而 onerror 接收五個：event、source、lineno、colno、error。這意味著您通常可以在屬性中使用 event 變數。

html
<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>

另請參閱