html5 challenge,html5整理（一）

对于html5虽然用得多，但还是有一些知识点比较混乱，记得不清，所以想专门整理一下

HTML5浏览器支持

最新版本的Safari、Chrome、Firefox、Opera支持某些HTML5特性，IE9将支持某些HTML5特性

此外，所有浏览器，包括旧的新的，对无法识别的元素会作为内联元素自动处理。

IE9以下版本浏览器兼容HTML5的方法，使用静态资源的html5shiv包

或者直接将脚本文件代码展示出来

也可以将这段代码单独放在html5.js中，同时需要把这一部分放在head里面

载入后，初始化新标签的CSS

/*html5*/

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}

HTML5 新元素

canvas通过脚本来绘制图形

实例

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle="#ff0000";

ctx.fillRect(0,0,80,100);

新多媒体元素

audio定义音频内容

属性：

autoplay 如果出现该属性，则音频在就绪后马上播放

control 如果出现该属性，则向用户显示音频控件(比如播放/暂停按钮)

loop 如果出现该属性，则每当音频结束时重新播放

muted 如果出现该属性，则音频输出为静音

preload 值有auto,metadata,none,规定当网页加载时，音频是否默认被加载以及如何被加载

src 规定音频文件的url

实例

您的浏览器不支持audio元素

video标签定义视频，比如电影片段或其他视频流

支持三种视频格式：MP4、WebM、Ogg

属性：

除了拥有audio的全部属性，同时还增加了width,height两个属性

实例

您的浏览器不支持video标签

定义了一个容器，用来嵌入外部应用或者互动程序(插件)

属性：

height,

src,

type 规定嵌入内容的MIME类型,

width

实例

为诸如和元素之类的媒介规定外部文本轨道

新表单元素

定义选项列表

IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 标签。

实例

规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

IE不支持该元素

属性：

autofocus 是字段在页面加载时获得焦点.

challenge 如果使用，则将keygen的值设置为在提交时询问

disabled 禁用keygen字段

form 定义该字段所属的一个或多个表单

keytype 值包括rsa,dsa,ec,定义密钥的安全算法

name 定义元素的唯一名称，name属性用于杂提交表单时搜集字段的值

实例

用户名:

加密:

作为计算结果输出显示(比如执行脚本的输出)

IE不支持

属性：

`for' 描述计算中使用的元素与计算结果之间的关系

form 定义输入字段所属的一个或多个表单

name 定义对象的唯一名称(表单提交时使用)

实例

0

100

+

=

新的语义和结构元素

允许您设置一段文本，使其脱离其父元素的文本方向

定义命令按钮，比如单选按钮、复选框或按钮,只有IE9支持

定义度量衡。仅用于已知最大和最小值的度量

定义ruby注释(中文注音或字符)

定义字符(中文注音或字符)的解释或发音

规定在文本中的何处适合添加换行符

实例

目前只有 Firefox 和 Chrome 支持 标签。

• Username Bill:80 points
• Username Steve: 78 points

将用户名从周围的文本方向设置中隔离出来

为元素定义一个可见的标题。当用户点击标题时会显示出详细信息。

Copyright 1999-2011.

- by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of the company Refsnes Data.

定义运行中的任务进度(显示进度条)

如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 元素来添加 Word Break Opportunity(单词换行时机)。

学习 AJAX ,您必须熟悉 HttpRequest 对象。