Heim > Web-Frontend > H5-Tutorial > Was sind die neuen Funktionen von HTML5?

Was sind die neuen Funktionen von HTML5?

青灯夜游
Freigeben: 2023-01-03 09:31:46
Original
51775 Leute haben es durchsucht

Neue Funktionen von HTML5: 1. Canvas-Element zum Malen; 2. Video- und Audioelemente für die Medienwiedergabe; 3. Bessere Unterstützung für die lokale Offline-Speicherung 4. Neue spezielle Inhaltselemente, wie Artikel, Kopfzeile, Navigation usw. 5. Neue Formularsteuerelemente wie Datum, Uhrzeit usw.

Was sind die neuen Funktionen von HTML5?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

1. HTML5-Konzept:

1. HTML5 wird zum neuen Standard für HTML, XHTML und HTML DOM;

(2) HTML5 wird noch verbessert . Allerdings verfügen die meisten modernen Browser bereits über eine gewisse HTML5-Unterstützung.

2. Der Beginn von HTML5:

(1) HTML5 ist das Ergebnis der Zusammenarbeit zwischen W3C (World Wide Web Consortium, World Wide Web Consortium) und WHATWG

(2) Einige Regeln für HTML5:

a. Neue Funktionen sollten auf HTML, CSS, DOM und JavaScript basieren

b Reduzieren Sie den Bedarf an externen Plug-Ins

c. Bessere Fehlerbehandlung

d

e. HTML5 sollte unabhängig von der Ausrüstung sein

f Der Entwicklungsprozess sollte für die Öffentlichkeit transparent sein

3. Neue Funktionen:

(1) Leinwandelement zum Malen (2) Video- und Audioelemente für Medienwiedergabe

(3) Paar Bessere Unterstützung für lokale Offline-Speicherung

(4) Neue spezielle Inhaltselemente wie Artikel, Fußzeile, Kopfzeile, Navigation, Abschnitt

(5) Neue Formularsteuerelemente wie Kalender, Datum, Uhrzeit, E-Mail, URL, Suche

2. HTML5-Video:

1. Video im Web:

(1) Die meisten Videos werden über Plug-Ins (z. B. Flash) angezeigt. Nicht alle Browser verfügen über sie. Das gleiche Plug-in (2) HTML5 spezifiziert eine Standardmethode zum Einbinden von Videos über das Videoelement

2. Videoformat:

(1) Ogg-Format: Mit Theora-Videokodierung und Vorbis-Audiokodierung Ogg-Datei

(2) MPEG4-Format:

MPEG 4-Datei mit H.264-Videokodierung und AAC-Audiokodierung

(3) WebM-Format:

WebM-Datei mit VP8-Videokodierung und Vorbis-Audiokodierung

3. So funktioniert es:

(1) Beispielcode:

1

<strong><video src="movie.ogg" controls="controls">...</video></strong>

Nach dem Login kopieren
(2) Das Attribut „controls“ wird zum Hinzufügen von Wiedergabe-, Pausen- und Lautstärkereglern verwendet. Dazwischen eingefügte Inhalte werden nicht unterstützt .

(3) Das Videoelement ermöglicht mehrere Quellelemente, wie sie vom Browser des Videoelements angezeigt werden. Das Quellelement kann verschiedene Videodateien verknüpfen. Der Browser verwendet das erste erkannte Format:

1

2

3

4

5

<video width="320" height="240" controls="controls">

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

     <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

Nach dem Login kopieren

4. Die Unterstützung jedes Browsers für verschiedene Formate:

Format IE Firefox Opera Chrome Safari

Ogg Nein 3.5+ 10.5+ 5.0+ Nein
                                                                                                                                                                                                                                                       Wenn dieses Attribut angezeigt wird, werden dem Benutzer Steuerelemente angezeigt, z. Die Mediendatei wird nach Abschluss der Wiedergabe erneut abgespielt.

Vorladen Vorladen Wenn dieses Attribut angezeigt wird, wird das Video beim Laden der Seite geladen und kann abgespielt werden. Wenn „Autoplay“ verwendet wird, wird dieses Attribut ignoriert

src url Die URL des abzuspielenden Videos

Breite Pixel Legen Sie die Breite des Videoplayers fest

3. HTML 5 Video + DOM:

1. Verwenden Sie DOM zur Steuerung:

(1) HTML5-Elemente verfügen auch über Methoden, Eigenschaften und Ereignisse.

