html5学习总结

HTML5 是近十年来 Web 开发标准最巨大的飞跃。HTML5 并非仅仅用来表示 Web 内容，它将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5 浏览器支持:

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

1.HTML5 简介

HTML5 是 HTML 标准的下一个重要版本，用来替代 HTML 4.01，XHTML 1.0 以及 XHTML 1.1。HTML5 也是一种在万维网上构建和呈现内容的标准。

HTML5 是万维网联盟（W3C）和网页超文本技术工作小组（WHATWG）合作的产物。

这一新标准中加入了视频播放和拖放等特性，过去这都依赖于第三方浏览器插件，比如 Adobe Flash，Microsoft Silverlight 以及 Google Gears。

浏览器支持

最新版 Apple Safari，Mozilla FireFox 和 Opera 支持大部分 HTML5 特性，IE9 也支持一些 HTML5 的功能。

预装在 iPhones，iPads 和 Android 手机上的手机浏览器都对 HTML5 有良好的支持。

新特性

HTML5 引入了许多新元素和属性帮助我们构建现代化的网站。下面是 HTML5 引入的主要特性：

新的语义化元素：比如 <header>，<footer> 和 <section>。
表单 2.0：改进了 HTML Web 表单，为 <input> 标签引入了一些新的属性。
持久的本地存储：为了不通过第三方插件实现。
WebSocket：用于 Web 应用程序的下一代双向通信技术。
服务器推送事件： HTML5 引入了从 Web 服务器到 Web 浏览器的事件，也被称作服务器推送事件（SSE）。
Canvas：支持用 JavaScript 以编程的方式进行二维绘图。
音频和视频：在网页中嵌入音频或视频而无需借助第三方插件。
地理定位：用户可以选择与我们的网页共享他们的地理位置。
微数据：允许我们创建 HTML5 之外的自定义词汇表，以及使用自定义语义扩展网页。
拖放：把同一网页上的条目从一个位置拖放到另一个位置。

向后兼容

HTML5 被设计为尽可能的对现有浏览器向后兼容。新特性都是建立在现有特性的基础上，并且允许我们为旧浏览器提供备用内容。

2.HTML5 语法

HTML5 有“自己的” HTML 语法，它与HTML 4 以及 XHTML1 文档兼容，但是不兼 HTML 4 中更复杂的 SGML 特性。

HTML5 并没有 XHTML 中需要小写标签名，属性要带引号，属性必须有一个值以及必须闭合所有空元素的语法规则。

但是 HTML5 更具灵活性，支持下列形式：

标签名大写。
属性的双引号可选。
属性值可选。
闭合空元素可选。

DOCTYPE

在老版本的 HTML 中，DOCTYPE 很长，因为 HTML 语言是基于 SGML 的，需要引用一个 DTD。

HTML5 作者可以使用简单的语法来指定如下形式的 DOCTYPE：

<!DOCTYPE html>

　　上述语法不区分大小写。

字符编码

HTML5 作者可以使用简单的语法指定字符编码，如下所示：

<meta charset="UTF-8">

<script> 标签

常见的做法是给 script 元素添加一个值为 "text/javascript" 的 type 属性，如下所示：

<script type="text/javascript" src="scriptfile.js"></script>

HTML5 移除了所需的额外信息，我们可以使用如下所示的简单语法：

<script src="scriptfile.js"></script>

<link> 标签

目前为止我们这样编写 <link>：

<link rel="stylesheet" type="text/css" href="stylefile.css">

HTML5 移除了所需的额外信息，我们可以使用如下所示的简单语法：

<link rel="stylesheet" href="stylefile.css">

HTML5 元素

HTML5 元素使用起始标签和结束标签标记。标签使用尖括号之间的标签名限定。

起始标签和结束标签的区别在于后者标签名前面包含一个斜杠。

下面是一个 HTML5 元素示例：

<p>...</p>

　HTML5 标签名不区分大小写，可以全部大写或者混合使用，虽然最常见的约定是始终使用小写。

大多数元素都包含一些内容，比如 <p>...</p> 包含一个段落。但是，有些元素不能包含任意内容，它们被称作空白元素。比如，br，hr，link 和 meta 等等。

