Was sind die neuen Funktionen von HTML5? Zusammenfassung der neuen Funktionen von HTML5

Wir alle wissen, dass HTML5 die fünfte große Modifikation von HTML ist. Da es sich also um eine große Modifikation handelt, wird es definitiv neue Funktionen geben. Was sind die neuen Funktionen von HTML5? Im nächsten Artikel erhalten Sie eine Zusammenfassung der neuen Funktionen von HTML5.

Zuallererst sollten wir alle wissen, was HTML5 bedeutet. Wenn Sie nicht viel über HTML5 wissen, können Sie einen Blick auf diesen Artikel werfen: Was ist HTML5? Was nützt HTML5? Okay, nachdem wir die spezifische Definition von HTML5 kennengelernt haben, werfen wir einen Blick auf die neuen Funktionen von HTML5.

Was sind die neuen Funktionen von HTML5?

1. Neue Funktionen von HTML5: Canvas-Element zum Malen

Das Canvas-Element wird zum Zeichnen von Grafiken auf der Webseite verwendet ist ein rechteckiger Bereich, dessen Pixel Sie steuern können. Canvas bietet viele Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

rrree

Sprechen wir über SVG: SVG ist ein Grafikformat, das zur Beschreibung zweidimensionaler Vektorgrafiken verwendet wird.

Es gibt drei Möglichkeiten, SVG zu verwenden:

1. SVG direkt als Bild auf der Webseite platzieren.

2. svg realisiert Animationen.

3. Interaktion und Filtereffekte für SVG-Bilder.

Anleitung:

(1) Canvas zeichnet 2D-Grafiken über JavaScript.

(2) Canvas wird Pixel für Pixel gerendert.

(3) Sobald die Grafik im Canvas gezeichnet ist, erhält sie nicht mehr die Aufmerksamkeit des Browsers. Wenn sich die Position ändert, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise von Grafiken verdeckt wurden.

(4) SVG ist eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet.

(5) SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. Sie können einem Element einen JavaScript-Ereignishandler hinzufügen.

(6) In SVG wird jede gezeichnete Grafik als Objekt betrachtet. Wenn sich die Eigenschaften des SVG-Objekts ändern, kann der Browser die Grafik automatisch reproduzieren.

Weitere Informationen zu Canvas und SVG finden Sie unter: HTML5-Canvas und HTML5-Inline-SVG

2. Die neuen Funktionen von HTML5 sind umfangreichere und leistungsfähigere Formulare

HTML5 verfügt über mehrere neue Formulareingabetypen. Diese neuen Funktionen sorgen für eine bessere Eingabekontrolle und -validierung.

html5 fügt außerdem die folgenden Formularelemente hinzu:

: Bietet eine zuverlässige Möglichkeit zur Authentifizierung des Benutzers. Das Tag gibt das Schlüsselpaargeneratorfeld an, das im Formular verwendet werden soll.

: Wird für verschiedene Ausgabearten verwendet, z. B. Berechnungen oder Skriptausgaben.

HTML5 neue Formularattribute:

Placehoder-Attribut: Im Eingabefeld wird eine kurze Eingabeaufforderung angezeigt, bevor der Benutzer den Wert eingibt. Das heißt, unsere übliche Standardaufforderung des Eingabefelds verschwindet, nachdem der Benutzer Eingaben gemacht hat.

erforderliches Attribut: Es ist ein boolesches Attribut. Das auszufüllende Eingabefeld darf nicht leer sein

Musterattribut: beschreibt einen regulären Ausdruck, der zur Überprüfung des Werts des -Elements verwendet wird.

min- und max-Attribute: Legen Sie die minimalen und maximalen Werte des Elements fest.

Schrittattribut: Gibt das zulässige Zahlenintervall für das Eingabefeld an.

Höhen- und Breitenattribute: Bildhöhe und -breite für -Tags.

Autofokus-Attribut: Es ist ein boolesches Attribut. Gibt an, dass das Feld automatisch den Fokus erhält, wenn die Seite geladen wird.

Mehrfachattribut: Es ist ein boolesches Attribut. Gibt an, dass innerhalb des -Elements mehrere Werte ausgewählt werden können.

3. Neue Funktionen von HTML5: Video- und Audioelemente für Medien

1. HTML5 bietet einen Standard zum Abspielen von Audiodateien, d. h. mit der Funktion

Instanz:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>

Beschreibung:

(1 ) Steuereigenschaften zum Hinzufügen von Wiedergabe-, Pausen- und Lautstärkereglern.

(2) Zwischen

(3) Das

(4) Das

2. HTML5 bietet eine Standardmethode zum Einbinden von Videos über das Videoelement.

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

Anleitung:

(1) Die Steuerung bietet Wiedergabe-, Pause- und Lautstärkeregler zur Steuerung des Videos. Sie können auch DOM-Operationen verwenden, um die Wiedergabe und Pause des Videos zu steuern, beispielsweise die Methoden play() und pause().

（2）video元素提供了width和height属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

（3）标签之间插入的内容是提供给不支持video元素的浏览器显示的。

（4）video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）。

四、html5新特性之html5地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}　　　

获取用户定位信息：

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log('用户定位数据获取成功')
      　　　　//console.log(arguments);
      　　　　console.log('定位时间：',pos.timestamp)
      　　　　console.log('经度：',pos.coords.longitude)
      　　　　console.log('纬度：',pos.coords.latitude)
      　　　　console.log('海拔：',pos.coords.altitude)
      　　　　console.log('速度：',pos.coords.speed)
},    //定位成功的回调
function(err){ 
 　　　　console.log('用户定位数据获取失败')
      　　　　//console.log(arguments);
}        //定位失败的回调
)

五、html5新特性之html5拖放

拖放（Drag 和 drop）是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放；拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

想要了解更多拖放中的内容可以参考：HTML拖放

下面给出一个实例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>请把图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/xxx.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>

六：html5新特性之html5 Web存储

在客户端存储数据：

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

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

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

七、html5新特性之html5应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存（Application Cache）？

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

应用程序缓存为应用带来三个优势：

（1）离线浏览 - 用户可在应用离线时使用它们

（2）速度 - 已缓存资源加载得更快

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

八、html5新特性之html5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

九、html5新特性之html5服务器发送事件

html5服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent 事件 - 单向消息传递

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

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

十、html5新特性之html5 WebSocket　

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

关于后面这几个特性的更多内容大家可以去看一看：HTML5 完整版手册

以上就是给大家总结的十个html5的新特性，当然了，如果想更深入的学习html5，这里给大家推荐关于html5视频教程。

相关推荐：

HTML5新特性dataset的使用方法

HTML5 中的一些有趣的新特性

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