目录

HTML5 - 快速指南

HTML5 - Overview

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

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

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

浏览器支持 (Browser Support)

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

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

新功能 (New Features)

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

  • New Semantic Elements - 这些New Semantic Elements类似于“标题”,“页脚”和“节”。

  • Forms 2.0 - HTML网页表单的改进,其中为“input”标记引入了新属性。

  • Persistent Local Storage - 无需借助第三方插件即可实现。

  • WebSocket - 用于Web应用程序的下一代双向通信技术。

  • Server-Sent Events - HTML5引入了从Web服务器流向Web浏览器的事件,它们称为服务器发送事件(SSE)。

  • Canvas - 这支持可以使用JavaScript编程的二维绘图表面。

  • Audio & Video - 您可以在网页上嵌入音频或视频,而无需借助第三方插件。

  • Geolocation - 现在访问者可以选择与您的Web应用程序共享其物理位置。

  • Microdata - 这使您可以在HTML5之外创建自己的词汇表,并使用自定义语义扩展您的网页。

  • Drag and drop - 将项目从一个位置拖放到同一网页上的另一个位置。

向后兼容性

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

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

如果您不熟悉任何以前版本的HTML,我建议您在浏览HTML5的功能之前先阅读我们的HTML Tutorial

HTML5 - Syntax

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

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

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

  • Uppercase tag names.
  • 引号对于属性是可选的。
  • 属性值是可选的。
  • 关闭空元素是可选的。

DOCTYPE

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

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

<!DOCTYPE html>

以上语法不区分大小写。

字符编码

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

<meta charset = "UTF-8">

以上语法不区分大小写。

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

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

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

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

标签

到目前为止,您正在编写,如下所示 -

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

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

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

HTML5元素

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

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

以下是HTML5元素的示例 -

<p>...</p>

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

大多数元素包含一些内容,如

... p>包含一个段落。

但是,有些元素根本不包含任何内容,这些元素称为void元素。 例如, br, hr, link, meta等。

这是HTML5元素的完整列表。

HTML5属性

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

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

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

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

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

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

以下是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.iowiki.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.iowiki.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.iowiki.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://iowiki.com/">IOWIKI</a></p> 
      </footer> 
   </body> 
</html> 

它会产生以下结果 -

新页面打开

HTML5 - Attributes

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

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

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

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

属性只能在start tags指定,绝不能在end tags

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

标准属性

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

属性 选项 功能
accesskeyUser Defined 指定用于访问元素的键盘快捷方式。
alignright, left, center 水平对齐标签
backgroundURL 在元素后面放置背景图像
bgcolor 数字,十六进制,RGB值 在元素后面放置背景颜色
classUser Defined 对用于层叠样式表的元素进行分类。
contenteditabletrue, false 指定用户是否可以编辑元素的内容。
contextmenu 菜单ID 指定元素的上下文菜单。
data-XXXXUser Defined 自定义属性。 HTML文档的作者可以定义自己的属性。 必须以“data-”开头。
draggabletrue,false, auto 指定是否允许用户拖动元素。
heightNumeric Value 指定表,图像或表格单元格的高度。
hiddenhidden 指定元素是否应该可见。
idUser Defined 命名用于层叠样式表的元素。
item 元素列表 用于分组元素。
itempropList of itemsUsed to group items.
spellchecktrue, false 指定元素是否必须检查拼写或语法。
style CSS样式表 指定元素的内联样式。
subjectUser define id 指定元素的相应项。
tabindex Tab number 指定元素的Tab键顺序。
titleUser Defined 元素的“弹出”标题。
valigntop, middle, bottom 垂直对齐HTML元素中的标记。
widthNumeric Value 指定表,图像或表格单元格的宽度。

有关HTML5标签和相关属性的完整列表,请查看我们对HTML5标签的引用。

自定义属性

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

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

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

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

HTML5 - Events

当用户访问您的网站时,他们会执行各种活动,例如单击文本和图像以及链接,将鼠标悬停在已定义的元素上等。这些是JavaScript调用events示例。

我们可以在Javascript或VBscript中编写事件处理程序,您可以将这些事件处理程序指定为事件标记属性的值。 HTML5规范定义了下面列出的各种事件属性 -

当任何HTML5元素发生任何事件时,我们可以使用以下属性集来触发作为值给出的任何javascriptvbscript代码。

我们将在后续章节中详细讨论这些元素时讨论元素特定事件。

