HTML5笔记一

傷城~ 2022-07-19 12:40 187阅读 0赞

转载地址：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>

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

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

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

示例：

Your browser does not support the video tag.

</video>

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

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

示例：

Your browser does not support the video tag.

</video>

<video> 标签的属性

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(75,75,75); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:20.8px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto"><span style="">属性&nbsp;</span></p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto"><span style="">描述&nbsp;</span></p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">autoplay</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">视频在就绪后马上播放</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">controls</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">向用户显示控件（比如播放按钮）</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">height</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">设置视频播放器的高度</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">width</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">设置视频播放器的宽度</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">loop</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">当媒介文件完成播放后再次开始播放</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">preload</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">视频在页面加载时进行加载并预备播放（若使用autoplay，则忽略该属性）</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">src</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">要播放的视频的URL</p> </td> 
  </tr> 
 </tbody> 
</table>

HTML5音频

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

音频格式

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

如何工作

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

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

示例：

Your browser does not support the audio tag.

</audio>

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

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

示例：

Your browser does not support the audio tag.

</audio>

<audio> 标签的属性

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(75,75,75); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:20.8px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">属性<span style="">&nbsp;</span></p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">描述<span style="">&nbsp;</span></p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">autoplay<span style="">&nbsp;</span></p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">音频在就绪后马上播放<span style="">&nbsp;</span></p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">controls<span style="">&nbsp;</span></p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">向用户显示控件（比如播放按钮）<span style="">&nbsp;</span></p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">preload<span style="">&nbsp;</span></p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">音频在页面加载时进行加载并预备播放（若使用autoplay，则忽略该属性）<span style="">&nbsp;</span></p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">src<span style="">&nbsp;</span></p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">要播放的音频的URL<span style="">&nbsp;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

HTML5 Web存储

在客户端存储数据

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

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

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

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

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

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

localStorage 方法

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

创建和访问localStorage：

localStorage.lastname = ”Smith”;

document.write(localStorage.lastname);

</script>

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

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：

sessionStorage.lastname = ”Smith”;

document.write(sessionStorage.lastname);

</script>

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

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″ />

Input类型 - range

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

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

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

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(75,75,75); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:20.8px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">类型</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">描述</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">date</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">选取日、月、年</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">month</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">选取月、年</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">week</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">选取周和年</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">time</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">选取时间（小时和分钟）</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">datetime</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">选取时间、日、月、年（UTC 时间）</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">datetime-local</p> </td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> <p style="margin:10px auto">选取时间、日、月、年（本地时间）</p> </td> 
  </tr> 
 </tbody> 
</table>

示例：Date: <input type=”date” name=”user\_date” />

Input类型 - search

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