HTML学习笔记（4）：标签与属性总览

October 23, 2021 16379

实际上，繁多的HTML标签和属性并不需要全部记住，但是需要全面了解，即：对照下面的列表，对每一个标签和属性简单浏览，看到就能知道它是干嘛的，在实际使用中能够想到有这么一个标签（属性）。具体使用细节可再查表。

标签与属性

基础

  • <!DOCTYPE>：定义文档类型。
  • <html>：定义 HTML 文档。
    • manifest
    • xmlns
  • <head>：定义关于文档的信息。
    • profile
  • <title>：定义文档的标题。
    • dir
      • rtl
      • ltr
    • lang
  • <body>：定义文档的主体。
    • 有一些定义文档内样式的属性，但都不建议使用，建议使用CSS样式。
  • <h1> to <h6>：定义 HTML 标题。
    • align：不建议使用，建议使用CSS。
  • <p>：定义段落。
    • align：不建议使用，建议使用CSS。
  • <br>：定义简单的折行。
  • <hr>：定义水平线。
    • 有一些定义样式的属性，但都不建议使用，建议使用CSS样式。
  • <!–…–>：定义注释。

元信息

  • <head>：定义关于文档的信息。
    • profile：一个由空格分隔的 URL 列表，配置文件URL。
  • <meta>：定义关于 HTML 文档的元信息。
    • content：（必需）定义与 http-equiv 或 name 属性相关的元信息。
    • http-equiv：把 content 属性关联到 HTTP 头部。
      • content-type
      • expires
      • refresh
      • set-cookie
    • name：把 content 属性关联到一个名称。
      • author
      • description
      • keywords
      • generator
      • revised
      • others
    • scheme：定义用于翻译 content 属性值的格式。
  • <base>：定义页面中所有链接的默认地址或默认目标。
    • href：（必需）规定页面中所有相对链接的基准 URL。
    • target：在何处打开页面中所有的链接。
      • _blank
      • _parent
      • _self
      • _top
      • framename

格式化

  • <abbr>：定义缩写。
    • title：在鼠标指针移动到元素上时显示出简称/缩写的完整版本。
  • <address>：定义文档作者或拥有者的联系信息。
  • <b>：定义粗体文本。
  • <bdi>：定义文本的文本方向，使其脱离其周围文本的方向设置。
    • dir
      • auto
      • ltr
      • rtl
  • <bdo>：定义文字方向。
    • dir
      • rtl
      • ltr
  • <blockquote>：定义长的引用。
    • cite：引用来源URL
  • <cite>：（语义）定义引用(citation)。
  • <code>：（语义）定义计算机代码文本。
  • <del>：定义被删除文本。与 <ins> 标签配合使用，来描述文档中的更新和修正。
    • cite：解释删除原因的URL。
    • datetime：YYYYMMDD，文本被删除的日期和时间。
  • <dfn>：（语义）定义定义项目。
  • <em>：（语义）定义强调文本。
  • <i>：（样式，建议用CSS替代）定义斜体文本。
  • <ins>：定义被插入文本。
    • cite：解释插入原因的URL。
    • datetime：YYYYMMDD，文本被插入的日期和时间。
  • <kbd>：（语义）定义键盘文本。
  • <mark>：定义有记号的文本。
  • <meter>：定义预定义范围内的度量。
    • form：规定元素所属的表单的id。
    • high：规定被视作高的值的范围。
    • low：规定被视作低的值的范围。
    • max：规定范围的最大值。
    • min：规定范围的最小值。
    • optimum：规定最佳值。
    • value：必需。规定度量的当前值。
  • <pre>：定义预格式文本。保留空格和换行符，文本呈现为等宽字体。常用来表示计算机的源代码。
    • width：每行最大字符数。
  • <progress>：定义任何类型的任务的进度（进度条）。
    • max：任务一共需要多少工作。
    • value：已经完成多少任务。
  • <q>：定义短的引用。
    • cite：出处、来源。
  • <ruby>：定义注音文字。
  • <rb>：定义要被注音的文本。
  • <rt>：定义文本的注音。
  • <rp>：定义若浏览器不支持 ruby 元素时显示的内容。
  • <s>：（样式，不推荐）定义加删除线的文本，建议用CSS替代它的样式或用del标签替代它的语义。
  • <samp>：（语义）定义计算机代码样本。
  • <small>：（样式，建议用CSS替代）定义小号文本。
  • <strong>：（语义）定义语气更为强烈的强调文本。
  • <sup>：定义上标文本。
  • <sub>：定义下标文本。
  • <template>：定义用作容纳页面加载时隐藏内容的容器，其中的内容可以稍后使用 JavaScript 呈现。
  • <time>：定义日期/时间。
    • datetime：规定日期 / 时间，如”2008-02-14”，否则由元素的内容给定日期 / 时间。
    • pubdate：指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。
  • <u>：定义下划线文本。
  • <var>：（语义）定义文本的变量部分。
  • <wbr>：定义可能的换行符，规定在文本中的何处适合添加换行符，适用于太长的英文断行。