属性 描述
offlinescript 文档脱机时触发
onabortscript 触发中止事件
onafterprintscript 打印文档后触发
onbeforeonloadscript 文档加载前触发
onbeforeprintscript 打印文档前触发
onblurscript 窗口失去焦点时触发
oncanplayscript 媒体可以开始播放时触发,但可能必须停止缓冲
oncanplaythroughscript 当媒体可以播放到最后时触发,而不停止缓冲
onchangescript 元素更改时触发
onclickscript 单击鼠标时触发
oncontextmenuscript 触发上下文菜单时触发
ondblclickscript 双击鼠标触发
ondragscript 拖动元素时触发
ondragendscript 拖动操作结束时触发
ondragenterscript 将元素拖动到有效放置目标时触发
ondragleavescript 元素离开有效放置目标时触发
ondragoverscript 在有效放置目标上拖动元素时触发
ondragstartscript 在拖动操作开始时触发
ondropscript 删除拖动元素时触发
ondurationchangescript 更改介质长度时触发
onemptiedscript 媒体资源元素突然变空时触发。
onendedscript 媒体到达终点时触发
onerrorscript 发生错误时触发
onfocusscript 窗口获得焦点时触发
onformchangescript 表单更改时触发
onforminputscript 表单获取用户输入时触发
onhaschangescript 文档更改时触发
oninputscript 元素获取用户输入时触发
oninvalidscript 元素无效时触发
onkeydownscript 按下某个键时触发
onkeypressscript 按下并释放按键时触发
onkeyupscript 释放密钥时触发
onloadscript 文档加载时触发
onloadeddatascript 加载媒体数据时触发
onloadedmetadatascript 加载媒体元素的持续时间和其他媒体数据时触发
onloadstartscript 浏览器开始加载媒体数据时触发
onmessagescript 触发消息时触发
onmousedownscript 按下鼠标按钮时触发
onmousemovescript 鼠标指针移动时触发
onmouseoutscript 鼠标指针移出元素时触发
onmouseoverscript 鼠标指针在元素上移动时触发
onmouseupscript 释放鼠标按钮时触发
onmousewheelscript 旋转鼠标滚轮时触发
onofflinescript 文档脱机时触发
onoinescript 文档联机时触发
ononlinescript 文档联机时触发
onpagehidescript 隐藏窗口时触发
onpageshowscript 窗口变为可见时触发
onpausescript 媒体数据暂停时触发
onplayscript 媒体数据开始播放时触发
onplayingscript 媒体数据开始播放时触发
onpopstatescript 窗口历史记录更改时触发
onprogressscript 浏览器获取媒体数据时触发
onratechangescript 媒体数据的播放速率发生变化时触发
onreadystatechangescript 准备状态改变时触发
onredoscript 文档执行重做时触发
onresizescript 调整窗口大小时触发
onscrollscript 滚动元素的滚动条时触发
onseekedscript 当媒体元素的搜索属性不再为真时触发,并且搜索已经结束
onseekingscript 当媒体元素的搜索属性为真时触发,并且搜索已经开始
onselectscript 选择元素时触发
onstalledscript 在获取媒体数据时出现错误时触发
onstoragescript 文档加载时触发
onsubmitscript 提交表单时触发
onsuspendscript 浏览器获取媒体数据时触发,但在获取整个媒体文件之前停止
ontimeupdatescript 媒体更改其播放位置时触发
onundoscript 文档执行撤消时触发
onunloadscript 用户离开文档时触发
onvolumechangescript 媒体更改音量时触发,当音量设置为“静音”时触发
onwaitingscript 媒体停止播放时触发,但预计会恢复

HTML5 - Web Forms 2.0

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

HTML4中的《input》元素

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

Sr.No. 类型和描述
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属性引入了几个新值。 这些列在下面。

NOTE - 使用最新版本的Opera浏览器尝试以下所有示例。

Sr.No. 类型和描述
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格式输入网址。

元素

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>

这将产生以下结果 -

新页面打开

自动对焦属性

这是一个简单的一步式模式,在文档加载时可以在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>

必需的属性

现在你不需要使用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>

它会产生以下结果 -

新页面打开

HTML5 - SVG

SVG代表S calable V ector G raphics,它是一种用XML描述2D图形和图形应用程序的语言,然后由SVG查看器呈现XML。

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

SVG成为W3C推荐标准14. 2003年1月,您可以在SVG规范中查看最新版本的SVG规范

查看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地址栏中输入about:config

  • 点击“我会小心,我保证!” 出现的警告消息上的按钮(并确保您遵守它!)。

  • 在页面顶部的过滤栏中html5.enable

  • 目前它将被禁用,因此单击它将值切换为true。

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

