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>

元素的背景颜色。

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

边框宽度。

<p>Note:这是遗留属性,请使用 CSS <a href="/zh-CN/docs/Web/CSS/border" title="CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值: border-width, border-style, border-color。"><code>border</code></a> 属性代替。</p>
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>

此属性可用于指定颜色, 颜色值一般有两种表示:

<p>1. 以`#`号开头的RGB十六进制数,如#112233, 其中11表示的是R(红),22表示的是G绿(),33表示的是B(蓝)</p>

<p>2. 颜色的英文单词名,如`red`表示红色</p>
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

<object>

资源URL地址

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> 注意:在某些情况下,例如<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例如,),您应该阅读规范以了解它们的行为。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>