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

HTML5新特性

语义特性

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

文件类型声明()仅有一型:。

新的解析顺序:不再基于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是你的应用程序的一个很好的候选。

文件接口

设备访问特性

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

地理位置

媒体访问

访问联系人及事件

设备方向

连接特性

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

网页多媒体特性

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

三维、图形及特效特性

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

性能与集成特性

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

参考文章:

HTML中三维特性,前端进阶系列(三):HTML5新特性相关推荐

  1. html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  2. html5加js兼容性辅助,解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题...

    插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

  3. HTML滑动条自动滑动,HTML5新特性——自定义滑动条(input[type=range])

    HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...

  4. VS 中配置使用Visual SVN系列 三:TortoiseSVN Client(客户端)下载和安装

    VS 中配置使用Visual SVN系列 三:TortoiseSVN Client(客户端)下载和安装 1.TortoiseSVN Client(客户端)下载 https://www.visualsv ...

  5. 怎么真正入行Web前端行业?JavaScript五大新特性是什么?

    怎么真正入行Web前端行业?JS五大新特性是什么?JavaScript是Web开发者必学的三种语言之一,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.随着互联网的更迭以及技术的革新,Jav ...

  6. js考试题 html5新特性,Web前端初级面试题总结

    Web前端初级面试题总结 发布时间:2018-11-02 11:17, 浏览次数:549 , 标签: Web Web篇: 1.常见的浏览器内核有哪些? IE:Trident内核            ...

  7. 【阿里云大学课程】前端必知——HTML5新特性完整视频教程(音频、视频、画布、web存储、动画……)...

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...

  8. (前端知识点)CSS3 新特性与html5 新特性

    1. CSS3 新特性有哪些? 答: 1.颜色: 新增 RGBA ,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(border-radius)边框阴影: box-sha ...

  9. html5储存类型特点,避免踩雷!你不得不知的 HTML5 “新”特性

    什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...

最新文章

  1. 已知空间一点到另外两点直线的距离
  2. python的列表的remove()方法、判断if xxx in xx条件比较耗时问题
  3. java 套娃_【leetcode编程题目354】俄罗斯套娃
  4. 产生数(Floyd)
  5. web前端分享:性能优化之文档碎片处理
  6. emacs php,如何在Emacs中关闭php-indent警告
  7. IE9:为什么 Acid3 无足轻重
  8. Dubbo Zookeeper Quick Start
  9. SAP License:SAP PI(流程集成)
  10. 随机森林算法原理_集成算法,随机森林和梯度增强机
  11. html+css+js实现注册页面
  12. 医疗管理核心制度之 十八、信息安全管理制度
  13. 无U盘的Ubuntu双系统安装方法
  14. excel-自定义函数及使用
  15. wps之word设置页眉
  16. 高考加油别学计算机图片,高考加油励志说说带图片,2020高考加油说说配图
  17. fastlane php,fastlane安装与初体验
  18. java学习总结(16.05.25)eclipse的查找和替换功能 Ctrl+F
  19. Cadence OrCAD Capture CIS 输出带属性的PDF原理图
  20. android触摸屏idc,android4.0 触摸屏配置

热门文章

  1. 常见的表死锁情况及解决方法
  2. Keil 5出现Error: L6218E: Undefined symbol解决方法
  3. git ,报403错误,完美解决方案
  4. #error “OpenCV 4.x+ requires enabled C++11 support“解决方法
  5. ubuntu 下更新pip后发生 ImportError: cannot import name ‘main‘的问题解决
  6. 如何在Android Studio中查看方法信息?
  7. “throw”和“throw ex”之间有区别吗?
  8. C#中使用的yield关键字是什么?
  9. 数据快传对于企业的重要性!
  10. ubuntu-18.04 root登录图形界面失败问题解决方案