(2) Methoden werden zum Abspielen, Anhalten, Laden usw. verwendet. Die Eigenschaften (wie Dauer, Lautstärke etc.) können ausgelesen bzw. eingestellt werden. Das DOM-Ereignis kann Sie beispielsweise darüber informieren, dass die Elemente mit der Wiedergabe, dem Anhalten, Stoppen und Warten auf

2 begonnen haben. Methoden, Attribute und Ereignisse Pause () Currenttime Pause

Load () VideoDth Progress

CanplayType VideoHeht-Fehler

Dauer Zeitaktualisierung Beendet EERROR Abbruch Angehalten Leer

Mut ED EMPTIEDm

seeking waiting

volume loadedmetadata

height

width

在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用

四.HTML5 音频:

1、Web 上的音频:

(1)大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件

(2)HTML5 规定了一种通过 audio 元素来包含音频的标准方法

(3)audio 元素能够播放声音文件或者音频流

2.audio 元素支持的三种音频格式:

IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis √ √ √

MP3 √ √ √

Wav √ √ √

3.如何工作:

(1)示例代码:

(2)control 属性供添加播放、暂停和音量控件, 与 之间插入的内容是供不支持 audio 元素的浏览器显示的

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

1

2

3

4

5

<audio controls="controls">

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

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

Your browser does not support the audio tag.

</audio>

Nach dem Login kopieren

(4) 标签的属性:

属性 值 描述

autoplay autoplay 如果出现该属性,则音频在就绪后马上播放

controls controls 如果出现该属性,则向用户显示控件,比如播放按钮

loop loop 如果出现该属性,则每当音频结束时重新开始播放

preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性

src url 要播放的音频的 URL

五.HTML5 拖放:

1.拖放(Drag 和 drop)是 HTML5 标准的组成部分:

(1)拖放是一种常见的特性,即抓取对象以后拖到另一个位置

(2)在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放

2.拖动相关设置:

(1)设置元素为可拖放:

首先,为了使元素可拖动,把 draggable 属性设置为 true :

1

<img draggable="true" />

Nach dem Login kopieren

(2)规定拖动元素:

ondragstart 和 setData()

ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

1

2

3

function drag(ev){

    ev.dataTransfer.setData("Text",ev.target.id);

}

Nach dem Login kopieren

数据类型是 “Text”,值是可拖动元素的 id (“drag1”)

(3)放到何处 - ondragover:

ondragover 事件规定在何处放置被拖动的数据;

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

调用 ondragover 事件的 event.preventDefault() 方法:

1

event.preventDefault()

Nach dem Login kopieren

(4)进行放置 - ondrop:

当放置被拖数据时,会发生 drop 事件;

ondrop 属性调用了一个函数,drop(event):

1

2

3

4

5

6

function drop(ev)

{

    ev.preventDefault();

    var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

}

Nach dem Login kopieren

(5)注意点:

a.调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

b.通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据

c.被拖数据是被拖元素的 id (“drag1”)

d.把被拖元素追加到放置元素(目标元素)中

3.拖动示例代码:

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

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function allowDrop(ev)

{

    ev.preventDefault();

}

 

function drag(ev)

{

    ev.dataTransfer.setData("Text",ev.target.id);

}

 

function drop(ev)

