---
title: 08-HTML5详解
publish: true
---
## HTML5的介绍
### Web 技术发展时间线
- 1991 HTML
- 1994 HTML2
- 1996 CSS1 + JavaScript
- 1997 HTML4
- 1998 CSS2
- 2000 XHTML1（严格的html）
- 2002 Tableless Web Design（表格布局）
- 2005 AJAX
- 2009 HTML5
- 2014 HTML5 Finalized
2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。
2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。
H5草案的前身是叫：Web Application，最早是由[WHATWG](https://baike.baidu.com/item/WHATWG/5803339?fr=aladdin)这个组织在2004年提出的。
2007年被 W3C 组织接纳，并在 2008-01-22 发布 HTML5 的第一个草案。
### 什么是 HTML5
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它**制定了Web应用开发的一系列标准**，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。
**`HTML5`的广义概念**：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。
`HTML5`不等于 `HTML next version`。`HTML5` 包含： `HTML`的升级版、`CSS`的升级版、`JavaScript API`的升级版。
**总结**：`HTML5`是新一代开发 **Web 富客户端**应用程序整体**解决方案**。包括：HTML5，CSS3，Javascript API在内的一套**技术组合**。
**富客户端**：具有很强的**交互性**和体验的客户端程序。比如说，浏览博客，是比较简单的客户端；一个在线听歌的网站、即时聊天网站就是富客户端。
**PS：**
单纯地从技术的角度讲，兼容性问题只会让开发者徒增烦恼。
如果网页端的程序能做到PC客户端的体验，就会对后者构成威胁。
### HTML5 的应用场景
列举几个HTML5 的应用场景：
（1）极具表现力的网页：内容简约而不简单。
（2）网页应用程序：
- 代替PC端的软件：iCloud、百度脑图、Office 365等。
- APP端的网页：淘宝、京东、美团等。
- 微信端：公众号、小程序等。
（3）混合式本地应用。
（4）简单的游戏。
### HTML5 新增的内容
## 语义化的标签
### 语义化的作用
语义标签对于我们并不陌生，如``表示一个段落、`
`表示一个无序列表。**标签语义化的作用：**
- 能够便于开发者阅读和写出更优雅的代码。
- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
- 更好地搜索引擎优化。
总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。
### H5在语义上的改进
在此基础上，HTML5 增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。
我们常见的 css+div 布局是：
在html5中，我们可以这样写：
传统的做法中，我们通过增加类名如`class="header"`、`class="footer"`，使HTML页面具有语义性，但是不具有通用性。
HTML5 则是通过新增语义标签的形式来解决这个问题，例如``、``等，这样就可以使其具有通用性。
**传统网页布局：**
```html
```
**H5 的经典网页布局：**
```html
```
## H5中新增的语义标签
- `` 表示区块
- `` 表示文章。如文章、评论、帖子、博客
- `` 表示页眉
- `