HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3，JavaScript 的说法（严格意义上说，这么叫并不合适，但是已经这么叫开了，就将错就错了）。

HTML5新特性

语义特性

HTML5赋予网页更好的意义和结构

  • 文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。
  • 新的解析顺序：不再基于SGML。
  • 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。
  • input元素的新类型：date, email, url等等。
  • 新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。
  • 全域属性：id, tabindex, repeat。
  • 新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
  • 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

本地存储特性

HTML5离线存储包含：应用程序缓存（Application Cache）、本地存储、索引数据库、文件接口

应用程序缓存

通过创建cache manifest文件，可以轻松的创建web应用的离线版本
其优势在于：

  • 离线浏览-用户可在应用离线时使用它们
  • 速度-已缓存静态资源，使加载更快
  • 减少服务器负载-浏览器将只存服务器下载更新过或修改过的资源

本地存储

  • localStorage
  • sessionStorage

从名字上看就可以很清楚的辨认两者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。

索引数据库（indexed DB）

从本质上说，IndexedDB允许用户在浏览器中保存大量的数据。任何需要发送大量数据的应用都可以得益于这个特性，可以把数据存储在用户的浏览器端。当前这只是IndexedDB的其中一项功能，IndexedDB也提供了强大的基于索引的搜索api功能以获得用户所需要的数据。

用户可能会问：IndexedDB是和其他以前的存储机制(如cookie,session)有什么不同？

Cookies是最常用的浏览器端保存数据的机制,但其保存数据的大小有限制并且有隐私问题。Cookies并且会在每个请求中来回发送数据，完全没办法发挥客户端数据存储的优势。

再来看下Local Storage本地存储机制的特点。Local Storage在HTML 5中有不错的支持，但就总的存储量而言依然是有所限制的。Local Storage并不提供真正的“检索API”,本地存储的数据只是通过键值对去访问。Local Storage对于一些特定的需要存储数据的场景是很适合的，例如，用户的喜好习惯，而IndexedDB则更适合存储如广告等数据（它更象一个真正的数据库）。

一般来说,有两种不同类型的数据库:关系型和文档型(也称为NoSQL或对象)。关系数据库如SQL Server,MySQL,Oracle的数据存储在表中。文档数据库如MongoDB,CouchDB,Redis将数据集作为个体对象存储。IndexedDB是一个文档数据库，它在完全内置于浏览器中的一个沙盒环境中(强制依照（浏览器）同源策略)。

对数据库的每次操作，描述为通过一个请求打开数据库,访问一个object store，再继续。

IndexedDB是否适合应用程序的几个关键点

  • 你的用户通过浏览器访问您的应用程序,（浏览器）支持IndexedDB API吗 ?
  • 你需要存储大量的数据在客户端?
  • 你需要在一个大型的数据集合中快速定位单个数据点?
  • 你的架构在客户端需要事务支持吗?

如果你对其中的任何问题回答了“是的”,很有可能,IndexedDB是你的应用程序的一个很好的候选。

文件接口

看这里http://www.cnblogs.com/zichi/p/html5-file-api.html

设备访问特性

包括地理位置API、媒体访问API、访问联系人及事件、设备方向

地理位置

看这里https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation

媒体访问

看这里https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

访问联系人及事件

看这里 https://blog.csdn.net/qq_27626333/article/details/51815229

设备方向

看这里 https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting_device_orientation

连接特性

HTTP是无连接的，一次请求，一次响应。想要实现微信网页版扫一扫登录，网页版微信聊天的功能，需要使用轮询的方式达到长连接的效果，轮询的大部分时间是在做无用功，浪费网络，浪费资源。现在HTML5为我们带来了更高效的连接方案 Web Sockets 和Server-Sent Events。

网页多媒体特性

HTML5支持原生的音视频能力：Audio、video

三维、图形及特效特性

大致包含SVG, Canvas, WebGL, 和 CSS3 3D，下面分别进行研究。

性能与集成特性

性能与集成特性主要包括两个东西，Web Workers 和 XMLHttpRequest 2。

参考文章：

前端进阶系列(三):HTML5新特性的更多相关文章

  1. Spring Boot进阶系列三

    Thymeleaf是官方推荐的显示引擎,这篇文章主要介绍怎么让spring boot整合Thymeleaf.  它是一个适用于Web和独立环境的现代服务器端Java模板引擎. Thymeleaf的主要 ...

  2. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  3. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  4. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  5. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  6. HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

    一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...

  7. HTML5新特性-- -定时器

    一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...

  8. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  9. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

随机推荐

  1. 4418开发板基于Linux-c测试程序的编译和运行

    基于iTOP4418开发板的Linux-c的测试程序iTOP-4418 开发板可以运行的文件系统很多,在具体的文件系统上实现特定功能前,可以使用 Linux-c 程序来测试硬件以及驱动.而且这些程序很 ...

  2. jsp 页面内容导出到Excel中

    日常使用网络资源时经常需要把网页中的内容下载到本地,并且导出到Excel中,现在介绍一种非常简单的方式实现网络资源的下载.只需要讲jsp的最上面加上一句话 <% response.reset() ...

  3. 创想变现：斯坦福设计创新课堂ME310分享（上篇）

    编者按:今年6月,微软亚洲研究院人机交互组研究员顾嘉唯,在美国斯坦福大学担任了d-School的ME310设计课程的项目评审.该课程是斯坦福大学的全球联合新产品设计创新课程,学习方式以小组为单位,每个 ...

  4. python学习笔记（13）常用模块列表总结

    os模块: os.remove() 删除文件 os.unlink() 删除文件 os.rename() 重命名文件 os.listdir() 列出指定目录下所有文件 os.chdir() 改变当前工作 ...

  5. python后端面试第四部分：django框架--长期维护

    1 列举Http请求中常见的请求方式  https://www.cnblogs.com/andy0816/p/12360866.html2 谈谈你对HTTP协议的认识.1.1 长连接  https:/ ...

  6. python学习笔记（5）数据类型-字典

    字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号 : 分割,每个键值对之间用逗号 , 分割,整个字典包括在花括号 {} 中 ,格式如下所示: d ...

  7. deeplearning.ai 序列模型 Week 2 NLP & Word Embeddings

    1. Word representation One-hot representation的缺点:把每个单词独立对待,导致对相关词的泛化能力不强.比如训练出“I want a glass of ora ...

  8. OpenCV 实现自己的线性滤波器

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  9. 年轻的心与渐行渐近的梦——记微软-斯坦福产品设计创新课程ME310

    作者:中国科学技术大学 王牧 Stanford  D. School 2014年6月,沐浴着加州的阳光,在斯坦福大学(下文简称Stanford)完成汇报后,历时一年的创新设计课程ME310的项目结束 ...

  10. Docker的网络类型

    四种网络类型: None:不为容器配置任何网络功能,--net=noneContainer:与另一个运行中的容器共享Network Namespace,--net=container:containe ...