HTML5 属性

元素可以包含属性（attributes），用来给一个元素设置各种属性（properties）。

有些属性被定义为全局的，可以用在任何元素上，而其他的被定义为元素特有的。所有的属性都有一个名称和一个值，看起来如下面的示例所示。

下面是一个使用 HTML5 属性的例子，演示了如何用名为 class 的属性和值 “example” 标记一个 div 元素：

<div class="example">...</div>

　　属性只能在起始标签中指定，绝对不能用在结束标签中。

HTML5 属性不区分大小写，可以全部大写或者混合使用，尽管最常见的约定是始终使用小写。

这里有一个完整的 HTML5 属性列表。

HTML5 文档

为了得到更好的结构，引入了下面的标签：

section：这个标签表示一个通用的文档或者应用程序节。它可以和 h1-h6 一起使用来表示文档结构。
article：这个标签表示文档内容的一个独立块，比如博客条目或者报纸上的文章。
aside：这个标签表示与页面其他部分略微相关的内容块。
header：这个标签表示一个节的头部。
footer：这个标签表示一个节的脚注，可以包含作者，版权等信息。
nav：这个标签表示用于导航文档的节。
dialog：这个标签可以用于标记会话。
figure：这个标签可以用于关联标题和某些嵌入内容，比如图表和视频。

一个 HTML5 文档的标记看起来就像下面这样：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>
</html>

　为了便于学习这一概念 - 我们可以进行在线练习。

3.HTML5 属性

正如 HTML5 语法中所阐述的，元素可以包含属性（attributes）给一个元素设置各种属性（properties）。

有些属性被定义为全局的，可以用在任何元素上，而其他的被定义为元素特有的。所有的属性都有一个名称和一个值，看起来如下面的示例所示。

下面是一个使用 HTML5 属性的例子，演示了如何用名为 class 的属性和值 “example” 标记一个 div 元素：

<div class="example">...</div>

属性只能在起始标签中指定，绝对不能用在结束标签中。

HTML5 属性不区分大小写，可以全部大写或者混合使用，尽管最常见的约定是始终使用小写

属性	选项	功能
accesskey	用户自定义	定义访问元素的键盘快捷键。
align	right, left, center	水平对齐标签。
background	URL	在元素后面设置一个背景图像。
bgcolor	数值，十六进制值，RGB值	在元素后面设置一个背景颜色。
class	用户定义。	分类一个元素，便于使用级联样式表。
contenteditable	true, false	定义用户是否可以编辑元素的内容。
contextmenu	Menu id	为元素定义上下文菜单。
data-XXXX	用户定义。	自定义属性。 HTML 文档的作者可以定义自己的属性。自定义属性必须以 "data-" 开头。
draggable	true,false, auto	定义用户是否可以拖动元素。
height	数字值	定义表格，图像或表格单元的高度。
hidden	hidden	定义元素是否应该可见。
id	用户定义。	命名元素，便于使用级联样式表。
item	元素列表。	用于组合元素。
itemprop	条目列表。	用于组合条目。
spellcheck	true, false	定义元素是否必须有拼写或错误检查。
style	CSS 样式表。	给元素定义内联样式。
subject	用户定义 id。	定义元素关联的条目。
tabindex	Tab number	定于元素的 tab 键顺序。
title	用户定义。	元素的“弹出”标题。
valign	top, middle, bottom	HTML 元素内标签的垂直对齐方式。
width	数字值。	定义表格，图像和表格单元的宽度。

完整的 HTML5 标签列表以及相关的属性请参考 HTML5 标签。

自定义属性

HTML5 还引入了一个新特性，就是可以添加自定义的数据属性。

自定义数据属性以 data- 开头，基于我们的需求命名。下面是一个简单的例子

<div class="example" data-subject="physics" data-level="complex">
...
</div>

　　上面的例子中两个叫做 data-subject 和 data-level 的自定义属性在 HTML5 中是完全有效的。我们还可以使用 JavaScript API 或者在 CSS 中以获取标准属性类似的方式获取它们的值。

