HTML中三维特性,前端进阶系列(三):HTML5新特性
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新特性相关推荐
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- html5加js兼容性辅助,解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题...
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
- HTML滑动条自动滑动,HTML5新特性——自定义滑动条(input[type=range])
HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
- VS 中配置使用Visual SVN系列 三:TortoiseSVN Client(客户端)下载和安装
VS 中配置使用Visual SVN系列 三:TortoiseSVN Client(客户端)下载和安装 1.TortoiseSVN Client(客户端)下载 https://www.visualsv ...
- 怎么真正入行Web前端行业?JavaScript五大新特性是什么?
怎么真正入行Web前端行业?JS五大新特性是什么?JavaScript是Web开发者必学的三种语言之一,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.随着互联网的更迭以及技术的革新,Jav ...
- js考试题 html5新特性,Web前端初级面试题总结
Web前端初级面试题总结 发布时间:2018-11-02 11:17, 浏览次数:549 , 标签: Web Web篇: 1.常见的浏览器内核有哪些? IE:Trident内核 ...
- 【阿里云大学课程】前端必知——HTML5新特性完整视频教程(音频、视频、画布、web存储、动画……)...
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...
- (前端知识点)CSS3 新特性与html5 新特性
1. CSS3 新特性有哪些? 答: 1.颜色: 新增 RGBA ,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(border-radius)边框阴影: box-sha ...
- html5储存类型特点,避免踩雷!你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
最新文章
- 已知空间一点到另外两点直线的距离
- python的列表的remove()方法、判断if xxx in xx条件比较耗时问题
- java 套娃_【leetcode编程题目354】俄罗斯套娃
- 产生数(Floyd)
- web前端分享:性能优化之文档碎片处理
- emacs php,如何在Emacs中关闭php-indent警告
- IE9:为什么 Acid3 无足轻重
- Dubbo Zookeeper Quick Start
- SAP License:SAP PI(流程集成)
- 随机森林算法原理_集成算法,随机森林和梯度增强机
- html+css+js实现注册页面
- 医疗管理核心制度之 十八、信息安全管理制度
- 无U盘的Ubuntu双系统安装方法
- excel-自定义函数及使用
- wps之word设置页眉
- 高考加油别学计算机图片,高考加油励志说说带图片,2020高考加油说说配图
- fastlane php,fastlane安装与初体验
- java学习总结(16.05.25)eclipse的查找和替换功能 Ctrl+F
- Cadence OrCAD Capture CIS 输出带属性的PDF原理图
- android触摸屏idc,android4.0 触摸屏配置
热门文章
- 常见的表死锁情况及解决方法
- Keil 5出现Error: L6218E: Undefined symbol解决方法
- git ,报403错误,完美解决方案
- #error “OpenCV 4.x+ requires enabled C++11 support“解决方法
- ubuntu 下更新pip后发生 ImportError: cannot import name ‘main‘的问题解决
- 如何在Android Studio中查看方法信息?
- “throw”和“throw ex”之间有区别吗?
- C#中使用的yield关键字是什么?
- 数据快传对于企业的重要性!
- ubuntu-18.04 root登录图形界面失败问题解决方案