HTML5几个重要关注的点:
1/ <header> <footer> <section>
2/ canvas
3/ 视频
4/ 地理定位
5/ 本地数据存储
6/ 离线web应用程序
7/ HTML web表单
8/ HTML5扩展词汇表
1、MIME类型
application/xhtml+xml
text/html
2、html5只是一些独立特性的集合
3、modernizr是一个JavaScript类库,可用于检测浏览器是否支持HTML5和CSS3特性。
生成Modernizr的全局对象
4、<canvas> <canvastext> <video> 本地存储localstorage,web workers,离线web应用applicationcatche,地理位置geolocation,输入框input新类型,占位文本placeholder,表单自动聚焦autofocus,微数据microdata
5、doctype变得简洁
<!DOCTYPE html>
根元素可简化为<html>
6、HTML页面必须指定字符编码,即使你不使用怪异的字符。因为若不指定会存在安全漏洞
<meta charset="utf-8">
7、新增的语义元素
<section> <nav> <article> <aside> <hgroup> <header> <footer> <time> <mark>
用Remy Sharp的“HTML5 enabling script”解决IE不存在这些新元素的问题。在header中加入
<!--[if It IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
8、对于canvas元素用getContext("2d")获取到上下文后就可以绘制简单图形、路径、文本、颜色渐变、图像。
在canvas上绘制的图形文本是么诶有盒模型的,它们没有浮动,没有边距,没有留白,也没有自动换行
IE要加载excanvas.js,才可使用canvas
9、视频容器格式:MPEG-4 Flash Ogg WebM 音频视频交错(Audio Video Interleave)
10、HTML5的<video>标签,不提供播放控制。video标签的几个属性:controls浏览器内置的控制界面,preload页面加载时就下载,autoplay页面加载时就下载视频,并自动播放
video下可以添加多个source,考虑视频的兼容性
11、HTML5<video>标签现在只支持Ogg/MPEG-4/WebM三种视频格式
12、移动设备获取用户地理位置的方式:通过距离用户相对临近的不同信号基站来计算用户位置信息;使用用户设备上的专用GPS设备和环地球GPS定位卫星通讯。
13、navigator.geolocation getCurrentPosition(success_callback, error_callback, {enableHighAccuracy/timeout/maxmumAge})
watchPosition()
14、geo.js 使用geo可以不用考虑不同地理位置API的情况,使用统一的接口即可。注意:放在页面底部,防止加载过慢。
<script src="gears_init.js"></script>
<script src="geo.js"></script>
15、web应用数据存储,HTML5存储是基于键值对的,也可用数组的方式获取。
interface Storage {
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
};
interface Storage {
deleter void removeItem(in DOMString key);
void clear();
};
interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
};
16、IE的事件对象存储在window.event上。
17、每个域默认拥有5MB的存储空间
18、Web SQL数据库
IndexedDB引入对象存储的概念
19、离线web应用 核心是缓存清单文件。Web应用中的每个页面都需要将manifest属性指向缓存清单文件<html manifest="/cache.manifest">
缓存清单文件以CACHE MANIFEST开始,其余部分分为:显示段、默认段、线上白名单(或网络段)
CACHE MANIFEST
FALLBACK:
NETWORK:
CACHE:
20、表单
占位文本 placeholder
自动聚焦 autofocus JS实现自动聚焦是用focus()方法
Email地址 type="email"
Web地址 type="url"
数值 type="number" max min step value
数值滑块 type="range"
日期选择器 type="date""month""week""time""datetime""datetime-local"
搜索框 type="search"
21、微数据:使用来自自定义词汇表的、带作用域的名/值来给DOM做标记。