HTML5 - SVG Circle

以下是SVG示例的HTML5版本,它将使用标记绘制一个圆圈 -

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

以下是使用标签绘制矩形的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 Line

以下是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 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 Ellipse

以下是SVG示例的HTML5版本,它将使用标记绘制椭圆 -

<!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多边形

以下是使用标签绘制多边形的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折线

以下是SVG示例的HTML5版本,它将使用标记绘制折线 -

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

以下是SVG示例的HTML5版本,它将使用标记绘制椭圆,并使用标记来定义SVG径向渐变。

同样,您可以使用标签创建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 id="gradient" 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 Star

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

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

这将产生以下结果 -

新页面打开

使用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> 

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

这将产生以下结果 -

新页面打开

矩阵演示示例

考虑以下用于表示简单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> 

这将产生以下结果 -

新页面打开

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

MATHML

HTML5 - Web Storage

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

  • 每个HTTP请求都包含Cookie,从而通过传输相同的数据来减慢Web应用程序的速度。

  • 每个HTTP请求都包含Cookie,从而通过Internet发送未加密的数据。

  • Cookie限制为大约4 KB的数据。 不足以存储所需的数据。

这两个存储是session storagelocal storage ,它们将用于处理不同的情况。

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

会话存储

Session Storage设计用于用户执行单个事务但可以同时在不同窗口中执行多个事务的场景。

例子 (Example)

For example, if a user buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.

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

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

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

这将产生以下结果 -

新页面打开

本地存储

Local Storage设计用于跨越多个窗口的存储,并且持续超出当前会话。 特别是,出于性能原因,Web应用程序可能希望在客户端存储兆字节的用户数据,例如整个用户创作的文档或用户的邮箱。

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

例子 (Example)

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>

这将产生以下结果 -

新页面打开

删除Web存储

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

Session Storage Data终止后, Session Storage Data将立即被浏览器删除。

要清除本地存储设置,您需要调用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>

这将产生以下结果 -

新页面打开

HTML5 - Web SQL Database

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_ide_log是外部变量,executeSql将数组参数中的每个项映射到“?”。

读操作 (READ Operation)

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

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>

这将产生以下结果 -

新页面打开

HTML5 - Server Sent Events

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

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

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

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

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

SSE的Web应用程序

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

“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浏览器支持此概念。

HTML5 - WebSockets

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

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

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

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

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

WebSocket属性

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

Sr.No. 属性和描述
1

Socket.readyState

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

  • 值为0表示尚未建立连接。

  • 值为1表示建立连接并且可以进行通信。

  • 值为2表示连接正在进行结束握手。

  • 值3表示连接已关闭或无法打开。

2

Socket.bufferedAmount

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

WebSocket事件

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

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

WebSocket方法

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

Sr.No. 方法和描述
1

Socket.send()

发送(数据)方法使用连接发送数据。

2

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构建

  • $ sudo python setup.py install

  • 然后阅读文件 -

    • $ pydoc mod_pywebsocket

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

启动服务器

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

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

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

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

HTML5 - Canvas

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

这是一个简单的canvas元素,它只有两个特定属性widthheight以及所有核心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 
}  

浏览器支持 (Browser Support)

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

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

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

HTML5画布示例

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

Sr.No. 示例和说明
1 Drawing Rectangles

了解如何使用HTML5 canvas元素绘制矩形

2 Drawing Paths

了解如何使用HTML5 canvas元素中的路径创建形状

3 Drawing Lines

了解如何使用HTML5 canvas元素绘制线条

4 Drawing Bezier

了解如何使用HTML5 canvas元素绘制Bezier曲线

5 Using Images

了解如何使用HTML5 canvas元素绘制二次曲线

6 Using Images

了解如何使用HTML5 canvas元素使用图像

7 Styles and Colors

了解如何使用HTML5 canvas元素创建渐变

8 Text and Fonts

了解如何使用HTML5 canvas元素应用样式和颜色

9 Text and Fonts

了解如何使用不同的字体及其大小绘制出色的文本。

10 Canvas States

了解如何绘制不同的图案和阴影。

11 Canvas Translation

了解如何在画布上执行复杂绘图时保存和恢复画布状态。

12 Canvas Rotation

此方法用于将画布及其原点移动到网格中的不同点。

13 Canvas Scaling

此方法用于围绕当前原点旋转画布。

14 Canvas Transform

此方法用于增加或减少画布网格中的单位。

15 Canvas Composition

这些方法允许直接修改转换矩阵。

16 Canvas Animation

此方法用于屏蔽某些区域或从画布中清除部分。

