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 | 在图片无法呈现时的替代文本。 | |
| 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> |
元素的背景颜色。 |
| border | <img>, <object>, <table> |
边框宽度。 |
| 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> |
指出存放applet类文件基本URL地址(绝对或相对)，这些文件由code属性标明。 |
| color | <basefont>, <font>, <hr> |
此属性可用于指定颜色, 颜色值一般有两种表示: |
| cols | <textarea> |
定义一个textarea中包含多少列。 |
| colspan | <td>, <th> |
该属性一般用在td标签中,用于指定一个单元格占用多少列,例如:<td colspan='2'>表示占用一个单元格占2列. |
| content | <meta> |
A value associated with http-equiv or name depending on the context. |
| contenteditable | Global attribute | 指出该元素的内容是否可以被编辑。 |
| contextmenu | Global attribute | Defines the ID of a <menu> element which will serve as the element's context menu. |
| controls | <audio>, <video> |
指出浏览器是否对用户显示播放控制台(前进或回退) |
| coords | <area> |
A set of values specifying the coordinates of the hot-spot region. |
|
data |
资源URL地址 |
|
|
data-* |
允许你对于一个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> |
注意：在某些情况下，例如<div>，这是一个遗留属性，在这种情况下应该使用CSS height属性。 在其他情况下，例如<canvas>，必须使用此属性指定高度。 |
| 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. |
内容与IDL属性
在HTML中，大多数属性都有两面：content属性和IDL属性。
content属性是您从内容（HTML代码）中设置的属性，您可以设置它，也可以通过element.setAttribute()或获取它element.getAttribute()。即使期望值应该是整数，content属性也始终是字符串。例如，要使用content属性将<input>元素设置maxlength为42，则必须调用setAttribute("maxlength", "42")该元素。
IDL属性也称为JavaScript属性。您可以使用JavaScript属性（例如）读取或设置这些属性element.foo。IDL属性将始终使用（但可能会转换）底层的content属性，以便在获取它时返回一个值，并在设置它时将一些内容保存在content属性中。换句话说，IDL属性实质上反映了内容属性。
在大多数情况下，IDL属性将返回其值，因为它们实际上已被使用。例如，默认type为<input>元素的“文本”，因此，如果您设置input.type="foobar"的<input>元素将是类型的文本（在外观和行为），但“类型”的内容属性的值将是“foobar的”。但是，typeIDL属性将返回字符串“ text”。
IDL属性并不总是字符串。例如，input.maxlength是一个数字（带符号的长整数）。使用IDL属性时，您将读取或设置所需类型的值，因此input.maxlength总是会返回一个数字，而在设置时input.maxlength，它需要一个数字。如果您传递其他类型，则它将自动转换为标准JavaScript规则指定的数字以进行类型转换。
IDL属性可以反映其他类型，例如无符号长整数，URL，布尔值等。不幸的是，没有明确的规则，IDL属性与相应的内容属性结合使用的方式取决于该属性。在大多数情况下，它将遵循规范中列出的规则，但有时不遵循。HTML规范试图使它尽可能地对开发人员友好，但是由于各种原因（大多数是历史原因），某些属性的行为异常（select.size例如，），您应该阅读规范以了解它们的行为。
