帮助你快速了解HTML5的入门指南

什么是HTML5

一般而言，广义的HTML5包含了HTML、CSS和JavaScript三个部分，并非仅仅指HTML。在CSS 3和JavaScript层面也有诸多创新，使得整个网页从布局到处理都更加出色。新纳入的技术让之前实现困难且存在严重安全隐患的功能成为现实。

HTML5的好处——为什么要用HTML5

布局优势

HTML5在布局上更为合理。回顾过去，网页主流布局从table过渡到div；如今，HTML5的布局对搜索引擎更加友好。例如，<article>标签通常用于包含文章内容，<nav>标签用于导航信息。

移动设备支持

HTML5对移动手机的支持日趋完善，但兼容移动端并非简单之事。尽管追求多网合一，但兼容问题始终存在，布局适配也是一项技术挑战。此外，HTML5在Pad等其他客户端也发挥着越来越重要的作用。

HTML5的技术组成

离线功能

HTML5通过JavaScript提供了多种不同的离线存储功能，相较于传统的Cookie，具有更好的灵活性和架构，并且可以存储更多内容。

• WebStorage：比Cookies存储容量更大、更具弹性。
• Web SQL Database：本地端的SQL数据库。
• Indexed DB：基于键值对的本地存储。
• Application Cache：将部分常用的网页内容进行缓存。

即时通讯

以往，由于HTTP协议和浏览器的设计，网站的即时互动性受到很大限制，只能通过一些技巧来“模拟”即时通讯效果。而HTML5提供了完善的即时通讯支持。

• WebSocket：实现即时的socket连线。
• Web Workers：以往JavaScript是单线程的，通过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

截至目前，主流的网页浏览器如Firefox 5、Chrome 12和Safari 5都已经支持了许多HTML5标准，最新版的IE 9也支持了不少HTML5标准。随着用户陆续升级到新版浏览器，开发者现在就可以着手进行开发。兼容性问题会随着时间推移逐渐减少。对于不得不照顾低版本用户的网站，网上也有大量的回退解决方案。