表单

  • <form>：定义供用户输入的 HTML 表单。
    • accept-charset：规定服务器可处理的表单数据字符集，如UTF-8。
    • action：规定当提交表单时向何处发送表单数据（URL）。
    • autocomplete：规定是否启用表单的自动完成功能。
      • on
      • off
    • enctype：规定在发送表单数据之前如何对其进行编码。
      • application/x-www-form-urlencoded：在发送前编码所有字符（默认）
      • multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
      • text/plain：空格转换为 “+” 加号，但不对特殊字符编码。
    • method：规定用于发送 form-data 的 HTTP 方法。
      • get
      • post
    • name：规定表单的名称。
    • novalidate：如果使用该属性，则提交表单时不进行验证。
    • rel：规定链接资源和当前文档之间的关系。
      • external
      • help
      • license
      • next
      • nofollow
      • noopener
      • noreferrer
      • opener
      • prev
      • search
    • target：规定在何处打开 action URL。
      • _blank
      • _self
      • _parent
      • _top
      • framename
  • <input>：定义输入控件。
    • accept mime_type：规定通过文件上传来提交的文件的类型。
    • align：不赞成使用。规定图像输入的对齐方式。
      • left
      • right
      • top
      • middle
      • bottom
    • alt：定义图像输入的替代文本。
    • autocomplete：规定是否使用输入字段的自动完成功能。
      • on
      • off
    • autofocus：规定输入字段在页面加载时是否获得焦点。（不适用于 type=”hidden”）
    • checked：规定此 input 元素首次加载时应当被选中。
    • disabled：当 input 元素加载时禁用此元素。
    • form：规定输入字段所属的一个或多个表单的id。
    • formaction：URL，覆盖表单的 action 属性。（适用于 type=”submit” 和 type=”image”）
    • formenctype：覆盖表单的 enctype 属性。（适用于 type=”submit” 和 type=”image”）
    • formmethod：覆盖表单的 method 属性。（适用于 type=”submit” 和 type=”image”）
      • get
      • post
    • formnovalidate：覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。
    • formtarget：覆盖表单的 target 属性。（适用于 type=”submit” 和 type=”image”）
      • _blank
      • _self
      • _parent
      • _top
      • framename
    • height：定义 input 字段的高度。（适用于 type=”image”）（像素或百分比）
    • list：引用包含输入字段的预定义选项的 datalist （的id）。
    • max：规定输入字段的最大值。与 “min” 属性配合使用，来创建合法值的范围。
    • maxlength：规定输入字段中的字符的最大长度。
    • min：规定输入字段的最小值。与 “max” 属性配合使用，来创建合法值的范围。
    • multiple：如果使用该属性，则允许一个以上的值。
    • name：定义 input 元素的名称。
    • pattern：规定输入字段的值的模式或格式。（正则表达式）
    • placeholder：规定帮助用户填写输入字段的提示。
    • readonly：规定输入字段为只读。
    • required：指示输入字段的值是必需的。
    • size：定义输入字段的宽度。
    • src：定义以提交按钮形式显示的图像的 URL。
    • step：规定输入字的的合法数字间隔。
    • type：规定 input 元素的类型。
      • button
      • checkbox
      • color
      • date
      • datetime
      • datetime-local
      • email
      • file
      • hidden
      • image
      • month
      • number
      • password
      • radio
      • range
      • reset
      • search
      • submit
      • tel
      • text
      • time
      • url
      • week
    • value：规定 input 元素的值。
    • width：定义 input 字段的宽度。（适用于 type=”image”）（像素或百分比）
  • <textarea>：定义多行的文本输入控件。
    • autofocus：规定在页面加载后文本区域自动获得焦点。
    • cols：规定文本区内的可见宽度。
    • disabled：规定禁用该文本区。
    • form：规定文本区域所属的一个或多个表单id。
    • maxlength：规定文本区域的最大字符数。
    • name：规定文本区的名称。
    • placeholder：规定描述文本区域预期值的简短提示。
    • readonly：规定文本区为只读。
    • required：规定文本区域是必填的。
    • rows：规定文本区内的可见行数。
    • wrap：规定当在表单中提交时，文本区域中的文本如何换行。
      • hard
      • soft
  • <button>：定义按钮。
    • autofocus：规定当页面加载时按钮应当自动地获得焦点。
    • disabled：规定应该禁用该按钮。
    • form：规定按钮属于一个或多个表单id。
    • formaction：覆盖 form 元素的 action 属性。与 type=”submit” 配合使用。
    • formenctype：覆盖 form 元素的 enctype 属性。与 type=”submit” 配合使用。
    • formmethod：覆盖 form 元素的 method 属性。与 type=”submit” 配合使用。
      • get
      • post
    • formnovalidate：覆盖 form 元素的 novalidate 属性。与 type=”submit” 配合使用。
    • formtarget：覆盖 form 元素的 target 属性。与 type=”submit” 配合使用。
      • _blank
      • _self
      • _parent
      • _top
      • framename
    • name：规定按钮的名称。
    • type：规定按钮的类型。
      • button
      • reset
      • submit
    • value：规定按钮的初始值。可由脚本进行修改。
  • <select>：定义选择列表（下拉列表）。
    • autofocus：规定在页面加载后文本区域自动获得焦点。
    • disabled：规定禁用该下拉列表。
    • form：规定文本区域所属的一个或多个表单id。
    • multiple：规定可选择多个选项。
    • name：规定下拉列表的名称。
    • required：规定文本区域是必填的。
    • size：规定下拉列表中可见选项的数目。
  • <optgroup>：定义select选择列表中相关选项的组合（选项分组）。
    • label：（必需）为选项组规定描述。
    • disabled：规定禁用该选项组。
  • <option>：定义选择列表中的选项。
    • disabled：规定此选项应在首次加载时被禁用。
    • label：定义当使用 <optgroup> 时所使用的标注。
    • selected：规定选项（在首次显示在列表中时）表现为选中状态。
    • value：定义送往服务器的选项值。
  • <label>：定义 input 元素的标注。
    • for：规定 label 绑定到哪个表单元素。
    • form：规定 label 字段所属的一个或多个表单id。
  • <fieldset>：定义围绕表单中元素的边框。也就是给表单内容分组。
    disabled：规定应该禁用 fieldset。
    form：规定 fieldset 所属的一个或多个表单id。
    name：规定 fieldset 的名称。
  • <legend>：定义 fieldset 元素的标题。
  • <datalist>：定义下拉列表（input可能的值的集合）。
  • <keygen>：定义生成密钥。
    • autofocus：使 keygen 字段在页面加载时获得焦点。
    • challenge：如果使用，则将 keygen 的值设置为在提交时询问。
    • disabled：禁用 keytag 字段。
    • form：定义该 keygen 字段所属的一个或多个表单id。
    • keytype：定义 keytype。rsa 生成 RSA 密钥。
    • name：定义 keygen 元素的名称。用于在表单数据已被提交后对数据进行引用。
  • <output>：定义输出的一些类型。
    • for：定义输出域相关的一个或多个元素id。
    • form：定义输入字段所属的一个或多个表单id。
    • name：定义对象的唯一名称。（表单提交时使用）