17 Canvas Animation

了解如何使用HTML5画布和JavaScript创建基本动画。

HTML5 - Audio & Video

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

HTML5 您需要设置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文件。

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

<!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视频标签可以具有许多属性来控制外观和控件的各种功能 -

Sr.No. 属性和描述
1

autoplay

如果指定了此布尔属性,视频将在不停止完成加载数据的情况下自动开始播放。

2

autobuffer

如果指定此布尔属性,即使视频未设置为自动播放,视频也会自动开始缓冲。

3

controls

如果存在此属性,则允许用户控制视频播放,包括音量,搜索和暂停/恢复播放。

4

height

此属性以CSS像素为单位指定视频显示区域的高度。

5

loop

如果指定了此布尔属性,则允许视频在到达结束后自动搜索到开始。

6

preload

此属性指定视频将在页面加载时加载,并准备运行。 如果存在自动播放,则忽略。

7

poster

这是在用户播放或搜索之前显示的图像的URL。

8

src

要嵌入的视频的网址。 这是可选的; 您可以改为使用视频块中的元素来指定要嵌入的视频。

9

width

此属性以CSS像素为单位指定视频显示区域的宽度。

嵌入音频

HTML5支持

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

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

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

<!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音频标签可以有许多属性来控制外观和控件的各种功能 -

Sr.No. 属性和描述
1

autoplay

如果指定了此布尔属性,音频将在不停止完成加载数据的情况下自动开始播放。

2

autobuffer

如果指定此布尔属性,即使音频未设置为自动播放,音频也会自动开始缓冲。

3

controls

如果存在此属性,则允许用户控制音频播放,包括音量,搜索和暂停/恢复播放。

4

loop

如果指定了此布尔属性,则允许音频在到达结尾后自动回溯到开头。

5

preload

此属性指定音频将在页面加载时加载,并准备运行。 如果存在自动播放,则忽略。

6

src

要嵌入的音频的URL。 这是可选的; 您可以改为使用视频块中的元素来指定要嵌入的视频。

处理媒体事件

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

S.No. 活动和描述
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

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

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

var geolocation = navigator.geolocation;

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

地理定位方法

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

Sr.No. 方法和描述
1 getCurrentPosition()

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

2 watchPosition()

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

3 clearWatch()

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

例子 (Example)

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

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

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

位置属性

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

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

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

属性 类型 描述
coordsobjects 指定设备的地理位置。 该位置表示为一组地理坐标以及有关航向和速度的信息。
coords.latitudeNumber 以十进制度数指定纬度估计值。 值范围为[-90.00,+ 90.00]。
coords.longitudeNumber 以十进制度数指定经度估计值。 值范围是[-180.00,+ 180.00]。
coords.altitudeNumber [可选]指定WGS 84椭圆体上方的高度估计值(以米为单位)。
coords.accuracyNumber [可选]指定纬度和经度估计值的精度(以米为单位)。
coords.altitudeAccuracyNumber [可选]指定以米为单位的高度估计的准确度。
coords.headingNumber [可选]指定设备当前的移动方向,以相对于真北的顺时针方向计数。
coords.speedNumber [可选]指定设备当前的地速,单位为米/秒。
timestampdate 指定检索位置信息和创建Position对象的时间。

例子 (Example)

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

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

处理错误 (Handling Errors)

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

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

属性 类型 描述
codeNumber 包含错误的数字代码。
messageString 包含错误的人类可读描述。

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

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

例子 (Example)

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

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

职位选择

以下是getCurrentPosition()方法的实际语法 -

getCurrentPosition(callback, ErrorCallback, options)

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

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

属性 类型 描述
enableHighAccuracyBoolean 指定窗口小部件是否希望尽可能接收最准确的位置估计。 默认情况下,这是错误的。
timeoutNumber timeout属性是Web应用程序愿意等待某个位置的毫秒数。
maximumAgeNumber 指定缓存位置信息的到期时间(以毫秒为单位)。

例子 (Example)

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

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

HTML5 - Microdata

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

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

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

例子 (Example)

  • 要创建项目,请使用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>

它会产生以下结果 -

新页面打开

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

全局属性 (Global Attributes)

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

Sr.No. 属性和描述
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 = "IoWiki">
</div>

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

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

它会产生以下结果 -

新页面打开

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

微数据API支持

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

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

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

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

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

定义微数据词汇

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

  • name - 作为简单字符串的人名

  • Photo - 人物Photo的URL。

  • URL - 属于此人的网站。

使用关于属性的人微观数据可以如下 -

<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.iowiki.com/green/images/logo.png">
            </p>
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
   </body>
</html>

它会产生以下结果 -

新页面打开

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

您可以使用http://www.iowiki.com/html5/microdata.htm使用Rich Snippets Testing Tool测试上面的示例。

有关Microdata的进一步开发,您可以随时参考HTML5微数据

HTML5 - Drag & drop

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

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

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

所有主流浏览器(如Chrome,Firefox 3.5和Safari 4等)均支持HTML 5 DnD。

拖放事件

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

Sr.No. 活动和描述
1

dragstart

用户开始拖动对象时触发。

2

dragenter

在拖动发生时首次将鼠标移动到目标元素上时触发。 此事件的侦听器应指示是否允许在此位置进行放置。 如果没有侦听器,或者侦听器不执行任何操作,则默认情况下不允许删除。

3

dragover

当发生拖动时,鼠标在元素上移动时会触发此事件。 大多数情况下,在监听器期间发生的操作将与dragenter事件相同。

4

dragleave

当鼠标在发生拖动时离开元素时会触发此事件。 听众应删除用于丢弃反馈的任何突出显示或插入标记。

5

drag

每次拖动对象时移动鼠标都会触发。

6

drop

在拖动操作结束时发生拖放的元素上触发drop事件。 监听器负责检索被拖动的数据并将其插入丢弃位置。

7

dragend

用户在拖动对象时释放鼠标按钮时触发。

Note - 请注意,仅触发拖动事件; 在拖动操作期间不会触发鼠标事件,例如mousemove

DataTransfer对象

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

event.dataTransfer返回与事件关联的DataTransfer对象,如下所示 -

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

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

Sr.No. DataTransfer属性及其描述
1

dataTransfer.dropEffect [ = value ]

  • 返回当前选定的操作类型。

  • 可以设置此属性,以更改所选操作。

  • 可能的值为none,copy,link和move。

2

dataTransfer.effectAllowed [ = value ]

  • 返回允许的操作类型。

  • 可以设置此属性,以更改允许的操作。

  • 可能的值为none, copy, copyLink, copyMove, link, linkMove, move, alluninitialized

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。

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

<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(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

这将产生以下结果 -

新页面打开

HTML5 - 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工作者如何工作?

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不会自行停止,但启动它们的页面可以通过调用terminate()方法来阻止它们。

worker.terminate();

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

处理错误 (Handling Errors)

下面显示了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>

这将产生以下结果 -

新页面打开

HTML5 - IndexedDB

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

为什么要使用indexeddb?

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

特点 (Features)

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

IndexedDB (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@iowiki.com" },
   { id: "02", name: "Prasad", age: 24, email: "prasad@iowiki.com" }
];

添加数据

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

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "prasad@iowiki.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@iowiki.com" },
            { id: "00-02", name: "prasad", age: 32, email: "prasad@iowiki.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>

它将产生以下输出 -

新页面打开

HTML5 - Web messaging

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

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

消息事件

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

属性 (Attributes)

Sr.No. 属性和描述
1

data

包含字符串数据

2

origin

包含域名和端口

3

lastEventId

包含当前消息事件的唯一标识符。

4

source

包含对原始文档窗口的引用

5

ports

包含任何消息端口发送的数据

发送跨文档消息

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

  • message - 要发送的消息
  • targetOrigin - 原产地名称

例子 (Examples)

从iframe发送消息到按钮

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

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

var messageEventHandler = function(event){
   // check that the origin is one we want.
   if(event.origin == 'https://www.iowiki.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);

HTML5 - CORS

Cross-origin resource sharing (CORS)是一种允许来自Web浏览器中其他域的受限资源的机制。

假设,如果你点击html5演示部分中的HTML5- video player 。 它会要求相机许可。 如果用户允许该权限,则只有它会打开相机,否则它不会打开相机用于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中的事件句柄

Sr.No. 事件处理程序和描述
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.iowiki.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();
}

HTML5 - Web RTC

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

如果你想试试? 适用于Chrome,Opera和Firefox的网络RTC。 一个好的起点是这里简单的视频聊天应用程序。 Web RTC实现了三个API,如下所示 -

  • MediaStream - 访问用户的摄像头和麦克风。

  • RTCPeerConnection - 访问音频或视频通话设施。

  • RTCDataChannel - 访问对等通信。

MediaStream (MediaStream)

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

上面的示例包含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。 歌剧中尚未提供此功能。 示例演示可在here

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

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

Sample code of 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));
};
↑回到顶部↑
WIKI教程 @2018