4.HTML5 事件

当用户访问我们的网站时，他们会点击文本，图片，链接，将鼠标悬停在某些东西上面等等。这些都是 JavaScript 调用事件的例子。

我们可以在 JavaScript 或者 vbscript 中编写事件处理程序，然后把这些事件处理程序指定为事件标签属性的值。下面列出了 HTML5 规范定义的各种事件属性。

当任意事件发生在 HTML5 元素上时，下列属性可以用来触发任何作为值提供的 JavaScript 和 vbscript 代码。

这里我们只涵盖元素特定的事件，后面的章节会详细讨论这些元素。

属性	值	描述
offline	script	文档进入离线状态时触发。
onabort	script	事件中断时触发。
onafterprint	script	文档被打印后触发。
onbeforeonload	script	文档载入前触发。
onbeforeprint	script	文档被打印前触发。
onblur	script	窗口失去焦点时触发。
oncanplay	script	媒体停止缓冲，可以开始播放时触发。
oncanplaythrough	script	媒体可以播放到结束时触发，无需停止缓冲。
onchange	script	元素发生变化时触发。
onclick	script	鼠标点击触发。
oncontextmenu	script	上下文菜单被触发时触发。
ondblclick	script	双击鼠标时触发。
ondrag	script	元素被拖动时触发。
ondragend	script	拖拽操作结束时触发。
ondragenter	script	元素被拖拽到有效放置目标时触发。
ondragleave	script	元素离开有效放置目标时触发。
ondragover	script	元素被拖放到有效目标上时触发。
ondragstart	script	拖拽操作开始时触发。
ondrop	script	拖动的元素被放置时触发。
ondurationchange	script	媒体时长改变时触发。
onemptied	script	媒体资源元素突然清空时触发。
onended	script	媒体到达终点时触发。
onerror	script	发生错误时触发。
onfocus	script	窗口获得焦点时触发。
onformchange	script	表单变化时触发。
onforminput	script	表单获得用户输入时触发。
onhaschange	script	文档变化时触发。
oninput	script	元素获得用户输入时触发。
oninvalid	script	元素失效时触发。
onkeydown	script	键盘按下时触发。
onkeypress	script	键盘按下并释放时触发。
onkeyup	script	按键释放时触发。
onload	script	载入文档时触发。
onloadeddata	script	载入媒体数据时触发。
onloadedmetadata	script	媒体元素的媒体数据载入时触发。
onloadstart	script	浏览器开始载入媒体数据时触发。
onmessage	script	消息被触发时触发。
onmousedown	script	鼠标按键被按下时触发。
onmousemove	script	鼠标指针移动时触发。
onmouseout	script	鼠标指针移出元素时触发。
onmouseover	script	鼠标指针移入元素时触发。
onmouseup	script	鼠标按键释放时触发。
onmousewheel	script	鼠标滚轮转动时触发。
onoffline	script	文档进入离线状态时触发。
onoine	script	文档上线时触发。
ononline	script	文档上线时触发。
onpagehide	script	窗口隐藏时触发。
onpageshow	script	窗口变得可见时触发。
onpause	script	媒体数据暂停时触发。
onplay	script	媒体数据开始播放时触发。
onplaying	script	媒体数据播放时触发。
onpopstate	script	窗口历史信息改变时触发。
onprogress	script	浏览器获取媒体数据时触发。
onratechange	script	媒体数据的播放比率改变时触发。
onreadystatechange	script	ready-state 改变时触发。
onredo	script	文档执行 redo 操作时触发。
onresize	script	调整窗口尺寸时触发。
onscroll	script	元素的滚动条滚动时触发。
onseeked	script	媒体元素的 seeking 属性不在为真并结束时触发。
onseeking	script	媒体元素的 seeking 属性为真，seeking 开始时触发。
onselect	script	元素被选中时触发。
onstalled	script	获取媒体数据发生错误时触发。
onstorage	script	载入文档时触发。
onsubmit	script	表单提交时触发。
onsuspend	script	浏览器获取媒体数据，但获取整个媒体文件中止时触发。
ontimeupdate	script	媒体播放位置改变时触发。
onundo	script	文档执行 undo 操作时触发。
onunload	script	用户离开文档时触发。
onvolumechange	script	媒体音量发生变化，包括设置为“静音”时触发。
onwaiting	script	媒体停止播放，等待恢复时触发。

