认识HTML5

认识HTML5

一、实验说明

1. 环境登录

无需密码自动登录，系统用户名shiyanlou，该用户具备sudo的权限，可以执行安装软件等管理员操作。

2. 环境介绍

本实验环境采用Ubuntu Linux桌面环境，实验中会用到桌面上的程序：

1. Xfce终端: Linux命令行终端，打开后会进入Bash环境，可以使用Linux命令
2. Firefox及Opera：浏览器，可以用在需要前端界面的课程里，只需要打开环境里写的HTML/JS页面即可
3. gvim：非常好用的Vim编辑器，最简单的用法可以参考课程Vim编辑器
4. 其他编辑器：如果Vim不熟悉可以使用gedit或brackets，其中brackets比较适合开发前端代码。

3. 环境使用

使用GVim编辑器输入实验所需的代码，然后使用Firefox浏览器打开代码文件，可以在虚拟环境中Firefox浏览器中按F12键打开firebug进行前端页面的调试。

实验报告可以在个人主页中查看，其中含有每次实验的截图及笔记，以及每次实验的有效学习时间（指的是在实验桌面内操作的时间，如果没有操作，系统会记录为发呆时间）。这些都是您学习的真实性证明。

4. 版权声明

本课程基于FlyDragon的HTML5文档制作，感谢原作者授权，附原作者版权声明：

作者：FlyDragon

出处：http://www.cnblogs.com/fly_dragon/

关于作者：专注于微软平台项目架构、管理和企业解决方案。如有问题或建议，请多多赐教！

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通malun666@126.com 联系我，非常感谢。

二、认识HTML5

---

1. 什么是HTML5

HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出，再于2007年获W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。目前Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer 9已支援HTML5技术。

HTML5本质并没有对之前HTML4版本的规范进行彻底的变革，而是一开始设计就考虑了跟之前的标准进行兼容，并且把最新的WEB开发的一些新技术新的规范引入进了新版本的标准中。

2. HTML5新特性

2.1 新增拥有具体含义的标签

现在所有的站点基本上都是div+css布局，几乎所有的文章标题、内容、辅助介绍等都用div容器来承载。搜索引擎在抓取页面内容时，因为没有明确的容器的含义只能去猜测这些标签容器承载的是文章标题还是文章内容等。HTML5新标准中直接添加了拥有具体含义的HTML标签比如：<article>、<footer>、<header>、<nav>、<section>

2.2 新增更加智能的表单类型

之前的表单标签仅仅是简单的类型的约束，比如文本框、文本域、下拉列表等。而跟业务结合紧密的表单标签数据校验等控制都没有很好的支持，基本上都是跟第三方的JS控件进行结合使用，但是这些第三方总会涉及到版本控制、浏览器兼容性、非标准等一系列的问题。而在HTML5的标准中直接添加了智能表单，让这一切都变得那么的简单，比如 calendar、date、time、email、url、search

2.3 让Web程序更加的独立，减少了对第三方插件的依赖。

在HTML5标准中原生的就支持音频、视频、画布等技术。让WEB程序更加独立，更好的适应多种形式的客户端。

2.4 对本地离线存储的更好的支持

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

2.5 HTML5即时二维绘图 ,既画布的引入

HTML5 的canvas元素使用 JavaScript 在网页上绘制图像。并拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.6 JS支持多线程

在不影响UI update及浏览器与用户交互的情况下, 前端做大规模运算，只能通过 setTimeout 之类的去模拟多线程 。而新的标准中，JS新增的HTML5 Web Worker对象原生的就支持多线程。

2.7 WebSockets让跨域请求、长连接、数据推送变得简单

WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。WebSocket是html5规范新引入的功能，用于解决浏览器与后台服务器双向通讯的问题，使用WebSocket技术，后台可以随时向前端推送消息，以保证前后台状态统一，在传统的无状态HTTP协议中，这是“无法做到”的。

2.8 更好的异常处理

HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比，HTML5给出了解析的完整规则，让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。

2.9 文件API让文件上传和操纵文件变得那么简单

由于项目中经常遇到用Web应用中控制操作本地文件，而之前都是使用一些富客户端技术比如flash，ActiveX，Silverlight等技术。在HTML5的新的提供的HTML5 File API 让JS可以轻松上阵了。

在后续的实验中将带领大家更深入地了解HTML5