框架

  • <frame>：定义框架集的窗口或框架。HTML5 中不支持。
  • <frameset>：定义框架集。HTML5 中不支持。
  • <noframes>：定义针对不支持框架的用户的替代内容。HTML5 中不支持。
  • <iframe>：定义内联框架。
    • align：对齐方式。应当使用样式代替。
    • frameborder：规定是否显示框架周围的边框。
      • 1：有边框（默认）。
      • 0：无边框。
    • height：规定 iframe 的高度。支持像素和百分比。
    • marginheight：定义 iframe 的顶部和底部的边距。
    • marginwidth：定义 iframe 的左侧和右侧的边距。
    • name： iframe 的名称。
    • sandbox：启用一系列对 <iframe> 中内容的额外限制。
      • “”：应用以下所有限制。
      • allow-forms：允许表单提交。
      • allow-same-origin：允许 iframe 内容被视为与包含文档有相同的来源。
      • allow-scripts：允许脚本执行。
      • allow-top-navigation：允许 iframe 内容从包含文档导航（加载）内容。
    • scrolling：规定是否在 iframe 中显示滚动条。
      • yes
      • no
      • auto
    • seamless：规定 <iframe> 看上去像是包含文档的一部分。
    • src：规定在 iframe 中显示的文档的 URL。
    • srcdoc：规定在 <iframe> 中显示的页面的 HTML 内容。
    • width：定义 iframe 的宽度。支持像素和百分比。

