简介

HTML5是取代HTML 4.01，XHTML 1.0和XHTML 1.1的HTML标准的下一个主要修订版。HTML5是在万维网上构建和呈现内容的标准。

HTML5是万维网联盟（W3C）和Web超文本应用技术工作组（WHATWG）之间的合作。

新标准包含以前依赖于第三方浏览器插件（如Adobe Flash，Microsoft Silverlight和Google Gears）的视频播放和拖放等功能。

浏览器支持

Apple Safari，Google Chrome，Mozilla Firefox和Opera的最新版本都支持许多HTML5功能，Internet Explorer 9.0也支持某些HTML5功能。

预装在iPhone，iPad和Android手机上的移动网络浏览器都对HTML5提供了出色的支持。

新功能

HTML5引入了许多新元素和属性，可以帮助您构建现代网站。以下是HTML5中引入的一些最突出的功能。

新的语义元素 - 这些元素类似于<header>，<footer>和<section>。
Forms 2.0 - HTML网页表单的改进，其中为 <input>标记引入了新属性。
持久本地存储 - 无需借助第三方插件即可实现。
WebSocket - 用于Web应用程序的下一代双向通信技术。
服务器发送事件 - HTML5引入了从Web服务器流向Web浏览器的事件，它们称为服务器发送事件（SSE）。
画布 - 这支持可以使用JavaScript编程的二维绘图表面。
音频和视频 - 您可以在网页上嵌入音频或视频，而无需借助第三方插件。
地理位置 - 现在访问者可以选择与您的Web应用程序共享其物理位置。
微数据 - 这使您可以在HTML5之外创建自己的词汇表，并使用自定义语义扩展您的网页。
拖放 - 将项目从一个位置拖放到同一网页上的另一个位置。

向后兼容性

HTML5尽可能设计为与现有Web浏览器向后兼容。它的新功能基于现有功能，允许您为旧版浏览器提供后备内容。

建议使用几行JavaScript检测对各个HTML5功能的支持。

语法

HTML 5语言具有“自定义”HTML语法，该语法与Web上发布的HTML 4和XHTML1文档兼容，但与HTML 4的更深奥的SGML功能不兼容。

HTML 5与XHTML没有相同的语法规则，我们需要小写标签名称，引用我们的属性，属性必须有一个值并关闭所有空元素。

HTML5具有很大的灵活性，它支持以下功能 −

大写标记名称。
引号对于属性是可选的。
属性值是可选的。
关闭空元素是可选的。

DOCTYPE

旧版HTML中的DOCTYPE较长，因为HTML语言是基于SGML的，因此需要引用DTD。

HTML 5作者将使用简单的语法来指定DOCTYPE，如下所示 −

<!DOCTYPE html>

以上语法不区分大小写。

字符编码

HTML 5作者可以使用简单的语法来指定字符编码，如下所示 −

<```meta c h a r s e t = "UTF-8">

以上语法不区分大小写。

<```s c r i p t>标签

通常的做法是将一个值为"text/javascript"的type属性添加到脚本元素中，如下所示 −

<```s c r i p t type = "text/javascript" src = "scriptfile.js"></script>

HTML 5删除了所需的额外信息，您可以使用以下语法 −

<```s c r i p t src = "scriptfile.js"></script>

<```l i n k>标签

到目前为止，您正在编写<```l i n k>，如下所示 −

<```l i n k rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5删除了所需的额外信息，您只需使用以下语法 −

<```l i n k rel = "stylesheet" href = "stylefile.css">

HTML5 元素

HTML5元素使用开始标记和结束标记进行标记。标签使用尖括号分隔，标签名称介于两者之间。

开始标记和结束标记之间的区别在于后者在标记名称之前包含斜杠。

以下是HTML5元素的示例 −

