HTML5介绍

update@2011-12-18

09年的时候稍微学了下html5，后来的web实验课就向同学介绍了下。

HTML5
有什么不同

features
WEBGL

如何开始

kill ie 6
教程

1 HTML5

HTML5 是下一代 Web 语言，它不单单是一种标记语言，更为下一代 Web 提供了全新功能，并将引领下一代 Web 实现类似桌面的应用体验。HTML5 的意义远不止这些，它最大的意义在于改变了 Web 文档的结构方式，借助 header, footer, section, article 这些标签，我们可以实现更具结构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引 Web 站点，我们也可以更快，更准确地搜索信息。

Google是HTML5的最大支持者之一。HTML 5标准有助于他们的应用部门更好地支持Gmail、Google Apps和Google wave。更重要的是，它会真正帮助他们的核心搜索业务。这是因为谷歌的网页抓取和索引程序都无法理解flash，导致Google对Flash内容无可奈何。因此，业界尽快转移到HTML5平台最符合谷歌的利益——最好再使用他们的Chrome浏览器、操作系统或Android手机。该公司还拥有一个具有相当吸引力的武器促成用户进行这种转换，它就是YouTube。 YouTube是互联网视频的霸主，而其他的类似网站都微不足道。一旦标准确立，Firefox和Chrome将开始支持HTML 5，我们将看到一个新的、内容更丰富的、HTML 5版的YouTube亮相。YouTube的网上视频世界是一个5000磅的大猩猩。它首先使用HTML 5这一新标准，而且其他的网站将被迫跟进，而这次不会用到8年时间。在未来，HTML5将是互联网上一个主要的、甚至占据主导力量的技术。

2 有什么不同

2.1 features

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

2.2 WEBGL

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

Demos

3 如何开始

3.1 kill ie 6

中国仍然是IE6用户最多的国家，告诉他们，请停止使用IE6，升级自己的浏览器。

3.2 教程

资源

HTML5
常用手册
w3c的最新进展
《Pro.HTML5.Programming》

表单demo

<!DOCTYPE html> 
<html>
<head>
	<title>Telecom operations report system</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/indexCSS.css"> <!-- -link标签增加了一些属性 对搜索引擎更友好->
	<link rel="stylesheet" href="css/icon.css">
</head>

<header class="index">
	<h1 class="head">Telecom operations report system</h1>
</header>
<body>
	<div class="login_form">
            <fieldset>
		<form method="post" action="#">
                    <label for="username">Username</label>
                    <input id=""placeholder="enter your username"  type="text" name="Username" maxLength="10" required>

                    <br/>
                    <button type="submit">login</button>
                    <button type="reset">reset</button>
		</form>
                <a style="color:#447d43;" href="#">foget your password?</a>
                <a href="register.jsp">register</a>
            </fieldset>
	</div>
</body>

video标签demo