HTML5初识

html5参考手册：www.w3cschool.cn/html5/

1、什么是HTML5？

web语义化

HTML5将成为HTML、XHTML以及HTML DOM的新标准。HTML5是针对目前web发展对原有HTML的补充与升级，并不是颠覆。将元素语义与元素内容呈现结果的影响分开，如去除font标签添加article。使用变迁完全从标签的语义出发，而不是表现形态。

2、HTML5中的新特性

a、用于绘画的canvas元素

b、用于媒体回访的video和audio元素

c、对本地离线存储的更好的支持

d、新的特殊内容元素，比如article、footer、header、nav、section

e、新的表单控件，比如calendar、date、time、email、url、search

3、HTML5优势

a、提高可用性和改善用户的用好体验

b、有几个新标签，这将有助于开发人员定义重要的内容

c、可以给站点带来更多的多媒体元素（音频和视频）

d、可以很好的替代FLASH和Silverlight

e、当涉及到网站的抓取和索引的时候，对于SEO很友好；

f、将被大量应用于移动应用程序和游戏

4、Html就标签的改变

DOCTYPE

新写法：

meta设置编码

新写法：

link标签

新写法：

script标签

可以不用写type：

5、HTML5新增属性初识

6、常用标签介绍

article标签

article标签

section标签

section

nav标签

新增标签nav

aside标签

aside标签

time标签

time标签

header标签

header标签

footer标签

footer标签

address标签

address标签

optgroup标签

optgroup标签

autocomplete="off"或手动清除浏览器缓存ctrl+f5

meter标签：

meter标签（颜色会随着其状态的不同而改变）

code标签：用于识别显示代码。

mark标签：突出显示文本

lns标签：用下划线定义已经被插入文档中的文本

del标签：定义文档中已被删除的文本

progress标签：标签标示任务的进度（min max value...）

7、新增表单类型

新增表单类型（email&url）

新增表单类型（number&range）

日期类型表单

与表单相关标签：

datalist标签

datalist与input关联

autofocus自动获得焦点

form属性

multiple设置对多个文件（例如多文件上传）

表单提示placeholer

placeholer信息提示运行效果

表单验证pattern属性

表单验证required属性

8、canvas

canvas的宽高在标签里直接写，而不是在style中。

canvas在标签中设置宽高和在style中设置为什么两者的效果会不一样呢？

canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。

什么是canvas

canvas方法或属性(绘制矩形)

canvas方法和属性（绘制线条）

画布 旋转 缩放 平移

平移的是原点。

旋转是相对于原点旋转的整个画布。

canvas属性和方法——canvas绘制扇形

绘制扇形：

绘制扇形

扇形效果图：

绘制扇形效果图

canvas绘制文字：

canvas绘制文字

context.measure(text)获得的是一个对象，获得宽度为：var width = context.measure(text).width;

canvas写入图像：

canvas写入图像

图像填充  图像数据获得和写入

运行效果：

运行代码：

图像填充

实现效果：

图片数据获得和写入

运行代码：

图片数据获得和写入

9、audio

preload="auto" 预加载

audio

10、video

video

11、storage本地存储

webStorage

localStorage：

localStorage

sessionStorage：

sessionStorage

如有问题欢迎交流。

如转载请注明出处，谢谢！