HTML5笔记

1，常用语义化标签

Header 头部，定义标题
Nav 导航栏
Section 主要内容
Aside 边栏
Footer 脚部
Article 内容部分，写在section中，在article中可以定义各种标题，h1,h2~h6，这些标题可以用hgroup来包含，然后写内容，
Figure 写在article中然后包含img
Figcaption 图片描述
注：在section中写相同或者不相同结构的内容都要使用article来包含，可以包含视频video或者音频audio
Mark 突出显示重要文字
Small 附属细则，小字，可用在footer中的版权信息中
Cite 显示作品名
Address 显示地址
Time 时间戳
Dialog 定义一个对话框
Source 媒体资源
Progress 定义任务的过程

2，一些API用途

2-1，Canvas API 是基础绘图API
2-2，拖放API 包含图形，还包含文字，链接，文件或者数据
2-3，地理位置API 返回信息包括经度纬度
2-4，存储API （WEB存储和索引数据库）web存储包含sessionStorage用来保存临时信息如淘宝登录密码，只要浏览器不关闭，在限定时间内打开别的窗口都默认自动登录，不用再继续输入密码。和localstorage用来保存大文件，保存的信息是持久化的，永远不会过期
2-5，文件API 读取处理创建文件
2-6，通信API 主要是web sockets 作用时提供实时的应用程序所需工具，如聊天室
2-7，web workers API 是特殊的API 扩展了JS 的应用范围，JS不支持多线程，有了这个API ，JS能执行多任务操作
2-8，历史API
2-9，离线API
2-10，外部库
2-11，jQuery
2-12，Google maps

3，视频video标签

基本语法：
<code><video width=”720”height=”400”controls><source src=””></video></code>
Controls，表示直接将控制视频播放的控制面板，除了可以直接添加这个属性以外，还有：
Autoplay 表示视频加载后自动播放
Loop 表示循环播放
Poster 可以指定一个URL，在视频等待播放的时候显示该图像
格式为poster=“http：//。。。”
Preload（预加载）设定三个值：none（不缓存），metadata（推荐浏览器抓取一些信息），auto（默认值，要求浏览器尽快下载视频）
但是这个控制面板不能修改，也不好看，另外就是功能也不全，所以一般需要自己做视频控制面板。控制面板如下：
<code><section id="player">
<video id="media" width="720" height="400" >
<source src="videos/WTA.mp4">
</video>
<nav>
<div>
<button type="button" id="play">播放</button>
</div>
<div id="bar">
<div id="progress"></div>
</div>
</nav>
</section>
</code>
接下来要对控制面板做函数处理，先获取，再添加监听：
<code>function initiate(){
max=600;
mymedia=document.getElementById("media");
myplay=document.getElementById("play");
mybar=document.getElementById("bar");
myprogress=document.getElementById("progress");
myplay.addEventListener('click',push,false);
mybar.addEventListener('click',move,false);}
</code>
上述是初始化函数：
经常用到的事件函数API：
Progress：周期性触发，用于更新媒体的下载速度，
Canplaythrough当整个媒体可以顺利播放时候，就会触发这个时间，
Ended 当媒体到达末尾的时候触发
Pause 当重播暂停时触发
Play当媒体开始播放时触发
Error出错时触发
<code>
function push(){
if(!mymedia.paused&&!mymedia.ended){
mymedia.pause();
myplay.innerHTML='播放';
window.clearInterval(loop);
}else{
mymedia.play();
myplay.innerHTML='暂停';
loop=setInterval(status,1000);
}
}
function status(){
if(!mymedia.ended){
console.log("当前播放进度:"+mymedia.currentTime);
var size=parseInt(mymedia.currentTimemax/mymedia.duration);
myprogress.style.width=size+'px';
}else{
myprogress.style.width='0px';
myplay.innerHTML='播放';
window.clearInterval(loop);
}
}
function move(e){
console.log(e.pageX);
if(!mymedia.paused&&!mymedia.ended){
var mouse1= e.pageX;
console.log(mouse1);
mymedia.currentTime=mouse1mymedia.duration/max;
console.log("点击时播放进度:"+mymedia.currentTime);
myprogress.style.width=mouse1+'px';
}
}
window.addEventListener('load',initiate,false);
</code>

4,基于HTML5的移动web应用

4-1，canvas绘图
4-2，多媒体
4-3本地存储
4-4，离线应用
4-5，使用地理位置
4-6，移动web框架（基于jQuery的jQuery mobile，基于extjs的sencha touch，能打通web和native两者之间通道的phonegap框架）
目前有两种开发模式，基于传统的web开发模式（对应jQuery mobile）和基于组件式的web开发（对应Sencha touch）

5，表单属性

5-1，form属性
<form id=”testform”>
<input type=”text”>
<form>
<input form=testform>
在H4中，提交表单的时候，表单之外的数据并不能被提交，但是在 H5中，只要设置form属性为某个表单的id号即可将内容归属于该表单
未完待续。。。