一、新增特性:
- 绘画 canvas;
- 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
- sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage
- 用于媒介回放的 video和 audio 元素;
- 语意化更好的内容元素,比如article、footer、header、nav、section;
section:定义文档中的一个章节
nav:定义只包含导航链接的章节
header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
- 表单控件,calendar、date、time、email、url、search;
- 新的技术webworker(专用线程)
- websocketsocket通信
- Geolocation 地理定位
- 应用程序缓存(离线缓存技术)
即在第一次加载后将数据缓存,在没有清除缓存的前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用。
当然,html5新的特性不是所有浏览器都能支持的,离线缓存也一样。反正IE9及以下的浏览器目前是不支持的,如果用在移动端,应该都能支持。检测是否支持离线缓存也比较简单:
if(window.applicationCache){ alert('支持离线缓存'); } else{ alert('不支持离线缓存'); }
应用缓存是从浏览器的缓存中分出来的一块缓存区,想要在这个缓存区保存数据,可以使用一个描述文件(manifest file)列出要下载和缓存的资源。
应用程序缓存为应用带来了三个优势:
(1)离线浏览---用户可以在应用离线时使用它们
(2)速度---------已缓存资源加载得更快
(3)减少服务器负载------浏览器将只从服务器端下载更新过的资源。、
实现HTML5应用程序缓存只需三步:
(1)创建一个cache.manifest文件,并确保文件具有正确的内容;
CACHE MANIFEST #version1 CACHE: index.html ----------------------------------------- 说明: //第一行“CACHE MANIFEST”把本文件的作用告知浏览器,即对本地缓存中的资源文件进行具体设置。 //注释行以“#”开头 //CACHE之后列出我们需要缓存的文件
(2)在服务器上设置文件类型;
让服务器支持text/cache-manifest这个MIME类型(在h5中规定manifest文件的MIME类型是text/cache-manifest),
例如对Apache服务器进行配置的时候,需要找到{apache_home}/conf/mime.type这个文件(.htaccess)
(3)所有的HTML文件都指向cache.manifest。
<html manifest="/cache.manifest">
应用缓存的applicationCache对象,这个对象有一个status属性,属性的值为常量,用于表示应用缓存的当前状态。
0:无缓存,即没有与页面相关的应用缓存
1:闲置,即应用缓存未得到更新
2:检查中,即正在下载描述文件并检查更新
3:下载中,应用缓存正在下载描述文件中指定的资源
4:更新完成,即应用缓存已经更新了资源,而且所有资源都已经下载完毕,可以通过swapCache()来使用了。
5:废弃,即应用缓存的描述文件已经不存在了,因此页面无法在访问应用缓存
应用缓存还有很多相关的事件,表示其状态的改变。
checking:在浏览器为应用缓存查找更新时触发;
error:在检查更新或下载资源期间发生错误时触发;
noupdate:在检查描述文件发现这个文件无变化时触发;
downloading:在开始下载应用缓存资源时触发;
progress:在文件下载应用缓存的过程中持续不断地触发;
updateready:在页面新的应用缓存下载完毕且可以通过swapCache()使用时触发;
cached:在应用缓存完整可用时触发
一般这些事件会随着页面的加载按上述顺序依次触发,不过调用update()方法也可以手工干预,让应用缓存为检查更新而触发上述事件。
applicationCache.update();
如果触发了updateready事件,则说明新版本的应用缓存已经可用,而此时需要调用swapCache()来启动新应用缓存。
applicationCache.swapCache();
如何判断在线还是离线状态?
使用离线应用,浏览器必须能知道设备能否访问网络,通过navigator.onLine属性来检测设备是在线还是离线的,对应的值为true或false,但是不同浏览器表现并不一致。
二、移除的元素
a. 纯表现的元素:basefont,big,center, s,strike,tt,u;
b. 对可用性产生负面影响的元素:frame,frameset,noframes;
怎么区分HTML与HTML5?
1.在文档类型声明上
在文档声明上,html有很长的一段代码,并且很难记住这段代码,而html5却不同,只有简简单单的声明,这也方便人们的记忆。
html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
html5:<!doctype html>
2.在结构语义上
html:没有体现结构语义化的标签,通常都是这样来命名的<div id="header"></div>,这样表示网站的头部。
html5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>。