HTML5总结-认识HTML5

一、HTML 4.01 和HTML 5的页面对比

对比HTML 4.0.1(HTML 5之前的版本）和 HTML 5:

HTML 4.01

HTML 5

区别：

1、HTML 5 的新doctype很简洁： （注：doctype 定义要放在HTML文件最前面，即可告诉浏览器更准确地选择合适的方式解释和表现你的页面）；

2、meta标记只需提供字符编码方式：utf-8 （即，最新的字符集标准）；

3、link标记简洁化：去掉了type属性 （因为：CSS已成为HTML默认的标准样式）;

4、script标记简洁化：去掉了type属性（因为：javascript已成为默认的标准脚本语言）.

---

二、HTML 5功能上的特色

CSS 3：

让页面生动美观。如 让元素运行动画，给元素漂亮的圆角、阴影等；

Web工作线程：

让多个脚本在后台并发运行，保持用户界面响应性；

表单：

更好地   验证域的填写是否符合预期要求；

离线Web应用：

在未连接网络时，仍正常工作；

多媒体（音频/视频）：

不再需要插件，直接用标记元素即可；

新元素：

帮助明确页面的结构，如建立分区、页眉、页脚、导航等；

本地存储：

提供庞大的本地缓存和客户端存储；用来存储首选项/购物车商品等；

画布：

可直接在Web页面上当艺术家：文本、图像、线条、圆、矩形、图案、梯度等；

地理定位：

告诉相应的位置，和各方地图API密切合作；

---

三、HTML 5的工作模式

1、浏览器加载一个文档，其中包括HTML写的标记和用CSS写的样式；

2、浏览器加载页面时，还会为你的文档创建一个内部模型，其中包括HTML标记的所有元素；

3、浏览器加载页面时，还会加载JavaScript代码，通常在页面加载后执行相应代码；

4、通过上述的特色API，你可以访问音频、视频、使用画布完成2D绘图，访问本地存储等（即使用JavaScript）。

API：画布、套接字、音频、视频、离线缓存、本地存储、拖放、地理定位、表单、Web工作线程。

---

彩蛋 -浏览器侦查

该网站测试浏览器对HTML 5的支持水平：    点击  （强烈推荐）

---

TIPS：本文只是个人对过去的总结，不保证简洁性、系统性、易懂性。如需交流：zhejiangdaxue2011(微信号）