图像

  • <img>：定义图像。
    • alt：（必需）规定图像的替代文本。
    • src：（必需）规定显示图像的 URL。
    • align：不推荐使用。规定如何根据周围的文本来排列图像。
    • border pixels：不推荐使用。定义图像周围的边框。
    • height：定义图像的高度。支持像素和百分比。
    • hspace：不推荐使用。定义图像左侧和右侧的空白。
    • ismap：URL，将图像定义为服务器端图像映射。只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许 ismap 属性。
    • usemap：将图像定义为客户器端图像映射，值为map元素的锚点。
    • vspace pixels：不推荐使用。定义图像顶部和底部的空白。
    • width：设置图像的宽度。支持像素和百分比。
  • <map>：定义带有可点击区域的图像映射。
    • id：（必需）为 map 标签定义唯一的名称。
    • name：为 image-map 规定的名称。
  • <area>：定义图像地图内部的区域。
    • alt：（必需）定义此区域的替换文本。
    • coords：定义可点击区域（对鼠标敏感的区域）的坐标。
    • href：定义此区域的目标 URL。
    • nohref：从图像映射排除某个区域。
    • shape：定义区域的形状。
      • default
      • rect
      • circ
      • poly
    • target：规定在何处打开 href 属性指定的目标 URL。
      • _blank
      • _parent
      • _self
      • _top
  • <canvas>：定义图形。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
    • height：设置 canvas 的高度。
    • width：设置 canvas 的宽度。
  • <figure>：规定独立的流内容（图像、图表、照片、代码等等）。
  • <figcaption>：定义 figure 元素的标题。
  • <svg>：定义 SVG 图形的容器。

音视频

  • <audio>：定义声音内容。
    • autoplay：如果出现该属性，则音频在就绪后马上播放。
    • controls：如果出现该属性，则向用户显示控件，比如播放按钮。
    • loop：如果出现该属性，则每当音频结束时重新开始播放。
    • muted：规定视频输出应该被静音。
    • preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
    • src：要播放的音频的 URL。
  • <source>：定义媒介源。为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
    • media：规定媒体资源的类型。
    • src：规定媒体文件的 URL。
    • type：规定媒体资源的 MIME 类型。
  • <track>：定义用在媒体播放器中的文本轨道。为诸如 video 元素之类的媒介规定外部文本轨道。
    • default：规定该轨道是默认的，假如没有选择任何轨道。
    • kind：表示轨道属于什么文本类型。
      • captions
      • chapters
      • descriptions
      • metadata
      • subtitles
    • label：轨道的标签或标题。
    • src：轨道的 URL。
    • srclang：轨道的语言，若 kind 属性值是 “subtitles”，则该属性必需的。
  • <video>：定义视频。
    • autoplay：如果出现该属性，则视频在就绪后马上播放。
    • controls：如果出现该属性，则向用户显示控件，比如播放按钮。
    • height：设置视频播放器的高度。
    • loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。
    • muted：规定视频的音频输出应该被静音。
    • poster：URL，规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
    • preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
    • src：要播放的视频的 URL。
    • width：设置视频播放器的宽度。

链接

  • <a>：定义超链接。
    • href：规定链接指向的页面的 URL。如果不使用 href 属性，则不可以使用download, hreflang, media, rel, target 以及 type 属性。
    • download：规定被下载的超链接目标。
    • hreflang：规定被链接文档的语言。
    • media：规定被链接文档是为何种媒介/设备优化的。
    • rel：规定当前文档与被链接文档之间的关系。
    • target：规定在何处打开链接文档。
      • _blank
      • _parent
      • _self
      • _top
      • framename
    • type：规定被链接文档的的 MIME 类型。
  • <link>：定义文档与外部资源的关系。常用于链接样式表。
    • href：被链接文档的URL。
    • hreflang：规定被链接文档中文本的语言。
    • media：规定被链接文档将被显示在什么设备上。
    • rel：规定当前文档与被链接文档之间的关系。
      • alternate
      • author
      • help
      • icon
      • licence
      • next
      • pingback
      • prefetch
      • prev
      • search
      • sidebar
      • stylesheet
      • tag
    • sizes：规定被链接资源的尺寸。仅适用于 rel=”icon”。
      • heightxwidth
      • any
    • type MIME_type 规定被链接文档的 MIME 类型。
  • <nav>：定义导航链接。

列表

  • <ul>：定义无序列表。
  • <ol>：定义有序列表。
    • compact：使列表呈现的效果比正常情况更小巧。HTML5 中不支持。HTML 4.01 中不赞成使用。
    • reversed：规定列表顺序为降序。(9,8,7…)
    • start：规定有序列表的起始值。
    • type：规定在列表中使用的标记类型。（不赞成使用，应当用CSS）
      • 1：数字。
      • A：大写英文字母。
      • a：小写英文字母。
      • I：大写罗马数字。
      • i：小写罗马数字。
  • <li>：定义列表的项目。
  • <dl>：定义定义列表。
  • <dt>：定义定义列表中的项目。
  • <dd>：定义定义列表中项目的描述。

