HTML5介绍

update@2011-12-18

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


  1. HTML5
  2. 有什么不同
  3. 如何开始


1 HTML5

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

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

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 教程

资源

表单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> <!-- -placeholder属性可以为输入框添加提示内容,required告诉浏览器此输入是必填的,这些功能在html5里都是浏览器内置的,无需用脚本来实现-> <br/> <label for="password">Password</label> <input id=""placeholder="and your password" type="password" name="password" maxLength="16" required> <!-- 新的input标签会帮你检查用户的输入是否合法,比如在type="email"的输入框里,如果没有@符,提交时浏览器会报错--> <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

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download song</a> </video> <!-- 短短两三行,我们就能创建一个播放器,可以设置海报,可以设置高度和宽度,同样我们可以设置是否为自动播放,这比脚本或者控件简单很多-->