html5的技术要点
2016-03-11 14:21
381 查看
今天在论坛的asp.net板块中看到了介绍html5的技术要点的帖子,觉得很有参考价值,特转载备用。
HTML5的技术组成:
离线功能
HTML5透过JavaScript提供了数种不同的离线储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。
WebStorage – 比Cookies更大、更有弹性的的储存
Web SQL Database – 本地端的SQL资料库
Indexed DB – Key-value的本地资料库
Application Cache – 将部分常用的网页内容cache起来
即时通讯
以往网站由于HTTP协定以及浏览器的设计,即时的互动性相当的受限,只能使用一些技巧来「模拟」即时的通讯效果,但HTML5提供了完善的即时通讯支援。网页制作学习交流群:四九四零六,四九三四。
什么轮询、第三方的统统不要,自已来实现。
WebSocket – 即时的socket连线
Web Workers – 以往JavaScript都是single thread,透过Worker可以有多个运算
Notifications – 塬生的提示讯息,类似像OS X的Growl提示
文件以及硬件支持
不知道大家有没有发现,在Gmail等新的网页程式当中,已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Drag’n Drop和File API。
Drag’n Drop – HTML元素的拖拉
File API – 读取使用者本机电脑的内容
Geolocation – 地理定位
Device orientation – 手持装置的方向
Speech input – 语音输入
语意化
语意化的网路是可以让电脑能够更加理解网页的内容,对于像是搜寻引擎的优化(SEO)或是推荐系统可以有很大的帮助。
New tags – 新的标签,像是<header>、<section>等
Application tags – 也是新的标签,像是<meter>、<progress>等
Microdata – 加入语意的资料让搜寻引擎等网站可以正确显示
Form type – <form>可以加入的type便多了,包含email和tel等属性,浏览器会协助进行资料格式的验证
多媒体
Audio、Video的标签支援以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。
Audio video – 影片和音乐的塬生播放支援
Canvas – 2D的绘图功能支援
Canvas 3D – 3D的绘图功能支援
SVG – 向量图支援
CSS 3
CSS3支援了字体的嵌入、版面的排版,以及最令人印象深刻的动画功能。
Selector – 更有弹性的选择器
Webfonts – 嵌入式字体
Layout – 多样化的排版选择
Stlying radius gradient shadow – 圆角、渐层、阴影
Border background – 边框的背景支援
Transition – 元件的移动效果
Transform – 元件的变形效果
Animation – 将移动和变形加入动画支援
JavaScript
在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。
DOM API – 更方便的查询DOM元件
History API – 浏览器的上下页内容修改,方便AJAX可以保留浏览记录
HTML5的技术组成:
离线功能
HTML5透过JavaScript提供了数种不同的离线储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。
WebStorage – 比Cookies更大、更有弹性的的储存
Web SQL Database – 本地端的SQL资料库
Indexed DB – Key-value的本地资料库
Application Cache – 将部分常用的网页内容cache起来
即时通讯
以往网站由于HTTP协定以及浏览器的设计,即时的互动性相当的受限,只能使用一些技巧来「模拟」即时的通讯效果,但HTML5提供了完善的即时通讯支援。网页制作学习交流群:四九四零六,四九三四。
什么轮询、第三方的统统不要,自已来实现。
WebSocket – 即时的socket连线
Web Workers – 以往JavaScript都是single thread,透过Worker可以有多个运算
Notifications – 塬生的提示讯息,类似像OS X的Growl提示
文件以及硬件支持
不知道大家有没有发现,在Gmail等新的网页程式当中,已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Drag’n Drop和File API。
Drag’n Drop – HTML元素的拖拉
File API – 读取使用者本机电脑的内容
Geolocation – 地理定位
Device orientation – 手持装置的方向
Speech input – 语音输入
语意化
语意化的网路是可以让电脑能够更加理解网页的内容,对于像是搜寻引擎的优化(SEO)或是推荐系统可以有很大的帮助。
New tags – 新的标签,像是<header>、<section>等
Application tags – 也是新的标签,像是<meter>、<progress>等
Microdata – 加入语意的资料让搜寻引擎等网站可以正确显示
Form type – <form>可以加入的type便多了,包含email和tel等属性,浏览器会协助进行资料格式的验证
多媒体
Audio、Video的标签支援以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。
Audio video – 影片和音乐的塬生播放支援
Canvas – 2D的绘图功能支援
Canvas 3D – 3D的绘图功能支援
SVG – 向量图支援
CSS 3
CSS3支援了字体的嵌入、版面的排版,以及最令人印象深刻的动画功能。
Selector – 更有弹性的选择器
Webfonts – 嵌入式字体
Layout – 多样化的排版选择
Stlying radius gradient shadow – 圆角、渐层、阴影
Border background – 边框的背景支援
Transition – 元件的移动效果
Transform – 元件的变形效果
Animation – 将移动和变形加入动画支援
JavaScript
在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。
DOM API – 更方便的查询DOM元件
History API – 浏览器的上下页内容修改,方便AJAX可以保留浏览记录
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+HTML5加入购物车代码分享
- jQuery mobile 移动web(6)
- 基于Jquery和html5的7款个性化地图插件
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码