<```p>...</p>

HTML5标记名称不区分大小写，可以全部大写或混合大小写，但最常见的约定是坚持使用小写。

大多数元素包含一些内容，如<p>...</p>包含一个段落。但是，有些元素根本不包含任何内容，这些元素称为void元素。例如，br，hr，link，meta等。

HTML5 属性

元素可能包含用于设置元素的各种属性的属性。

某些属性是全局定义的，可以在任何元素上使用，而其他属性仅针对特定元素定义。所有属性都有一个名称和一个值，如下例所示。

以下是HTML5属性的示例，该属性说明了如何使用值"example"标记具有名为class的属性的div元素 −

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

属性只能在开始标记中指定，绝不能在结束标记中使用。

HTML5属性不区分大小写，可以全部大写或混合大小写，但最常见的约定是坚持使用小写。

HTML5 文档

为了更好的结构，引入了以下标签 −

section − 此标记表示通用文档或应用程序部分。它可以与h1-h6一起使用来指示文档结构。
article − 此标记表示文档的独立内容，例如博客文章或报纸文章。
aside − 此标记表示一段内容，该内容仅与页面的其余部分略有关联。
header − 此标记表示节的标题。
footer − 此标记表示某个部分的页脚，可以包含有关作者，版权信息等的信息。
nav − 此标记表示用于导航的文档的一部分。
dialog − 此标记可用于标记对话。
figure − 此标记可用于将标题与某些嵌入内容（如图形或视频）相关联。

HTML 5文档的标记如下所示 −

<!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>

<!DOCTYPE html>  

<html>  
   <head> 
	  <meta charset = "utf-8"> 
	  <title>...</title> 
   </head> 
  
   <body> 
	  <header role = "banner"> 
		 <h1>HTML5 Document Structure Example</h1> 
		 <p>This page should be tried in safari, chrome or Mozila.</p> 
	  </header> 
   
	  <nav> 
		 <ul> 
			<li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
			<li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
			<li><a href = "https://www.tutorialspoint.com/javascript">
			JavaScript Tutorial</a></li> 
		 </ul> 
	  </nav> 
   
	  <article> 
		 <section> 
			<p>Once article can have multiple sections</p>
		 </section> 
	  </article> 
   
	  <aside> 
		 <p>This is  aside part of the web page</p> 
	  </aside> 
   
	  <footer> 
		 <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
	  </footer> 
   
   </body> 
</html>

属性

如前一章所述，元素可能包含用于设置元素的各种属性的属性。

某些属性是全局定义的，可以在任何元素上使用，而其他属性仅针对特定元素定义。所有属性都有一个名称和一个值，如下例所示。

以下是HTML5属性的示例，其中说明了如何使用值“example”标记具有名为class的属性的div元素 −

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

属性只能在开始标记中指定，绝不能在结束标记中使用。

HTML5属性不区分大小写，可以全部大写或混合大小写，但最常见的约定是坚持使用小写。

标准属性

几乎所有HTML 5标记都支持下面列出的属性。

属性	选项	功能
accesskey	User Defined	指定用于访问元素的键盘快捷方式。
align	right, left, center	水平对齐标签
background	URL	在元素后面放置背景图像
bgcolor	numeric, hexidecimal, RGB values	在元素后面放置背景颜色
class	User Defined	对用于层叠样式表的元素进行分类。
contenteditable	true, false	指定用户是否可以编辑元素的内容。
contextmenu	Menu id	指定元素的上下文菜单。
data-XXXX	User Defined	自定义属性。HTML文档的作者可以定义自己的属性。必须以“data-”开头。
draggable	true,false, auto	指定是否允许用户拖动元素。
height	Numeric Value	指定表，图像或表格单元格的高度。
hidden	hidden	指定元素是否应该可见。
id	User Defined	命名用于层叠样式表的元素。
item	List of elements	用于分组元素。
itemprop	List of items	用于分组项目。
spellcheck	true, false	指定元素是否必须检查拼写或语法。
style	CSS Style sheet	指定元素的内联样式。
subject	User define id	指定元素的相应项。
tabindex	Tab number	指定元素的Tab键顺序。
title	User Defined	元素的“弹出”标题。
valign	top, middle, bottom	垂直对齐HTML元素中的标记。
width	数值	指定表，图像或表格单元格的宽度。

自定义属性

HTML 5中引入的新功能是添加自定义数据属性。

自定义数据属性以数据开头，并根据您的要求命名。这是一个简单的例子 −

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

上面的代码将是完全有效的HTML5，其中包含两个名为datasubject和data-level的自定义属性。您可以使用JavaScript API或CSS以与标准属性类似的方式获取这些属性的值。

事件

当用户访问您的网站时，他们会执行各种活动，例如单击文本和图像以及链接，将鼠标悬停在已定义的元素上等。这些是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	准备状态改变时触发
onredo	script	文档执行重做时触发
onresize	script	调整窗口大小时触发
onscroll	script	滚动元素的滚动条时触发
onseeked	script	当媒体元素的搜索属性不再为真时触发，并且搜索已经结束
onseeking	script	当媒体元素的搜索属性为真时触发，并且搜索已经开始
onselect	script	选择元素时触发
onstalled	script	在获取媒体数据时出现错误时触发
onstorage	script	文档加载时触发
onsubmit	script	提交表单时触发
onsuspend	script	浏览器获取媒体数据时触发，但在获取整个媒体文件之前停止
ontimeupdate	script	媒体更改其播放位置时触发
onundo	script	文档执行撤消时触发
onunload	script	用户离开文档时触发
onvolumechange	script	媒体更改音量时触发，当音量设置为“静音”时触发
onwaiting	script	媒体停止播放时触发，但预计会恢复

Web Forms 2.0

Web Forms 2.0是HTML4中的表单功能的扩展。HTML5中的表单元素和属性提供了比HTML4更大程度的语义标记，并使我们免于HTML4中所需的大量繁琐的脚本和样式。

HTML4中的<input>元素

HTML4输入元素使用type属性指定数据类型.HTML4提供以下类型 −

序号	类型 & 描述
1	text 一个自由格式的文本字段，名义上没有换行符。
2	password 用于敏感信息的自由格式文本字段，名义上没有换行符。
3	checkbox 预定义列表中的一组零个或多个值。
4	radio 枚举值。
5	submit 按钮启动表单提交。
6	file 具有MIME类型和可选文件名的任意文件。
7	image 一个坐标，相对于特定图像的大小，具有额外的语义，它必须是最后选择的值并启动表单提交。
8	hidden 通常不向用户显示的任意字符串。
9	select 枚举值
10	textarea 一个自由格式的文本字段，名义上没有换行限制。
11	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属性引入了几个新值。这些列在下面。

序号	类型 & 描述
1	datetime 根据ISO 8601编码的日期和时间（年，月，日，小时，分钟，秒，分数），时区设置为UTC。
2	datetime-local 根据ISO 8601编码的日期和时间（年，月，日，小时，分钟，秒，分数），没有时区信息。
3	date 根据ISO 8601编码的日期（年，月，日）。
4	month 包含根据ISO 8601编码的年份和月份的日期。
5	week 包含根据ISO 8601编码的年份和周数的日期。
6	time 根据ISO 8601编码的时间（小时，分钟，秒，小数秒）。
7	number 它只接受数值。step属性指定精度，默认为1。
8	range 范围类型用于输入字段，该字段应包含一系列数字中的值。
9	email 它只接受电子邮件价值。此类型用于应包含电子邮件地址的输入字段。如果您尝试提交简单文本，则会强制仅以email@example.com格式输入电子邮件地址。
10	url 它只接受URL值。此类型用于应包含URL地址的输入字段。如果您尝试提交简单文本，则会强制仅以http://www.example.com格式或http://example.com格式输入网址。

<output>元素

HTML5引入了一个新元素，用于表示不同类型输出的结果，例如脚本编写的输出。

您可以使用for属性指定输出元素与文档中影响计算的其他元素之间的关系（例如，作为输入或参数）。for属性的值是以空格分隔的其他元素的ID列表。

<!DOCTYPE HTML>

<html>
   <head>
	  <script type = "text/javascript">
		 
		 function showResult() {
			x = document.forms["myform"]["newinput"].value;
			document.forms["myform"]["result"].value = x;
		 }
	  </script>
   </head>
   
   <body>

	  <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
		 Enter a value : <input type = "text" name = "newinput" />
		 <input type = "button" value = "Result"  onclick = "showResult();" />
		 <output name = "result"></output>
	  </form>
		
   </body>
</html>

占位符属性

HTML5引入了一个名为placeholder的新属性。<input> 和 <textarea>元素上的此属性为用户提供了可在字段中输入内容的提示。占位符文本不得包含回车符或换行符。

以下是占位符属性的简单语法 −

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

此属性仅受最新版本的Mozilla，Safari和Crome浏览器支持。

<!DOCTYPE HTML>

<html>
   <body>

	  <form action = "/cgi-bin/html5.cgi" method = "get">
		 Enter email : <input type = "email" name = "newinput" 
			placeholder = "email@example.com"/>
		 <input type = "submit" value = "submit" />
	  </form>

   </body>
</html>

autofocus属性

这是一个简单的一步式模式，在文档加载时可以在JavaScript中轻松编程，自动聚焦一个特定的表单字段。

HTML5引入了一个名为autofocus的新属性，可以按如下方式使用 −

<input type = "text" name = "search" autofocus/>

此属性仅受最新版本的Mozilla，Safari和Chrome浏览器支持。

<!DOCTYPE HTML>

<html>
   <body>
   
	  <form action = "/cgi-bin/html5.cgi" method = "get">
		 Enter email : <input type = "text" name = "newinput" autofocus/>
		 <p>Try to submit using Submit button</p>
		 <input type = "submit" value = "submit" />
	  </form>
	  
   </body>
</html>

required属性

现在你不需要使用JavaScript来进行客户端验证，就像永远不会提交空文本框一样，因为HTML5引入了一个名为required的新属性，该属性将按如下方式使用，并且会坚持使用 −

<input type = "text" name = "search" required/>

此属性仅受最新版本的Mozilla，Safari和Chrome浏览器支持。

<!DOCTYPE HTML>

<html>
   <body>
   
	  <form action = "/cgi-bin/html5.cgi" method = "get">
		 Enter email : <input type = "text" name = "newinput" required/>
		 <p>Try to submit using Submit button</p>
		 <input type = "submit" value = "submit" />
	  </form>
	  
   </body>
</html>

SVG

SVG代表可缩放矢量图形，它是一种用XML描述2D图形和图形应用程序的语言，然后由SVG查看器呈现XML。

SVG主要用于矢量类型图，如饼图，X，Y坐标系中的二维图等。

查看SVG文件

大多数Web浏览器都可以显示SVG，就像它们可以显示PNG，GIF和JPG一样。Internet Explorer用户可能必须安装Adobe SVG Viewer才能在浏览器中查看SVG。

在HTML5中嵌入SVG

HTML5允许使用<svg>...</svg>标签直接嵌入SVG ，该标签具有以下简单语法 −

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7还引入了一个配置选项("about:config")，您可以使用以下步骤启用HTML5−

类型配置：关于在Firefox地址栏中。
点击"我会小心，我保证！" 出现的警告消息上的按钮（并确保您遵守它！）。
键入html5.enable到页面顶部的过滤栏。
目前它将被禁用，因此单击它将值切换为true。

现在应该启用Firefox HTML5解析器，您应该能够尝试以下示例。

HTML5 - SVG Circle

以下是SVG示例的HTML5版本，它将使用<circle>标记绘制一个圆圈 −

<!DOCTYPE html>

<html>
   <head>
   
	  <style>
		 #svgelem {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-20%);
			-ms-transform: translateX(-20%);
			transform: translateX(-20%);
		 }
	  </style>
	  <title>SVG</title>
	  <meta charset = "utf-8" />
   </head>
   
   <body>
	  <h2 align = "center">HTML5 SVG Circle</h2>
		
	  <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
		 <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
	  </svg>
   </body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

HTML5 SVG Circle

HTML5 − SVG Rectangle

以下是使用<rect>标签绘制矩形的SVG示例的HTML5版本−

<!DOCTYPE html>

<html>
   <head>
   
	  <style>
		 #svgelem {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
		 }
	  </style>
	  <title>SVG</title>
	  <meta charset = "utf-8" />
   </head>
   
   <body>
	  <h2 align = "center">HTML5 SVG Rectangle</h2>
	  
	  <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
		 <rect id = "redrect" width = "300" height = "100" fill = "red" />
	  </svg>
   </body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

HTML5 SVG Rectangle

HTML5 − SVG Line

以下是SVG示例的HTML5版本，它将使用<line>标记绘制一条线 −

<!DOCTYPE html>

<html>
   <head>
	  
	  <style>
		 #svgelem {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
		 }
	  </style>
	  <title>SVG</title>
	  <meta charset = "utf-8" />
   </head>
   
   <body>
	  <h2 align = "center">HTML5 SVG Line</h2>
	  
	  <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
		 <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
			style = "stroke:red;stroke-width:2"/>
	  </svg>
   </body>
</html>

您可以使用style属性，该属性允许您设置其他样式信息，如笔触和填充颜色，笔划宽度等。

这将在启用HTML5的最新版Firefox中产生以下结果。

HTML5 SVG Line

HTML5 − SVG Ellipse

以下是SVG示例的HTML5版本，它将使用<ellipse>标记绘制椭圆−

<!DOCTYPE html>

<html>
   <head>
	  
	  <style>
		 #svgelem {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-40%);
			-ms-transform: translateX(-40%);
			transform: translateX(-40%);
		 }
	  </style>
	  <title>SVG</title>
	  <meta charset = "utf-8" />
   </head>
	
   <body>
	  <h2 align = "center">HTML5 SVG Ellipse</h2>
	  
	  <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
		 <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
	  </svg>
		
   </body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

HTML5 SVG Ellipse

HTML5 − SVG Polygon

以下是使用<polygon>标签绘制多边形的SVG示例的HTML5版本 −

<!DOCTYPE html>

<html>
   <head>
   
	  <style>
		 #svgelem {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
		 }
	  </style>
	  <title>SVG</title>
	  <meta charset = "utf-8" />
   </head>
	
   <body>
	  <h2 align = "center">HTML5 SVG Polygon</h2>
	  
	  <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
		 <polygon  points = "20,10 300,20, 170,50" fill = "red" />
	  </svg>
   </body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

HTML5 SVG Polygon

HTML5 − SVG Polyline

以下是SVG示例的HTML5版本，它将使用<polyline> 标记绘制折线 −

<!DOCTYPE html>

<html>
   <head>
	  
	  <style>
		 #svgelem {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-20%);
			-ms-transform: translateX(-20%);
			transform: translateX(-20%);
		 }
	  </style>
	  <title>SVG</title>
	  <meta charset = "utf-8" />
   </head>
	
   <body>
	  <h2 align = "center">HTML5 SVG Polyline</h2>
	  <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
		 <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
	  </svg>
   </body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

HTML5 SVG Polyline

HTML5 − SVG渐变

<p以下是svg示例的html5版本，它将使用<ellipse>标记绘制椭圆，并使用<radialgradient>标记来定义svg径向渐变。< p="" >

同样，您可以使用<linearGradient>标签创建SVG线性渐变。

<!DOCTYPE html>

<html>
   <head>
	  
	  <style>
		 #svgelem {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-40%);
			-ms-transform: translateX(-40%);
			transform: translateX(-40%);
		 }
	  </style>
	  <title>SVG</title>
	  <meta charset = "utf-8" />
   </head>
	
   <body>
	  <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
	  
	  <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
		 <defs>
			<radialGradient   cx = "50%" cy = "50%" r = "50%" fx = "50%" 
			   fy = "50%">
			   <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
			   <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
			</radialGradient>
		 </defs>
		 <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
			style = "fill:url(#gradient)" />
	  </svg>
		
   </body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

HTML5 SVG Gradient Ellipse

HTML5 − SVG Star

以下是SVG示例的HTML5版本，它将使用<polygon>标记绘制星形。

<html>
   <head>
   
	  <style>
		 #svgelem {
			position: relative;
			left: 50%;
			-webkit-transform: translateX(-40%);
			-ms-transform: translateX(-40%);
			transform: translateX(-40%);
		 }
	  </style>
	  <title>SVG</title>
	  <meta charset = "utf-8" />
   </head>
   
   <body>	
	  <h2 align = "center">HTML5 SVG Star</h2>
	  
	  <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
		 <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
	  </svg>
	</body>
</html>

这将在启用HTML5的最新版Firefox中产生以下结果。

HTML5 SVG Star

</p以下是svg示例的html5版本，它将使用<ellipse>标记绘制椭圆，并使用<radialgradient>标记来定义svg径向渐变。<>

MathML

HTML5的HTML语法允许使用<math>...</math> 标记在文档中使用MathML元素。

大多数Web浏览器都可以显示MathML标记。如果您的浏览器不支持MathML，那么我建议您使用最新版本的Firefox。

MathML示例

以下是带有MathML的有效HTML5文档−

<!doctype html>

<html>
   <head>
	  <meta charset = "UTF-8">
	  <title>Pythagorean theorem</title>
   </head>
	
   <body>
	  <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
		 <mrow>
			<msup><mi>a</mi><mn>2</mn></msup>
			<mo>+</mo>
				
			<msup><mi>b</mi><mn>2</mn></msup>
			<mo> = </mo>
				
			<msup><mi>c</mi><mn>2</mn></msup>
		 </mrow>
			
	  </math>
   </body>
</html>

这将产生以下结果−

a2+b2=c2

使用MathML字符

考虑以下是使用字符和InvisibleTimes的标记 −

<!doctype html>

<html>
   <head>
	  <meta charset = "UTF-8">
	  <title>MathML Examples</title>
   </head>
	
   <body>
	  <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
		 <mrow>			
			<mrow>
				
			   <msup>
				  <mi>x</mi>
				  <mn>2</mn>
			   </msup>
					
			   <mo>+</mo>
					
			   <mrow>
				  <mn>4</mn>
				  <mo>⁢</mo>
				  <mi>x</mi>
			   </mrow>
					
			   <mo>+</mo>
			   <mn>4</mn>
					
			</mrow>
				
			<mo>=</mo>
			<mn>0</mn>
				 
		 </mrow>
	  </math>
   </body>
</html>

这将产生以下结果。如果您无法看到² + 4x + 4 = 0等正确结果，请使用Firefox 3.5或更高版本。

这将产生以下结果 −

x2+4⁢x+4=0

矩阵演示示例

考虑以下用于表示简单2x2矩阵的示例 −

<!doctype html>

<html>
   <head>
	  <meta charset = "UTF-8">
	  <title>MathML Examples</title>
   </head>
	
   <body>
	  <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
		 <mrow>
			<mi>A</mi>
			<mo>=</mo>
			
			<mfenced open = "[" close="]">
			
			   <mtable>
				  <mtr>
					 <mtd><mi>x</mi></mtd>
					 <mtd><mi>y</mi></mtd>
				  </mtr>
					
				  <mtr>
					 <mtd><mi>z</mi></mtd>
					 <mtd><mi>w</mi></mtd>
				  </mtr>
			   </mtable>
			   
			</mfenced>
		 </mrow>
	  </math>

   </body>
</html>

这将产生以下结果 −

A=xyzw

这将产生以下结果。如果您无法看到正确的结果，请使用Firefox 3.5或更高版本。

Web存储

HTML5引入了两种机制，类似于HTTP会话cookie，用于在客户端存储结构化数据并克服以下缺点。

每个HTTP请求都包含Cookie，从而通过传输相同的数据来减慢Web应用程序的速度。
每个HTTP请求都包含Cookie，从而通过Internet发送未加密的数据。
Cookie限制为大约4 KB的数据。不足以存储所需的数据。

这两个存储是会话存储和本地存储，它们将用于处理不同的情况。

几乎所有浏览器的最新版本都支持HTML5存储，包括Internet Explorer。

会话存储

该会话存储被设计用于向用户进行单次交易的情况，但在同一时间可以执行在不同的窗口多笔交易。

例子

例如，如果用户在两个不同的窗口中购买机票，则使用相同的站点。如果该站点使用cookie来跟踪用户购买的票证，那么当用户在两个窗口中从一页到另一页点击时，当前正在购买的票证将从一个窗口“泄漏”到另一个窗口，这可能导致用户在没有真正注意到的情况下为同一航班买两张票。

HTML5引入了sessionStorage属性，站点将使用该属性将数据添加到会话存储中，并且可以访问该窗口中打开的同一站点的任何页面，即会话，并且只要关闭窗口，会话将丢失。

以下是设置会话变量并访问该变量的代码−

<!DOCTYPE HTML>

<html>
   <body>
	  <script type = "text/javascript">
		 
		 if( sessionStorage.hits ) {
			sessionStorage.hits = Number(sessionStorage.hits) +1;
		 } else {
			sessionStorage.hits = 1;
		 }
		 document.write("Total Hits :" + sessionStorage.hits );
	  </script>
	
	  <p>Refresh the page to increase number of hits.</p>
	  <p>Close the window and open it again and check the result.</p>

   </body>
</html>

这将产生以下结果 −

Total Hits :2

Refresh the page to increase number of hits.

Close the window and open it again and check the result.

本地存储

在本地存储是专为存储跨越多个窗口，并持续在当前会话结束。特别是，出于性能原因，Web应用程序可能希望在客户端存储兆字节的用户数据，例如整个用户创作的文档或用户的邮箱。

同样，cookie不能很好地处理这种情况，因为它们随每个请求一起传输。

例子

HTML5引入了localStorage属性，该属性将用于访问页面的本地存储区域，没有任何时间限制，只要您使用该页面，此本地存储就可用。

以下是每次访问此页面时设置本地存储变量并访问该变量的代码，即使下次打开窗口时也是如此 −

<!DOCTYPE HTML>

<html>
   <body>
	  <script type = "text/javascript">
		 
		 if( localStorage.hits ) {
			localStorage.hits = Number(localStorage.hits) +1;
		 } else {
			localStorage.hits = 1;
		 }
		 document.write("Total Hits :" + localStorage.hits );
	  </script>
		
	  <p>Refresh the page to increase number of hits.</p>
	  <p>Close the window and open it again and check the result.</p>

   </body>
</html>

这将产生以下结果 −

Total Hits :2

Refresh the page to increase number of hits.

Close the window and open it again and check the result.

删除Web存储

在本地计算机上存储敏感数据可能很危险，并且可能会留下安全漏洞。

该会话存储的数据将被浏览器中删除会话被终止之后。

要清除本地存储设置，您需要调用localStorage.remove（'key'） ; 其中'key'是您要删除的值的键。如果要清除所有设置，则需要调用localStorage.clear（）方法。

以下是清除完整本地存储的代码 −

<!DOCTYPE HTML>

<html>
   <body>

	  <script type = "text/javascript">
		 localStorage.clear();

		 // Reset number of hits.
		 if( localStorage.hits ) {
			localStorage.hits = Number(localStorage.hits) +1;
		 } else {
			localStorage.hits = 1;
		 }
		 document.write("Total Hits :" + localStorage.hits );
			
	  </script>
		
	  <p>Refreshing the page would not to increase hit counter.</p>
	  <p>Close the window and open it again and check the result.</p>

   </body>
</html>

这将产生以下结果 −

Total Hits :1

Refreshing the page would not to increase hit counter.

Close the window and open it again and check the result.

Web SQL数据库

Web SQL数据库API实际上不是HTML5规范的一部分，但它是一个单独的规范，它引入了一组API来使用SQL操作客户端数据库。

我假设你是一个伟大的Web开发人员，如果是这样的话，毫无疑问，你会很清楚SQL和RDBMS的概念。如果您仍希望与SQL进行会话，则可以查看SQL教程

Web SQL数据库可以在最新版本的Safari，Chrome和Opera中使用。

核心方法

我将在本教程中介绍规范中定义的以下三种核心方法 −

openDatabase - 此方法使用现有数据库或创建新数据库来创建数据库对象。
transaction - 此方法使我们能够根据情况控制事务并执行提交或回滚。
executeSql - 此方法用于执行实际的SQL查询。

打开数据库

openDatabase方法需要打开一个数据库，如果它已经存在，此方法将创建它，如果它已经不存在的照顾。

要创建和打开数据库，请使用以下代码 −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

以上方法采用以下五个参数 −

数据库名称
版本号
文字说明
数据库的大小
创建回调

如果正在创建数据库，则将调用最后一个和第五个参数创建回调。但是，如果没有此功能，数据库仍在动态创建并正确版本化。

执行查询

要执行查询，请使用database.transaction（）函数。这个函数需要一个参数，这是一个负责实际执行查询的函数，如下所示 −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

上面的查询将在'mydb'数据库中创建一个名为LOGS的表。

插入操作

要在表中创建enteries，我们在上面的示例中添加简单的SQL查询，如下所示 −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

我们可以在创建输入时传递动态值，如下所示 −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

这里e_id和e_log是外部变量，executeSql将数组参数中的每个项映射到"?".

读取操作

要读取已有的记录，我们使用回调来捕获结果，如下所示 −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
	  var len = results.rows.length, i; 
	  msg = "<p>Found rows: " + len + "</p>"; 
	  document.querySelector('#status').innerHTML +=  msg; 
  
	  for (i = 0; i < len; i++) { 
		 alert(results.rows.item(i).log ); 
	  } 
  
   }, null); 
});

例子

最后，让我们将这个示例保存在完整的HTML5文档中，如下所示，并尝试使用Safari浏览器运行它。

<!DOCTYPE HTML> 

<html>  
   <head> 
  
	  <script type = "text/javascript"> 
		 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
		 var msg; 
	
		 db.transaction(function (tx) { 
			tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
			tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
			tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
			msg = '<p>Log message created and row inserted.</p>'; 
			document.querySelector('#status').innerHTML =  msg; 
		 })

		 db.transaction(function (tx) { 
			tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
			   var len = results.rows.length, i; 
			   msg = "<p>Found rows: " + len + "</p>"; 
			   document.querySelector('#status').innerHTML +=  msg; 
	  
			   for (i = 0; i < len; i++) { 
				  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
				  document.querySelector('#status').innerHTML +=  msg; 
			   } 
			}, null); 
		 }); 
	  </script> 
   </head> 
  
   <body> 
	  <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

服务器发送的事件

传统的Web应用程序生成分派给Web服务器的事件。例如，只需单击链接就可以从服务器请求新页面。

从Web浏览器流向Web服务器的事件类型可以称为客户端发送的事件。

与HTML5一起，WHATWG Web Applications 1.0引入了从Web服务器流向Web浏览器的事件，它们被称为服务器发送事件（SSE）。使用SSE，您可以将DOM事件从Web服务器连续推送到访问者的浏览器。

事件流方法打开与服务器的持久连接，在有新信息时将数据发送到客户端，无需连续轮询。

服务器发送的事件标准化了我们如何将数据从服务器流式传输到客户端。

SSE的Web应用程序

要在Web应用程序中使用Server-Sent Events，您需要在文档中添加<eventsource>元素。

<eventsource>元素的src属性应指向一个URL，该URL应提供发送包含事件的数据流的持久HTTP连接。

URL将指向PHP，PERL或任何Python脚本，它将负责一致地发送事件数据。以下是Web应用程序的一个简单示例，它可能需要服务器时间。

<!DOCTYPE HTML>
	
<html>
	<head>
	
		<script type = "text/javascript">
			/* Define event handling logic here */
		</script>
	</head>
	
	<body>
		<div id = "sse">
			<eventsource src = "/cgi-bin/ticker.cgi" />
		</div>
	
		<div id = "ticker">
			<TIME>
		</div>
	</body>
</html>

SSE的服务器端脚本

服务器端脚本应发送指定类型text/event-stream的Content-type头，如下所示。

print "Content-Type: text/event-stream\n\n";

设置Content-Type后，服务器端脚本将发送一个Event：标签，后跟事件名称。下面的示例将发送Server-Time作为由新行字符终止的事件名称。

print "Event: server-time\n";

最后一步是使用Data：标签发送事件数据，后面跟一个由新行字符终止的字符串值的整数，如下所示 −

$time = localtime();
print "Data: $time\n";

最后，以下是用Perl编写的完整ticker.cgi −

#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
	
while(true) {
	print "Event: server-time\n";
	$time = localtime();
	print "Data: $time\n";
	sleep(5);
}

处理服务器发送的事件

让我们修改我们的Web应用程序来处理服务器发送的事件。以下是最后一个例子。

<!DOCTYPE HTML>
	
	<html>
		<head>
		<script type = "text/javascript">
			document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
				eventHandler, false);
	
			function eventHandler(event) {
	
				// Alert time sent by the server
				document.querySelector('#ticker').innerHTML = event.data;
			}
		</script>
		</head>
	
	<body>
		<div id = "sse">
			<eventsource src = "/cgi-bin/ticker.cgi" />
		</div>
	
		<div id = "ticker" name = "ticker">
			[TIME]
		</div>
	</body>
</html>

在测试Server-Sent事件之前，我建议您确保您的Web浏览器支持此概念。

WebSocket

WebSockets是Web应用程序的下一代双向通信技术，可在单个套接字上运行，并通过HTML 5兼容浏览器中的JavaScript接口公开。

一旦与Web服务器建立Web Socket连接，就可以通过调用send（）方法将数据从浏览器发送到服务器，并通过onmessage事件处理程序从服务器接收数据到浏览器。

以下是创建新WebSocket对象的API。

var Socket = new WebSocket(url, [protocal] );

这里的第一个参数url指定要连接的URL。第二个属性protocol是可选的，如果存在，则指定服务器必须支持的子协议才能使连接成功。

WebSocket属性

以下是WebSocket对象的属性。假设我们如上所述创建了Socket对象 −

序号	属性 & 描述
1	Socket.readyState readonly属性readyState表示连接的状态。它可以具有以下值 − 值为0表示尚未建立连接。值为1表示建立连接并且可以进行通信。值为2表示连接正在进行结束握手。值3表示连接已关闭或无法打开。
2	Socket.bufferedAmount readonly属性bufferedAmount表示使用send（）方法排队的UTF-8文本的字节数。

序号

属性 & 描述

Socket.readyState

readonly属性readyState表示连接的状态。它可以具有以下值 −

值为0表示尚未建立连接。
值为1表示建立连接并且可以进行通信。
值为2表示连接正在进行结束握手。
值3表示连接已关闭或无法打开。

Socket.bufferedAmount

readonly属性bufferedAmount表示使用send（）方法排队的UTF-8文本的字节数。

WebSocket事件

以下是与WebSocket对象关联的事件。假设我们如上所述创建了Socket对象 −

事件	事件处理程序	描述
open	Socket.onopen	建立套接字连接时会发生此事件。
message	Socket.onmessage	客户端从服务器接收数据时会发生此事件。
error	Socket.onerror	当通信中出现任何错误时，会发生此事件。
close	Socket.onclose	连接关闭时会发生此事件。

WebSocket方法

以下是与WebSocket对象关联的方法。假设我们如上所述创建了Socket对象 −

序号	方法和描述
1	Socket.send() 发送（数据）方法使用连接发送数据。
2	Socket.close() close（）方法将用于终止任何现有连接。

序号

方法和描述

Socket.send()

发送（数据）方法使用连接发送数据。

Socket.close()

close（）方法将用于终止任何现有连接。

WebSocket例子

WebSocket是客户端和服务器之间的标准双向TCP套接字。套接字以HTTP连接开始，然后在HTTP握手后“升级”到TCP套接字。握手后，任何一方都可以发送数据。

客户端HTML和JavaScript代码

在编写本教程时，只有少数Web浏览器支持WebSocket（）接口。您可以尝试使用最新版Chrome，Mozilla，Opera和Safari的示例。

<!DOCTYPE HTML>
	
<html>
	<head>
	
		<script type = "text/javascript">
		function WebSocketTest() {
		
			if ("WebSocket" in window) {
				alert("WebSocket is supported by your Browser!");
			
				// Let us open a web socket
				var ws = new WebSocket("ws://localhost:9998/echo");
				
				ws.onopen = function() {
				
					// Web Socket is connected, send data using send()
					ws.send("Message to send");
					alert("Message is sent...");
				};
				
				ws.onmessage = function (evt) {
					var received_msg = evt.data;
					alert("Message is received...");
				};
				
				ws.onclose = function() {
				
					// websocket is closed.
					alert("Connection is closed...");
				};
			} else {
			
				// The browser doesn't support WebSocket
				alert("WebSocket NOT supported by your Browser!");
			}
		}
		</script>
	
	</head>
	
	<body>
		<div id = "sse">
			<a href = "javascript:WebSocketTest()">Run WebSocket</a>
		</div>
		
	</body>
</html>

安装pywebsocket

在测试上述客户端程序之前，您需要一个支持WebSocket的服务器。从pywebsocket下载mod_pywebsocket-xxxtar.gz ，旨在为Apache HTTP Server提供Web Socket扩展，并按照这些步骤安装它。

解压缩并解压缩下载的文件。
进入pywebsocket-xxx/src/目录。
$python setup.py build
$sudo python setup.py install
然后阅读文件 −
- $pydoc mod_pywebsocket

这将把它安装到你的python环境中。

启动服务器

转到pywebsocket-xxx/src/mod_pywebsocket文件夹并运行以下命令 −

$sudo python standalone.py -p 9998 -w ../example/

这将启动服务器侦听端口9998并使用-w选项指定的处理程序目录，其中echo_wsh.py位于其中。

现在使用Chrome浏览器打开您在开头创建的html文件。如果您的浏览器支持WebSocket（），那么您将获得警报，指示您的浏览器支持WebSocket，最后当您单击“运行WebSocket”时，您将收到服务器脚本发送的Goodbye消息。

画布

HTML5元素<canvas>为您提供了一种使用JavaScript绘制图形的简单而强大的方法。它可以用于绘制图形，制作照片合成或做简单（而不是那么简单）的动画。

这是一个简单的<canvas>元素，它只有两个特定属性width和height以及所有核心HTML5属性，如id，name和class等。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

您可以使用getElementById（）方法在DOM中轻松找到<canvas>元素，如下所示 −

var canvas = document.getElementById("mycanvas");

让我们看一个在HTML5文档中使用<canvas>元素的简单示例。

<!DOCTYPE HTML>
	
<html>
	<head>
	
	<style>
		#mycanvas{border:1px solid red;}
	</style>
	</head>
	
	<body>
		<canvas id = "mycanvas" width = "100" height = "100"></canvas>
	</body>
</html>

这将产生以下结果 −

渲染上下文

<canvas> 最初是空白的，为了显示某些内容，脚本首先需要访问渲染上下文并在其上绘制。

canvas元素有一个名为getContext的DOM方法，用于获取渲染上下文及其绘图函数。该函数采用一个参数，即上下文的类型2d。

以下是获取所需上下文的代码，并检查浏览器是否支持<canvas>元素 −

var canvas  = document.getElementById("mycanvas");
	
if (canvas.getContext) {
	var ctx = canvas.getContext('2d');
	// drawing code here
} else {
	
	// canvas-unsupported code here
}

浏览器支持

最新版本的Firefox，Safari，Chrome和Opera都支持HTML5 Canvas，但IE8本身不支持canvas。

您可以使用ExplorerCanvas通过Internet Explorer获得画布支持。你只需要包含这个JavaScript如下 −

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

HTML5画布示例

本教程介绍了与HTML5 <canvas>元素相关的以下示例。

序号	例子 & 描述
1	绘制矩形了解如何使用HTML5 <canvas>元素绘制矩形
2	绘图路径了解如何使用HTML5 <canvas>元素中的路径创建形状
3	绘图线了解如何使用HTML5 <canvas>元素绘制线条
4	绘制Bezier 了解如何使用HTML5 <canvas>元素绘制Bezier曲线
5	绘制二次方了解如何使用HTML5 <canvas>元素绘制二次曲线/p>
6	使用图像了解如何使用HTML5 <canvas>元素使用图像/p>
7	创建渐变了解如何使用HTML5 <canvas>元素创建渐变/p>
8	款式和颜色了解如何使用HTML5 <canvas>元素应用样式和颜色
9	文字和字体了解如何使用不同的字体及其大小绘制出色的文本。
10	图案和阴影了解如何绘制不同的图案和阴影。
11	画布状态了解如何在画布上执行复杂绘图时保存和恢复画布状态。
12	画布平移此方法用于将画布及其原点移动到网格中的不同点。
13	画布旋转此方法用于围绕当前原点旋转画布。
14	画布缩放此方法用于增加或减少画布网格中的单位。
15	画布变换这些方法允许直接修改转换矩阵。
16	画布组成此方法用于屏蔽某些区域或从画布中清除部分。
17	画布动画了解如何使用HTML5画布和JavaScript创建基本动画。

音频和视频

HTML5功能包括本机音频和视频支持，无需使用Flash。

HTML5 <audio>和<video>标签使得向网站添加媒体变得简单。您需要设置src属性以标识媒体源并包含控件属性，以便用户可以播放和暂停媒体。

嵌入视频

以下是在您的网页中嵌入视频文件的最简单形式 −

<video src = "foo.mp4"  width = "300" height = "200" controls>
	Your browser does not support the <video> element.
</video>

当前的HTML5草案规范未指定浏览器应在视频标记中支持哪些视频格式。但最常用的视频格式是 −

Ogg − 带有Thedora视频编解码器和Vorbis音频编解码器的Ogg文件。
mpeg4 − 带有H.264视频编解码器和AAC音频编解码器的MPEG4文件。

您可以使用<source>标记指定媒体以及媒体类型和许多其他属性。视频元素允许多个源元素，浏览器将使用第一个识别的格式 −

<!DOCTYPE HTML>
	
	<html>
	<body>
	
		<video  width = "300" height = "200" controls autoplay>
			<source src = "/html5/foo.ogg" type ="video/ogg" />
			<source src = "/html5/foo.mp4" type = "video/mp4" />
		Your browser does not support the <video> element.
		</video>
	
	</body>
</html>

视频属性规范

HTML5视频标签可以具有许多属性来控制外观和控件的各种功能 −

序号	属性和描述
1	autoplay 如果指定了此布尔属性，视频将在不停止完成加载数据的情况下自动开始播放。
2	autobuffer 如果指定此布尔属性，即使视频未设置为自动播放，视频也会自动开始缓冲。
3	controls 如果存在此属性，则允许用户控制视频播放，包括音量，搜索和暂停/恢复播放。
4	height 此属性以CSS像素为单位指定视频显示区域的高度。
5	loop 如果指定此布尔属性，将允许视频在到达结束后自动回到开始。
6	preload 此属性指定视频将在页面加载时加载，并准备运行。如果存在自动播放，则忽略。
7	poster 这是在用户播放或搜索之前显示的图像的URL。
8	src 要嵌入的视频的网址。这是可选的; 您可以改为使用视频块中的<source>元素来指定要嵌入的视频。
9	width 此属性以CSS像素为单位指定视频显示区域的宽度。

嵌入音频

HTML5支持<audio>标记，用于将声音内容嵌入HTML或XHTML文档中，如下所示

<audio src = "foo.wav" controls autoplay>
	Your browser does not support the <audio> element.
</audio>

当前的HTML5草案规范没有规定浏览器应该在音频标签中支持哪种音频格式。但最常用的音频格式是ogg，mp3和wav。

你可以使用<source> 标记以指定媒体以及媒体类型和许多其他属性。音频元素允许多个源元素，浏览器将使用第一个识别的格式 −

<!DOCTYPE HTML>
	
	<html>
	<body>
	
		<audio controls autoplay>
			<source src = "/html5/audio.ogg" type = "audio/ogg" />
			<source src = "/html5/audio.wav" type = "audio/wav" />
			Your browser does not support the <audio> element.
		</audio>
	
	</body>
</html>

音频属性规范

HTML5音频标签可以有许多属性来控制外观和控件的各种功能 −

序号	属性和描述
1	autoplay 如果指定了此布尔属性，音频将在不停止完成加载数据的情况下自动开始播放。
2	autobuffer 如果指定此布尔属性，即使音频未设置为自动播放，音频也会自动开始缓冲。
3	controls 如果存在此属性，则允许用户控制音频播放，包括音量，搜索和暂停/恢复播放。
4	loop 如果指定了此布尔属性，则允许音频在到达结尾后自动回溯到开头。
5	preload 此属性指定音频将在页面加载时加载，并准备运行。如果存在自动播放，则忽略。
6	src 要嵌入的音频的URL。这是可选的; 您可以改为使用视频块中的<source>元素来指定要嵌入的视频。

处理媒体事件

HTML5音频和视频标签可以具有许多属性，以使用JavaScript控制控件的各种功能 −

序号	事件和描述
1	abort 播放中止时会生成此事件。
2	canplay 当有足够的数据可以播放媒体时，会生成此事件。
3	ended 播放完成时会生成此事件。
4	error 发生错误时会生成此事件。
5	loadeddata 当媒体的第一帧完成加载时，将生成此事件。
6	loadstart 开始加载媒体时会生成此事件。
7	pause 暂停播放时会生成此事件。
8	play 播放开始或恢复时会生成此事件。
9	progress 定期生成此事件以通知下载媒体的进度。
10	ratechange 播放速度更改时会生成此事件。
11	seeked 搜索操作完成时会生成此事件。
12	seeking 搜索操作开始时会生成此事件。
13	suspend 暂停加载媒体时会生成此事件。
14	volumechange 音频音量更改时会生成此事件。
15	waiting 当所请求的操作（例如回放）被延迟等待另一操作（例如搜索）的完成时，产生该事件。

以下是允许播放给定视频的示例 −

<!DOCTYPE HTML>
	
<html>
	<head>
	
	<script type = "text/javascript">
		function PlayVideo() {
			var v = document.getElementsByTagName("video")[0];
			v.play();
		}
	</script>
	</head>
	
	<body>
	
	<form>
		<video width = "300" height = "200" src = "/html5/foo.mp4">
		Your browser does not support the video element.
		</video>
		<br />
		<input type = "button" onclick = "PlayVideo();" value = "Play"/>
	</form>
	
	</body>
</html>

配置媒体类型的服务器

默认情况下，大多数服务器不提供具有正确MIME类型的Ogg或mp4媒体，因此您可能需要为此添加适当的配置。

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

地理位置

HTML5 Geolocation API可让您与喜爱的网站分享您的位置。JavaScript可以捕获您的纬度和经度，并可以发送到后端Web服务器并执行奇特的位置感知事项，例如查找本地商家或在地图上显示您的位置。

今天，大多数浏览器和移动设备都支持Geolocation API。地理定位API使用全局导航器对象的新属性，即。地理位置对象可以创建如下 −

var geolocation = navigator.geolocation;

地理定位对象是一个服务对象，允许小部件检索有关设备地理位置的信息。

地理定位方法

地理定位对象提供以下方法 −

序号	方法和描述
1	getCurrentPosition() 此方法检索用户的当前地理位置。
2	watchPosition() 此方法检索有关设备当前地理位置的定期更新。
3	clearWatch() 此方法取消正在进行的watchPosition调用。

序号

方法和描述

getCurrentPosition()

此方法检索用户的当前地理位置。

watchPosition()

此方法检索有关设备当前地理位置的定期更新。

clearWatch()

此方法取消正在进行的watchPosition调用。

例子

以下是使用上述任何方法的示例代码 −

function getLocation() {
	var geolocation = navigator.geolocation;
	geolocation.getCurrentPosition(showLocation, errorHandler);
}

这里showLocation和errorHandler是回调方法，它们将用于获取实际位置，如下一节所述，并处理错误（如果有的话）

位置属性

地理位置方法getCurrentPosition（）和getPositionUsingMethodName（）指定检索位置信息的回调方法。这些方法与对象Position异步调用，该对象存储完整的位置信息。

位置对象指定设备的当前地理位置。该位置表示为一组地理坐标以及有关航向和速度的信息。

下表描述了Position对象的属性。对于可选属性，如果系统无法提供值，则将该属性的值设置为null。

属性	类型	描述
coords	objects	指定设备的地理位置。该位置表示为一组地理坐标以及有关航向和速度的信息。
coords.latitude	Number	以十进制度数指定纬度估计值。值范围为[-90.00，+ 90.00]。
coords.longitude	Number	以十进制度数指定经度估计值。值范围是[-180.00，+ 180.00]。
coords.altitude	Number	[可选]指定WGS 84椭圆体上方的高度估计值（以米为单位）。
coords.accuracy	Number	[可选]指定纬度和经度估计值的精度（以米为单位）。
coords.altitudeAccuracy	Number	[可选]指定以米为单位的高度估计的准确度。
coords.heading	Number	[可选]指定设备当前的移动方向，以相对于真北的顺时针方向计数。
coords.speed	Number	[可选]指定设备当前的地速，单位为米/秒。
timestamp	date	指定检索位置信息和创建Position对象的时间。

例子

以下是使用Position对象的示例代码。这里showLocation方法是一个回调方法 −

function showLocation( position ) {
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;
	...
}

处理错误

地理定位很复杂，非常需要捕获任何错误并优雅地处理它。

地理位置方法getCurrentPosition（）和watchPosition（）使用错误处理程序回调方法，该方法提供了PositionError对象。该对象具有以下两个属性 −

属性	类型	描述
code	Number	包含错误的数字代码。
message	String	包含错误的人类可读描述。

下表描述了PositionError对象中返回的可能错误代码。

Code	Constant	Description
0	UNKNOWN_ERROR	由于未知错误，该方法无法检索设备的位置。
1	PERMISSION_DENIED	该方法无法检索设备的位置，因为该应用程序无权使用位置服务。
2	POSITION_UNAVAILABLE	无法确定设备的位置。
3	TIMEOUT	该方法无法在指定的最大超时间隔内检索位置信息。

例子

以下是使用PositionError对象的示例代码。这里的errorHandler方法是一个回调方法 −

function errorHandler( err ) {
	
	if (err.code == 1) {
	
	// access is denied
	}
	...
}

位置选择

以下是getCurrentPosition（）方法的实际语法 −

getCurrentPosition(callback, ErrorCallback, options)

这里的第三个参数是PositionOptions对象，它指定一组用于检索设备地理位置的选项。

以下是可以指定为第三个参数的选项 −

Property	Type	Description
enableHighAccuracy	Boolean	指定窗口小部件是否希望尽可能接收最准确的位置估计。默认情况下，这是错误的。
timeout	Number	timeout属性是Web应用程序愿意等待某个位置的毫秒数。
maximumAge	Number	指定缓存位置信息的到期时间（以毫秒为单位）。

例子

以下是一个示例代码，显示如何使用上述方法 −

function getLocation() {
	var geolocation = navigator.geolocation;
	geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}

Microdata

Microdata是一种在网页中提供其他语义的标准方法。

Microdata允许您定义自己的自定义元素，并开始在您的网页中嵌入自定义属性。在高级别，微数据由一组名称-值对组成。

这些组称为项目，每个名称-值对都是一个属性。项目和属性由常规元素表示。

例子

要创建项目，请使用itemscope属性。
要向项添加属性，itemprop属性将用于其中一个项的后代。

这里有两个项目，每个项目都有"名称" −

<html>
	<body>
	
		<div itemscope>
			<p>My name is <span itemprop = "name">Zara</span>.</p>
		</div>
		
		<div itemscope>
			<p>My name is <span itemprop = "name">Nuha</span>.</p>
		</div>
	
	</body>
</html>

它会产生以下结果 −

My name is Zara.

My name is Nuha.

属性通常具有字符串值，但它可以具有以下数据类型 −

全局属性

Microdata引入了五个全局属性，可供任何元素使用，并为机器提供有关数据的上下文。

序号	属性和描述
1	itemscope 这用于创建项目。itemscope属性是一个布尔属性，告诉该页面上有微数据，这就是它的起始位置。
2	itemtype 此属性是一个有效的URL，用于定义项目并提供属性的上下文。
3	itemid 此属性是项的全局标识符。
4	itemprop 此属性定义项的属性。
5	itemref 此属性提供要爬网的其他元素的列表，以查找项目的名称-值对。

属性数据类型

属性通常具有上述示例中提到的字符串值，但它们也可以具有URL值。以下示例有一个属性“image”，其值为URL −

<div itemscope>
	<img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

属性还可以包含日期，时间或日期和时间的值。这是使用time元素及其datetime属性实现的。

<html>
	<body>
	
	<div itemscope>
		My birthday is:
		<time itemprop = "birthday" datetime = "1971-05-08">
		Aug 5th 1971
		</time>
	</div>
	
	</body>
</html>

它会产生以下结果 −

My birthday is: Aug 5th 1971

P通过将itemscope属性放在声明属性的元素上，属性本身也可以是名称-值对的组。

Microdata API支持

如果浏览器支持HTML5微数据API，则全局文档对象上将有一个getItems（）函数。如果浏览器不支持微数据，则getItems（）函数将是未定义的。

function supports_microdata_api() {
	return !!document.getItems;
}

Modernizr尚不支持检查微数据API，因此您需要使用上面列出的功能。

HTML5微数据标准包括HTML标记（主要用于搜索引擎）和一组DOM功能（主要用于浏览器）。

您可以在网页中包含微数据标记，而不理解微数据属性的搜索引擎会忽略它们。但是，如果您需要通过DOM访问或操作微数据，则需要检查浏览器是否支持微数据DOM API。

定义Microdata

要定义微数据词汇表，您需要一个指向工作网页的命名空间URL。例如，https://data-vocabulary.org/Person可以用作具有以下命名属性的个人微数据词汇表的命名空间 −

name − 作为简单字符串的人名
Photo − 人物照片的URL
URL − 属于此人的网站

使用关于属性的Microdata可以如下 −

<html>
	<body>
	
		<div itemscope>
		<section itemscope itemtype = "http://data-vocabulary.org/Person">
			<h1 itemprop = "name">Gopal K Varma</h1>
			
			<p>
			<img itemprop = "photo"
			src = "http://www.tutorialspoint.com/green/images/logo.png">
			</p>
			
			<a itemprop = "url" href = "#">Site</a>
		</section>
		</div>
	
	</body>
</html>

Google支持微数据作为其Rich Snippets计划的一部分。当Google的网络抓取工具解析您的网页并找到符合http://datavocabulary.org/Person词汇表的微数据属性时，它会解析这些属性并将其与其余页面数据一起存储。

Drag & drop

拖放（DnD）是强大的用户界面概念，可以通过鼠标点击轻松复制，重新排序和删除项目。这允许用户在元素上单击并按住鼠标按钮，将其拖动到另一个位置，然后释放鼠标按钮以将元素放在那里。

要使用传统的HTML4实现拖放功能，开发人员要么必须使用复杂的JavaScript编程，要么使用其他JavaScript框架，如jQuery等。

现在，HTML 5提出了一个拖放（DnD）API，它为浏览器提供了本机DnD支持，使代码编写变得更加容易。

所有主流浏览器（如Chrome，Firefox 3.5和Safari 4等）均支持HTML 5 DnD。

拖放事件

在拖放操作的各个阶段中会触发多个事件。这些事件列在下面 −

序号	事件和描述
1	dragstart 用户开始拖动对象时触发
2	dragenter 在拖动发生时首次将鼠标移动到目标元素上时触发。此事件的侦听器应指示是否允许在此位置进行放置。如果没有侦听器，或者侦听器不执行任何操作，则默认情况下不允许删除。
3	dragover 当发生拖动时，鼠标在元素上移动时会触发此事件。大多数情况下，在监听器期间发生的操作将与dragenter事件相同。
4	dragleave 当鼠标在发生拖动时离开元素时会触发此事件。听众应删除用于丢弃反馈的任何突出显示或插入标记。
5	drag 每次拖动对象时移动鼠标都会触发。
6	drop 在拖动操作结束时发生拖放的元素上触发drop事件。监听器负责检索被拖动的数据并将其插入丢弃位置。
7	dragend 用户在拖动对象时释放鼠标按钮时触发。

DataTransfer对象

所有拖放事件的事件侦听器方法都接受具有名为dataTransfer的只读属性的Event对象。

该event.dataTransfer返回数据传递与如下事件相关联的对象 −

function EnterHandler(event) {
	DataTransfer dt = event.dataTransfer;
	.............
}

该数据传递对象保存有关拖放操作的数据。可以根据与DataTransfer对象关联的各种属性检索和设置此数据，如下所述 −

序号	DataTransfer属性及其描述
1	dataTransfer.dropEffect [ = value ] 返回当前选定的操作类型。可以设置此属性，以更改所选操作。可能的值为none，copy，link和move。
2	dataTransfer.effectAllowed [ = value ] 返回允许的操作类型。可以设置此属性，以更改允许的操作。可能的值为none，copy，copyLink，copyMove，link，linkMove，move，all和uninitialized。
3	dataTransfer.types 返回列出dragstart事件中设置的格式的DOMStringList。此外，如果正在拖动任何文件，则其中一种类型将是字符串"Files"。
4	dataTransfer.clearData ( [ format ] ) 删除指定格式的数据。如果省略参数，则删除所有数据。
5	dataTransfer.setData(format, data) 添加指定的数据。
6	data = dataTransfer.getData(format) 返回指定的数据。如果没有这样的数据，则返回空字符串。
7	dataTransfer.files 返回被拖动文件的FileList（如果有）。
8	dataTransfer.setDragImage(element, x, y) 使用给定元素更新拖动反馈，替换之前指定的任何反馈。
9	dataTransfer.addElement(element) 将给定元素添加到用于呈现拖动反馈的元素列表中。

拖放过程

以下是执行拖放操作的步骤 −

第1步 - 使对象可拖动

以下是要采取的步骤 −

如果要拖动元素，则需要将该元素的draggable属性设置为true。
为dragstart设置一个事件监听器，用于存储被拖动的数据。
事件侦听器dragstart将设置允许的效果（复制，移动，链接或某种组合）。

以下是使对象可拖动的示例 −

<!DOCTYPE HTML>
	
<html>
	<head>
	
	<style type = "text/css">
	
	#boxA, #boxB {
		float:left;padding:10px;margin:10px; -moz-user-select:none;
	}
	#boxA { background-color: #6633FF; width:75px; height:75px;  }
	#boxB { background-color: #FF6699; width:150px; height:150px; }
	</style>
	
	<script type = "text/javascript">
	
		function dragStart(ev) {
			ev.dataTransfer.effectAllowed = 'move';
			ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
			ev.dataTransfer.setDragImage(ev.target,0,0);
			
			return true;
		}
	</script>
	
	</head>
	<body>
	
		<center>
			<h2>Drag and drop HTML5 demo</h2>
			<div>Try to drag the purple box around.</div>
			
			<div id = "boxA" draggable = "true"
				ondragstart = "return dragStart(ev)">
				<p>Drag Me</p>
			</div>
			
			<div id = "boxB">Dustbin</div>
		</center>
	
	</body>
</html>

第2步 - 删除对象

要接受丢弃，丢弃目标必须至少侦听三个事件。

所述的dragenter事件，它被用来确定是否放置目标是接受的下降。如果要接受掉落，则必须取消此事件。
所述的dragover事件，其被用于确定什么反馈是要显示给用户。如果事件被取消，则根据dropEffect属性的值更新反馈（通常是光标）。
最后，drop事件允许执行实际的drop。

以下是将对象放入另一个对象的示例 −

<!DOCTYPE HTML>
	
<html>
	<head>
	
	<style type = "text/css">
	#boxA, #boxB {
		float:left;padding:10px;margin:10px;-moz-user-select:none;
	}
	
	#boxA { background-color: #6633FF; width:75px; height:75px;  }
	#boxB { background-color: #FF6699; width:150px; height:150px; }
	</style>
	
	<script type = "text/javascript">
	
		function dragStart(ev) {
			ev.dataTransfer.effectAllowed = 'move';
			ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
			ev.dataTransfer.setDragImage(ev.target,0,0);
			return true;
		}
		
		function dragEnter(ev) {
			event.preventDefault();
			return true;
		}
		
		function dragOver(ev) {
			return false;
		}
		
		function dragDrop(ev) {
			var src = ev.dataTransfer.getData("Text");
			ev.target.appendChild(document.getElementById(src));
			ev.stopPropagation();
			return false;
		}
	</script>
	
	</head>
	<body>
	
		<center>
			<h2>Drag and drop HTML5 demo</h2>
			<div>Try to move the purple box into the pink box.</div>
			
			<div id = "boxA" draggable = "true"
				ondragstart = "return dragStart(ev)">
				<p>Drag Me</p>
			</div>
			
			<div id = "boxB" ondragenter = "return dragEnter(ev)"
				ondrop = "return dragDrop(ev)"
				ondragover = "return dragOver(ev)">Dustbin
			</div>
		</center>
	
	</body>
</html>

Web Workers

JavaScript旨在在单线程环境中运行，这意味着多个脚本无法同时运行。考虑一种情况，您需要处理UI事件，查询和处理大量API数据以及操作DOM。

JavaScript会在CPU利用率很高的情况下挂起您的浏览器。让我们举一个简单的例子，JavaScript经历一个大循环 −

<!DOCTYPE HTML>
	
<html>
	<head>
	<title>Big for loop</title>
	
	<script>
		function bigLoop() {
		
			for (var i = 0; i <= 10000; i += 1) {
				var j = i;
			}
			alert("Completed " + j + "iterations" );
		}
		
		function sayHello(){
			alert("Hello sir...." );
		}
	</script>
	
	</head>
	
	<body>
		<input type = "button" onclick = "bigLoop();" value = "Big Loop" />
		<input type = "button" onclick = "sayHello();" value = "Say Hello" />
	</body>
</html>

单击“大循环”按钮时，它会在Firefox中显示以下结果 −

什么是Web Workers？

上面解释的情况可以使用Web Workers来处理，他们将在不中断用户界面的情况下执行所有计算上昂贵的任务，并且通常在不同的线程上运行。

Web Workers允许长时间运行的脚本不受响应点击或其他用户交互的脚本中断，并允许执行长任务而不会让页面保持响应。

Web Workers是后台脚本，它们相对较重，并不打算大量使用。例如，为四百万像素图像的每个像素启动一个工作人员是不合适的。

当脚本在Web Worker中执行时，它无法访问网页的窗口对象（window.document），这意味着Web Workers无法直接访问网页和DOM API。尽管Web Workers无法阻止浏览器UI，但它们仍然会消耗CPU周期并使系统响应性降低。

Web Workers 如何工作？

Web Workers使用JavaScript文件的URL进行初始化，该文件包含worker将执行的代码。此代码设置事件侦听器并与从主页面生成它的脚本进行通信。以下是简单的语法 −

var worker = new Worker('bigLoop.js');

如果指定的javascript文件存在，浏览器将生成一个新的工作线程，该线程以异步方式下载。如果工作程序的路径返回404错误，则工作程序将以静默方式失败。

如果您的应用程序有多个支持的JavaScript文件，您可以导入它们importScripts（）方法，该方法将文件名作为以逗号分隔的参数，如下所示 −

importScripts("helper.js", "anotherHelper.js");

生成Web Worker后，使用postMessage（）方法完成Web worker与其父页面之间的通信。根据您的浏览器/版本，postMessage（）可以接受字符串或JSON对象作为其单个参数。

使用主页面中的onmessage事件访问Web Worker传递的消息。现在让我们使用Web Worker编写bigLoop示例。下面是主页面（hello.htm），它将生成一个web worker来执行循环并返回变量j的最终值 −

<!DOCTYPE HTML>
	
<html>
	<head>
	<title>Big for loop</title>
	
	<script>
		var worker = new Worker('bigLoop.js');
		
		worker.onmessage = function (event) {
			alert("Completed " + event.data + "iterations" );
		};
		
		function sayHello() {
			alert("Hello sir...." );
		}
	</script>
	</head>
	
	<body>
		<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
	</body>
</html>

以下是bigLoop.js文件的内容。这使用postMessage（） API将通信传递回主页 −

for (var i = 0; i <= 1000000000; i += 1) {
	var j = i;
}
postMessage(j);

停止 Web Workers

Web Workers不会自行停止，但启动它们的页面可以通过调用terminate（）方法来阻止它们。

worker.terminate();

终止的Web Worker将不再响应消息或执行任何其他计算。你不能重新启动一个工人; 相反，您可以使用相同的URL创建新工作线程。

处理错误

下面显示了Web Worker JavaScript文件中的错误处理函数示例，该函数将错误记录到控制台。使用错误处理代码，上面的示例将变为如下 −

<!DOCTYPE HTML>
	
<html>
	<head>
	<title>Big for loop</title>
	
	<script>
		var worker = new Worker('bigLoop.js');
		
		worker.onmessage = function (event) {
			alert("Completed " + event.data + "iterations" );
		};
		
		worker.onerror = function (event) {
			console.log(event.message, event);
		};
		
		function sayHello() {
			alert("Hello sir...." );
		}
	</script>
	</head>
	
	<body>
		<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
	</body>
</html>

检查浏览器支持

以下是检测浏览器中可用的Web Worker功能支持的语法 −

<!DOCTYPE HTML>
	
<html>
	<head>
	<title>Big for loop</title>
	<script src = "/js/modernizr-1.5.min.js"></script>
	
	<script>
		function myFunction() {
		
			if (Modernizr.webworkers) {
				alert("Congratulation!! you have web workers support." );
			} else {
				alert("Sorry!! you do not have web workers support." );
			}
		}
	</script>
	</head>
	
	<body>
		<button onclick = "myFunction()">Click me</button>
	</body>
</html>

IndexedDB

indexeddb是一种新的HTML5概念，用于将数据存储在用户的浏览器中。indexeddb比本地存储更强大，对需要存储大量数据的应用程序很有用。这些应用程序可以更快地运行效率和加载。

为什么要使用indexeddb？

W3C宣布Web SQL数据库是一个不推荐使用的本地存储规范，因此Web开发人员不应再使用此技术。indexeddb是Web SQL数据库的替代方案，比旧技术更有效。

特征

它存储密钥对值
它不是关系数据库
IndexedDB API主要是异步的
它不是结构化查询语言
它已支持从同一域访问数据

IndexedDB

在进入indexeddb之前，我们需要添加一些实现前缀，如下所示

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB ||
window.msIndexedDB;

window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange || window.msIDBKeyRange

if (!window.indexedDB) {
	window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

打开IndexedDB数据库

在创建数据库之前，我们必须为数据base.let准备一些数据，从公司员工详细信息开始。

const employeeData = [
{ id: "01", name: "Gopal K Varma", age: 35, email: "contact@tutorialspoint.com" },
{ id: "02", name: "Prasad", age: 24, email: "prasad@tutorialspoint.com" }
];

添加数据

这里手动将一些数据添加到数据中，如下所示 −

function add() {
	var request = db.transaction(["employee"], "readwrite")
	.objectStore("employee")
	.add({ id: "01", name: "prasad", age: 24, email: "prasad@tutorialspoint.com" });

	request.onsuccess = function(event) {
		alert("Prasad has been added to your database.");
	};

	request.onerror = function(event) {
		alert("Unable to add data\r\nPrasad is already exist in your database! ");
	}
}

检索数据

我们可以使用get（）从数据库中检索数据

function read() {
	var transaction = db.transaction(["employee"]);
	var objectStore = transaction.objectStore("employee");
	var request = objectStore.get("00-03");
	
	request.onerror = function(event) {
		alert("Unable to retrieve daa from database!");
	};
	
	request.onsuccess = function(event) {
	
		if(request.result) {
			alert("Name: " + request.result.name + ", Age:
			" + request.result.age + ", Email: " + request.result.email);
		} else {
			alert("Kenny couldn't be found in your database!");
		}
	};
}

使用get（），我们可以将数据存储在对象中，而不是将数据存储在游标中，我们可以从游标中检索数据。

function readAll() {
	var objectStore = db.transaction("employee").objectStore("employee");
	
	objectStore.openCursor().onsuccess = function(event) {
		var cursor = event.target.result;
		
		if (cursor) {
		alert("Name for id " + cursor.key + " is " + cursor.value.name + ",
		Age: " + cursor.value.age + ", Email: " + cursor.value.email);
		cursor.continue();
		} else {
		alert("No more entries!");
		}
	};
}

删除数据

我们可以使用remove（）从IndexedDB中删除数据。这是代码的样子

function remove() {
	var request = db.transaction(["employee"], "readwrite")
	.objectStore("employee")
	.delete("02");
	
	request.onsuccess = function(event) {
		alert("prasad entry has been removed from your database.");
	};
}

HTML代码

要显示我们需要使用onClick事件的所有数据，如下所示代码 −

<!DOCTYPE html>
	
<html>
	<head>
		<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
		<title>IndexedDb Demo | onlyWebPro.com</title>
	</head>
	
	<body>
		<button onclick = "read()">Read </button>
		<button onclick = "readAll()"></button>
		<button onclick = "add()"></button>
		<button onclick = "remove()">Delete </button>
	</body>
</html>

最终的代码应该是 −

<!DOCTYPE html>
	
<html>
	<head>
	<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
	<script type = "text/javascript">
	
		//prefixes of implementation that we want to test
		window.indexedDB = window.indexedDB || window.mozIndexedDB ||
		window.webkitIndexedDB || window.msIndexedDB;
		
		//prefixes of window.IDB objects
		window.IDBTransaction = window.IDBTransaction ||
		window.webkitIDBTransaction || window.msIDBTransaction;
		window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ||
		window.msIDBKeyRange
		
		if (!window.indexedDB) {
			window.alert("Your browser doesn't support a stable version of IndexedDB.")
		}
		
		const employeeData = [
			{ id: "00-01", name: "gopal", age: 35, email: "gopal@tutorialspoint.com" },
			{ id: "00-02", name: "prasad", age: 32, email: "prasad@tutorialspoint.com" }
		];
		var db;
		var request = window.indexedDB.open("newDatabase", 1);
		
		request.onerror = function(event) {
			console.log("error: ");
		};
	
		request.onsuccess = function(event) {
			db = request.result;
			console.log("success: "+ db);
		};
		
		request.onupgradeneeded = function(event) {
			var db = event.target.result;
			var objectStore = db.createObjectStore("employee", {keyPath: "id"});
			
			for (var i in employeeData) {
				objectStore.add(employeeData[i]);
			}
		}
		
		function read() {
			var transaction = db.transaction(["employee"]);
			var objectStore = transaction.objectStore("employee");
			var request = objectStore.get("00-03");
		
			request.onerror = function(event) {
				alert("Unable to retrieve daa from database!");
			};
	
			request.onsuccess = function(event) {
				// Do something with the request.result!
				if(request.result) {
					alert("Name: " + request.result.name + ",
					Age: " + request.result.age + ", Email: " + request.result.email);
				} else {
					alert("Kenny couldn't be found in your database!");
				}
			};
		}
	
		function readAll() {
			var objectStore = db.transaction("employee").objectStore("employee");
		
			objectStore.openCursor().onsuccess = function(event) {
				var cursor = event.target.result;
				
				if (cursor) {
					alert("Name for id " + cursor.key + " is " + cursor.value.name + ",
					Age: " + cursor.value.age + ", Email: " + cursor.value.email);
					cursor.continue();
				} else {
					alert("No more entries!");
				}
			};
		}
	
		function add() {
			var request = db.transaction(["employee"], "readwrite")
			.objectStore("employee")
			.add({ id: "00-03", name: "Kenny", age: 19, email: "kenny@planet.org" });
		
			request.onsuccess = function(event) {
				alert("Kenny has been added to your database.");
			};
		
			request.onerror = function(event) {
				alert("Unable to add data\r\nKenny is aready exist in your database! ");
			}
		}
		
		function remove() {
			var request = db.transaction(["employee"], "readwrite")
			.objectStore("employee")
			.delete("00-03");
			
			request.onsuccess = function(event) {
				alert("Kenny's entry has been removed from your database.");
			};
		}
	</script>
	
	</head>
	<body>
		<button onclick = "read()">Read </button>
		<button onclick = "readAll()">Read all </button>
		<button onclick = "add()">Add data </button>
		<button onclick = "remove()">Delete data </button>
	</body>
</html>

网络消息

Web Messaging是文档分离浏览上下文以在没有Dom的情况下共享数据的方式。它覆盖了不同域，协议或端口中的跨域通信问题

例如，您希望将数据从您的页面发送到放置在iframe或反之亦然的广告容器，在这种情况下，浏览器会抛出安全例外。通过Web消息传递，我们可以将数据作为消息事件传递。

消息事件

消息事件触发消息事件接口描述了跨文档消息传递，通道消息传递，服务器发送事件和Web套接字。

属性

序号	属性和描述
1	data 包含字符串数据
2	origin 包含域名和端口
3	lastEventId 包含当前消息事件的唯一标识符。
4	source 包含对原始文档窗口的引用
5	ports 包含任何消息端口发送的数据

发送跨文档消息

在发送跨文档消息之前，我们需要通过创建新的iframe或新窗口来创建新的Web浏览上下文。我们可以使用postMessage（）发送数据，它有两个参数。他们是 −

message − 要发送的消息
targetOrigin − 源名称

例子

从iframe发送消息到按钮

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');
	
var clickHandler = function() {
	iframe.contentWindow.postMessage('The message to send.',
	'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

在接收文档中接收跨文档消息

var messageEventHandler = function(event){
	
	// check that the origin is one we want.
	if(event.origin == 'https://www.tutorialspoint.com') {
		alert(event.data);
	}
}
window.addEventListener('message', messageEventHandler,false);

频道消息

浏览上下文之间的双向通信称为通道消息传递。它对于跨多个来源的通信很有用。

MessageChannel和MessagePort对象

在创建messageChannel时，它会在内部创建两个端口来发送数据并转发到另一个浏览上下文。

- postMessage() − 发布消息抛出通道
- start() − 它发送数据
- close() − 关闭端口

在这种情况下，我们将数据从一个iframe发送到另一个iframe。这里我们在函数中调用数据并将数据传递给DOM。

var loadHandler = function() {
	var mc, portMessageHandler;
	mc = new MessageChannel();
	window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
	
	portMessageHandler = function(portMsgEvent) {
		alert( portMsgEvent.data );
	}
	
	mc.port1.addEventListener('message', portMessageHandler, false);
	mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

上面的代码，它从端口2获取数据，现在它将数据传递给第二个iframe

var loadHandler = function() {
	var iframes, messageHandler;
	iframes = window.frames;
	
	messageHandler = function(messageEvent) {
	
		if( messageEvent.ports.length > 0 ) {
		
			// transfer the port to iframe[1]
			iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
		}
	}
	window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

现在，第二个文档使用portMsgHandler函数处理数据。

var loadHandler() {
	
	// Define our message handler function
	var messageHandler = function(messageEvent) {
	
		// Our form submission handler
		
		var formHandler = function() {
			var msg = 'add <foo@example.com> to game circle.';
			messageEvent.ports[0].postMessage(msg);
		}
		document.forms[0].addEventListener('submit',formHandler,false);
	}
	window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Web CORS

跨源资源共享（CORS）是一种允许来自Web浏览器中其他域的受限资源的机制。

假设，如果你点击html5演示部分中的HTML5-视频播放器。它会要求相机许可。如果用户允许该权限，则只有它会打开相机，否则它不会打开相机用于Web应用程序。

发出CORS请求

这里Chrome，Firefox，Opera和Safari都使用XMLHttprequest2对象，Internet Explorer使用类似的XDomainRequest对象对象。

function createCORSRequest(method, url) {
	var xhr = new XMLHttpRequest();
	
	if ("withCredentials" in xhr) {
	
		// Check if the XMLHttpRequest object has a "withCredentials" property.
		// "withCredentials" only exists on XMLHTTPRequest2 objects.
		xhr.open(method, url, true);
	} else if (typeof XDomainRequest != "undefined") {
	
		// Otherwise, check if XDomainRequest.
		// XDomainRequest only exists in IE, and is IE's way of making CORS requests.
		xhr = new XDomainRequest();
		xhr.open(method, url);
	} else {
	
		// Otherwise, CORS is not supported by the browser.
		xhr = null;
	}
	return xhr;
}
	
var xhr = createCORSRequest('GET', url);
	
if (!xhr) {
	throw new Error('CORS not supported');
}

CORS中的事件句柄

序号	事件处理程序和描述
1	onloadstart 启动请求
2	onprogress 加载数据并发送数据
3	onabort 中止请求
4	onerror 请求失败
5	onload 请求加载成功
6	ontimeout 在请求完成之前已经发生了超时
7	onloadend 请求完成时成功或失败

onload或onerror事件的示例

xhr.onload = function() {
	var responseText = xhr.responseText;
	
	// process the response.
	console.log(responseText);
	};
	
	xhr.onerror = function() {
	console.log('There was an error!');
};

带处理程序的CORS示例

下面的示例将显示makeCorsRequest（）和onload处理程序的示例

// Create the XHR object.
function createCORSRequest(method, url) {
	var xhr = new XMLHttpRequest();
	
	if ("withCredentials" in xhr) {
	
		// XHR for Chrome/Firefox/Opera/Safari.
		xhr.open(method, url, true);
	} else if (typeof XDomainRequest != "undefined") {
	
		// XDomainRequest for IE.
		xhr = new XDomainRequest();
		xhr.open(method, url);
	} else {
	
		// CORS not supported.
		xhr = null;
	}
	return xhr;
}
	
// Helper method to parse the title tag from the response.
function getTitle(text) {
	return text.match('<title>(.*)?</title>')[1];
}
	
// Make the actual CORS request.
function makeCorsRequest() {
	
	// All HTML5 Rocks properties support CORS.
	var url = 'http://www.tutorialspoint.com';
	
	var xhr = createCORSRequest('GET', url);
	
	if (!xhr) {
		alert('CORS not supported');
		return;
	}
	
	// Response handlers.
	xhr.onload = function() {
		var text = xhr.responseText;
		var title = getTitle(text);
		alert('Response from CORS request to ' + url + ': ' + title);
	};
	
	xhr.onerror = function() {
		alert('Woops, there was an error making the request.');
	};
	xhr.send();
}

Web RTC

万维网联盟（W3C）推出的Web RTC。它支持用于语音呼叫，视频聊天和P2P文件共享的浏览器到浏览器应用程序。

如果你想试试？适用于Chrome，Opera和Firefox的网络RTC。一个良好的开始是在简单的视频聊天应用在这里。Web RTC实现了三个API，如下所示 −

MediaStream − 访问用户的摄像头和麦克风。
RTCPeerConnection − 访问音频或视频通话设施。
RTCDataChannel − 访问对等通信。

MediaStream

MediaStream表示同步的媒体流，例如，单击HTML5演示部分中的HTML5视频播放器，或者单击此处。

上面的示例包含stream.getAudioTracks（）和stream.VideoTracks（）。如果没有音轨，则返回一个空数组，它将检查视频流，如果连接了网络摄像头，则stream.getVideoTracks（）返回一个MediaStreamTrack数组，表示来自网络摄像头的流。一个简单的例子是聊天应用程序，聊天应用程序从网络摄像头，后置摄像头，麦克风获取流。

MediaStream的示例代码

function gotStream(stream) {
	window.AudioContext = window.AudioContext || window.webkitAudioContext;
	var audioContext = new AudioContext();
	
	// Create an AudioNode from the stream
	var mediaStreamSource = audioContext.createMediaStreamSource(stream);
	
	// Connect it to destination to hear yourself
	// or any other node for processing!
	mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

屏幕截图

在Chrome浏览器中也可以使用mediaStreamSource，它需要HTTPS。歌剧中尚未提供此功能。示例演示可在此处获得

会话控制，网络和媒体信息

Web RTC需要浏览器之间的对等通信。该机制需要信令，网络信息，会话控制和媒体信息。Web开发人员可以选择不同的机制在SIP或XMPP之类的浏览器之间进行通信，或者进行任何双向通信。XHR的示例就在这里。

createSignalingChannel()的示例代码

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
	
// run start(true) to initiate a call
function start(isCaller) {
	pc = new RTCPeerConnection(configuration);

	// send any ice candidates to the other peer
	pc.onicecandidate = function (evt) {
		signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
	};

	// once remote stream arrives, show it in the remote video element
	pc.onaddstream = function (evt) {
		remoteView.src = URL.createObjectURL(evt.stream);
	};
	
	// get the local stream, show it in the local video element and send it
	navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
		selfView.src = URL.createObjectURL(stream);
		pc.addStream(stream);
		
		if (isCaller)
			pc.createOffer(gotDescription);
		
		else
			pc.createAnswer(pc.remoteDescription, gotDescription);
		
		function gotDescription(desc) {
			pc.setLocalDescription(desc);
			signalingChannel.send(JSON.stringify({ "sdp": desc }));
		}
	});
}
	
signalingChannel.onmessage = function (evt) {
	if (!pc)
		start(false);
	var signal = JSON.parse(evt.data);
	
	if (signal.sdp)
		pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
	
	else
		pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};

序号	例子 & 描述
1	绘制矩形了解如何使用HTML5 <canvas>元素绘制矩形
2	绘图路径了解如何使用HTML5 <canvas>元素中的路径创建形状
3	绘图线了解如何使用HTML5 <canvas>元素绘制线条
4	绘制Bezier 了解如何使用HTML5 <canvas>元素绘制Bezier曲线
5	绘制二次方了解如何使用HTML5 <canvas>元素绘制二次曲线/p>
6	使用图像了解如何使用HTML5 <canvas>元素使用图像/p>
7	创建渐变了解如何使用HTML5 <canvas>元素创建渐变/p>
8	款式和颜色了解如何使用HTML5 <canvas>元素应用样式和颜色
9	文字和字体了解如何使用不同的字体及其大小绘制出色的文本。
10	图案和阴影了解如何绘制不同的图案和阴影。
11	画布状态了解如何在画布上执行复杂绘图时保存和恢复画布状态。
12	画布平移此方法用于将画布及其原点移动到网格中的不同点。
13	画布旋转此方法用于围绕当前原点旋转画布。
14	画布缩放此方法用于增加或减少画布网格中的单位。
15	画布变换这些方法允许直接修改转换矩阵。
16	画布组成此方法用于屏蔽某些区域或从画布中清除部分。
17	画布动画了解如何使用HTML5画布和JavaScript创建基本动画。

2021年 12月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31