前端进阶系列(三):HTML5新特性
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新特性的更多相关文章
- Spring Boot进阶系列三
Thymeleaf是官方推荐的显示引擎,这篇文章主要介绍怎么让spring boot整合Thymeleaf. 它是一个适用于Web和独立环境的现代服务器端Java模板引擎. Thymeleaf的主要 ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- HTML5新特性--svg-echarts(重点)-拖动API-WebWorker
一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...
- HTML5新特性-- -定时器
一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
随机推荐
- 数据结构与算法——认识O(NlogN)的排序(2)
输入整型数组和排序标识,对其元素按照升序或降序进行排序 (一组测试用例可能会有多组数据) 接口说明 原型: void sortIntegerArray(Integer[] pIntegerArray, ...
- RDD(三)——transformation_value类型
map(func) 返回一个新的RDD,该RDD由每一个输入元素经过func函数转换后组成.有多少个元素,func就被执行多少次. mapPartitions(func) 类似于map,但是,map函 ...
- ckeditor+ckfinder添加水印。
1.修改ckfinder文件下面的config.php:添加一句include_once "plugins/watermark/plugin.php";//水印配置文件 2.修改p ...
- “大屏,您好!” SONIQ声光揭新品“U•F•O”神秘面纱
作为全球第一批做互联网智能电视的传媒企业,SONIQ声光于4月22日在中国大饭店举行了盛大的新品发布会.其中的重头戏就是当天发布会上作为先锋部队入驻中国电视市场的"UFO".笔者作 ...
- 学会使用数据讲故事——Excel研究网络研讨会
编者按:在数据密集型研究的新时代,Excel将成为研究者讲故事的强大工具.在即将举行的Excel研究网络研讨会中,我们将与你探讨如何用新的方式来寻找.查询.分析数据并实现数据可视化.Office 36 ...
- labview线程相关
两个结论. 1. 在 LabVIEW 上编写多线程程序非常方便,我们应该充分利用这个优势.一般情况下,编写程序时应当遵循这样的原则:可以同时运行的模块就并排摆放,千万不要用连线,顺序框等方式强 ...
- Python类变量与实例变量及成员函数修饰方式说明(与Java定义方式进行类比)
Python类中的变量有类变量和实例变量之分. 类变量:变量绑定在类上,同一个类之间的共享变量,类比于Java中的静态变量static 公有变量定义 Java 的定义方式 class Test{ pu ...
- TortoiseSVN配置和使用教程
2009-04-24 来源:dev.idv.tw 1 安装及下载client 端 2 什么是SVN(Subversion)? 3 为甚么要用SVN? 4 怎么样在Windows下面建立SVN Repo ...
- winform窗体中webbrowser如何屏蔽脚本错误弹窗
在构造函数中加入: webBrowser.ScriptErrorsSuppressed = true;
- [洛谷P4299] 首都
题目传送门 还是维护子树信息. 但是这里多了一个找重心的操作. 这里有一个关于树重心的结论,据说可以用反证法证明.反正我不会证 就是:新的重心一定在原来两个重心之间的那条树链上. 这样我们逐步缩小搜索 ...