{

    ev.preventDefault();

    var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69" />

 

</body>

</html>

Nach dem Login kopieren

六.Canvas:

1.什么是Canvas:

(1)HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像

(2)画布是一个矩形区域,您可以控制其每一像素

(3)canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

2.创建canvas元素:

示例代码:

1

<canvas id="myCanvas" width="200" height="100"></canvas>

Nach dem Login kopieren

3. 通过 JavaScript 来绘制:

(1)canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

1

2

3

4

5

6

7

8

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

 

//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

Nach dem Login kopieren

(2)使用 id 来寻找 canvas 元素,然后,创建 context 对象,然后进行绘制

(3)fillRect 方法拥有参数 (0,0,150,75):

在画布上绘制 150x75 的矩形,从左上角开始 (0,0)

(4)可以通过canvas绘制出点、线条、圆、渐变背景、图像

七.内联 SVG:

1.什么是SVG:

(1)SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

(2)SVG 用于定义用于网络的基于矢量的图形

(3)SVG 使用 XML 格式定义图形

(4)SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

(5)SVG 是万维网联盟的标准

2.SVG 的优势:

(1)SVG 图像可通过文本编辑器来创建和修改

(2)SVG 图像可被搜索、索引、脚本化或压缩

(3)SVG 是可伸缩的

(4)SVG 图像可在任何的分辨率下被高质量地打印

(5)SVG 可在图像质量不下降的情况下被放大

3.把 SVG 直接嵌入 HTML 页面:

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

      <polygon points="100,10 40,180 190,60 10,60 160,180"

      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

</body>

</html>

Nach dem Login kopieren

八.Canvas vs SVG:

1.SVG:

(1)SVG 是一种使用 XML 描述 2D 图形的语言

(2)SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器

(3)在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形

2.Canvas:

(1)Canvas 通过 JavaScript 来绘制 2D 图形

(2)Canvas 是逐像素进行渲染的。

(3)在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象

3.Canvas 与 SVG 的比较:

(1)Canvas:

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏,其中的许多对象会被频繁重绘

(2)SVG:

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序(比如谷歌地图)

复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

不适合游戏应用

九.地理定位:

1.定位用户的位置:

(1)HTML5 Geolocation API 用于获得用户的地理位置

(2)鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的

2.使用地理定位:

(1)使用 getCurrentPosition() 方法来获得用户的位置

(2)返回用户位置的经度和纬度的代码示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<script>

    var x=document.getElementById("demo");

    function getLocation()

    {

     if (navigator.geolocation)

      {

            navigator.geolocation.getCurrentPosition(showPosition);

      }

    else{x.innerHTML="Geolocation is not supported by this browser.";}

     }

    function showPosition(position)

    {

    x.innerHTML="Latitude: " + position.coords.latitude +

    "<br />Longitude: " + position.coords.longitude;

    }

</script>

Nach dem Login kopieren

(3)示例代码解释:

检测是否支持地理定位

如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息

如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象

showPosition() 函数获得并显示经度和纬度

3.处理错误和拒绝:

(1)getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数

(2)示例代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

function showError(error)

  {

    switch(error.code)

          {

            case error.PERMISSION_DENIED:

             x.innerHTML="User denied the request for Geolocation."

             break;

            case error.POSITION_UNAVAILABLE:

             x.innerHTML="Location information is unavailable."

             break;

         case error.TIMEOUT:

              x.innerHTML="The request to get user location timed out."

              break;

            case error.UNKNOWN_ERROR:

              x.innerHTML="An unknown error occurred."

              break;

     }

}

Nach dem Login kopieren

(3)错误代码:

Permission denied - 用户不允许地理定位

Position unavailable - 无法获取当前位置

Timeout - 操作超时

4.在地图中显示结果:

(1)如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图

(2)示例代码:

1

2

3

4

5

6

7

function showPosition(position)

{

    var latlon=position.coords.latitude+","+position.coords.longitude;

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="

    +latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML="<img src=&#39;"+img_url+"&#39; />";

}

Nach dem Login kopieren

5.getCurrentPosition() 方法 - 返回数据:

(1)若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性

(2)属性:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

属性                          描述

 

coords.latitude             十进制数的纬度

 

coords.longitude                十进制数的经度

 

coords.accuracy             位置精度

 

coords.altitude             海拔,海平面以上以米计

 

coords.altitudeAccuracy     位置的海拔精度

 

coords.heading              方向,从正北开始以度计

 

coords.speed                速度,以米/每秒计

 

timestamp                   响应的日期/时间

Nach dem Login kopieren

6.Geolocation 对象 - 其他有趣的方法:

(1)watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)

(2)clearWatch() - 停止 watchPosition() 方法

十. Web 存储:

1.在客户端存储数据:

(1)HTML5 提供了两种在客户端存储数据的新方法:

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

sessionStorage - 针对一个 session 的数据存储

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

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

(4)对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据

(5)HTML5 使用 JavaScript 来存储和访问数据

2.localStorage 方法:

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

(2)如何创建和访问 localStorage:

1

2

3

4

<script type="text/javascript">

    localStorage.lastname="Smith";

    document.write(localStorage.lastname);

</script>

Nach dem Login kopieren

(3)对用户访问页面的次数进行计数的例子:

1

2

3

4

5

6

7

8

9

10

11

<script type="text/javascript">

    if (localStorage.pagecount)

    {

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

      }

    else

    {

      localStorage.pagecount=1;

    }

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

</script>

Nach dem Login kopieren

3.sessionStorage 方法:

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

(2)如何创建并访问一个 sessionStorage:

1

2

3

4

<script type="text/javascript">

    sessionStorage.lastname="Smith";

    document.write(sessionStorage.lastname);

</script>

