HTML5笔记一

转载地址：http://www.cnblogs.com/sailxc/archive/2011/06/23/2088284.html

HTML5简介 

什么是HTML5？ 

l   HTML5是下一代的HTML，将成为HTML、XHTML 以及HTML DOM 的新标准。

l   HTML 的上一个版本诞生于1999 年。自从那以后，Web 世界已经经历了巨变。

l   HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。

 

HTML5 是如何起步的？ 

HTML5 是W3C 与WHATWG 合作的结果。WHATWG 致力于web 表单和应用程序，而W3C 专注于XHTML 2.0。在2006 年，双方决定进行合作，来创建一个新版本的HTML。

（W3C 指World Wide Web Consortium，万维网联盟。WHATWG 指Web Hypertext Application Technology Working Group。）

为HTML5 建立的一些规则：

l   新特性应该基于HTML、CSS、DOM 以及JavaScript。

l   减少对外部插件的需求（比如Flash）

l   更优秀的错误处理

l   更多取代脚本的标记

l   HTML5 应该独立于设备

l   开发进程应对公众透明

 

新特性 

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

l   用于绘画的canvas 元素

l   用于媒介回放的video 和audio 元素

l   对本地离线存储的更好的支持

l   新的特殊内容元素，比如article、footer、header、nav、section

l   新的表单控件，比如calendar、date、time、email、url、search

 

浏览器支持 

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

9 将支持某些HTML5 特性。

 

HTML5视频 

Web 上的视频 

直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过video 元素来包含视频的标准方法。

 

视频格式
当前，video 元素支持两种视频格式：

Ogg - 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件

MPEG4 - 带有H.264 视频编码和AAC 音频编码的MPEG4 文件

 

如何工作 

<video src=”movie.ogg” controls=”controls”>

</video>

control属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

<video>与</video>之间插入的内容是供不支持video 元素的浏览器显示的。

示例： 

<video src=”movie.ogg” width=”320″ height=”240″ controls=”controls”>

Your browser does not support the video tag.

</video>

上面的例子使用一个Ogg 文件，适用于Firefox、Opera 以及Chrome 浏览器。要确保适用于Safari 浏览器，视频文件必须是MPEG4 类型。

video 元素允许多个source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

示例：

<video width=”320″ height=”240″ controls=”controls”>

<source src=”movie.ogg” type=”video/ogg”>

<source src=”movie.mp4″ type=”video/mp4″>

Your browser does not support the video tag.

</video>

<video> 标签的属性

属性	描述
autoplay	视频在就绪后马上播放
controls	向用户显示控件（比如播放按钮）
height	设置视频播放器的高度
width	设置视频播放器的宽度
loop	当媒介文件完成播放后再次开始播放
preload	视频在页面加载时进行加载并预备播放（若使用autoplay，则忽略该属性）
src	要播放的视频的URL

 

HTML5音频

Web 上的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。

 

音频格式 

当前，audio 元素支持三种音频格式：Ogg Vorbis、MP3、Wav

 

如何工作 

<audio src=”song.ogg” controls=”controls”>

</audio>
control属性供添加播放、暂停和音量控件。

<audio>与</audio>之间插入的内容是供不支持audio 元素的浏览器显示的。

示例： 

<audio src=”song.ogg” controls=”controls”>

Your browser does not support the audio tag.

</audio>

上面的例子使用一个Ogg 文件，适用于Firefox、Opera 以及Chrome 浏览器。要确保适用于Safari 浏览器，音频文件必须是MP3 或Wav 类型。

audio 元素允许多个source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

示例：

<audio controls=”controls”>

<source src=”song.ogg” type=”audio/ogg”>

<source src=”song.mp3″ type=”audio/mpeg”>

Your browser does not support the audio tag.

</audio>

<audio> 标签的属性 

属性	描述
autoplay	音频在就绪后马上播放
controls	向用户显示控件（比如播放按钮）
preload	音频在页面加载时进行加载并预备播放（若使用autoplay，则忽略该属性）
src	要播放的音频的URL

 

HTML5 Web存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

l   localStorage – 没有时间限制的数据存储

l   sessionStorage – 针对一个session的数据存储

之前，这些都是由cookie 完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie 速度很慢而且效率也不高。

在HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

HTML5 使用JavaScript 来存储和访问数据。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

 

localStorage 方法 

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

创建和访问localStorage：

<script type=”text/javascript”>

localStorage.lastname = ”Smith”;

document.write(localStorage.lastname);

</script>

下面的例子对用户访问页面的次数进行计数：

<script type=”text/javascript”>

if (localStorage.pagecount)

{

localStorage.pagecount = Number(localStorage.pagecount) + 1;

}

else

{

localStorage.pagecount = 1;

}

document.write(“Visits “ + localStorage.pagecount + ” time(s).”);

</script>

 

sessionStorage 方法 

sessionStorage 方法针对一个session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个sessionStorage：

<script type=”text/javascript”>

sessionStorage.lastname = ”Smith”;

document.write(sessionStorage.lastname);

</script>

下面的例子对用户在当前session 中访问页面的次数进行计数：

<script type=”text/javascript”>

if (sessionStorage.pagecount)

{

sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;

}

else

{

sessionStorage.pagecount = 1;

}

document.write(“Visits “ + sessionStorage.pagecount + ” time(s) this session.”);

</script>

HTML5新的Input类型 

HTML5 拥有多个新的表单输入类型，提供了更好的输入控制和验证。

 

Input类型 - email

email类型用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值。

E-Mail: <input type=”email” name=”user_email” />

 

Input类型 - url

url类型用于应该包含URL地址的输入域。在提交表单时，会自动验证url域的值。

Homepage: <input type=”url” name=”user_url” />

 

Input类型 - number

number类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：

Points: <input type=”number” name=”points” min=”1″ max=”10″ />

属性	描述
max	规定允许的最大值
min	规定允许的最小值
step	规定合法的数字间隔（如果step=”3″，则合法的数是-3,0,3,6 等）
value	规定默认值

 

Input类型 - range

range类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

<input type=”range” name=”points” min=”1″ max=”10″ />

属性	描述
max	规定允许的最大值
min	规定允许的最小值
step	规定合法的数字间隔（如果step=”3″，则合法的数是-3,0,3,6 等）
value	规定默认值

 

Input类型 - Date Pickers（数据检出器） 

HTML5拥有多个可供选取日期和时间的新输入类型：

类型	描述
date	选取日、月、年
month	选取月、年
week	选取周和年
time	选取时间（小时和分钟）
datetime	选取时间、日、月、年（UTC 时间）
datetime-local	选取时间、日、月、年（本地时间）

示例：Date: <input type=”date” name=”user_date” />

 

Input类型 - search

search类型用于搜索域，比如站点搜索或Google 搜索。search域显示为常规的文本域。