5.HTML5 表单 2.0

Web 表单 2.0 就是 HTML4 表单特性的一个扩展。HTML5 中的表单元素和属性相比 HTML4 提供了更大程度的语义标记，移除了大量 HTML4 中需要的繁琐脚本和样式。

HTML4 中的 <input> 元素

HTML4 输入框元素使用 type 属性指定数据类型。HTML4 提供了下列类型：

类型
text	自由形式的文本字段，名义上没有换行符。
password	用于敏感信息的自由形式的文本字段，名义上没有换行符。
checkbox	预定义列表中的一组零个或多个值。
radio	一个枚举值。
submit	一个自由形式的启动表单的按钮。
file	带有 MIME 类型的任意文件以及可选的文件名。
image	一个坐标，相对于特定图片的尺寸，额外的语义是它必须是最后选中的值，同时启动表单提交。
hidden	默认不显示给用户的任意字符串。
select	枚举值，类似 radio 类型。
textarea	自由形式的文本字段，名义上没有换行的限制。
button	自由形式的按钮，可以启动按钮相关的任何事件。

下面是一个使用标注标签，单选按钮以及提交按钮的简单示例：

...
<form action="http://example.com/cgiscript.pl" method="post">
    <p>
    <label for="firstname">first name: </label>
              <input type="text" id="firstname"><br />
    <label for="lastname">last name: </label>
              <input type="text" id="lastname"><br />
    <label for="email">email: </label>
              <input type="text" id="email"><br>
    <input type="radio" name="sex" value="male"> Male<br>
    <input type="radio" name="sex" value="female"> Female<br>
    <input type="submit" value="send"> <input type="reset">
    </p>
 </form>
 ...

HTML5 中的 <input> 元素

除了上面提到的属性，HTML5 给输入框元素的 type 属性引入了几个新值。如下表所列。

注意：请使用最新版的 Opera 浏览器运行下面所有例子。

类型	描述
datetime	按照 ISO 8601 编码，时区设置为 UTC 的日期和时间（包括年，月，日，时，分，秒，分秒）。
datetime-local	按照 ISO 8601 编码的日期和时间（包括年，月，日，时，分，秒，分秒），不带时区信息。
date	按照 ISO 8601 编码的日期（包括年，月，日）。
month	由 ISO 8601 编码的年和月组成的日期。
week	由 ISO 8601 编码的年和星期数组成的日期。
time	按照 ISO 8601 编码时间（包括时，分，秒，和分秒）。
number	只接受数值。step 属性可以指定精度，默认为1。
range	range 类型适用于应该包含某个范围内数值的输入字段。
email	只接受邮箱值。这个类型适用于应该包含一个邮箱地址的输入字段。如果尝试提交一个简单的文本，它会强制要求输入 email@example.com 格式的邮箱地址。
url	只接受 URL 值。这个类型适用于应该包含一个 URL 地址的输入字段。如果尝试提交一个简单的文本，它会强制要求输入 http://www.example.com 或者 http://example.com 格式的 URL 地址。

<output> 元素

HTML5 还引入了一个新元素 <output>，用来表示不同类型的输出结果，比如输出由脚本所写。

还可以用 for 属性指定输出元素和文档中影响计算的其他元素之间的关系（比如，作为输入源或者参数）。for 属性的值是一个由空格分隔的其他元素的 IDs 列表。

便于学习这一概念 - 请进行在线练习。

placeholder 属性

HTML5 引入了一个叫做 palceholder 的新属性。这个属性在 <input> 和 <textarea> 元素上为用户提供了在这个字段可以输入什么的提示。占位符字符不能包含回车符或者换行符。

下面是 placeholder 属性的简单语法：

<input type="text" name="search" placeholder="search the web"/>

这个属性只有最新版的 Mozilla，Safari 以及 Chrome 浏览器支持。