新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
马海祥博客 > 网站制作 > html代码教程 > HTML5的主要技术组成部分及功能介绍

HTML5的主要技术组成部分及功能介绍

时间:2014-10-12   文章来源:马海祥博客   访问次数:

HTML5的发展越来越迈向成熟,很多的应用已经逐渐出现在你我日常生活中了,不只让传统网站上的互动Flash逐渐的被HTML5的技术取代,更重要的是可以透过HTML5的技术来开发跨平台的手机软件,这也让许多开发者感到十分的兴奋!

HTML5的主要技术组成部分及功能介绍-马海祥博客

当你开始想要学习,或者试图想要投入相关的开发时,由于HTML5的技术还在持续发展、进化当中,学习的资源也都比较零散,较难有一个整体的方向,在本篇文章中,马海祥将会为大家介绍一些HTML5的主要技术组成,并且提供一些学习资源让大家参考。

1、HTML5的包含部分

自1999年以后HTML 4.01已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义(具体可查看马海祥博客《HTML5和HTML4的区别:HTML5新标签的用法解释》的相关介绍)。

为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者等。

一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分,不单单只是HTML部分而已,CSS3和JavaScript也有许多的创新,让整个网页程序功能更加缤纷。

2、脱机功能

HTML5透过JavaScript提供了数种不同的脱机储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。

(1)、WebStorage:比Cookies更大、更有弹性的的储存。

(2)、Web SQL Database:本地端的SQL数据库。

(3)、Indexed DB:Key-value的本地数据库。

(4)、Application Cache:将部分常用的网页内容cache起来。

3、实时通讯

以往网站由于HTTP协议以及浏览器的设计,实时的互动性相当的受限,只能使用一些技巧来“仿真”实时的通讯效果,但HTML5提供了完善的实时通讯支持。

(1)、WebSocket:实时的socket联机。

(2)、Web Workers:以往JavaScript都是single thread,透过Worker可以有多个运算。

(3)、Notifications:原生的提示讯息,类似像OS X的Growl提示。

4、档案以及硬件支持

不知道大家有没有发现,在Gmail等新的网页程序当中,已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Dragn Drop和File API。

(1)、Dragn Drop:HTML元素的拖拉。

(2)、File API:读取用户本机计算机的内容。

(3)、Geolocation:地理定位。

(4)、Device orientation:手持装置的方向。

(5)、Speech input:语音输入。

5、语义化

语义化的网络是可以让计算机能够更加理解网页的内容,对于像是搜索引擎的优化(SEO)或是推荐系统可以有很大的帮助(对于SEO优化的优势,具体可查看马海祥博客《以SEO的角度来分析HTML5与搜索引擎优化的联系》的相关介绍)。

(1)、New tags:新的标签,像是header、section等。

(2)、Application tags:也是新的标签,像是meter、progress等。

(3)、Microdata:加入语义的数据让搜索引擎等网站可以正确显示。

(4)、Form type:form可以加入的type便多了,包含email和tel等属性,浏览器会协助进行数据格式的验证。

6、多媒体

Audio、Video的卷标支持以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。

(1)、Audio video:影片和音乐的原生播放支持。

(2)、Canvas:2D的绘图功能支持。

(3)、Canvas 3D:3D的绘图功能支持。

(4)、SVG:向量图支援。

7、CSS 3技术

CSS 3支持了字体的嵌入、版面的排版,以及最令人印象深刻的动画功能。

(1)、Selector:更有弹性的选择器。

(2)、Webfonts:嵌入式字体。

(3)、Layout:多样化的排版选择。

(4)、Stlying radius gradient shadow:圆角、渐层、阴影。

(5)、Border background:边框的背景支持。

(6)、Transition:组件的移动效果。

(7)、Transform:组件的变形效果。

(8)、Animation:将移动和变形加入动画支持。

8、JavaScript技术

HTML5在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

(1)、DOM API:更方便的查询DOM组件。

(2)、History API:浏览器的上下页内容修改,方便AJAX可以保留浏览记录。

截至目前而言,主流的网页浏览器Firefox 5、Chrome 12和Safari 5都已经支持了许多的HTML5标准,而且目前最新版的IE 10也支持了许多HTML5标准,随着使用者陆续升级到新版的浏览器,开发者应该在现在就可以着手开发!

而对于旧的浏览器兼容性而言,马海祥也曾专门撰文介绍过旧版ie浏览器的兼容功能,对此,大家可查看一下马海祥博客《如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题》的相关介绍。

而Modernizer也是一个相当重要的JavaScript函数库,提供开发者轻松的方式判别目前使用者的浏览器是否有支持特定的HTML5功能。

马海祥博客点评:

从可用性的角度上看,HTML5可以更好的促进用户于网站间的互动情况,多媒体网站可以获得更多的改进,特别是在移动平台上的应用,使用HTML5可以提供更多高质量的视频和音频流。

到目前为止,事实就是iPhone和iPad将不会支持FLASH,同时ADOBE公司也在近期公开声明将停止FLASH基于移动平台的开发,现在我们已经可以这么说:移动平台日后视频音频是HTML5的天下!

本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/html/859.html,注明出处;否则,禁止转载;谢谢配合!

相关热词搜索: HTML5 html5技术 html5功能

上一篇:如何规范大型网站的HTML代码
下一篇:各大浏览器在Mac和Windows平台对CSS3和HTML5兼容情况查询表

今日话题更多>

SEO研究院 更多 >>