@@ 学习HTML5发现对我们开发工作者来说要方便很多，它现在还在发展阶段，在未来肯定会是主流。
我们知道HTML5目的是取代HTML4.01和XHTML1.0标准，他希望能够减少互联网富应用（RIA）对Flash等依赖，并且提供更多能够有效增强Web应用的API.
@@广义上：新一代开发Web富客户端应用程序整体解决方案
通过上表可以预计以后就是我们来编写HTML5
那么我们来看看HTML5的新特性：一、语义化标签
二、多媒体
三、智能表单
四、三维、图形与特效
五、设备通用
六、离线存储
七、连接
八、CSS3
常见的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
常用的语义标签列表
<article> 定义文章
<aside> 定义文章的侧边栏
<figure> 一组媒体对象以及文字
<figcaption> 定义 figure 的标题
<footer>定义页脚
<header>定义页眉
<hgroup>定义对网页标题的组合
<nav>定义导航
<section> 定义文档中的区段
被弃用的标签：<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>
<s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。
Html5shiv
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
Google的解决方案https://github.com/aFarkas/html5shiv/tree/master/dist
Bootstrap的解决方案
http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js
音视频的发展史
早期：<embed>+<object>+文件
问题：不是所有浏览器都支持，而且embed不是标准。
现状：Realplay、window media、Quick Time 、Flash
问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。
HTML5认为浏览器应该原生支持音视频！
HTML5支持的格式
HTML5能在完全脱离插件的情况下播放音视频
但是不是所有格式都支持。
HTML5支持的视频格式：
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
<vidio>的使用
1）<video src="文件地址" controls="controls"></ video>
2）< video src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</video>
3）<video controls="controls" >
<source src="happy.MP3" type="video/mp4" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</video >
Video的常见HTML属性
|
属性 |
值 |
描述 |
|
Autoplay |
Autoplay |
视频就绪自动播放 |
|
controls |
controls |
向用户显示播放控件 |
|
Width |
Pixels(像素) |
设置播放器宽度 |
|
Height |
Pixels(像素) |
设置播放器高度 |
|
Loop |
Loop |
播放完是否继续播放该视频，循环播放 |
|
Preload |
Proload |
是否等加载完再播放 |
|
Src |
url |
视频url地址 |
|
Poster |
Imgurl |
加载等待的画面图片 |
|
Autobuffer |
Autobuffer |
设置为浏览器缓冲方式，不设置autoply才有效 |
Video的API
|
方法 |
属性 |
事件 |
|
play() |
currentSrc |
play |
|
pause() |
currentTime 当前播放时间 |
pause |
|
load() |
videoWidth |
progress |
|
videoHeight |
Error |
|
|
Volume音量 |
||
|
playbackRate 播放倍数 |
||
|
Paused 是否暂停 |
||
|
Muted 是否静音 |
HTML5支持的音频格式
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的
HTML5支持的音频格式：
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
<audio>的使用
<audio src="文件地址" controls="controls"></audio>
<audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ audio >
<audio controls="controls" >
<source src="happy.MP3" type=" audio /mpeg" >
<source src="happy.ogg" type=" audio /ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>
audio的常见HTML属性
|
属性 |
值 |
描述 |
|
autoplay |
autoplay |
如果出现该属性，则音频在就绪后马上播放。 |
|
controls |
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
loop |
loop |
如果出现该属性，则每当音频结束时重新开始播放。 |
|
preload |
preload |
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
|
src |
url |
要播放的音频的 URL。 |
新增表单元素
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
datalist |
No |
No |
9.5 |
No |
No |
|
keygen |
No |
No |
10.5 |
3.0 |
No |
|
output |
No |
No |
9.5 |
No |
No |
新增表单类型
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
|
No |
4.0 |
9.0 |
10.0 |
No |
|
url |
No |
4.0 |
9.0 |
10.0 |
No |
|
number |
No |
No |
9.0 |
7.0 |
No |
|
range |
No |
No |
9.0 |
4.0 |
4.0 |
|
Date pickers |
No |
No |
9.0 |
10.0 |
No |
|
search |
No |
4.0 |
11.0 |
10.0 |
No |
|
color |
No |
No |
11.0 |
No |
No |
新增表单属性
|
Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
autocomplete |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
|
autofocus |
No |
No |
10.0 |
3.0 |
4.0 |
|
form |
No |
No |
9.5 |
No |
No |
|
form overrides |
No |
No |
10.5 |
No |
No |
|
height and width |
8.0 |
3.5 |
9.5 |
3.0 |
4.0 |
|
list |
No |
No |
9.5 |
No |
No |
|
min, max and step |
No |
No |
9.5 |
3.0 |
No |
|
multiple |
No |
3.5 |
No |
3.0 |
4.0 |
|
novalidate |
No |
No |
No |
No |
No |
|
pattern |
No |
No |
9.5 |
3.0 |
No |
|
placeholder |
No |
No |
No |
3.0 |
3.0 |
|
required |
No |
No |
9.5 |
3.0 |
No |
Datalist标签
Datalist标签配合option标签实现的自动填充表单功能
<input type="search" name="move" list="search" >
<datalist id="search" >
<option label=“囧1” value=“泰囧”/>
<option label=“囧2” value=“人在囧途”/>
<option label=“囧3” value=“车在囧途”/>
</datalist>
Date类型
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
<input type=“date" name="move" >
便于排版的From表单
XHTML或者HTML4.01中from和其中的表单标签(input、textarea、select、button)必须嵌套使用
<form action="" method="post">
<input type="text" name="user" />
<select name="year">
<option value="1999"></option>
</select>
<textarea name="ext" ></textarea>
<button type="submit">提交</button>
</form>
HTML5中为了方便排版，可以使from中的表单标签脱离from的嵌套。方法:from指定ID，所有表单标签均添加from=id属性。
<form action="" method="post" id="register" ></form>
<input type="text" name="user" form="register" />
<select name="year" form="register" >
<option value="1999"></option>
</select>
<textarea name="ext" form="register" ></textarea>
<button type="submit" form="register" >提交</button>
新增找对象方法
document.querySelector(“选择器”);
document.querySelectorAll(“选择器”);
DOM.classList;//返回一个DOM对象的类名集合
DOM.classList.add(“class”);//添加类名
DOM.classList.remove(“class”);//删除类名
DOM.classList.toggle(“class”);//切换类名
HTML5自定义属性(data-*)
在HTML5中添加了data-*的方式来自定义属性,使用这样的结构可以进行数据存放,解决了早期自定义属性混乱无管理的现状。
一 、设置自定义属性
<div id="test" data-age="24"> Click Here </div>
DOM.dataset.age = 24;
自定义属性时注意：
我们在添加或读取属性的时候需要去掉前缀data-*，如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式
二、获取自定属性值
通过dataset对象，来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名.
应用程序缓存
Application Cache
1 正常编写代码
2 在html标签里面添加manifest属性指向一个文件
3 编写要缓存的文件
CACHE MANIFEST
# version 1.0.0
CACHE:
../demo.html
../style.css
../main.js
NETWORK:
*
本地文件API
获取文件 input#file.files/e.dataTransfer.files/files.slice()
文件对象 FileReader()
文件事件
Loadstart()
Loadend()
load() 文件读取完执行
progress() 文件读取中(loaded/total)
文件读取
readAsDataURL()
readAsText()
readAsBinaryString()
this.result
Web存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
setItem(key,value) getItem(key)
removeItem(key)
Web SQL
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的SQL查询
SVG
可缩放矢量图形（Scalable Vector Graphics)
Object:HTML4的标准标签，被所有较新的浏览器支持。但不允许使用脚本。
<object data="old_man.svg" type="image/svg+xml" width="500"></object>
Embed:所有主流的浏览器支持，并允许使用脚本,但是属于非标准
<embed src="old_man.svg" width="500" type="image/svg+xml"/>
<iframe src="old_man.svg" width="500"></iframe>
AJAX请求SVG文件!!!
优点:质量高体积小支持事件处理器
缺点:被渲染速度低不适合开发游戏
应用场景:图片展示谷歌地图
Canvas
画布:可被用来通过脚本JavaScript绘制图形
优点:被渲染速度快
缺点:依赖屏幕分辨率不支持事件处理器
应用场景:游戏开发图表展示数据