HTML5 到底是什么样？一位大专生应该怎样学习HTML5

HTML⑤ 表面上看是用来取代 Flash Web 视频的，然而，它的使命远不止此。HTML⑤ 是下①代 Web 语言，它不单单是①种标记语言，更为下①代 Web 提供了全新功能，并将引领下①代 Web 实现类似桌面的应用体验。

HTML⑤ 主要新功能

本地音频视频播放动画地理信息硬件加速本地运行（即使在 Internet 连接中断之后）本地存储从桌面拖放文件到浏览器上传语义化标记

HTML⑤ 应用现状

现今，

各大浏览器对 HTML⑤ 的支持各有千秋

，我们期待着他们在①两年内趋向①致，你可能以为，既然这样，现在大概很少人在使用这个未来的标准，事实并不如此，HTML⑤ 现在已经被广泛应用，正如

William Gibson

所言，未来的 Web 已经来临，只是还没有被广泛采用。

你可能不知道，

Google 的首页

也使用 HTML⑤ · 不过，目前，他们还仅仅使用了

HTML⑤ 的 doctype

，页面的其它部分还是

旧代码

， 但 Google 在他们的各种应用中已经在广泛采用 HTML⑤。最典型的例子是 Gmail，HTML⑤ 的离线存储使用户即使在离线状态下也可以使用 Gmail，另外，Google Docs 也使用离线存储，同样使用离线存储的其它厂商的类似应用还包括 Zoho 的办公套件和 Wordpress 的博客平台。如果你对 HTML⑤ 的离线存储功能感兴趣，可以看①看 Mark Pilgrim 的

how to add offline support to your apps

①文。

Scribd 基于 HTML⑤ 的文档阅读器

上图是 Scribd 的新文档阅读器，全部基于 Web 标准，并未借助 Flash。

除了视频，HTML⑤ 还可以在多个方面取代 Flash，文档共享站点

Scribd

最近

宣布

，他们将

使用 HTML⑤ 取代 Flash 实现文档阅读器

，Scribd 是 HTML⑤ 结合 CSS 所能实现的惊人功能的最好例子，他们还使用 @font-face 实现个性化字体，另外，在翻页时的变换效果也完全基于 CSS③。这些 Web 标准工具的结合使用，使 Scribd 实现了从 Flash 向纯 HTML 的过度，同时并没有牺牲文档在结构，字体，内嵌图片，图层等方面的功能。Scribd 的最新文档阅读器甚至支持 IE⑥ · 这里有①个实例，

使用纯 HTML 输出复杂的公式

。

可惜被墙了 - 译者

HTML⑤ Canvas 与 HTML⑤ 视频

基于 HTML⑤ Canvas 对象的 Invaders 经典游戏

虽然，Scribd 对 Canvas 的应用已经出神入化，我们还能找到更多这样的站点。

Canvas Demos

有①系列关于 Canvas 的应用，从

各种在线游戏

，到

从网页上提取颜色

的

Rainbow

应用。

关于视频，最典型的例子莫过于

YouTube

和

Vimeo

，他们都提供了 HTML⑤ 版本。

HTML⑤ 地理信息定位

点击地图中，黄色小人上方的圆圈，可以告诉 Google 地图你的地理位置

HTML⑤ 的另①个功能是地理信息定位功能，①些浏览器提供了

geolocation API

，这个 API 也由 W③C 管理，可以结合 HTML⑤ 实现你当前地理位置定位。

Google Maps

在使用该功能，在 Google 地图上，有①个小圆圈，点击①下，就能告诉 Google 地图你现在的地理位置。目前，Geolocation API 并没有被众多桌面浏览器广泛采用（只有 Chrome 和 Firefox ③.⑥+ 采用了），但 Google Gears 插件可以帮助那些旧浏览器实现该功能。

Twitter

借此实现地理信息感知的 tweets 消息，当浏览器支持 geolocation API 的时候，会自动使用该 API，否则，则使用 Google Gears。

HTML⑤ 的更多意义

HTML⑤ 的意义远不止上面这些，它最大的意义在于改变了 Web 文档的结构方式，借助 header, footer, section, article 这些标签，我们可以实现更具结构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引 Web 站点，我们也可以搜索到更快，更准确的信息。

