`

html5

    博客分类:
  • html
 
阅读更多
[size=x-large]对于很想学习html5和很想弄明白html5究竟是个什么东西的童靴可以先收藏了这篇文章,这是张鑫旭童鞋收集的关于html5的有用的资料整理大全 ,例如一些常用到的html5新增的标签,已经html5新增的标签的用法和说明。俨然已经是一个html5的基础的入门教程了 ,相信对你会有用的,(PS:通常资料性的文章,我们会有个小提示: Ctrl+D可以收藏该文章哦,试试)

一、前言兼图片备忘
下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化,因为图片较高,故滚动显示)。



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

二、文字备忘之标签
HTML5中新增的标签
<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中的标签
<!– …–> 定义注释
<!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不支持的标签
<acronym> 在HTML4.01中定义首字母缩略词
<applet> 定义内嵌的小应用程序
<basefont> 定义文档中基本的字体属性
<big> 让文字变大点
<center> 居中显示文字或内容
<dir> 定义目录列表
<font> 指定字体种类,大小,颜色等
<frame> 在框架集中定义独有的窗体
<frameset> 定义框架集,包含多个窗体
<noframe> 当浏览器不支持框架的时候显示文字
<strike> 定义删除线文本
<tt> 定义电传打字机文本
<u> 定义下划线文字
<xmp> 定义格式化的文字
三、HTML5文字备忘之全局属性
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对象

window新增事件属性
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表单已支持事件属性
onblur 当元素失去焦点的时候执行
onchange 当元素改变的时候执行
onfocus 当元素获得焦点的时候执行
onselect 当元素被选择的时候执行
onsubmit 当表单被提交的时候执行HTML5不支持的form表单事件属性
onreset 当表单重置的时候执行
3. 键盘事件

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

HTML5新增鼠标事件属性
ondrag 当元素被拖拽的时候执行
ondragend 当元素拖拽操作结束的时候执行
ondragenter 当元素拖拽进入释放对象的时候
ondragleave 当元素拖拽离开释放对象的时候
ondragover 当元素拖拽经过释放对象的时候
ondragstart 当元素拖拽操作开始的时候执行
ondrop 当拖拽元素被放开的时候
onmouswheel 当鼠标滑轮滚动的时候执行
onscroll 当元素的滚动条滚动的时候执行已存在的鼠标事件属性
onclick 当鼠标点击的时候执行
ondbclick 当鼠标双击的时候执行
onmousedown 当鼠标按下的时候执行
onmousemove 当鼠标移动的时候执行
onmouseout 当鼠标移出元素的时候执行
onmouseover 当属性进入元素的时候执行
onmouseup 当鼠标抬起的时候执行
5. 媒体事件

HTML5中新增媒体事件
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文字备忘之浏览器的准备情况
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
36%
六、最后几句话
时间仓促,错误难免。欢迎大力指正。以上就是全部内容。

参考文章:Ultimate HTML5 Cheatsheat [Infographic]
[/size]
分享到:
评论

相关推荐

    [HTML5] HTML5 权威指南 第2版 (英文版)

    [奥莱理] HTML5 权威指南 第2版 (英文版) [奥莱理] HTML5 The Missing Manual 2nd Edition (E-Book) ☆ 图书概要:☆ HTML5 is more than a markup language—it’s a collection of several independent web ...

    《HTML5开发精要与实例详解》配套源码

    此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔,内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点,几乎每个知识点都将配一个精心...

    HTML 5 Canvas基础教程 源码+PDF

    《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...

    简约左侧菜单HTML5全屏网站 html5响应式网站源码

    HTML5响应式网站(支持在线订单、手机版)以asp+access进行开发,前台采用html5响应式技术,使网站即可在电脑端进行访问,也可在手机端进行访问。 程序特色: 一:使搜索引擎更加容易抓取和索引 二:提供更多的功能,...

    HTML5播放实现rtmp流直播

    最近在做一个直播推流的功能,想自己写个网页进行直播尝试一下。 然后网上试了各种教程都没成功,下面说下遇到的几个坑。 1.首先通过obs进行推流,服务器是:rtmp://192.168.0.221/live,...HTML5 直播&lt;/title&gt;

    从零学HTML5 精品教程(23G百度网盘)

    ===1:HTML5 优质视频教程集锦(赠送HTML 基础=== 01【赠 送】带你一周 HOLD 住 HTML + CSS 02【赠 送】最棒的 HTML DIV CSS 学习教程(含讲义源码) 03【高 清】HTML5 视频教程(含讲义源码) 04【苏 鹏】HTML5 ...

    html5shiv.js

    越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6,IE7,IE8。为了让所有网站浏览者都能正常的访问网站,解决方案就有下面两个: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同...

    [HTML5] HTML5 基础教程 英文版

    HTML5 is required knowledge for every professional web designer and developer This book will quickly get you up to speed with the fundamentals of HTML5 and give you the confidence to start ...

    [HTML5] HTML5 实战 英文版

    HTML5 in Action provides a complete introduction to web development using HTML5 You&quot;ll explore every aspect of the HTML5 specification through real world examples and code samples It&quot;s much ...

    HTML5+CSS3+jquery应用之美

    HTML5、CSS3与jQuery俨然成为了标准Web制作技术的黄金组合。《HTML5+CSS3+jQuery应用之美》由韩国专业视觉设计师倾力奉献其多年商业网站设计与制作的从业经验,通过八大商业案例,以HTML5搭建结构、CSS3设置样式、...

    Html 5 App 界面模板(HTML5模板)

    Html 5 App 界面模板Html 5 App 界面模板Html 5 App 界面模板

    HTML 5 参考手册

    HTML 5 参考手册 W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性:嵌入音频、...

    HTML5视频播放器美化

    HTML5视频播放器美化HTML5视频播放器美化HTML5视频播放器美化

    arm语音html5直接播放实现仿微信播放动画

    1.html5标签播放amr语音 &lt;audio src="http://xxxxxx/media/1.amr" id="media" width="1" height="1" preload=""&gt;&lt;/audio&gt; 2.修改封装weixinAudio.js 实现仿微信语音播放动画 3.项目集成ffmpeg for linux 后台直接...

    HTML5设计原理

    今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。 实际上,...

    一个简单HTML5期末考核大作业,学生个人html静态网页制作代码

    HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...

    使用HTML5技术制作在线PDF阅读器(附源码)

    这个技术原型主要用于在HTML5 平台上展示 PDF 文档,无需任何本地技术支持,但浏览器必须技持HTML5。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发~~~统一开发环境是一款HTML5跨平台一站式应用开发、调试...

    HTML5炫酷科技感十足数据可视化

    HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据...

    HTML5 in Action

    HTML5 in Action provides a complete introduction to web development using HTML5. You’ll explore every aspect of the HTML5 specification through real-world examples and code samples. It’s much more ...

    jQuery+html5实现的3D焦点轮播幻灯片(html5zoo.js html5zoo-slides).zip

    jQuery+html5实现的3D焦点轮播幻灯片(html5zoo.js html5zoo-slides) 两个演示可以参考

Global site tag (gtag.js) - Google Analytics