课程咨询:400-111-8989

HTML5培训 > html5教程 > HTML5的主要技术组成部分及功能介绍
  • HTML5的主要技术组成部分及功能介绍

    发布:HTML5培训  来源:转载  时间: 2017年02月08日

  • 为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素...

  • 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标准,随着使用者陆续升级到新版的浏览器,开发者应该在现在就可以着手开发!

  • 上一篇:HTML5新手基础教程

    下一篇:达内带你读懂HTML5开发学习路线

网站导航
2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56