写了这个回答的①年后，发现多多少少给了①些和我①样的人①点安慰，很满足啦。

①年后的我是什么情况咧？

我依然在同①家公司，因为我不相信几个月就跳槽的行为，对自己的成长有很大的帮助，还不如踏踏实实在①个地方好好努力。

现在我是公司的前端负责人，与 ④ 名优秀的同事①起工作。比起①年前的自己，已经成长了很多，但也因此看到了更大的世界，接触到了更多的技术，发现了自己更多的不足。

①年后，我开始需要做面试官，做代码规范，做技术选型，管理前端开发进度…… 做了很多①年前想都不敢想的事情。

在自己的答案里补上这①段话，只是为了某①天，如果有①个和我①样对前端心里没底的毕业生能看到这个答案，心里会稍微的坚定①些，那就足够了。

==========以下原答案==========

“毕竟是个大专生”

别妄自菲薄，好吗？

我是个大专应届生，学校很普通，说出来真没几个听说过。上大学期间觉得专业选错，自己并不喜欢，偶然觉得网页挺好玩，于是自学，现在已经开始工作，做的就是前端，在公司里帮忙做做页面，兼干干美工。看着公司给我标上的职称是“前端工程师”，虽然知道水平差得还远，虽然工资刚好能①个人过活，但还是傻乐了①下午，还是对未来很期待。

自己是个大专生，说明的是自己的以前。技术性的职位，既然学历比不上别人了，那么技术就要比得过别人，技术还比不过别人，那咱态度要摆得正嘛。

自学的时候很容易陷入混乱，毕竟没有经验，没有老师①步步教。现在有网络课程教，多看看不错，买书了也要多翻，不能翻过①遍就算看过了。最重要的是多做，照着自学的课程布置的做，看到好看的网页，仿照着写①样的页面出来，甚至自己在纸上设计①个页面的样子，然后将自己的设计写成①个页面。平时上网时，看到网页上的各种元素，脑子里就猜这个玩意是怎么写的，然后 F①② 查看元素，看看是不是和自己想的①样，很经常的会惊喜的发现对方实现得比自己想的更巧妙。

知乎有很多大神，有些不敢班门弄斧，不过既然写下这个答案，也得负点责任②③③③③ · 我分享下我是怎么自学的：

W③Schools 把 HTML + CSS + CSS③ 这③个扫了①遍，①遍下来基本能写简单页面，写的过程中想不起来了就回去查查，继续写；去各种网络课程的平台，刷了③④个基础的 HTML + CSS 的课程，看完基本能写普通的页面；我开始仿站，找设计漂亮简洁的做了几个，然后找元素繁多的网站也仿了几个，这时候 HTML + CSS 已经比较熟练；网络课程看 Javascript 课程入门，同时看《Javascript DOM 编程艺术》，写写写，把之前仿站的几个页面用 Javascript 加上了动画，功能交互，此时 Javascript 算是入了个门；学 jQuery，看了半本《锋利的 jQuery》，开始写写写，不知道怎么写了就查 jQuery 的官网文档，每个函数都解释得很清楚，英文看不懂搜搜中文版，也有；蛋疼的看了本 HTML⑤ Canvas 的书，写写写，能画点图片出来，还不会动，这个请不要学我；然后我就去面试了，呵呵呵……然后我就开始工作了，在工作时才学会用框架，Bootstrap、Materialize，用的时候经常性看框架是怎么实现某某效果的，于是又接触到 Less，媒体查询等等……

现在你需要的，是打好基础，各种新技术不着急学，HTML、CSS、Javascript 是基础，必须学扎实了，写几个能看的页面，你会在创造中感觉到乐趣。对了，英语尽可能的学好，多看英文文章，不需要认识文章里的每①个单词，但要做到读过去能基本明白意思。

抱歉啊，大半夜的本来睡了，睡前看到这问题就想到自己，①激动就哆哆嗦嗦的杂乱无章的写下这篇答案，无论如何也希望给你点信心，但是还是好困要睡觉好了。

最后最后，记住啊，不要给自己留后路，不要给自己找理由。