表格

  • <table>：定义表格
    • align：规定表格相对周围元素的对齐方式。不赞成使用。
    • bgcolor：规定表格的背景颜色。不赞成使用。
    • border pixels：规定表格边框的宽度。
    • cellpadding：规定单元边沿与其内容之间的空白。支持像素值及百分比。
    • cellspacing：规定单元格之间的空白。支持像素值及百分比。
    • frame：规定外侧边框的哪个部分是可见的。
      • void
      • above
      • below
      • hsides
      • lhs
      • rhs
      • vsides
      • box
      • border
    • rules：规定内侧边框的哪个部分是可见的。
      • none
      • groups
      • rows
      • cols
      • all
    • summary：规定表格的摘要。
    • width：规定表格的宽度。支持像素值及百分比。
  • <caption>：定义表格标题。
  • <th>：定义表格中的表头单元格。
    • abbr：规定单元格中内容的缩写版本。
    • align：规定单元格内容的水平对齐方式。不推荐使用。
    • axis：对单元格进行分类。
    • bgcolor：规定表格单元格的背景颜色。不推荐使用。
    • char：规定根据哪个字符来进行内容的对齐。
    • charoff：规定对齐字符的偏移量。
    • colspan：设置单元格可横跨的列数。
    • headers：由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。
    • height：规定表格单元格的高度。支持像素值及百分比。不推荐使用。
    • nowrap：规定单元格中的内容是否折行。不推荐使用。
    • rowspan：规定单元格可横跨的行数。
    • scope：定义将表头数据与单元数据相关联的方法。
      • col
      • colgroup
      • row
      • rowgroup
    • valign：规定单元格内容的垂直排列方式。
      • top
      • middle
      • bottom
      • baseline
    • width：规定表格单元格的宽度。支持像素值及百分比。不推荐使用。
  • <tr>：定义表格中的行。
    • align：定义表格行的内容对齐方式。不赞成使用。
    • bgcolor：规定表格行的背景颜色。不赞成使用。
    • char：规定根据哪个字符来进行文本对齐。
    • charoff：规定第一个对齐字符的偏移量。
    • valign：规定表格行中内容的垂直对齐方式。
      • top
      • middle
      • bottom
      • baseline
  • <td>：定义表格中的单元。
    • abbr：规定单元格中内容的缩写版本。
    • align：规定单元格内容的水平对齐方式。
      • left
      • right
      • center
      • justify
      • char
    • axis：对单元进行分类。
    • bgcolor：规定单元格的背景颜色。支持像素值及百分比。不赞成使用。
    • char：规定根据哪个字符来进行内容的对齐。
    • charoff：规定对齐字符的偏移量。
    • colspan：规定单元格可横跨的列数。
    • headers：规定与单元格相关的表头id。
    • height：规定表格单元格的高度。不赞成使用。
    • nowrap：规定单元格中的内容是否折行。不赞成使用。
    • rowspan：规定单元格可横跨的行数。
    • scope：定义将表头数据与单元数据相关联的方法。
      • col
      • colgroup
      • row
      • rowgroup
    • valign：规定单元格内容的垂直排列方式。
      • top
      • middle
      • bottom
      • baseline
    • width：规定表格单元格的宽度。支持像素值及百分比。不赞成使用。
  • <thead>：定义表格中的表头内容。
    • align：内容的对齐方式。
      • right
      • left
      • center
      • justify
      • char
    • char：规定根据哪个字符来进行文本对齐。
    • charoff：规定第一个对齐字符的偏移量。
    • valign：内容的垂直对齐方式。
      • top
      • middle
      • bottom
      • baseline
  • <tbody>：定义表格中的主体内容。
    • 同上
  • <tfoot>：定义表格中的表注内容。
    • 同上
  • <col>：定义表格中一个或多个列的属性值。为每个列规定不同的属性值。为 <col> 标签添加 class 属性就可以使用 CSS 来负责对齐方式、宽度和颜色等等。
    • align：规定与 col 元素相关的内容的水平对齐方式。
      • right
      • left
      • center
      • justify
      • char
    • char：规定根据哪个字符来对齐与 col 元素相关的内容。
    • charoff：规定第一个对齐字符的偏移量。
    • span：规定 col 元素应该横跨的列数。
    • valign：定义与 col 元素相关的内容的垂直对齐方式。
      • top
      • middle
      • bottom
      • baseline
    • width：规定 col 元素的宽度。
      • pixels
      • %
      • relative_length
  • <colgroup>：定义表格中供格式化的列组。<colgroup>标签是对表格中的列进行组合，从而实现对表格的格式化。<col>标签一般会放在<colgroup>标签中使用，对<colgroup>标签组合的列分别设置样式。<colgroup>标签也可以有样式属性，是对组合的列设置相同的样式，<colgroup>标签设置的样式会被<col>标签设置的样式覆盖。
    • align：定义在列组合中内容的水平对齐方式。
      • right
      • left
      • center
      • justify
      • char
    • char：规定根据哪个字符来对齐列组中的内容。
    • charoff：规定第一个对齐字符的偏移量。
    • span：规定列组应该横跨的列数。
    • valign：定义在列组合中内容的垂直对齐方式。
      • top
      • middle
      • bottom
      • baseline
    • width：规定列组合的宽度。
      • pixels
      • %
      • relative_length

样式和语义

  • <style>：定义文档的样式信息。位于文档head部分中。
    • type：（必需）规定样式表的 MIME 类型。值只能是”text/css”。
    • media：为样式表规定不同的媒介类型。
      • screen
      • tty
      • tv
      • projection
      • handheld
      • print
      • braille
      • aural
      • all
  • <div>：定义文档中的节。
  • <span>：定义文档中的节。
  • <header>：定义 section 或 page 的页眉。
  • <footer>：定义 section 或 page 的页脚。
  • <main>：定义文档的主要内容。在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
  • <section>：定义 section。
    • cite：section 的 URL，假如 section 摘自 web 的话。
  • <article>：定义文章。
  • <aside>：定义页面内容之外的内容。
  • <details>：定义元素的细节。
    • open：定义 details 是否可见。
  • <summary>：为 <details> 元素定义可见的标题。”summary” 元素应该是 “details” 元素的第一个子元素。
  • <dialog>：定义对话框或窗口。
    • open：规定 dialog 元素是活动的，用户可与之交互。
  • <data>：添加给定内容的机器可读翻译。
    • value：规定元素内容的机器可读翻译。

编程

  • <script>：定义客户端脚本。
    • type：（必需）指示脚本的 MIME 类型。
    • async：规定异步执行脚本（仅适用于外部脚本）。
    • charset：规定在外部脚本文件中使用的字符编码。
    • defer：规定是否对脚本执行进行延迟，直到页面加载为止。
    • language：不赞成使用。规定脚本语言。请使用 type 属性代替它。
    • src：规定外部脚本文件的 URL。
  • <noscript>：定义针对不支持客户端脚本的用户的替代内容。
  • <applet>：定义嵌入的 applet。HTML5 中不支持。请使用 <embed> 和 <object> 代替。
  • <embed>：为外部应用程序（非 HTML）定义容器。
    • height：设置嵌入内容的高度（像素）。
    • src：嵌入内容的 URL。
    • type：定义嵌入内容的类型。
    • width：设置嵌入内容的宽度（像素）。
  • <object>：定义嵌入的对象。
  • <param>：定义对象的参数。
    • name：（必需）定义参数的名称（用在脚本中）。
    • type：规定参数的 MIME 类型（internet media type）。
    • value：规定参数的值。
    • valuetype：规定值的 MIME 类型。
      • data
      • ref
      • object

全局属性

  • accesskey：规定激活元素的快捷键。
  • class：规定元素的一个或多个类名（引用样式表中的类）。
  • contenteditable：规定元素内容是否可编辑。
    • true：规定元素可编辑。
    • false：规定元素不可编辑。
  • contextmenu：规定元素的上下文菜单。上下文菜单在用户点击元素时显示。大多浏览器都不支持。
  • data-*：用于存储页面或应用程序的私有定制数据。
    • somevalue：规定属性的值（以字符串）。
  • dir：规定元素中内容的文本方向。
    • ltr：默认。从左向右的文本方向。
    • rtl：从右向左的文本方向。
  • draggable：规定元素是否可拖动。
    • true：规定元素的可拖动的。
    • false：规定元素不可拖动。
    • auto：使用浏览器的默认行为。
  • hidden：浏览器不显示已规定 hidden 属性的元素。
  • id：规定元素的唯一 id。
  • lang：规定元素内容的语言。
  • spellcheck：规定是否对元素进行拼写和语法检查。
    • true：对元素进行拼写和语法检查
    • false：不检查元素。
  • style：规定元素的行内 CSS 样式。
  • tabindex：规定元素的 tab 键次序（1 是第一个）。
  • title：规定有关元素的额外信息。

事件

Window事件

