html5基础知识

一：什么是html5？

HTML5是html（超文本标记语言）技术发展中的新版本，--非革命性的发展，但能更大的满足web时代的需求。严格的讲HTML5是HTML5+CSS3+JS(新增的HTML5配套的API)。

二：html5的特点：

1）兼容性；

2）实用性；

3）强大且丰富的API支持

注：2008年发布，2010年正式推出，目前正在推广阶段。目前世界知名的浏览器厂商都支持html5，比如Microsoft ，Google，Apple，Opera，Mozilla。

三：HTML4跟HTML5之间的不同：

1）语法的改变；

2）DOCTYPE的改变；

3）字符编号控制的改变；

4）标记语法规定的改变；

4.1）不允许写结束标记的元素：area，base，br，col，commond，embed，hr，img，input，keygen，link，meta，param，source，track，wbr

4.2）可以省略结束标记的元素：li，dt，dd，p，rt，rp，optgroup，option，colgroup，thead，tbody，tfoot，tr，td，th

4.3）可以省略全部标记的元素：html，head，body，colgroup，tbody

5）属性操作（boolean值和引用操作符）；

6）新增和废除了一些元素；

7）新增和废除了一些属性；

8）新增的配套API操作

四：HTML5中的结构化标签

article：独立的，完整的，可独自被外部引用的内容，通常有自己的标题头部块儿，可能也有自己的脚注块儿；

header：头部块儿；

footer：脚注块儿；

section：局部块儿，对内容进行分块儿；

nav：导航块儿；

aside：侧边栏附属信息块儿；

hgroup：标题组块儿

五：表单与文件

1）表单部分：

1.1）新增通用属性：

form：从属关联关系属性；

formaction：表单提交action自定义值属性；

formmethod：表单提交method自定义值属性；

placeholder：提示信息属性；

autofocus：自动获取焦点属性；

list：数据列表提示属性

1.2）新增元素：

url：自带验证效果的url输入框；

email：自带验证效果的email输入框；

date：日期选择输入框；

time：时间选择输入框；

datetime/datetime-local：日期时间选择输入框

month：月份选择框；

week：周选择框；

number（max/min/step）：自带验证效果的数字输入框；

range（max/min/step）

search：自带css样式的搜索输入框；

tel：电话号码输入框，不带验证效果；

color：颜色选取器

1.3）新增表单验证效果

required属性：空元素提交控制属性；

pattern属性：自定义验证控制属性；

novalidate属性：取消表单整个验证；

formnovalidate属性：单个表单input元素取消验证；

setCustomValidity方法：自定义提示信息

附：一些页面的增强元素

figure figcaption：带标题的组合元素；

details summary：带特效的组合元素；

mark：高亮显示效果元素；

progress：进度条元素；

meter：温度盘元素

2）文件部分：

新增FileList对象，和File对象

FileList文件对象列表（结合multiple使用） ，

属性：length；

File单个文件对象：

属性：name，（文件名，不包含路径）

属性：lastModifiedDate（文件最新修改时间）

属性：size（文件字节长度）

属性：type（文件MIME类型）

file控件新增文件类型控制属性：accept

FileReader接口：读取文件

常用方法：

readAsText（file）：

readAsBinaryString（file）：

readAsDataURL(file)：

常用接口事件：

onload：数据读取成功完成时触发；

onprogress：数据读取中触发；

onloadend：数据读取完成，不论成败；

onloadstart：当数据开始读取时触发；

onerror：发生错误时触发；

onabort：退出时触发；

六：拖放操作

1）设置可拖放属性draggable的值为true；

2）根据需求选择拖放的时间进行处理：

dragstart：开始拖放；

drag：拖放中；

dragenter：被拖放的元素进入本元素时触发；

dragover：被拖放元素在本元素中移动时触发；

dragleave：被拖放元素离开本元素；

dragend：拖放操作结束时触发；

drop：被拖放元素落入本元素中时触发

事件数据处理对象：dataTransfer

属性：effectAllowed，dropEffect，files

setData（mime_type,data）：存储数据

getData（mime_type,data）：取出数据

支持的mime类型：text/plain ，text/html，text/xml，text/uri-list

事件对象方法：

preventDefault（）：不执行默认处理（默认拒绝被拖放）

stopPropagation（）：停止事件传播

七：canvas元素（ie9支持，ie8以及更早的版本不支持）

canvas元素：

属性：width，height

兼容性元素内容

canvas配套API

获取canvas元素

获取canvas元素操作上下文context对象

canvas的基本应用：

1）绘制线段：

涉及属性：

strokeStyle

lineWidth

涉及方法：

moveTo（x,y）;

lineTo(x,y);

stroke();

2）绘制矩形：

涉及属性：

fillStyle

涉及方法：

fillRect（x，y，width，height）

strokeRect（x，y，width，height）

fill（）

3）绘制圆形：

涉及方法：

arc（x，y，r，beginAngle，endAngle，anticlockwise）

4）绘制文字：

涉及属性：

font("stye(italic/bold),size,type")

涉及方法：

strokeText(str,x,y)

fillText(str,x,y)

5）图像翻转：

涉及方法：

save（）；

translate（x，y）；

rotate（angle）；

restore（）；

6）绘制渐变图形：

涉及方法：

createLinearGradient（xStart，yStart，xEnd，yEnd）

addColorStop（offset，color）

7）绘制图像阴影：

涉及属性：

shadowOffsetX，

shadowOffsetY，

shadowColor，

shadowBlur 0-10

8）canvas存储

涉及属性：

toDataURL("image/jpeg").replace("image/jpeg","image/octet-stream");

八：多媒体播放

元素：audio，video

子元素：source

属性：

src：播放源文件的路径；

width，height：控制播放控件的宽度和高度；

controls：默认播放控制条是否显示

autoplay：自动播放

preload：预加载

poster：视频预览图（视频不用或不可用时）

loop：循环播放

currentTime：当前播放位置

startTime：开始播放时间

duration：文件总的播放时间

played：是否在播放中

paused：是否暂停

ended：是否播放完毕

defaultPlayBackRate：默认播放速率

playBackRate：播放速率

volume：音量

muted：静音

方法：

play（）

pause（）

九：本地存储
目标：熟悉本地（浏览器端）数据存储机制web storage以及本地数据库操作

web storage：
两种：sessionStorage localStorage
方法：
setItem(key,value);
getItem(key);
实例:熟悉使用web storage
本地数据库：
第一步：创建数据库对象
openDatabase(db_name,version,command,size);
第二步：使用事务处理
db_obj.transaction(function (tx){});
第三步：执行sql语句：
tx.executeSql(sql,[dataArray],dataHandler(tx,rs),errorHandler(tx,es));

rs.rows.length:记录数
rs.rows.item(index):获取单挑记录对象

十：网页通信
目标：掌握跨文档传输
跨文档通信：
接收：window.addEventListener("message",function (ev){},false);
发送：otherWindow.postMessage(message,targetOrigin);
常见使用iframe 然后用window.frames[index]获取操作的window

十一：Web Workers
目标：掌握客户端实现多线程处理

第一步：创建Worker对象
new Worker(js_url);
注意：window对象和document对象不能在js文件中使用
第二步：使用onmessage事件接受数据进行处理
onmessage = function(ev){
ev.data;
}
第三步：使用postMessage(data)往线程传递数据
第四步：使用terminate()结束线程