HTML5终极备忘大全（图片版+文字版） « 张鑫旭-鑫空间-鑫生活

这篇文章发布于 2011年03月31日，星期四，11:14，归类于 HTML相关, 外文翻译。阅读 286225 次, 今日 1 次 19 条评论

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1544

一、前言兼图片备忘

下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片（已大小优化，因为图片较高，故滚动显示）。

但是，上面毕竟是图片格式（原图上兆），而且还是英文的，所以自己觉得有必要将上面的内容文字化，同时做下简单的中文翻译。整理一番，于是就有下面的些内容。

二、文字备忘之标签

**HTML5中新增的标签**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
<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>	定义可能的换行

**HTML5支持且同时存在于HTML4中的标签**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
<!– …–>	定义注释
<!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>	定义变量

**HTML5不支持的标签**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
<acronym>	在HTML4.01中定义首字母缩略词
<applet>	定义内嵌的小应用程序
<basefont>	定义文档中基本的字体属性
<big>	让文字变大点
<center>	居中显示文字或内容
<dir>	定义目录列表
<font>	指定字体种类，大小，颜色等
<frame>	在框架集中定义独有的窗体
<frameset>	定义框架集，包含多个窗体
<noframe>	当浏览器不支持框架的时候显示文字
<strike>	定义删除线文本
<tt>	定义电传打字机文本
<u>	定义下划线文字
<xmp>	定义格式化的文字

三、HTML5文字备忘之全局属性

**HTML5新添加全局属性**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
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对象

**window新增事件属性**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
onafterprint	在文档打印之后执行
onbeforeprint	在文档打印之前执行
onbeforeloaded	在文档加载完毕之前执行
onerror	当错误发生时执行
onhaschange	当文档发生改变的时候执行
onmessage	当该信息被触发的时候执行
onoffline	当文档离线的时候执行
ononline	当文档上线的时候执行
onpagehide	当窗体隐藏的时候执行
onpageshow	当窗体显示的时候执行
onpopstate	当窗体历史改变的时候执行
onredo	当文档执行恢复上一次操作的时候执行
onresize	当窗体大小改变的时候执行
onstorage	当文档加载ok的时候执行
onondo	当文档执行恢复之前一次操作的时候执行
onunload	当用户离开文档的时候执行

**window已存在事件属性**
onblur	当窗体失去焦点的时候执行
onfocus	当窗体获得焦点的时候执行
onload	当文档加载完毕的时候执行

2. form表单的事件属性

**form表单新增事件属性**
oncontextmenu	当上下文菜单被触发的时候执行
onformchange	当表单发生改变的时候执行
onforminput	当表单获得用户输入时候执行
oninput	当元素获得用户输入的时候执行
oninvalid	当元素验证无效的时候执行

**form表单已支持事件属性**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
onblur	当元素失去焦点的时候执行
onchange	当元素改变的时候执行
onfocus	当元素获得焦点的时候执行
onselect	当元素被选择的时候执行
onsubmit	当表单被提交的时候执行

**HTML5不支持的form表单事件属性**
onreset	当表单重置的时候执行

3. 键盘事件

**已存在的键盘事件属性**
onkeydown	当键按下的时候执行
onkeypress	当键按下并释放的时候执行
onkeyup	当键抬起的时候执行

4. 鼠标事件

**HTML5新增鼠标事件属性**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
ondrag	当元素被拖拽的时候执行
ondragend	当元素拖拽操作结束的时候执行
ondragenter	当元素拖拽进入释放对象的时候
ondragleave	当元素拖拽离开释放对象的时候
ondragover	当元素拖拽经过释放对象的时候
ondragstart	当元素拖拽操作开始的时候执行
ondrop	当拖拽元素被放开的时候
onmouswheel	当鼠标滑轮滚动的时候执行
onscroll	当元素的滚动条滚动的时候执行

**已存在的鼠标事件属性**
onclick	当鼠标点击的时候执行
ondbclick	当鼠标双击的时候执行
onmousedown	当鼠标按下的时候执行
onmousemove	当鼠标移动的时候执行
onmouseout	当鼠标移出元素的时候执行
onmouseover	当属性进入元素的时候执行
onmouseup	当鼠标抬起的时候执行

5. 媒体事件

**HTML5中新增媒体事件**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
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文字备忘之浏览器的准备情况

支持：
不支持：
部分支持：

注：下表格最右侧三栏指移动设备上的浏览器支持情况。

**HTML5文字备忘之浏览器的准备情况**

*Create by 张鑫旭，如果您发现下面的表格没有边框或背景色而使得阅读吃力，可尝试访问原文地址：http://www.zhangxinxu.com/wordpress/?p=1544。*
	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

（本篇完）

HTML5 datalist在实际项目中应用的可行性研究 (0.341)
完善：HTML5表单新特征简介与举例 (0.320)
奇了怪了，输入法和JS Enter回车提交冲突 (0.286)
翻译-盲人如何使用互联网的8个误区 (0.166)
js下拉菜单实现与可访问性问题的一些思考 (0.154)
span与a元素的键盘聚焦性以及键盘点击性研究 (0.154)
CSS :focus伪类JS focus事件提高网站键盘可访问性 (0.154)
HTML5 drag & drop 拖拽与拖放简介 (0.148)
div模拟textarea文本域轻松实现高度自适应 (0.144)
style标签下的CSS代码的显示与实时编辑 (0.144)
翻译：清除各个浏览器中的数据研究 (RANDOM - 0.021)

rjc说道：

2020年03月27日 13:33

顶一下

freefish说道：

2019年03月22日 11:42

哇8年了都，那时的我还在高中

Jazmin说道：

2019年03月19日 16:10

这篇文章下的评论的人是不是现在都是大神啦，好快，8年过去了

宋明清说道：

2011年09月14日 15:36

谢谢！又学习了！！

wordgold说道：

2011年08月15日 16:16

hi,冒昧请教一个问题，
我当前所在的项目是在win7的平台上使用chrome进行一个触控的展示操作，
硬件是戴尔的一体机和优派的平板，基于win7的触控平台，浏览器使用chrome dev；
问题是我想要双指触控的时候不触发chrome的默认缩放，
我使用了meta声明不允许缩放，并且在js里添加了如下语句：
document.body.addEventListener(‘touchmove’, function(event) {
event.preventDefault();
}, false);
document.body.addEventListener(‘touchstart’, function(event) {
event.preventDefault();
}, false);
document.body.addEventListener(‘gesturechange’, function(event) {
event.preventDefault();
}, false);
结果，，，没用！双指触控的时候还是会触发默认的浏览器缩放，
我分析原因是win7不是移动平台或chrome不支持meta的viewport声明，可为什么js也不顶事呢？
各种搜索啊，想搜chrome启动参数阻止缩放结果没有，
所以我现在使用的是firefox6，只是因为它没有缩放！不过这也不是解决之道。
想请问为什么js不起作用呢？或者有其他解决办法么？