Nach dem Login kopieren

(3)对用户在当前 session 中访问页面的次数进行计数的例子:

1

2

3

4

5

6

7

8

9

10

11

<script type="text/javascript">

if (sessionStorage.pagecount)

{

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

  }

else

  {

    sessionStorage.pagecount=1;

  }

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

</script>

Nach dem Login kopieren

十一.HTML 5 应用程序缓存:

1.什么是应用程序缓存:

(1)HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问

(2)应用程序缓存为应用带来三个优势:

a.离线浏览 - 用户可在应用离线时使用它们

b.速度 - 已缓存资源加载得更快

c.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

(3)使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本

2.HTML5 Cache Manifest 实例:

带有 cache manifest 的 HTML 文档(供离线浏览)的示例:

1

2

3

4

5

6

<!DOCTYPE HTML>

<html manifest="demo.appcache">

<body>

The content of the document......

</body>

</html>

Nach dem Login kopieren

3.Cache Manifest 基础:

(1)如需启用应用程序缓存,在文档的 标签中包含 manifest 属性

(2)manifest 文件的建议的文件扩展名是:".appcache"

(3)manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置

4.Manifest 文件:

(1)manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)

(2)manifest 文件可分为三个部分:

a.CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

b.NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

c.FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

(3)CACHE MANIFEST:

第一行,CACHE MANIFEST,是必需的:

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的

(4)NETWORK:

NETWORK 小节规定文件 “login.asp” 永远不会被缓存,且离线时是不可用的:

1

2

NETWORK:

login.asp

Nach dem Login kopieren

可以使用星号来指示所有其他资源/文件都需要因特网连接:

1

2

NETWORK:

*

Nach dem Login kopieren

(5)FALLBACK:

FALLBACK 小节规定如果无法建立因特网连接,则用 “offline.html” 替代 /html5/ 目录中的所有文件:

1

2

FALLBACK:

/html5/ /404.html

Nach dem Login kopieren

第一个 URI 是资源,第二个是替补

5.更新缓存:

(1)一旦应用被缓存,它就会保持缓存直到发生下列情况:

a.用户清空浏览器缓存

b.manifest 文件被修改(参阅下面的提示)

c.由程序来更新应用缓存

(2)完整的 Manifest 文件:

1

2

3

4

5

6

7

8

9

10

11

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

 

NETWORK:

login.asp

 

FALLBACK:

/html5/ /404.html

Nach dem Login kopieren

(3)以 “#” 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新

(4)如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

6.关于应用程序缓存的注释:

(1)一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件

(2)浏览器对缓存数据的容量限制可能不太一样

十二.Web Workers:

1.什么是 Web Worker:

(1)web worker 是运行在后台的 JavaScript,不会影响页面的性能

(2)当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成
(3)web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行

2.HTML5 Web Workers 实例:

(1)检测 Web Worker 支持:

在创建 web worker 之前,请检测用户的浏览器是否支持它:

1

2

3

4

5

6

7

8

9

if(typeof(Worker)!=="undefined")

{

// Yes! Web worker support!

// Some code.....

}

else

{

// Sorry! No Web Worker support..

}

Nach dem Login kopieren

(2)创建 web worker 文件:

在一个外部 JavaScript 中创建我们的 web worker

我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中:

1

2

3

4

5

6

7

8

9

var i=0;

 

function timedCount()

{

    i=i+1;

    postMessage(i);

    setTimeout("timedCount()",500);

}

timedCount();

Nach dem Login kopieren

(3)创建 Web Worker 对象:
下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 “demo_workers.js” 中的代码:

1

2

3

4

if(typeof(w)=="undefined")

{

    w=new Worker("demo_workers.js");

  }

Nach dem Login kopieren

然后我们就可以从 web worker 发生和接收消息了。向 web worker 添加一个 “onmessage” 事件监听器:

1

2

3

w.onmessage=function(event){

    document.getElementById("result").innerHTML=event.data;

};

Nach dem Login kopieren

(4)终止 Web Worker:

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

1

w.terminate();

Nach dem Login kopieren

3.Web Workers 和 DOM:

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

1

window 对象、document 对象、parent 对象

Nach dem Login kopieren

十三.服务器发送事件:

1.Server-Sent 事件 - 单向消息传递:

(1)Server-Sent 事件指的是网页自动获取来自服务器的更新

(2)以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

(3)HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新

2.接收 Server-Sent 事件通知:

(1)EventSource 对象用于接收服务器发送事件通知:

