陈颂光
全栈工程师,承接从编译器到网站的各类软件开发与咨询,也可以聊历史哲学。
关注我的 GitHub

HTML5概览

Hypertext Markup Language (HTML)是一种描述文档的语言,主要是网页的内容,外观和行为则分别由CSS和Javascript控制。这里主要介绍HTML5。

导览

一个简单的HTML文件形如:

<!DOCTYPE html>
<html>
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

HTML文件由普通文本和一些标签组成,标签分为:

  • 开始标签<元素 属性="值" ...>
    • 元素对应于命令
    • 属性可以有零个可多个,每个元素中可用的属性不同,通过对属性指定值可
      • 双引号对可换成单引号对
      • 在值不含空白或"'=<>之一时可省略引号对
    • 在值为空时,=""可省略
  • 结束标签形如</元素>,必须与前面某个未被结束的标签匹配,表示该命令的有效范围结束
  • 注释从<!--到最近的-->之间 为了与标签区分,若要在内容中呈现字符<须写成字符实体为&lt;,呈现字符&须写成字符实体为&amp;

HTML文件实际上在刻画一棵树(DOM),标签和普通文本都视为树的结点,HTML用户代理(如浏览器)就是以这样的树作为文档的内存表示,并且可用Javascript的DOM API动态修改它。上例中的HTML文件可被解析为:

DOCTYPE: html
  • html
      □ head
          ☆ #text: ⏎␣␣
          ☆ title
              ○ #text: Sample page
          ☆ #text: ⏎␣
      □ #text: ⏎␣
      □ body
          ☆ #text: ⏎␣␣
          ☆ h1
              ○ #text: Sample page
          ☆ #text: ⏎␣␣
          ☆ p
              ○ #text: This is a
              ○ a href="demo.html"
                  ■ #text: simple
              ○ #text: sample.
          ☆ #text: ⏎␣␣
          ☆ #comment: this is a comment
          ☆ #text: ⏎␣⏎

HTML5的文件一开始总是<!DOCTYPE html>head结点开始的子树中的是元数据,body结点开始的子树中是文档的内容。

结构

元素

元素 描述 分类 双亲† 孩子 属性 接口
a 超链接 flow; phrasing*; interactive phrasing transparent* globals; href; target; download; rel; hreflang; type HTMLAnchorElement
abbr 缩写 flow; phrasing phrasing phrasing globals HTMLElement
address 页面或article元素的联系方式 flow flow flow* globals HTMLElement
area 超链接或图像地图的死区域 flow; phrasing phrasing* empty globals; alt; coords; shape; href; target; download; rel; hreflang; type HTMLAreaElement
article 自足或可重用的部分 flow; sectioning flow flow globals HTMLElement
aside 用于有关内容的边栏 flow; sectioning flow flow globals HTMLElement
audio 音频播放器 flow; phrasing; embedded; interactive phrasing source; transparent globals; src; crossorigin; preload; autoplay; mediagroup; loop; muted; controls HTMLAudioElement
b 关键字 flow; phrasing phrasing phrasing globals HTMLElement
base 链接和表单的基URL和默认目标 metadata head; template empty globals; href; target HTMLBaseElement
bdi 文本方向片 flow; phrasing phrasing phrasing globals HTMLElement
bdo 文本方向格式 flow; phrasing phrasing phrasing globals HTMLElement
blockquote 引用的节 flow; sectioning root flow flow globals; cite HTMLQuoteElement
body 文档体 sectioning root html flow globals; onafterprint; onbeforeprint; onbeforeunload; onhashchange; onmessage; onoffline; ononline; onpagehide; onpageshow; onpopstate; onstorage; onunload HTMLBodyElement
br 换行(如诗歌或邮政地址的) flow; phrasing phrasing empty globals HTMLBRElement
button 按钮控件 flow; phrasing; interactive; listed; labelable; submittable; reassociateable; form-associated phrasing phrasing* globals; autofocus; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; name; type; value HTMLButtonElement
canvas 可编程位图画布 flow; phrasing; embedded phrasing transparent globals; width; height HTMLCanvasElement
caption 表格标题 none table; template flow* globals HTMLTableCaptionElement
cite 作品题目 flow; phrasing phrasing phrasing globals HTMLElement
code 计算机代码 flow; phrasing phrasing phrasing globals HTMLElement
col 表格列 none colgroup; template empty globals; span HTMLTableColElement
colgroup 表格的列组 none table; template col; script-supporting elements globals; span HTMLTableColElement
data 机器可读数据 flow; phrasing phrasing phrasing globals; value HTMLDataElement
datalist 组合框选项的容器 flow; phrasing phrasing phrasing; option globals HTMLDataListElement
dd dt元素的内容 none dl; template flow globals HTMLElement
del 从文档移除 flow; phrasing* phrasing transparent globals; cite; datetime HTMLModElement
dfn 定义实例 flow; phrasing phrasing phrasing* globals HTMLElement
div 通用flow容器 flow flow flow globals HTMLDivElement
dl 关联列表 flow flow dt; dd; script-supporting elements globals HTMLDListElement
dt 被解释的词 none dl; template flow* globals HTMLElement
em 重音强调 flow; phrasing phrasing phrasing globals HTMLElement
embed 插件 flow; phrasing; embedded; interactive phrasing empty globals; src; type; width; height; any* HTMLEmbedElement
fieldset 表单控件组 flow; sectioning root; listed; reassociateable; form-associated flow legend*; flow globals; disabled; form; name HTMLFieldSetElement
figcaption 图表标题 none figure; template flow globals HTMLElement
figure 可带标题的图表 flow; sectioning root flow figcaption*; flow globals HTMLElement
footer 页面或节的脚注 flow flow flow* globals HTMLElement
form 用户可提交的表单 flow flow flow* globals; accept-charset; action; autocomplete; enctype; method; name; novalidate; target HTMLFormElement
h1, h2, h3, h4, h5, h6 节标题 flow; heading flow phrasing globals HTMLHeadingElement
head 文档元数据的容器 none html metadata content* globals HTMLHeadElement
header 页面或节的简介或导航帮助 flow flow flow* globals HTMLElement
hr 主题分隔 flow flow empty globals HTMLHRElement
html 根元素 none none* head; body globals; manifest HTMLHtmlElement
i 另外的语气 flow; phrasing phrasing phrasing globals HTMLElement
iframe 嵌套的浏览上下文 flow; phrasing; embedded; interactive phrasing text* globals; src; srcdoc; name; sandbox; width; height HTMLIFrameElement
img 图像 flow; phrasing; embedded; interactive*; form-associated phrasing empty globals; alt; src; crossorigin; usemap; ismap; width; height HTMLImageElement
input 表单控件 flow; phrasing; interactive*; listed; labelable; submittable; resettable; reassociateable; form-associated phrasing empty globals; accept; alt; autocomplete; autofocus; checked; dirname; disabled; form; formaction; formenctype; formmethod; formnovalidate; formtarget; height; list; max; maxlength; min; minlength; multiple; name; pattern; placeholder; readonly; required; size; src; step; type; value; width HTMLInputElement
ins 加到文档 flow; phrasing* phrasing transparent globals; cite; datetime HTMLModElement
kbd 用户输入 flow; phrasing phrasing phrasing globals HTMLElement
keygen 密钥生成器表单控件 flow; phrasing; interactive; listed; labelable; submittable; resettable; reassociateable; form-associated phrasing empty globals; autofocus; challenge; disabled; form; keytype; name HTMLKeygenElement
label 表单控件的标签 flow; phrasing; interactive; reassociateable; form-associated phrasing phrasing* globals; form; for HTMLLabelElement
legend fieldset的标题 none fieldset; template phrasing globals HTMLLegendElement
li 列表项目 none ol; ul; template flow globals; value* HTMLLIElement
link 链接元数据 metadata; flow; phrasing head; template; noscript; phrasing empty globals; href; crossorigin; rel; media; hreflang; type; sizes HTMLLinkElement
main 文档的主要内容 flow flow flow* globals HTMLElement
map 图像地图 flow; phrasing* phrasing transparent; area* globals; name HTMLMapElement
mark 高亮 flow; phrasing phrasing phrasing globals HTMLElement
meta 文本元数据 metadata; flow; phrasing head; template; noscript; phrasing empty globals; name; http-equiv; content; charset HTMLMetaElement
meter 测量计 flow; phrasing; labelable phrasing phrasing* globals; value; min; max; low; high; optimum HTMLMeterElement
nav 有导航链接的节 flow; sectioning flow flow globals HTMLElement
noscript 没有脚本时的降级内容 metadata; flow; phrasing head; template; phrasing* varies* globals HTMLElement
object 图像、嵌套浏览上下文或插件 flow; phrasing; embedded; interactive*; listed; submittable; reassociateable; form-associated phrasing param*; transparent globals; data; type; typemustmatch; name; usemap; form; width; height HTMLObjectElement
ol 有序列表 flow flow li; script-supporting elements globals; reversed; start; type HTMLOListElement
optgroup 列表框的选项组 none select; template option; script-supporting elements globals; disabled; label HTMLOptGroupElement
option 列表框或组合框中的选项 none select; datalist; optgroup; template text* globals; disabled; label; selected; value HTMLOptionElement
output 计算和输出值 flow; phrasing; listed; labelable; resettable; reassociateable; form-associated phrasing phrasing globals; for; form; name HTMLOutputElement
p 段落 flow flow phrasing globals HTMLParagraphElement
param 给object和参数 none object; template empty globals; name; value HTMLParamElement
pre 预格式化文本块 flow flow phrasing globals HTMLPreElement
progress 进度条 flow; phrasing; labelable phrasing phrasing* globals; value; max HTMLProgressElement
q 引文 flow; phrasing phrasing phrasing globals; cite HTMLQuoteElement
rb Ruby基 none ruby; template phrasing globals HTMLElement
rp ruby注解文本分组 none ruby; template phrasing globals HTMLElement
rt Ruby注解文本 none ruby; rtc; template phrasing globals HTMLElement
rtc Ruby 注解文本容器 none ruby; template phrasing globals HTMLElement
ruby Ruby 注解 flow; phrasing phrasing phrasing; rp; rt; rb; rtc* globals HTMLElement
s 不准确文本 flow; phrasing phrasing phrasing globals HTMLElement
samp 计算机输出 flow; phrasing phrasing phrasing globals HTMLElement
script 嵌入的脚本 metadata; flow; phrasing; script-supporting head; phrasing; script-supporting script, data, or script documentation* globals; src; type; charset; async; defer; crossorigin HTMLScriptElement
section 通用文档或应用节 flow; sectioning flow flow globals HTMLElement
select 列表框控件的内容模型 flow; phrasing; interactive; listed; labelable; submittable; resettable; reassociateable; form-associated phrasing option, optgroup globals; autofocus; disabled; form; multiple; name; required; size HTMLSelectElement
small 边注 flow; phrasing phrasing phrasing globals HTMLElement
source 媒体源 none video; audio; template empty globals; src; type; media HTMLSourceElement
span 通用phrasing容器 flow; phrasing phrasing phrasing globals HTMLSpanElement
strong 重要 flow; phrasing phrasing phrasing globals HTMLElement
style 嵌入的样式信息Embedded styling information metadata; flow head; noscript; flow varies* globals; media; type HTMLStyleElement
sub 下标 flow; phrasing phrasing phrasing globals HTMLElement
sup 上标 flow; phrasing phrasing phrasing globals HTMLElement
table 表格 flow flow caption; colgroup; thead; tbody; tfoot; tr; script-supporting elements globals; border HTMLTableElement
tbody 表格的行组 none table; template tr; script-supporting elements globals HTMLTableSectionElement
td 表格的单元格 sectioning root tr; template flow globals; colspan; rowspan; headers HTMLTableDataCellElement
template 模板 metadata; flow; phrasing; script-supporting metadata; phrasing; script-supporting; colgroup* it’s complicated* globals HTMLTemplateElement
textarea 多行文本框 flow; phrasing; interactive; listed; labelable; submittable; resettable; reassociateable; form-associated phrasing text globals; autofocus; cols; dirname; disabled; form; maxlength; minlength; name; placeholder; readonly; required; rows; wrap HTMLTextAreaElement
tfoot 表格的脚注行组 none table; template tr; script-supporting elements globals HTMLTableSectionElement
th 表格的表头单元格 none tr; template flow* globals; colspan; rowspan; headers; scope; abbr HTMLTableHeaderCellElement
thead 表格的标题行组 none table; template tr; script-supporting elements globals HTMLTableSectionElement
time 机器可读的日期或时间数据 flow; phrasing phrasing phrasing globals; datetime HTMLTimeElement
title 文档题目 metadata head; template text* globals HTMLTitleElement
tr 表格行 none table; thead; tbody; tfoot; template th*; td; script-supporting elements globals HTMLTableRowElement
track 定时的文本轨 none audio; video; template empty globals; default; kind; label; src; srclang HTMLTrackElement
u 关键字 flow; phrasing phrasing phrasing globals HTMLElement
ul 列表 flow flow li; script-supporting elements globals HTMLUListElement
var 变量 flow; phrasing phrasing phrasing globals HTMLElement
video 视频播放器 flow; phrasing; embedded; interactive phrasing source; transparent globals; src; crossorigin; poster; preload; autoplay; mediagroup; loop; muted; controls; width; height HTMLVideoElement
wbr 可断行建议 flow; phrasing phrasing empty globals HTMLElement

*表示实际的规则比上表更复杂 † “双亲”列中的分类列出 column refer to parents that list the given categories in their content model, not to elements that themselves are in those categories. For example, the a element’s “Parents” column says “phrasing”, so any element whose content model contains the “phrasing” category could be a parent of an a element. Since the “flow” category includes all the “phrasing” elements, that means the th element could be a parent to an a element. Element content categories

分类 元素 有例外的元素
Metadata content base; link; meta; noscript; script; style; template; title
Flow content a; abbr; address; article; aside; audio; b; bdi; bdo; blockquote; br; button; canvas; cite; code; data; datalist; del; dfn; div; dl; em; embed; fieldset; figure; footer; form; h1; h2; h3; h4; h5; h6; header; hr; i; iframe; img; input; ins; kbd; keygen; label; main; map; mark; math; meter; nav; noscript; object; ol; output; p; pre; progress; q; ruby; s; samp; script; section; select; small; span; strong; sub; sup; svg; table; template; textarea; time; u; ul; var; video; wbr; Text area (若为map元素的后代)
Sectioning content article; aside; nav; section
Heading content h1; h2; h3; h4; h5; h6;
Phrasing content a; abbr; audio; b; bdi; bdo; br; button; canvas; cite; code; data; datalist; del; dfn; em; embed; i; iframe; img; input; ins; kbd; keygen; label; map; mark; math; meter; noscript; object; output; progress; q; ruby; s; samp; script; select; small; span; strong; sub; sup; svg; template; textarea; time; u; var; video; wbr; Text area (若为map元素的后代)
Embedded content audio canvas embed iframe img math object svg video
Interactive content a; button; embed; iframe; keygen; label; select; textarea; audio (若有controls属性); img (若有usemap属性); input (若type属性不在隐藏状态); object (若有usemap属性); video (若在controls属性)
Sectioning roots blockquote; body; fieldset; figure; td
Form-associated elements button; fieldset; input; keygen; label; object; output; select; textarea; img
Listed elements button; fieldset; input; keygen; object; output; select; textarea
Submittable elements button; input; keygen; object; select; textarea
Resettable elements input; keygen; output; select; textarea
Labelable elements button; input; keygen; meter; output; progress; select; textarea
Reassociateable elements button; fieldset; input; keygen; label; object; output; select; textarea
Palpable content a; abbr; address; article; aside; b; bdi; bdo; blockquote; button; canvas; cite; code; data; dfn; div; em; embed; fieldset; figure; footer; form; h1; h2; h3; h4; h5; h6; header; i; iframe; img; ins; kbd; keygen; label; main; map; mark; math; meter; nav; object; output; p; pre; progress; q; ruby; s; samp; section; select; small; span; strong; sub; sup; svg; table; textarea; time; u; var; video audio (若有controls属性); dl (若有至少一个键值对); input (若type属性不在隐藏状态); ol (若至少有一个li元素孩子); ul (若至少有一个li元素孩子); 非元素间空白的文本
Script-supporting elements script; template

属性

非事件处理属件 元素 描述
abbr th 标题单元格其它上下文被引用时标签 文本*
accept input 文件上传控件的预期文件类型提示 Set of comma-separated tokens* consisting of valid MIME types with no parameters or audio/, video/, or image/*
accept-charset form 表单提交用的字符编码 Ordered set of unique space-separated tokens, ASCII case-insensitive, consisting of labels of ASCII-compatible character encodings*
accesskey HTML elements 激活或聚焦元素的键盘快捷键 Ordered set of unique space-separated tokens, case-sensitive, consisting of one Unicode code point in length
action form 表单提交用的URL 有效non-empty URL potentially surrounded by spaces
alt area; img; input 图像不可用时的替换文本 文本*
async script 异步执行脚本 布尔值
autocomplete form 表单中控件的默认自动填充特性 “on”; “off”
autocomplete input; select; textarea 自动填充特性提示 Autofill field name and related tokens*
autofocus button; input; keygen; select; textarea 页面加载后自动让表单控件得到焦点 布尔值
autoplay audio; video 页面加载后媒体资源可以自动开始播放 布尔值
border table 表格元素不用于布局目的 The empty string, or “1”
challenge keygen 生成并签署公钥的包装字符串 文本
charset meta 字符集声明 Encoding label*
charset script 外部脚本资源的字符编码 Encoding label*
checked input 控件是否被选中 布尔值
cite blockquote; del; ins; q 到引用源或版本信息的链接 有效URL potentially surrounded by spaces
class HTML elements 元素所属的类 Set of space-separated tokens
cols textarea 一行的最大字符数 有效正整数
colspan td; th 单元格跨的列数 有效正整数
content meta 元素值 文本*
contenteditable HTML elements 元素是否可编辑 “true”; “false”
controls audio; video 显示用户代理的控制按钮 布尔值
coords area 图像地图中创建形状的坐标 有效list of integers*
crossorigin audio; img; link; script; video 如何处理跨源请求 “anonymous”; “use-credentials”
data object 资源地址 有效non-empty URL potentially surrounded by spaces
datetime del; ins 变更的时期和可选的时间 有效date string with optional time
datetime time 机器可读值 有效month string, valid date string, valid yearless date string, valid time string, valid floating date and time string, valid time-zone offset string, valid global date and time string, valid week string, valid 非负整数, or valid duration string
default track 没有更适合的文本轨时启用 布尔值
defer script 推迟脚本执行 布尔值
dir HTML elements 元素的文本方向 “ltr”; “rtl”; “auto”
dir bdo 元素的文本方向 “ltr”; “rtl”
dirname input; textarea 用于发送元素方向的表单域名 文本*
disabled button; fieldset; input; keygen; optgroup; option; select; textarea 控件是否启用 布尔值
download a; area 下载资源到文件名而非浏览它 文本
enctype form 表单提交用的数据编码类型 “application/x-www-form-urlencoded”; “multipart/form-data”; “text/plain”
for label 关联控件 ID*
for output 关联与输出有关的输入控件列表 Unordered set of unique space-separated tokens, case-sensitive, consisting of IDs*
form button; fieldset; input; keygen; label; object; output; select; textarea 关联表单 ID*
formaction button; input 用于表单提交的URL 有效non-empty URL potentially surrounded by spaces
formenctype button; input 用于表单提交的数据编码类型 “application/x-www-form-urlencoded”; “multipart/form-data”; “text/plain”
formmethod button; input 用于表单提交的HTTP方法 “GET”; “POST”
formnovalidate button; input 表单提交时跳过验证 布尔值
formtarget button; input 用于表单提交的浏览上下文 有效browsing context name or keyword
headers td; th 本单元格的头单元格列表 Unordered set of unique space-separated tokens, case-sensitive, consisting of IDs*
height canvas; embed; iframe; img; input; object; video 高度 有效非负整数
hidden HTML elements 元素是否隐藏的 布尔值
high meter 区间上限的下界 有效浮点数*
href a; area 超链接的地址 有效URL potentially surrounded by spaces
href link 超链接的地址 有效non-empty URL potentially surrounded by spaces
href base 文档的根URL 有效URL potentially surrounded by spaces
hreflang a; area; link 链接资源的语言 有效BCP 47 language tag
http-equiv meta 导言 文本*
id HTML elements 元素的 ID 文本*
ismap img 图像是否服务器端图像地图 布尔值
keytype keygen 生成的密钥类型 文本*
kind track 文本轨类型 “subtitles”; “captions”; “descriptions”; “chapters”; “metadata”
label optgroup; option; track 用户可见标签 文本
lang HTML elements 元素的语言 有效BCP 47 language tag or the empty string
list input 自动补全选项列表 ID*
loop audio; video 媒体资源是否重复 布尔值
low meter 区间下限的上界 有效浮点数*
manifest html 应用程序缓存清单 有效non-empty URL potentially surrounded by spaces
max input 最大值 Varies*
max meter; progress 区间上限 有效浮点数*
maxlength input; textarea 值的最大长度 有效非负整数
media link; source; style 可用媒体 有效media query
mediagroup audio; video 用隐含的MediaController分组media元素 文本
method form 表单提交用的HTTP方法 “GET”; “POST”;
min input 最小值 Varies*
min meter 区间下限 有效浮点数*
minlength input; textarea 值的最小长度 有效非负整数
multiple input; select 是否容许多重选择 布尔值
muted audio; video 是否默认静音 布尔值
name button; fieldset; input; keygen; output; select; textarea 用于提交和form.elements API的表单名 文本*
name form 用于document.forms API的表单名 文本*
name iframe; object 嵌套浏览上下文名 有效browsing context name or keyword
name map usemap属性引用的图像地图名 文本*
name meta 元数据名 文本*
name param 参数名 文本
novalidate form 提交表单时跳过控件验证 布尔值
optimum meter 最优值 有效浮点数*
pattern input 表单控件值匹配的模式 正则表达式如JavaScript
placeholder input; textarea 表单控件的用户可见标签 文本*
poster video 在视频重放前的桢 有效non-empty URL potentially surrounded by spaces
preload audio; video 所需媒体缓冲提示 “none”; “metadata”; “auto”
readonly input; textarea 用户是否可编辑 布尔值
rel a; area; link 文档与资源的关系 Set of space-separated tokens*
required input; select; textarea 控件是否对表单提交必须 布尔值
reversed ol 列表反向编号 backwards 布尔值
rows textarea 显示的行数 有效正整数
rowspan td; th 单元格跨的行数 有效非负整数
sandbox iframe 嵌套内容的安全性规则 Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of “allow-forms”, “allow-pointer-lock”, “allow-popups”, “allow-same-origin”, “allow-scripts and “allow-top-navigation”
spellcheck HTML elements 元素是否有拼写检查 “true”; “false”
scope th 指定表格头用于的单元格 “row”; “col”; “rowgroup”; “colgroup”
selected option 选项是否默认选取 布尔值
shape area 图像地图中创建的形状 “circle”; “default”; “poly”; “rect”
size input; select 控件的大小 有效正整数
sizes link 图标大小 (对 rel=”icon”) Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of sizes*
span col; colgroup 元素跨的列数 有效正整数
src audio; embed; iframe; img; input; script; source; track; video 资源地址 有效non-empty URL potentially surrounded by spaces
srcdoc iframe iframe渲染的文档 The source of an iframe srcdoc document*
srclang track 文本轨的语言 有效BCP 47 language tag
start ol 产项的序号 有效integer
step input 表单控件的值间隔 有效浮点数 greater than zero, or “any”
style HTML elements 表现和格式化指令 CSS declarations*
tabindex HTML elements 线性焦点导航的元素相对顺序 有效integer
target a; area 超链接导航的浏览上下文 有效browsing context name or keyword
target base 超链接导航和表格提交的浏览上下文 有效browsing context name or keyword
target form 表格提交的浏览上下文 有效browsing context name or keyword
title HTML elements 元素的建议性信息 文本
title abbr; dfn 缩写的全名或展开 文本
title input 模式的描述 (与 pattern 属性一起用) 文本
title link 链接的标题 文本
title link; style 替代的样式表集名 文本
translate HTML elements 页面被本地化时元素应否翻译 “yes”; “no”
type a; area; link 指向资源的类型提示 有效MIME type
type button 按钮类型 “submit”; “reset”; “button”
type embed; object; script; source; style 嵌入资源的类型 有效MIME类型
type input 表单控件类型 输入类型关键字
type ol 列表标记类型 “1”; “a”; “A”; “i”; “I”
typemustmatch object type属性与Content-Type值是否必须匹配 布尔值
usemap img; object 用的图像地图名 有效hash-name reference*
value button; option 用于表单提交的值 文本
value data 机器可读值 文本*
value input 表单控件的值 Varies*
value li 列表项目的序号 有效integer
value meter; progress 元素的当前值 有效浮点数
value param 参数值 文本
width canvas; embed; iframe; img; input; object; video 宽度 有效非负整数
wrap textarea 控件的值如何换行 “soft”; “hard”

*表示实际的规则比上表更复杂

事件处理属性 元素 描述
onabort HTML elements abort事件处理器 Event handler content attribute
onafterprint body 给Window对象的afterprint事件处理器 Event handler content attribute
onbeforeprint body 给Window对象的beforeprint事件处理器 Event handler content attribute
onbeforeunload body 给Window对象的beforeunload事件处理器 Event handler content attribute
onblur HTML elements blur事件处理器 Event handler content attribute
oncancel HTML elements cancel事件处理器 Event handler content attribute
oncanplay HTML elements canplay事件处理器 Event handler content attribute
oncanplaythrough HTML elements canplaythrough事件处理器 Event handler content attribute
onchange HTML elements change事件处理器 Event handler content attribute
onclick HTML elements click事件处理器 Event handler content attribute
oncuechange HTML elements cuechange事件处理器 Event handler content attribute
ondblclick HTML elements dblclick事件处理器 Event handler content attribute
ondurationchange HTML elements durationchange 事件处理器 Event handler content attribute
onemptied HTML elements emptied 事件处理器 Event handler content attribute
onended HTML elements ended 事件处理器 Event handler content attribute
onerror HTML elements error 事件处理器 Event handler content attribute
onfocus HTML elements focus 事件处理器 Event handler content attribute
onhashchange body 给Window对象的hashchange 事件处理器 Event handler content attribute
oninput HTML elements input 事件处理器 Event handler content attribute
oninvalid HTML elements invalid 事件处理器 Event handler content attribute
onkeydown HTML elements keydown 事件处理器 Event handler content attribute
onkeypress HTML elements keypress 事件处理器 Event handler content attribute
onkeyup HTML elements keyup 事件处理器 Event handler content attribute
onload HTML elements load 事件处理器 Event handler content attribute
onloadeddata HTML elements loadeddata 事件处理器 Event handler content attribute
onloadedmetadata HTML elements loadedmetadata 事件处理器 Event handler content attribute
onloadstart HTML elements loadstart 事件处理器 Event handler content attribute
onmessage body message 事件处理器 for Window object Event handler content attribute
onmousedown HTML elements mousedown 事件处理器 Event handler content attribute
onmouseenter HTML elements mouseenter 事件处理器 Event handler content attribute
onmouseleave HTML elements mouseleave 事件处理器 Event handler content attribute
onmousemove HTML elements mousemove 事件处理器 Event handler content attribute
onmouseout HTML elements mouseout 事件处理器 Event handler content attribute
onmouseover HTML elements mouseover 事件处理器 Event handler content attribute
onmouseup HTML elements mouseup 事件处理器 Event handler content attribute
onmousewheel HTML elements mousewheel 事件处理器 Event handler content attribute
onoffline body 给Window对象的offline 事件处理器 Event handler content attribute
ononline body 给Window对象的online 事件处理器 Event handler content attribute
onpagehide body 给Window对象的pagehide 事件处理器 Event handler content attribute
onpageshow body 给Window对象的pageshow 事件处理器 Event handler content attribute
onpause HTML elements pause 事件处理器 Event handler content attribute
onplay HTML elements play 事件处理器 Event handler content attribute
onplaying HTML elements playing 事件处理器 Event handler content attribute
onpopstate body 给Window对象的popstate 事件处理器 Event handler content attribute
onprogress HTML elements progress 事件处理器 Event handler content attribute
onratechange HTML elements ratechange 事件处理器 Event handler content attribute
onreset HTML elements reset 事件处理器 Event handler content attribute
onresize HTML elements resize 事件处理器 Event handler content attribute
onscroll HTML elements scroll 事件处理器 Event handler content attribute
onseeked HTML elements seeked 事件处理器 Event handler content attribute
onseeking HTML elements seeking 事件处理器 Event handler content attribute
onselect HTML elements select 事件处理器 Event handler content attribute
onshow HTML elements show 事件处理器 Event handler content attribute
onstalled HTML elements stalled 事件处理器 Event handler content attribute
onstorage body 给Window对象的storage 事件处理器 Event handler content attribute
onsubmit HTML elements submit 事件处理器 Event handler content attribute
onsuspend HTML elements suspend 事件处理器 Event handler content attribute
ontimeupdate HTML elements timeupdate 事件处理器 Event handler content attribute
ontoggle HTML elements toggle 事件处理器 Event handler content attribute
onunload body 给Window对象的unload 事件处理器 Event handler content attribute
onvolumechange HTML elements volumechange 事件处理器 Event handler content attribute
onwaiting HTML elements waiting 事件处理器 Event handler content attribute

事件

事件类型 接口 触发情况
abort Event 当用户终止下载时在Window触发
afterprint Event 在打印后触发
beforeprint Event 在打印前触发
beforeunload BeforeUnloadEvent 当页面即将卸载时在Window触发(常用于提示警告)
blur Event 在正失去焦点的节点触发
change Event 当用户提交改变时在控件触发
click Event 当激活行为前在元素触发
DOMContentLoaded Event 当完成解析时在Document触发
error Event 当出现网络或脚本错误时在元素触发
focus Event 在正得到焦点的节点触发
hashchange HashChangeEvent 当文档的地址的碎片标识符部分变化时在Window触发
input Event 在用户改变值时在控件触发
invalid Event 当表单验证失败时在控件触发
load Event 在文档完成加载时在Window触发;在资源完成加载时在元素触发
message MessageEvent 在对象收到信息时在对象触发
offline Event 当网络连接失败时在Window触发
online Event 当网络连接成功时在Window触发
pagehide PageTransitionEvent 当页面的条目不再是会话历史的当前条目时在Window触发
pageshow PageTransitionEvent 当页面的条目成为会话历史的当前条目时在Window触发
popstate PopStateEvent 当用户漫游会话历史时在Window触发
readystatechange Event 在完成解析和所有子资源完成加载时分别在Document触发
reset Event 当重置时在form元素触发
submit Event 当提交时在form元素触发
unload Event 当页面正在卸载时在Window触发

另外media元素有一些其它事件,还有缓存事件。

关键词 html web