针对 window 对象触发的事件（应用到 <body> 标签）：

  • onafterprint：文档打印之后运行的脚本。
  • onbeforeprint：文档打印之前运行的脚本。
  • onbeforeunload：文档卸载之前运行的脚本。
  • onerror：在错误发生时运行的脚本。
  • onhaschange：当文档已改变时运行的脚本。
  • onload：页面结束加载之后触发。
  • onmessage：在消息被触发时运行的脚本。
  • onoffline：当文档离线时运行的脚本。
  • ononline：当文档上线时运行的脚本。
  • onpagehide：当窗口隐藏时运行的脚本。
  • onpageshow：当窗口成为可见时运行的脚本。
  • onpopstate：当窗口历史记录改变时运行的脚本。
  • onredo：当文档执行撤销（redo）时运行的脚本。
  • onresize：当浏览器窗口被调整大小时触发。
  • onstorage：在 Web Storage 区域更新后运行的脚本。
  • onundo：在文档执行 undo 时运行的脚本。
  • onunload：一旦页面已下载时触发（或者浏览器窗口已被关闭）。

Form事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

  • onblur：元素失去焦点时运行的脚本。
  • onchange：在元素值被改变时运行的脚本。
  • oncontextmenu：当上下文菜单被触发时运行的脚本。
  • onfocus：当元素获得焦点时运行的脚本。
  • onformchange：在表单改变时运行的脚本。
  • onforminput：当表单获得用户输入时运行的脚本。
  • oninput：当元素获得用户输入时运行的脚本。
  • oninvalid：当元素无效时运行的脚本。
  • onreset：当表单中的重置按钮被点击时触发。HTML5 中不支持。
  • onselect：在元素中文本被选中后触发。
  • onsubmit：在提交表单时触发。

键盘事件

用户按下键盘时触发：

  • onkeydown：在用户按下按键时触发。
  • onkeypress：在用户敲击按钮时触发。
  • onkeyup：当用户释放按键时触发。

鼠标事件

由鼠标或类似用户动作触发的事件：

  • onclick：元素上发生鼠标点击时触发。
  • ondblclick：元素上发生鼠标双击时触发。
  • ondrag：元素被拖动时运行的脚本。
  • ondragend：在拖动操作末端运行的脚本。
  • ondragenter：当元素元素已被拖动到有效拖放区域时运行的脚本。
  • ondragleave：当元素离开有效拖放目标时运行的脚本。
  • ondragover：当元素在有效拖放目标上正在被拖动时运行的脚本。
  • ondragstart：在拖动操作开端运行的脚本。
  • ondrop：当被拖元素正在被拖放时运行的脚本。
  • onmousedown：当元素上按下鼠标按钮时触发。
  • onmousemove：当鼠标指针移动到元素上时触发。
  • onmouseout：当鼠标指针移出元素时触发。
  • onmouseover：当鼠标指针移动到元素上时触发。
  • onmouseup：当在元素上释放鼠标按钮时触发。
  • onmousewheel：当鼠标滚轮正在被滚动时运行的脚本。
  • onscroll：当元素滚动条被滚动时运行的脚本。

媒体事件

由媒体（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

  • onabort：在退出时运行的脚本。
  • oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
  • oncanplaythrough：当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
  • ondurationchange：当媒介长度改变时运行的脚本。
  • onemptied：当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
  • onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
  • onerror：当在文件加载期间发生错误时运行的脚本。
  • onloadeddata：当媒介数据已加载时运行的脚本。
  • onloadedmetadata：当元数据（比如分辨率和时长）被加载时运行的脚本。
  • onloadstart：在文件开始加载且未实际加载任何数据前运行的脚本。
  • onpause：当媒介被用户或程序暂停时运行的脚本。
  • onplay：当媒介已就绪可以开始播放时运行的脚本。
  • onplaying：当媒介已开始播放时运行的脚本。
  • onprogress：当浏览器正在获取媒介数据时运行的脚本。
  • onratechange：每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
  • onreadystatechange：每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
  • onseeked：当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
  • onseeking：当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
  • onstalled：在浏览器不论何种原因未能取回媒介数据时运行的脚本。
  • onsuspend：在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
  • ontimeupdate：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
  • onvolumechange：每当音量改变时（包括将音量设置为静音）时运行的脚本。
  • onwaiting：当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本。


* 你好，我是大森。如果文章内容帮到了你，你可通过下方付款二维码支持作者 *