HTML5新手入门指南

  • 阅读(455)
  • 点赞(805)
  • 收藏(347)
  • 日期(2020-06-07)

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

HTML5新手入门指南

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

HTML5 到底是什幺?

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

HTML5 的技术组成

离线功能

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

即时通讯

以往网站由于 HTTP 协定以及浏览器的设计,即时的互动性相当的受限,只能使用一些技巧来「模拟」即时的通讯效果,但 HTML5 提供了完善的即时通讯支援。

档案以及硬体支援

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

语意化

语意化的网路是可以让电脑能够更加理解网页的内容,对于像是搜寻引擎的优化或是推荐系统可以有很大的帮助。

多媒体

Audio、Video 的标籤支援以及 Canvas 的功能应该是大家对于 HTML5 最熟悉的部份了,也是许多人认为 Flash 会被取代的主要原因。先前 Inside 有一些相关的技术展示可以参考。

CSS 3

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

JavaScript

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

现在就开始用 HTML5

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

而对于旧的浏览器相容性而言,先前 Inside 曾经撰文介绍过的 CSS3 Pie 便是一个让旧版浏览器也能支援 CSS 3 功能的 JavaScript 函式库。

HTML5新手入门指南

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

HTML5新手入门指南
学习的方向

在看完本篇文章之后,大家或许可以针对自己有兴趣的方面透过关键字搜寻去寻找相关的学习资源以及内容。

Google 的 HTML5Rocks 网站 也是我相当推荐的,其中的透过 HTML5 开发的 HTML5 介绍投影片 更是值得一看,可以将上述的内容都实际试玩。