HTML5
什么是HTML5?
1999年HTML4诞生了，从那时起，Web世界经历了巨变。2008年，HTML5正式发布，在2012年形成了稳定的版本。它将成为HTML、XHTML以及HTML DOM的新标准。如今，大部分现代浏览器已经具备了HTML5支持。
HTML5是如何起步的
HTML5是W3C（World Wide Web Consortium，万维网联盟）与WHATWG（ Web Hypertext Application Technology Working Group， 网页超文本技术工作小组 ）在2006年决定合作的结果。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0 。
一些HTML5的规则：
- 新特性应该基于HTML、CSS、DOM以及JavaScript。
- 减少对外部插件的需求（例如Flash）
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5应该独立于设备
- 开发进程应该对公众透明
HTML5新特性
- 用于绘画的canvas元素
- 用于媒介回放的video和audio元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，例如article、footer、header、nav、section
- 新的表单控件，比如calendar、date、time、email、url、search
video标签
目前，HTML5的video标签支持ogg、MPEG4以及WebM文件。
使用样例
<video src="..." controls="controls"></video>
标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后立即播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，例如播放按钮 |
| height | pixels | 设置视频播放器的高度 |
| loop | loop | 如果出现该属性，则视频循环播放 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的链接 |
| width | pixels | 设置视频播放器的宽度 |
audio标签
目前，HTML5的audio标签支持Ogg Vorbis、MP3以及Wav文件。
使用样例
<audio src="..." controls="controls"></audio>
标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，例如播放按钮 |
| loop | loop | 如果出现该属性，则音频循环播放 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的链接 |
语义化的块级和段落元素
nav标签
article标签
<article>标签规定独立的自包含内容。它不仅可以用于主内容，也可以用来注释或者小部件
- section标签
<section>标签定义了文档的一部分来将语义相关的组，上下文联系起来。
- footer标签
<footer>标签定义文档或者文档的一部分区域的页脚。来包括作者的姓名，文档的版权信息等。
- header标签
<header>标签定义了文档或者文档一部分区域的页眉，一般作为介绍内容或者导航连接栏的容器。
canvas标签
canvas标签是一个图形容器，通过脚本（通常是JavaScript）来绘制图形（图表或其它图像）
| 属性 | 值 | 描述 |
|---|---|---|
| height | pixels | 规定画布的高度 |
| width | pixels | 规定画布的宽度 |
SVG in HTML
SVG文件可以通过<embed>、<object>或者<iframe>嵌入HTML文档。
-
<embed>标签
优势：所有主要浏览器都支持，并允许使用脚本
劣势：不推荐在HTML4和XHTML中使用，但HTML5允许
语法：
<embed src="circle1.svg" type"image/svg.xml" />
可以看出，embed是一个无闭合标签。
-
<object>标签
优势：所有主要浏览器都支持，并且支持HTML4，XHTML和HTML5标准
劣势：不允许使用脚本
语法：
<object data="circle1.svg" type="image/svg.xml"></objcet>
-
<iframe>标签
优势：所有主要浏览器都支持，并且允许使用脚本
劣势：不推荐在HTML4和XHTML中使用，但HTML5允许
语法：
<iframe src="circle1.svg"></iframe>
- 使用<a>标签链接到SVG文件
可以使用<a>标签链接到一个SVG文件
<a href="circle1.svg">View SVG file</a>
新增表单类型
- url
- number
- range
- Date Pickers(date,month,week,datetime,datetime-local)
- search
- color
其中email，url，color，search比较容易理解。number中可以设定限定属性，max，min，step和value。
range也是如此。
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔 |
| value | number | 规定的默认值 |
- Date Pickers
Date Pickers提供了 date、month、week、time、datetime及datetime-local来选取时间类型
| 属性 | 内容 |
|---|---|
| date | 选取日、月、年 |
| month | 选取月、年 |
| week | 选取周和年 |
| time | 选取时间（小时和分钟） |
| datetime | 选取时间、日、月、年(UTC时间) |
| datetime-local | 选取时间、日、月、年(本地时间) |
