HTML 属性参考

HTML中的元素是有属性的；这些额外的属性值可以配置元素或者以各种方式来调整元素的行为，进而满足用户所需的标准。

属性列表

属性名 元素 描述
accept <form>, <input> 服务器接受内容或文件类型的列表。
accept-charset <form> 支持的字符集列表。
accesskey Global attribute 定义键盘快捷键来激活或者聚焦元素
action <form> 表单信息提交的url地址，指向进行处理的程序。
align <applet>, <caption>, <col>, <colgroup>,  <hr>, <iframe>, <img>, <table>, <tbody>,  <td>,  <tfoot> , <th>, <thead>, <tr> 设置元素的水平对齐。
alt

<applet>, <area>, <img>, <input>

 在图片无法呈现时的替代文本。
async <script> 表示该脚本应该异步执行。
autocomplete <form>, <input> 表示该表单中是否可以由浏览器自动完成填值。
autofocus <button>, <input>, <keygen>, <select>, <textarea> 在网页加载后该元素应该自动聚焦。
autoplay <audio>, <video>  audio或video应该自动播放
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

元素的背景颜色。

NOTE：这是一个遗留属性，请使用css{“background-color":}代替。
border <img>, <object>, <table>

边框宽度。

Note:这是遗留属性，请使用 CSS border 属性代替。
buffered <audio>, <video> 包含已缓存媒体的时间范围。
challenge <keygen> 与公钥一起提交的挑战字符。
charset <meta>, <script> 申明该页面或脚本的字符编码。
checked <command>, <input> 指出该元素在页面加载后是否处于选中状态。
cite <blockquote>, <del>, <ins>, <q> 包含一个URI，用来指明引用或修改的源地址。
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>, <font>, <hr>

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

Note: This is a legacy attribute. Please use the CSS color property instead.
cols <textarea> 定义一个textarea中包含多少列。
colspan <td>, <th> The colspan attribute defines the number of columns a cell should span.
content <meta> A value associated with http-equiv or name depending on the context.
contenteditable Global attribute Indicates whether the element's content is editable.
contextmenu Global attribute Defines the ID of a <menu> element which will serve as the element's context menu.
controls <audio>, <video> Indicates whether the browser should show playback controls to the user.
coords <area> A set of values specifying the coordinates of the hot-spot region.

data

<object>

Specifies the URL of the resource.

data-*

Global attribute

允许你对于一个HTML元素绑定自定义的属性。
datetime <del>, <ins>, <time> Indicates the date and time associated with the element.
default <track> Indicates that the track should be enabled unless the user's preferences indicate something different.
defer <script> Indicates that the script should be executed after the page has been parsed.
dir Global attribute Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname <input>, <textarea>  
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Indicates whether the user can interact with the element.
download <a>, <area> Indicates that the hyperlink is to be used for downloading a resource.
draggable Global attribute Defines whether the element can be dragged.
dropzone Global attribute Indicates that the element accept the dropping of content on it.
enctype <form> Defines the content type of the form date when the method is POST.
for <label>, <output> 描述与当前元素绑定的元素。
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
headers <td>, <th> IDs of the <th> elements which applies to this element.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS height property should be used instead. In other cases, such as <canvas>, the height must be specified with this attribute.
hidden Global attribute Indicates the relevance of an element.
high <meter> Indicates the lower bound of the upper range.
href <a>, <area>, <base>, <link> 关联资源的URL。
hreflang <a>, <area>, <link> Specifies the language of the linked resource.
http-equiv <meta>  
icon <command> Specifies a picture which represents the command.
id Global attribute Often used with CSS to style a specific element. The value of this attribute must be unique.
ismap <img> Indicatesthat the image is part of a server-side image map.
itemprop Global attribute  
keytype <keygen> Specifies the type of key generated.
kind <track> Specifies the kind of text track.
label <track> Specifies a user-readable title of the text track.
lang Global attribute Defines the language used in the element.
language <script> Defines the script language used in the element.
list <input> Identifies a list of pre-defined options to suggest to the user.
loop <audio>, <bgsound>, <marquee>, <video> Indicates whether the media should start playing from the start when it's finished.
low <meter> Indicates the upper bound of the lower range.
manifest <html> Specifies the URL of the document's cache manifest.
max <input>, <meter>, <progress> Indicates the maximum value allowed.
maxlength <input>, <textarea> Defines the maximum number of characters allowed in the element.
media <a>, <area>, <link>, <source>, <style> Specifies a hint of the media for which the linked resource was designed.
method <form> Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min <input>, <meter> Indicates the minimum value allowed.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Name of the element. For example used by the server to identify the fields in form submits.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
open <details> Indicates whether the details will be shown on page load.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
ping <a>, <area>  
placeholder <input>, <textarea> Provides a hint to the user of what can be entered in the field.
poster <video> A URL indicating a poster frame to show until the user plays or seeks.
preload <audio>, <video> Indicates whether the whole resource, parts of it or nothing should be preloaded.
pubdate <time> Indicates whether this date and time is the date of the nearest <article> ancestor element.
radiogroup <command>  
readonly <input>, <textarea> Indicates whether the element can be edited.
rel <a>, <area>, <link> Specifies the relationship of the target object to the link object.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
reversed <ol> Indicates whether the list should be displayed in a descending order instead of a ascending.
rows <textarea> Defines the number of rows in a textarea.
rowspan <td>, <th> Defines the number of rows a table cell should span over.
sandbox <iframe>  
spellcheck Global attribute Indicates whether spell checking is allowed for the element.
scope <th>  
scoped <style>  
seamless <iframe>  
selected <option> Defines a value which will be selected on page load.
shape <a>, <area>  
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes <link>  
span <col>, <colgroup>  
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> The URL of the embeddable content.
srcdoc <iframe>  
srclang <track>  
start <ol> Defines the first number if other than 1.
step <input>  
style Global attribute 定义CSS样式，这些样式会覆盖之前设置的样式。
summary <table>  
tabindex Global attribute Overrides the browser's default tab order and follows the one specified instead.
target <a>, <area>, <base>, <form>  
title Global attribute 当鼠标悬停在元素上面时，提示框显示的文本。
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> 定义元素的类型。
usemap <img>,  <input>, <object>  
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> 定义页面加载时，在元素内显示的默认值。
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead. In other cases, such as <canvas>, the width must be specified with this attribute.
wrap <textarea> Indicates whether the text should be wrapped.

Content versus IDL attributes

In HTML, most attributes have two faces: the content attribute and the IDL attribute.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via element.setAttribute() or element.getAttribute(). The content attribute is always a string even when the expected value should be an integer. For example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setAttribute("maxlength", "42") on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

Most of the time, IDL attributes will return their valules as they are really used. For example, the default type for <input> elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the type IDL attribute will return the string "text".

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so input.maxlength is always going to return a number and when you set input.maxlength ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.

See also

文档标签和贡献者