1

2

3

4

5

var source=new EventSource("demo_sse.php");

source.onmessage=function(event)

{

    document.getElementById("result").innerHTML+=event.data + "<br />";

};

Nach dem Login kopieren

(2)例子解释:

创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 “demo_sse.php”)

每接收到一次更新,就会发生 onmessage 事件

当 onmessage 事件发生时,把已接收的数据推入 id 为 “result” 的元素中

3.检测 Server-Sent 事件支持:

检测服务器发送事件的浏览器支持情况:

1

2

3

4

5

6

7

事件              描述

 

onopen          当通往服务器的连接被打开

 

onmessage       当接收到消息

 

onerror         当错误发生

Nach dem Login kopieren

十四.Input 类型:

1.新的 Input 类型:

email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color

2.浏览器支持:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

    nput type   IE      Firefox     Opera       Chrome      Safari

 

    email       No      4.0         9.0         10.0        No

 

    url         No      4.0         9.0         10.0        No

 

    number      No      No          9.0         7.0         No

 

    range       No      No          9.0         4.0         4.0

 

Date pickers    No      No          9.0         10.0        No

 

    search      No      4.0         11.0        10.0        No

 

    color       No      No          11.0        No          No

Nach dem Login kopieren

3.Input 类型 - email:

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

(2)代码示例:

1

E-mail: <input type="email" name="user_email" />

Nach dem Login kopieren

4.Input 类型 - url:

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

(2)代码示例:

1

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

Nach dem Login kopieren

5.Input 类型 - number:

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

(2)示例代码:

1

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

Nach dem Login kopieren

(3)下面的属性来规定对数字类型的限定:

1

2

3

4

5

6

7

8

9

属性          值           描述

 

max         number      规定允许的最大值

 

min         number      规定允许的最小值

 

step        number      规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

 

value       number      规定默认值

Nach dem Login kopieren

6.Input 类型 - range:

(1)range 类型用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条,您还能够设定对所接受的数字的限定

(2)代码示例:

1

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

Nach dem Login kopieren

7.Input 类型 - Date Pickers(日期选择器):

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

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

(2)代码示例:

1

Date: <input type="date" name="user_date" />

Nach dem Login kopieren

8.Input 类型 - search:

(1)search 类型用于搜索域,比如站点搜索或 Google 搜索。

(2)search 域显示为常规的文本域

十五.HTML5 表单元素:

1.HTML5 的新的表单元素:

datalist、keygen、output

2.浏览器支持:

1

2

3

4

5

6

7

Input type  IE  Firefox     Opera   Chrome  Safari

 

datalist    No  No          9.5     No      No

 

keygen      No  No          10.5    3.0     No

 

output      No  No          9.5     No      No

Nach dem Login kopieren

3.datalist 元素:

(1)datalist 元素规定输入域的选项列表,列表是通过 datalist 内的 option 元素创建的;

(2)如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

1

2

3

4

5

6

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3School" value="http://www.W3School.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

Nach dem Login kopieren

(3)option 元素永远都要设置 value 属性

4.keygen 元素:

(1)keygen 元素的作用是提供一种验证用户的可靠方法

(2)keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥

私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

(3)目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

(4)代码示例:

1

2

3

4

5

<form action="demo_form.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption: <keygen name="security" />

<input type="submit" />

</form>

Nach dem Login kopieren

5.output 元素:

(1)output 元素用于不同类型的输出,比如计算或脚本输出:

(2)代码示例:

1

<output id="result" onforminput="resCalc()"></output>

Nach dem Login kopieren

十六.HTML5 表单属性:

1.HTML5 的新的表单属性:

(1)新的 form 属性:

autocomplete、novalidate

(2)新的 input 属性:

autocomplete、autofocus、form、form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)、height 和 width、list、min, max 和 step、multiple、pattern (regexp)、placeholder、required

2.浏览器支持:

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

Input type          IE      Firefox     Opera       Chrome      Safari

 

autocomplete        8.0     3.5         9.5         3.0         4.0

 

autofocus           No      No          10.0        3.0         4.0

 

form                No      No          9.5         No          No

 

form overrides      No      No          10.5        No          No

 

height and width        8.0     3.5         9.5         3.0         4.0

 

list                No      No          9.5         No          No

 

min, max and step   No      No          9.5         3.0         No

 

multiple            No      3.5         No          3.0         4.0

 

novalidate          No      No          No          No          No

 

pattern             No      No          9.5         3.0         No

 

