by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1544
一、前言兼图片备忘
下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片（已大小优化，因为图片较高，故滚动显示）。
但是，上面毕竟是图片格式（原图上兆），而且还是英文的，所以自己觉得有必要将上面的内容文字化，同时做下简单的中文翻译。整理一番，于是就有下面的些内容。
二、文字备忘之标签
| <article> | 定义文章 |
|---|---|
| <aside> | 定义页面内容旁边的内容 |
| <audio> | 定义声音内容 |
| <canvas> | 定义图形 |
| <command> | 定义一个控制按钮 |
| <datagrid> | 指树或表格状数据格式中的动态数据 |
| <datalist> | 定义一个下拉列表 |
| <details> | 定义一个元素的细节 |
| <dialog> | 定义会话或人的交谈 |
| <embed> | 定义额外的交互内容或插件 |
| <figcaption> | 定义指定元素的标题 |
| <figure> | 定义一组媒体内容，以及他们的标题 |
| <footer> | 为章节或页面定义一个底部 |
| <header> | 为章节或页面定义一个头部 |
| <hgroup> | 定义文档中某段落的信息 |
| <keygen> | 定义表单生成的关键 |
| <mark> | 定义被标记的文本 |
| <meter> | 定义预定义范围内的测量 |
| <nav> | 定义导航链接 |
| <output> | 定义某种类型的输出 |
| <progress> | 定义任意种类任务的进程 |
| <rp> | 定义浏览器不支持ruby元素的替代者 |
| <rt> | 定义ruby注释的解释 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <section> | 定义章节 |
| <source> | 定义媒体资源 |
| <summary> | 定义某"detail"元素的头部 |
| <time> | 定义日期/时间 |
| <video> | 定义视频 |
| <wbr> | 定义可能的换行 |
| <!– …–> | 定义注释 |
|---|---|
| <!DOCTYPE> | 定义文档类型 |
| <a> | 定义超链接 |
| <abbr> | 定义缩写 |
| <address> | 定义地址元素 |
| <area> | 定义图片地图的某区域 |
| <b> | 定义加粗文字 |
| <base> | 定义整个页面的基础URL |
| <bdo> | 定义文本显示的方向 |
| <blockquote> | 定义一个长引用 |
| <body> | 定义主体元素 |
| <br> | 插入单个的换行 |
| <button> | 定义按钮 |
| <caption> | 定义表格的标题 |
| <cite> | 定义引用 |
| <code> | 定义计算机代码文本 |
| <col> | 定义表格列的属性 |
| <colgroup> | 定义表格列的组 |
| <dd> | 定义个定义描述 |
| <del> | 定义删除文本 |
| <dfn> | 定义个定义项 |
| <div> | 定义文档章节 |
| <dl> | 定义定义列表 |
| <dt> | 定义定义项 |
| <em> | 定义强调文本 |
| <fieldset> | 定义控件组 |
| <form> | 定义表单 |
| <h1>到<h6> | 定义头部1到头部6 |
| <head> | 定义文档信息 |
| <hr> | 定义水平线 |
| <html> | 定义个html文档 |
| <i> | 定义倾斜文本 |
| <iframe> | 定义内联替代窗口（框架） |
| <img> | 定义个图片 |
| <input> | 定义输入域 |
| <ins> | 定义插入文本 |
| <kbd> | 定义键盘文本 |
| <label> | 定义表单控件的标签 |
| <legend> | 定义控件组的标题 |
| <li> | 定义列表项 |
| <link> | 定义相关资源 |
| <map> | 定义图片地图 |
| <menu> | 定义菜单列表 |
| <meta> | 定义元信息 |
| <noscript> | 定义无脚本章节 |
| <object> | 定义内嵌对象 |
| <ol> | 定义一个有序列表 |
| <optgroup> | 定义个选项组 |
| <option> | 定义下拉列表选项 |
| <p> | 定义段落 |
| <params> | 定义object的参数 |
| <pre> | 定义预格式化文本 |
| <q> | 定义短引用 |
| <s> | 定义不再正确的文本 |
| <samp> | 定义简单的计算机代码 |
| <script> | 定义脚本 |
| <select> | 定义可选择列表 |
| <small> | 定义小点的文本 |
| <span> | 定义文档章节 |
| <strong> | 定义强调的文字 |
| <style> | 定义一个样式定义 |
| <sub> | 定义下标文字 |
| <sup> | 定义上标文字 |
| <table> | 定义表格 |
| <tbody> | 定义表格的主体 |
| <td> | 定义表格单元格 |
| <textarea> | 定义文本域 |
| <tfoot> | 定义表格底部 |
| <th> | 定义表格头 |
| <thead> | 定义表格头 |
| <title> | 定义文档的标题 |
| <tr> | 定义表格行 |
| <ul> | 定义无序列表 |
| <var> | 定义变量 |
| <acronym> | 在HTML4.01中定义首字母缩略词 |
|---|---|
| <applet> | 定义内嵌的小应用程序 |
| <basefont> | 定义文档中基本的字体属性 |
| <big> | 让文字变大点 |
| <center> | 居中显示文字或内容 |
| <dir> | 定义目录列表 |
| <font> | 指定字体种类，大小，颜色等 |
| <frame> | 在框架集中定义独有的窗体 |
| <frameset> | 定义框架集，包含多个窗体 |
| <noframe> | 当浏览器不支持框架的时候显示文字 |
| <strike> | 定义删除线文本 |
| <tt> | 定义电传打字机文本 |
| <u> | 定义下划线文字 |
| <xmp> | 定义格式化的文字 |
三、HTML5文字备忘之全局属性
| contenteditable |
指定是否允许用户编辑内容 true | false |
|---|---|
| contextmenu |
定义元素的上下文菜单 menu id |
| draggable |
指定是否允许用户拖拽元素 true|false|auto |
| dropzone |
指定当拖拽数据放开的时候会发生什么 copy|move|link |
| hidden |
指定元素不相干 hidden |
| spellcheck |
指定是否元素要进行拼写检查 true | false |
| accesskey |
指定访问元素的快捷键 字符(character) |
|---|---|
| class |
指定元素的类名（为样式表） 类名(classname) |
| dir |
指定元素文本内容的对齐方向 ltr|rtl |
| id |
为元素指定唯一的id id |
| lang |
为元素内容指定语言代码 语言代码(language code) |
| style |
指定元素的内联样式 样式定义(style definition) |
| tabindex |
指定元素的tab顺序 数值(nubmer) |
| title |
指定元素额外的信息 文本(text) |
四、HTML5文字备忘之事件属性
1. window对象
| onafterprint | 在文档打印之后执行 |
|---|---|
| onbeforeprint | 在文档打印之前执行 |
| onbeforeloaded | 在文档加载完毕之前执行 |
| onerror | 当错误发生时执行 |
| onhaschange | 当文档发生改变的时候执行 |
| onmessage | 当该信息被触发的时候执行 |
| onoffline | 当文档离线的时候执行 |
| ononline | 当文档上线的时候执行 |
| onpagehide | 当窗体隐藏的时候执行 |
| onpageshow | 当窗体显示的时候执行 |
| onpopstate | 当窗体历史改变的时候执行 |
| onredo | 当文档执行恢复上一次操作的时候执行 |
| onresize | 当窗体大小改变的时候执行 |
| onstorage | 当文档加载ok的时候执行 |
| onondo | 当文档执行恢复之前一次操作的时候执行 |
| onunload | 当用户离开文档的时候执行 |
| onblur | 当窗体失去焦点的时候执行 |
|---|---|
| onfocus | 当窗体获得焦点的时候执行 |
| onload | 当文档加载完毕的时候执行 |
2. form表单的事件属性
| oncontextmenu | 当上下文菜单被触发的时候执行 |
|---|---|
| onformchange | 当表单发生改变的时候执行 |
| onforminput | 当表单获得用户输入时候执行 |
| oninput | 当元素获得用户输入的时候执行 |
| oninvalid | 当元素验证无效的时候执行 |
| onblur | 当元素失去焦点的时候执行 |
|---|---|
| onchange | 当元素改变的时候执行 |
| onfocus | 当元素获得焦点的时候执行 |
| onselect | 当元素被选择的时候执行 |
| onsubmit | 当表单被提交的时候执行 |
| onreset | 当表单重置的时候执行 |
|---|
3. 键盘事件
| onkeydown | 当键按下的时候执行 |
|---|---|
| onkeypress | 当键按下并释放的时候执行 |
| onkeyup | 当键抬起的时候执行 |
4. 鼠标事件
| ondrag | 当元素被拖拽的时候执行 |
|---|---|
| ondragend | 当元素拖拽操作结束的时候执行 |
| ondragenter | 当元素拖拽进入释放对象的时候 |
| ondragleave | 当元素拖拽离开释放对象的时候 |
| ondragover | 当元素拖拽经过释放对象的时候 |
| ondragstart | 当元素拖拽操作开始的时候执行 |
| ondrop | 当拖拽元素被放开的时候 |
| onmouswheel | 当鼠标滑轮滚动的时候执行 |
| onscroll | 当元素的滚动条滚动的时候执行 |
| onclick | 当鼠标点击的时候执行 |
|---|---|
| ondbclick | 当鼠标双击的时候执行 |
| onmousedown | 当鼠标按下的时候执行 |
| onmousemove | 当鼠标移动的时候执行 |
| onmouseout | 当鼠标移出元素的时候执行 |
| onmouseover | 当属性进入元素的时候执行 |
| onmouseup | 当鼠标抬起的时候执行 |
5. 媒体事件
| oncanplay | 当媒体可以播放的时候执行 |
|---|---|
| oncanplaythrough | 当媒体可以播放到最后的时候执行 |
| ondurationchange | 当媒体长度改变的时候执行 |
| onemptied | 当媒体资源元素变成空的时候执行 |
| onended | 当媒体已经到达最后的时候执行 |
| onerror | 当加载元素发生错误的时候执行 |
| onloadeddata | 当媒体数据加载完毕的时候执行 |
| onloadedmetadata | 当媒体元素的持续时间加载完毕的时候执行 |
| onloadstart | 当浏览器开始加载媒体数据的时候执行 |
| onpause | 当媒体数据暂停的时候执行 |
| onplay | 当媒体数据继续开始播放的时候执行 |
| onplaying | 当媒体数据已经开始播放的时候执行 |
| onprogress | 在浏览器正在获取媒体数据的时候执行 |
| onratechange | 当媒体数据播放比率发生改变的时候执行 |
| onreadystatechange | 当ready-state发生改变的时候执行 |
| onseeked | 当元素的seeking属性不是true的时候执行 |
| onseeking | 当元素的seeking属性是true的时候执行 |
| onstalled | 当获取元素数据发生错误的时候执行 |
| onsuspend | 当浏览器停止获取媒体数据的时候执行 |
| ontimeupdate | 当媒体改变其播放位置的时候执行 |
| onvolumechange | 当媒体音量大小发生改变的时候执行，包括无声 |
| onwaiting | 当媒体元素停止播放的时候 |
| onabort | 碰到abort的时候执行 |
|---|
五、HTML5文字备忘之浏览器的准备情况
支持：
不支持：
部分支持：
注：下表格最右侧三栏指移动设备上的浏览器支持情况。
8 |
3.6 |
9.0 |
5.0 |
11.0 |
2.3 |
4.5 |
10.0 |
||
|---|---|---|---|---|---|---|---|---|---|
| Details & Summary元素 | |
|
|
|
|
|
|
|
|
| WebGL – 3D Canvas 制图 | |
|
|
|
|
|
|
|
|
| HTML5中内联SVG | |
|
|
|
|
|
|
|
|
| Datalist元素 | |
|
|
|
|
|
|
|
|
| Progress & Meter | |
|
|
|
|
|
|
|
|
| classList(DOMTokenList) | |
|
|
|
|
|
|
|
|
| Ruby注解 | |
|
|
|
|
|
|
|
|
| 表单验证 | |
|
|
|
|
|
|
|
|
| Session历史管理 | |
|
|
|
|
|
|
|
|
| HTML5表单特征 | |
|
|
|
|
|
|
|
|
| 拖拽和拖放 | |
|
|
|
|
|
|
|
|
| contenteditable属性 | |
|
|
|
|
|
|
|
|
| Canvas的文本API | |
|
|
|
|
|
|
|
|
| Audio元素 | |
|
|
|
|
|
|
|
|
| Video元素 | |
|
|
|
|
|
|
|
|
| dataset & data – 属性 | |
|
|
|
|
|
|
|
|
| 新语义元素 | |
|
|
|
|
|
|
|
|
| Canvas(基本支持) | |
|
|
|
|
|
|
|
|
| Hash改变事件 | |
|
|
|
|
|
|
|
|
| 离线web应用程序 | |
|
|
|
|
|
|
|
|
| getElementsByClassName | |
|
|
|
|
|
|
|
|
| 总支持率 | 21% | 55% | 85% | 67% | 64% | 51% | 50% | 36% |
六、最后几句话
时间仓促，错误难免。欢迎大力指正。以上就是全部内容。
参考文章：Ultimate HTML5 Cheatsheat [Infographic]
本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1544
（本篇完）
相关文章
- 奇了怪了，输入法和JS Enter回车提交冲突 (0.300)
- HTML5 datalist在实际项目中应用的可行性研究 (0.293)
- 完善：HTML5表单新特征简介与举例 (0.270)
- HTML popover再进化 - 新增hint类型提示框 (0.257)
- 翻译-盲人如何使用互联网的8个误区 (0.184)
- js下拉菜单实现与可访问性问题的一些思考 (0.171)
- span与a元素的键盘聚焦性以及键盘点击性研究 (0.171)
- CSS :focus伪类JS focus事件提高网站键盘可访问性 (0.171)
- HTML5 drag & drop 拖拽与拖放简介 (0.165)
- div模拟textarea文本域轻松实现高度自适应 (0.142)
- CSS3 transition实现超酷图片墙动画效果 (RANDOM - 0.023)