第一部分：HTML 5是什么
HTML 5 ≈ HTML+CSS 3+Javascript+API
一、标准的改变
标准的改变--不是SGML和XML
1、HTML5 并不是定义为SGML或者XML的应用程序。
2、在HTML5中并不存在有效性检查，取而代之的是用规范来检测规范的一致性
3、HTML5的DTD声明中不需要使用DTD文件
4、拥有十分松散的编写手法，但不是没有底线
标准的改变—松散的语法
不允许写的结束符的标签： area、base、br、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
可以省略结束符的标签： li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th
可以完全省略的标签： html、head、body、colgroup、tbody
二、支持HTML5的浏览器
主流： IE9+,Firefox,Opear,Safari(webkit),Chrome(webkit)
非主流： 猎豹(webkit&ie双内核)，UC,遨游, 海豚,百度
三、html5的推广网站
www.html5cn.org
www.html5china.com
www.mhtml5.com
第二部分：HTML标签的改变
一、新的文档类型声明(DTD)
<!doctype html>
二、新增的HTML5标签
新增的HTML5标签-结构标签
结构标签：(块状元素) 有意义的div
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标签定义 figure 元素的标题。
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好
新增的HTML5标签-多媒体标签
多媒体交互标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件 比如flashHTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验
新增的HTML5标签-Web应用标签
Web应用标签
<menu>命令列表
<menuitem>menu命令列表标签 FF（嵌入系统）
<command> menu标记定义一个命令按钮
<meter>状态标签(实时状态显示:气压、气温)C、O
<progress>状态标签 (任务过程:安装、加载) C、F、O
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容 ，配合dt、dd C新增的HTML5标签-其他标签
注释标签
<ruby> 标记定义 注释或音标
<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
其他标签
<keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F
<mark> 标记定义有标记的文本 (黄色选中状态)
<output> 标记定义一些输出类型,计算表单结果配合oninput事件
<time> 标记定义一个日期/时间 目前所有主流浏览器都不支持三、删除的HTML标签
纯表现的元素： basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素： frame，frameset，noframes；
产生混淆的元素： acronym ，applet，isindex，dir。
四、重新定义的HTML标签
HTML元素 HTML5中的意义
<b> 代表内联文本，通常是粗体，没有传递表示重要的意思
<i> 代表内联文本，通常是斜体，没有传递表示重要的意思
<dd> 可以同details与figure一同使用，定义包含文本，dialog也可用
<dt> 可以同details与figure一同使用，汇总细节，dialog也可用
<hr> 表示主题结束，而不是水平线，虽然显示相同
<menu> 重新定义用户界面的菜单，配合commond或者menuitem使用
<small> 表示小字体，例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号五、崭新的页面布局
第三部分：HTML音视频介绍
HTML5能在完全脱离插件的情况下播放音视频
HTML5支持的视频格式：
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件 支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件 支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
<video>的使用
<video src="文件地址" controls="controls"></video>
<video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</video >
<video controls="controls" width="300">
<source src="/images/posts/video/video.ogg" type="video/ogg" >
<source src="/images/posts/video/video.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</video >Video的常见属性
属性 值 描述
Autoplay Autoplay 视频就绪自动播放
controls controls 向用户显示播放控件
Width Pixels(像素) 设置播放器宽度
Height Pixels(像素) 设置播放器高度
Loop Loop 播放完是否继续播放该视频，循环播放
Preload Proload 是否等加载完再播放
Src url 视频url地址
Poster Imgurl 加载等待的画面图片
Autobuffer Autobuffer 设置为浏览器缓冲方式，不设置autoply才有效video的API方法
video的API属性
video的常用事件
HTML5支持的音频格式
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的
HTML5支持的音频格式：
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
audio的常见属性
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload "如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。"
src url 要播放的音频的 URL。
<audio>的使用
<audio src="文件地址" controls="controls"></audio>
<audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</audio >
<audio controls="controls" id="J_video">
<source src="happy.MP3" type="video/mpeg" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</audio>
<button onclick="shutup()" id="J_button">dd</button>
var obj = document.getElementById('J_button');
var video = document.getElementById('J_video');
function shutup(){
if(video.muted){
obj.innerHTML="暂停";
video.muted=false;
}else{
obj.innerHTML="播放";
video.muted=true;
}
}
function shutup(){
console.log(obj)
if(video.paused){
obj.innerHTML="暂停";
video.paused=false;
video.play();
}else{
obj.innerHTML="播放";
video.paused=true;
video.pause();
}
}
第四部分：canvas标签介绍
Canvas的使用
<canvas id="canvas" height="300" width="300">
您的浏览器不支持canvas标签
</canvas>canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容或 者进行画图操作，需要借助canvas API(HTML5的内置对context 对象)和 javascript操作实现画图或者其他图像操作
canvas的常见属性
属性 值 描述
height pixels 设置 canvas 的高度。
width pixels 设置 canvas 的宽度。
Canvas的API
canvas主要属性和方法
方法 描述
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()
getContext() 返回一个对象，指出访问绘图功能必要的API
toDataURL() 返回canvas图像的URL
颜色、样式和阴影属性和方法
属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
线条样式属性和方法
矩形方法
路径方法
转换方法
文本属性和方法
图像绘制方法
像素操作方法和属性
图像合成属性
其他方法
Canvas实践
第四部分：智能表单的应用
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>智能表单的使用和规范
Input表单的type新属性值
Type="email" 限制用户输入必须为Email类型
Type="url" 限制用户输入必须为URL类型
Type="date" 限制用户输入必须为日期类型
Type="time" 限制用户输入必须为时间类型O
Type="month" 限制用户输入必须为月类型O
Type="week" 限制用户输入必须为周类型O
Type="number" 限制用户输入必须为数字类型
Type="range" 产生一个滑动条的表单
Type="search" 产生一个搜索意义的表单 配合results="n"属性 C
Type="color" 生成一个颜色选择表单
新增的表单属性
属性 值 说明
Required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在默认值将不显示
Autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
Pattern 正则表达式 输入的内容必须匹配到指定正则
Autocomplete列表
Datalist标签配合option标签实现的自动填充表单功能：
<input type="search" name="move" list="search" >
<datalist id="search" >
<option>黑老师的由来</option>
<option>男人缘</option>
<option>佳佳婕婕不得不说的故事</option>
</datalist>
output的使用
<form action="" method="post" oninput="result.value=parseInt(no1.value)*parseInt(no2.value)">
<input type="number" name="no1">
<input type="number" name="no2">
<output name="result"></output>
</form>