web 基础（二） HTML5
一、HTML5
HTML5 是最新的 HTML 标准。是专门为承载丰富的 web 内容而设计的，并且无需额外插件。它拥有新的语义、图形以及多媒体元素。并提供的新元素和新的 API 简化了 web 应用程序的搭建，是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
总而言之，HTML5 属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！
HTML5 的文档规范：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
相比 HTML4 及以下版本，HTML5 的文档类型（DOCTYPE）声明非常简单，HTML5 中默认的字符编码是 UTF-8。
二、HTML5 新特性
- 新的语义元素。比如 <header>, <footer>, <article>, and <section>。
- 新的表单控件。比如数字、日期、时间、日历和滑块。
- 强大的图像支持（借由 <canvas> 和 <svg>）。
- 强大的多媒体支持（借由 <video> 和 <audio>）。
- 强大的新 API。比如用本地存储取代 cookie。
三、浏览器对 HTML5 的支持
目前，所有现代浏览器都支持 HTML5。此外，所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。正因如此，可以用下面三种方式来帮助老式浏览器处理“未知的“ HTML 元素，以实现浏览器对 HTML5 的支持：
1、把 HTML5 元素定义为块级元素
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。可以把 CSS display 属性设置为 block，以确保老式浏览器中正确的行为，如下所示：
header, section, footer, aside, nav, main, article, figure { display: block; }
2、向 HTML 文档中添加新元素
可以通过浏览器 trick 向 HTML 添加任何新元素，如下示例是向 HTML 添加了一个名为 <my> 的新元素，并为其定义 display 样式为block：
<!DOCTYPE html> <html> <head> <title>an HTML Element</title> <script>document.createElement("my")</script> <style> myHero { display: block; } </style> </head> <body> <my>My First Hero</my> </body> </html>
注意：已添加的 JavaScript 语句 document.createElement("my")，仅适用于 IE内核的浏览器。
上述两种方案可用于所有新的 HTML5 元素，但是对于Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。此时需要用到下面的Shiv 解决方案。
3、完整的 Shiv 解决方案
在 Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript", "the shiv"的插件：html5shiv.min.js，在HTML5 文档中引用此文件，可以实现对HTML5 的支持，如下示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!--[if lte IE 9]> <script type="text/javascript" src="js/html5shiv.min.js"></script> <![endif]--> </head> <body> <header>头部</header> </body> </html>
注意：以上代码是一段注释，但是 IE9 的早期版本会读取它（并理解它）。引用 JS 插件代码的链接必须位于 <head> 元素中，因为 Internet Explorer 需要在读取之前认识所有新元素。
由于第三种方案可以解决大部分兼容性问题，所以 推荐使用第三种 Shiv 解决方案。
四、HTML5 中新元素及属性
这边列出了常用的元素和相关属性，详细的可以访问各个章节：HTML5 教程。
（一）、新元素
|
标签 |
描述 |
|
|
<canvas>新元素 |
<canvas> |
标签定义图形，比如图表和其他图像，该标签基于JS的绘画API |
|
新多媒体元素 |
<audio> |
定义音频内容 |
|
<video> |
定义视频(video或者movie) |
|
|
<source> |
定义多媒体资源<video>和<audio> |
|
|
<embed> |
定义嵌入的内容，比如插件 |
|
|
<track> |
为诸如<video>和<audio>元素之类的媒介规定外部文本轨道 |
|
|
新表单元素 |
<datalist> |
定义选项列表。与input元素配合使用，来定义input可能的值。 |
|
<keygen> |
规定用于表单的密钥对生成字段。 |
|
|
<output> |
定义不同类型的输出，比如脚本的输出。 |
|
|
新的语义和结构元素 |
<aside> |
定义页面的侧边栏内容 |
|
<dialog> |
定义对话框，比如提示框 |
|
|
<figure> |
规定独立的流内容（图像图表照片代码等） |
|
|
<figcaption> |
定义<figure>元素的标题 |
|
|
<footer> |
定义section或decument的页脚 |
|
|
<header> |
定义文档的头部区域 |
|
|
<nav> |
定义运行中的进度 |
|
|
<section> |
定义文档中的节 |
|
|
<time> |
定义日期或时间 |
（二）、新表单属性
1、智能表单控件
<input type="email">
type可选以下类型：
email: 输入合法的邮箱地址
url： 输入合法的网址
number： 只能输入数字
range： 滑块
color： 拾色器
date： 显示日期
month： 显示月份
week ： 显示第几周
time： 显示时间
五、HTML5 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单属性示例</title> </head> <body> <form action="test.action" method="get" autocomplete="off" novalidate> 邮箱地址: <input type="email" name=""> <input type="submit" name=""> </form> </body> </html>