阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML标签-按属性分类

      HTML中的元素是有属性的;

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

      属性列表

      属性名元素描述
      accept<form>, <input>服务器接受内容或文件类型的列表。
      accept-charset<form>支持的字符集列表。
      accesskeyGlobal 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,用来指明引用或修改的源地址。
      classGlobal 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.
      contenteditableGlobal attribute指出该元素的内容是否可以被编辑。
      contextmenuGlobal attributeDefines 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.
      dirGlobal attributeDefines 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.
      draggableGlobal attributeDefines whether the element can be dragged.
      dropzoneGlobal attributeIndicates 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>,必须使用此属性指定高度。
      hiddenGlobal attributeIndicates 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.
      idGlobal attributeOften 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.
      itempropGlobal 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.
      langGlobal attributeDefines 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> 
      spellcheckGlobal attributeIndicates 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> 
      styleGlobal attribute定义CSS样式,这些样式会覆盖之前设置的样式。
      summary<table> 
      tabindexGlobal attributeOverrides the browser's default tab order and follows the one specified instead.
      target<a>, <area>, <base>, <form> 
      titleGlobal 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例如,),您应该阅读规范以了解它们的行为。

      目录
      目录