html5备忘录——张鑫旭
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
(本篇完)