placeholder         No      No          No          3.0         3.0

 

required            No      No          9.5         3.0         No

Nach dem Login kopieren

3.autocomplete 属性:

(1)autocomplete 属性规定 form 或 input 域应该拥有自动完成功能

(2)autocomplete 适用于 标签,以及以下类型的 标签:text, search, url, telephone, email, password, datepickers, range 以及 color

(3)当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

1

2

3

4

5

6

<form action="demo_form.asp" method="get" autocomplete="on">

First name: <input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

<input type="submit" />

</form>

Nach dem Login kopieren

4.autofocus 属性:

(1)autofocus 属性规定在页面加载时,域自动地获得焦点。

(2)autofocus 属性适用于所有 标签的类型

(3)代码示例:

1

User name: <input type="text" name="user_name"  autofocus="autofocus" />

Nach dem Login kopieren

5.form 属性:

(1)form 属性规定输入域所属的一个或多个表单

(2)form 属性适用于所有 标签的类型

(3)form 属性必须引用所属表单的 id

(4)代码示例:

1

2

3

4

5

<form action="demo_form.asp" method="get" id="user_form">

First name:<input type="text" name="fname" />

<input type="submit" />

</form>

Last name: <input type="text" name="lname" form="user_form" />

Nach dem Login kopieren

6.表单重写属性:

(1)表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定

(2)表单重写属性有:

formaction - 重写表单的 action 属性

formenctype - 重写表单的 enctype 属性

formmethod - 重写表单的 method 属性

formnovalidate - 重写表单的 novalidate 属性

formtarget - 重写表单的 target 属性

(3)表单重写属性适用于以下类型的 标签:submit 和 image

(4)代码示例:

1

2

3

4

5

6

7

8

9

<form action="demo_form.asp" method="get" id="user_form">

E-mail: <input type="email" name="userid" /><br />

<input type="submit" value="Submit" />

<br />

<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />

<br />

<input type="submit" formnovalidate="true" value="Submit without validation" />

<br />

</form>

Nach dem Login kopieren

7.height 和 width 属性:

(1)height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度

(2)height 和 width 属性只适用于 image 类型的 标签

(3)代码示例:

1

<input type="image" src="img_submit.gif" width="99" height="99" />

Nach dem Login kopieren

8.list 属性:

(1)list 属性规定输入域的 datalist。datalist 是输入域的选项列表

(2)list 属性适用于以下类型的 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。

(3)代码示例:

1

2

3

4

5

6

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3school.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

Nach dem Login kopieren

9.min、max 和 step 属性:

(1)min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)

(2)max 属性规定输入域所允许的最大值。

min 属性规定输入域所允许的最小值。

step 属性为输入域规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)

(3)min、max 和 step 属性适用于以下类型的 标签:date pickers、number 以及 range

(4)代码实例:

1

Points: <input type="number" name="points" min="0" max="10" step="3" />

Nach dem Login kopieren

10.multiple 属性:

(1)multiple 属性规定输入域中可选择多个值

(2)multiple 属性适用于以下类型的 标签:email 和 file

(3)代码实例:

1

Select images: <input type="file" name="img" multiple="multiple" />

Nach dem Login kopieren

11.novalidate 属性:

(1)novalidate 属性规定在提交表单时不应该验证 form 或 input 域

(2)novalidate 属性适用于 以及以下类型的 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.

(3)代码示例:

1

2

3

4

<form action="demo_form.asp" method="get" novalidate="true">

E-mail: <input type="email" name="user_email" />

<input type="submit">

</form>

Nach dem Login kopieren

12.pattern 属性:

(1)pattern 属性规定用于验证 input 域的模式(pattern)

(2)模式(pattern) 是正则表达式

(3)pattern 属性适用于以下类型的 标签:text, search, url, telephone, email 以及 password

(4)下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):

1

2

Country code: <input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" />

Nach dem Login kopieren

13.placeholder 属性:

(1)placeholder 属性提供一种提示(hint),描述输入域所期待的值

(2)placeholder 属性适用于以下类型的 标签:text, search, url, telephone, email 以及 password。

(3)提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:

1

<input type="search" name="user_search"  placeholder="Search W3School" />

Nach dem Login kopieren

14.required 属性:

(1)required 属性规定必须在提交之前填写输入域(不能为空)

(2)required 属性适用于以下类型的 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

(3)代码示例:

1

Name: <input type="text" name="usr_name" required="required" />

Nach dem Login kopieren

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen von HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage