HTML attribute reference

HTML 中的元素具有屬性;而這些屬性可以藉由各種方式去設定元素或調整它們的行為,以符合使用者的期待。

屬性列表

屬性名稱 元素 描述
hidden Global attribute 避免呈現給定的元素,並且保持子元素,例如 script elements、active。
high <meter> (en-US) 指示下界的上限範圍。
href <a> (en-US)<area> (en-US)<base><link> (en-US) 連結資源的 URL。
hreflang <a> (en-US)<area> (en-US)<link> (en-US) 指定連結資源的語言。
http-equiv <meta> (en-US)
icon <command> 指定呈現指令的圖片。
id Global attribute 經常和 CSS 一起被用來設計特定元素。這個屬性的值必須是唯一的。
ismap <img> (en-US) 指示該圖像是伺服器端之影像地圖的一部分。
itemprop Global attribute
kind <track> (en-US) 指明文章 track 的類型。
label <track> (en-US) 指明文章 track 的使用者可讀之標題。
lang Global attribute 定義該元素中所使用的語言。
language <script> 定義該元素中所使用的腳本語言。
list <input> (en-US) 指示一串預先定義的選項供使用者參考。
loop <audio> (en-US)<marquee><video> (en-US) 指示當媒體完成時,是否應該從一開始的時候播放。
low <meter> (en-US) 指示上界的下限範圍。
manifest <html> (en-US) 指定文件中緩存清單的 URL。
max <input> (en-US)<meter> (en-US)<progress> 指示所允許的最大值。
maxlength <input> (en-US)<textarea> (en-US) 定義該元素中所允許的最大字元數目。
media <a> (en-US)<area> (en-US)<link> (en-US)<source> (en-US)<style> (en-US) 指定一些連接資源已經被設計的媒體。
method <form> (en-US) 定義當呈交該格式時,哪個 HTTP 方法要被使用。可以用 GET(預設)或是 POST。
min <input> (en-US)<meter> (en-US) 指示所允許的最小值。
multiple <input> (en-US)<select> (en-US) 指示多個值是否可以進入單一輸入的 email 或是 file 之類別。
name <button> (en-US)<form> (en-US)<fieldset> (en-US)<iframe> (en-US)<input> (en-US)<object> (en-US)<output> (en-US)<select> (en-US)<textarea> (en-US)<map> (en-US)<meta> (en-US)<param> (en-US) 元素的名字。例如被伺服器所使用時,來識別格式提交的現場。
novalidate <form> (en-US) 該屬性指示當本格式被提交時,並無法通過驗證。
open <details> (en-US) 指示是否細節顯示於加載頁面上。
optimum <meter> (en-US) 指示最佳化數值。
pattern <input> (en-US) 定義一個元素值將被驗證的正規表達式。
ping <a> (en-US)<area> (en-US)
placeholder <input> (en-US)<textarea> (en-US) 提示使用者什麼可以被輸入進該區。
poster <video> (en-US) 顯現一個指示 poster frame 的 URL,直到使用者撥放或是搜索。
preload <audio> (en-US)<video> (en-US) 指示是否整個資源、一部分的資源、或是沒有資源應該被預先裝載。
pubdate <time> 指示該日期和時間,是否和距離最近的 <article> 舊元素的日期一樣。
radiogroup <command>
readonly <input> (en-US)<textarea> (en-US) 指示是否該元素可以被編輯。
rel <a> (en-US)<area> (en-US)<link> (en-US) 指定目標物件和連結物驗的關係。
required <input> (en-US)<select> (en-US)<textarea> (en-US) 指示該元素是否被要求填寫。
reversed <ol> (en-US) 指示該目錄是否應以降序展出而不是升序。
rows <textarea> (en-US) 定義 textarea 的行數。
rowspan <td> (en-US)<th> (en-US) 定義表格單元的行數應該被 span over。
sandbox <iframe> (en-US)
spellcheck Global attribute 指示為該元素的拼字檢查是否允許。
scope <th> (en-US)
scoped <style> (en-US)
seamless <iframe> (en-US)
selected <option> (en-US) 定義一個值將被選擇到上載頁面中。
shape <a> (en-US)<area> (en-US)
size <input> (en-US)<select> (en-US) 定義元素的寬度 (以 pixel 為單位) 。如果該元素之類型的屬性是文本或是密碼,那麼它就是字元的數目。
sizes <link> (en-US)
span <col> (en-US)<colgroup> (en-US)
src <audio> (en-US)<embed> (en-US)<iframe> (en-US)<img> (en-US)<input> (en-US)<script><source> (en-US)<track> (en-US)<video> (en-US) 可嵌入內容的網址。
srcdoc <iframe> (en-US)
srclang <track> (en-US)
srcset <img> (en-US)
start <ol> (en-US) 如果第一個數字不是 1 的話,則定義該數。
step <input> (en-US)
style Global attribute 定義多載先前的樣式設定之 CSS 樣式。
summary <table>
tabindex Global attribute 多載瀏覽器的預設頁面標籤之順序並且遵守指定的那個。
target <a> (en-US)<area> (en-US)<base><form> (en-US)
title Global attribute 當滑鼠標停在元素時,文本會顯示在工具提示中。
type <button> (en-US)<input> (en-US)<command><embed> (en-US)<object> (en-US)<script><source> (en-US)<style> (en-US)<menu> (en-US) 定義元素的類型。
usemap <img> (en-US)<input> (en-US)<object> (en-US)
value <button> (en-US)<option> (en-US)<input> (en-US)<li> (en-US)<meter> (en-US)<progress><param> (en-US) 定義將顯示在加載頁面上元素的預設值。
width <canvas><embed> (en-US)<iframe> (en-US)<img> (en-US)<input> (en-US)<object> (en-US)<video> (en-US) 注意 : 在有些情況中,例如 <div>,這是傳統的屬性,而 CSS width 特性應當被使用。在其他的情況中,例如 <canvas> ,寬度必須用該屬性來指定。
wrap <textarea> (en-US) 指定文章是否要被掩飾。
border <img> (en-US)<object> (en-US)<table> 邊界寬度。注意:這是一個傳統的屬性。請利用 CSS border (en-US) 特性。
buffered <audio> (en-US)<video> (en-US) 包含被緩衝之媒體的時間範圍。
charset <meta> (en-US)<script> 聲明頁面或腳本的字元編碼。
checked <command><input> (en-US) 指定在加載頁面上的元素是否要被檢查。
cite <blockquote><del> (en-US)<ins><q> 包含一個 URL,用來指出引用或是改變的來源地址。
class Global attribute 經常使用共同屬性和 CSS 一起設計元素。
code <applet> 指明被加載與執行的 applet 類別文件之 URL。
codebase <applet> This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
color <basefont> (en-US)<font><hr> 該屬性使用命名顏色或十六進制 #RRGGBB 格式來設置文本顏色。注意:這是一個傳統的屬性。請使用 CSS color (en-US) 特性。
cols <textarea> (en-US) 定義在一個 textarea 中有多少欄位。
colspan <td> (en-US)<th> (en-US) colspan 屬性定義一個單元格之欄位的數量。
content <meta> (en-US) 一個有關於 http-equiv 或是根據上下文 name 的值 。
contenteditable Global attribute 指定元素的內容是否可以被編輯。
contextmenu Global attribute 定義將作為元素上下文選項單的 <menu> (en-US) 元素之 ID。
controls <audio> (en-US)<video> (en-US) 指定瀏覽器是否應該顯示錄放控制給使用者。
coords <area> (en-US) 一組值指明熱點區域的座標。
data <object> (en-US) 指明 URL 的資源。
data-* Global attribute 讓你可以將自行定義屬性附加在 HTML 元素上。
datetime <del> (en-US)<ins><time> 指定元素所相關的日期與時間。
default <track> (en-US) 指定 track 應被啟用,除非使用者的偏好表示不同。
defer <script> 指定該頁面被瀏覽完後腳本應被執行。
dir Global attribute 定義文章的方向。被允許的值有 ltr (Left-To-Right) 或 rtl (Right-To-Left)。
dirname <input> (en-US)<textarea> (en-US)
disabled <button> (en-US)<command><fieldset> (en-US)<input> (en-US)<optgroup> (en-US)<option> (en-US)<select> (en-US)<textarea> (en-US) 指名使用者是否可以與元素互動。
download <a> (en-US)<area> (en-US) 指定該超連結是用於下載的資源。
draggable Global attribute 定義元素是否可以拖曳。
dropzone Global attribute 指定該元素接受它內容的滑鼠落下物。
enctype <form> (en-US) 當方法為 POST 的時候,定義格式日期的內容類型。
for <label> (en-US)<output> (en-US) 描述屬於這一個的元素。
form <button> (en-US)<fieldset> (en-US)<input> (en-US)<label> (en-US)<meter> (en-US)<object> (en-US)<output> (en-US)<progress><select> (en-US)<textarea> (en-US) 指定元素之所有者的格式。
formaction <input> (en-US)<button> (en-US) 指定元素的作用,多載的動作被定義在 <form> (en-US)
headers <td> (en-US)<th> (en-US) 對適用於該元素的 元素之 ID。
height <canvas><embed> (en-US)<iframe> (en-US)<img> (en-US)<input> (en-US)<object> (en-US)<video> (en-US) 注意:在有些情況中,例如 <div>,這是傳統的屬性,而 CSS height 特性應當被使用。在其他的情況中,例如 <canvas>,高度必須用該屬性來指定。
accept <form> (en-US)<input> (en-US) 伺服器接受的類型之列表,通常是文件類型。
accept-charset <form> (en-US) 支持字元集的列表。
accesskey Global attribute 定義鍵盤快捷鍵來啟動或添加焦點到該元素。
action <form> (en-US) 一個程序處理經由該格式提交信息的 URI。
align <applet><caption> (en-US)<col> (en-US)<colgroup> (en-US)<hr><iframe> (en-US)<img> (en-US)<table><tbody> (en-US)<td> (en-US)<tfoot> (en-US)<th> (en-US)<thead> (en-US)<tr> (en-US) 指定元素的水平對齊方式。
alt <applet><area> (en-US)<img> (en-US)<input> (en-US) 在圖像無法顯示的情況下,顯示代替文本。
async <script> 指定該腳本應該被不同步得執行。
autocomplete <form> (en-US)<input> (en-US) 指定是否以該格式控制,可以在默認情況下由瀏覽器自動完成其值。
autofocus <button> (en-US)<input> (en-US)<select> (en-US)<textarea> (en-US) 該元素應該在頁面加載後自動焦距。
autoplay <audio> (en-US)<video> (en-US) 音頻或視頻應該越早撥放越好。
autosave <input> (en-US) 上一個值應該持續存在到跨頁面加載的可選值之下拉列表中。
bgcolor <body> (en-US)<col> (en-US)<colgroup> (en-US)<marquee><table><tbody> (en-US)<tfoot> (en-US)<td> (en-US)<th> (en-US)<tr> (en-US) 元素的背景顏色。注意:這是一個傳統的屬性。請使用 CSS background-color 特性。

內容與 IDL 屬性

在 HTML 中,大部分的屬性有兩種面向:內容屬性IDL 屬性

內容屬性是你可以從內容中設定的屬性 (HTML 程式碼) 而且你可以藉由 element.setAttribute() (en-US) 或是 element.getAttribute() (en-US) 來設定它或得到它。內容屬性永遠都是字串,即便我們所期望的值是一個整數。舉例來說,假設今天要用內容屬性去設定一個 <input> (en-US) 元素的最大長度是 42,你必須在該元素上呼叫 setAttribute("maxlength", "42")。

IDL 屬性也被稱為 JavaScript 特性。你可以使用 JavaScript 特性的 element.foo 以閱讀或是設定這些屬性。當你要得到 IDL 屬性時,它總是要使用 (但可能改變) 基本的內容屬性以返回值,而當你要設定 IDL 屬性時,它需要儲存資料在內容屬性中。換句話說,IDL 屬性在本質上反映了內容屬性。

在大部分的時間中,當 IDL 屬性真正被使用時,將會返回它們的值。舉例而言,<input> (en-US) 元素的預設型態是 "text",所以如果你設定 input.type="foobar",<input> 元素一樣是 text 的型態 (在外觀和行為上而言),但是 "type" 內容屬性的值將會變成 "foobar"。然而,IDL 屬性的型態將會回傳 "text" 字串。

IDL 屬性並非永遠的字串 ; 舉例來說,input.maxlength 便是一個數字(型態為 signed long)。當使用 IDL 屬性,你會閱讀或是設定所需的型態,而當你設定 input.maxlength 時,它總是回傳一個數字,因為它正需要一個數字。如果你傳入別的型態,它會依照標準 JavaScript 型態轉換規則,將傳入值轉成一個數字。

IDL 屬性可以 反應其他型態,例如 unsigned long、URLs、booleans,等等。不幸的是,並沒有明確的規則來規範,而且與 IDL 屬性行為相對應的內容屬性連結中,也沒有取決於該屬性的方式。在大部分的時間裡,它會遵守 規範中所制定的規則,但有時候它並不會。HTML 規範嘗試讓它變得容易使用,但由於各種原因 (大多是因為歷史),有些屬性表現得很奇怪 (舉例來說,select.size),而你應該詳細閱讀規範以了解各個屬性的行為。

另請參見