Welche Funktionen hat HTML5?-Front-End-Fragen und Antworten-php.cn

Funktionen von HTML5: 1. Neue Grafikbibliothek, die den Inhalt der Website bereichern kann; 3. Drag-and-Drop-Funktion; Leistung und Integration; 8. Gerätezugriff; 9. Stildesign usw.

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

Funktionen von HTML5

1. Neue Grafikbibliothek:

HTML5 führt Canvas- und WebGL-Funktionsbibliotheken ein, die Website-Inhalte umfangreicher machen können. Insbesondere die WebGL-Funktionsbibliothek kann in diesem Bereich fast das gesamte Spiel verändern. Schauen Sie sich nur diese berühmte Quake II-Spielszene an, die vollständig in HTML5 entwickelt wurde. Für mich stellt dies eine neue Ära dar und lässt einen erahnen, wie Spiele in Zukunft gespielt werden.

2. Bequemere Multimedia-Inhalte:

Wenn Sie schon einmal eine Website entworfen haben, die viele Audio- und Videoinhalte enthalten muss, kennen Sie das Gefühl, klobig zu sein. Um den gewünschten Effekt zu erzielen, ist es häufig erforderlich, eine Reihe von Flash- und -Tags zu verwenden. Aber Sie müssen sich diese Mühe nicht mehr machen. HTML5 führt die benutzerfreundlichen Tags ein, sodass das Hinzufügen von Multimedia-Inhalten zu Ihrer Website einfacher ist. Genau wegen dieser Funktion haben viele Online-Video-Websites begonnen, auf HTML5 umzusteigen.

3. Geolokalisierung:

Menschen nutzen das Internet immer weniger über Desktop-Computer oder sogar Laptops. Heutzutage surfen viele Menschen über tragbare Mobilgeräte wie Smartphones und Tablets im Internet. Diese aktuelle Funktion für den Zugriff auf mobile Netzwerke eröffnet zusammen mit den neuen Geolokalisierungsfunktionen in HTML5 unzählige neue Möglichkeiten. Wenn Sie den genauen Standort eines Benutzers kennen, wenn er Ihre Website besucht, können Sie personalisierte Inhalte bereitstellen, die zum Kontext des Benutzers passen. Wenn beispielsweise beim Besuch einer Website zum Thema Ausflüge festgestellt wird, dass Sie sich in einem Innenstadtbereich befinden, kann diese Informationen zur Reiseplanung bereitstellen. Wenn Sie die Website jedoch von einem Vorort aus besuchen, wird die interaktive Kartenfunktion angezeigt standardmäßig.

4. Drag-and-Drop-Funktion:

Dies ist eine subtile Änderung, aber sie ist sehr wichtig. Mit der Drag-and-Drop-Funktion können Sie Inhalte vom Browser direkt auf Ihren Computer ziehen oder Inhalte von Ihrem Computer in den Browser ziehen. Es ist wirklich eine epochale Veränderung, nicht wahr? Werfen wir einen Blick auf diese Anzeige und denken wir darüber nach: Wenn soziale Netzwerke über eine solche Funktion verfügen, können Sie, wenn Sie aus dem Urlaub zurückkommen, ganz einfach Ihre Urlaubsfotos auswählen, sie dann in den Browser ziehen und sie dann mit anderen teilen Ihre Online-Freunde sofort. Auf diese Weise möchte ich mit der Website interagieren!

5. Desktop-Benachrichtigungen:

Desktop-Benachrichtigungen sind kleine Popup-Fenster, die außerhalb des Browsers angezeigt werden, auch wenn sie nicht auf der Website surfen. Diese Funktion ist derzeit nur in Google Chrome verfügbar. Eine Demonstration finden Sie hier. Diese Benachrichtigungen eignen sich hervorragend für E-Mail-Benachrichtigungen, Updates für soziale Netzwerke, Weibo-Nachrichten und andere Dienste. In Verbindung mit der Drag-and-Drop-Funktionalität verschwimmt die Unterscheidung zwischen Online- und lokalen Anwendungen wirklich.

6. Offline und Speicher

Offline-Ressourcen: Anwendungscache. Firefox unterstützt die HTML5-Offline-Ressourcenspezifikation vollständig. Die meisten anderen bieten nur einen gewissen Grad an Unterstützung für Offline-Ressourcen.

Online- und Offline-Events. Firefox 3 unterstützt WHATWG-Online- und Offline-Ereignisse, die es Anwendungen und Erweiterungen ermöglichen, zu erkennen, ob eine Netzwerkverbindung verfügbar ist, und zu erkennen, wann eine Verbindung hergestellt und unterbrochen wird.

WHATWG-Client-Sitzungs- und Persistenzspeicher (auch bekannt als DOM-Speicher). Clientseitige Sitzungen und persistenter Speicher ermöglichen es Webanwendungen, strukturierte Daten auf der Clientseite zu speichern.

IndexedDB. Es handelt sich um einen Webstandard, der darauf ausgelegt ist, große Mengen strukturierter Daten im Browser zu speichern und Indizes für diese Daten für einen leistungsstarken Abruf zu verwenden.

Verwenden Sie Dateien aus Webanwendungen. Gecko wurde um Unterstützung für die neue HTML5-Datei-API erweitert, die es Webanwendungen ermöglicht, auf vom Benutzer ausgewählte lokale Dateien zuzugreifen. Dazu gehört die Unterstützung der Mehrfachdateiauswahl mithilfe des neuen Mehrfachattributs des -Elements. Und FileReader.

7. Leistung und Integration

Web Worker. Die Möglichkeit, JavaScript-Berechnungen an Hintergrundthreads zu delegieren, verhindert, dass interaktive Ereignisse langsamer werden, indem diese Aktivitäten zugelassen werden.

XMLHttpRequest Level 2. Ermöglicht das asynchrone Lesen von Teilen der Seite und ermöglicht so die Anzeige dynamischer Inhalte, die je nach Zeit und Benutzerverhalten variieren. Dies ist die Technologie hinter Ajax.

Just-in-Time kompilierte JavaScript-Engine. Die neue Generation der JavaScript-Engine ist leistungsfähiger und leistungsfähiger.

History-API. Ermöglicht die Manipulation des Browserverlaufs. Dies ist besonders nützlich für Seiten, die interaktiv neue Informationen laden.

conentEditable-Attribut: Verwandeln Sie Ihre Website in ein Wiki! HTML5 hat das contentEditable-Attribut standardisiert. Erfahren Sie mehr über diese Funktion.

Drag & Drop. Die Drag-and-Drop-API von HTML5 unterstützt das Ziehen und Ablegen von Elementen innerhalb und zwischen Websites. Es bietet außerdem eine einfachere API zur Verwendung durch Erweiterungen und Mozilla-basierte Anwendungen.

Fokusverwaltung in HTML. Unterstützung für die neuen HTML5-Eigenschaften activeElement und hasFocus.

Webbasierter Protokollhandler. Sie können jetzt eine Webanwendung als Protokollhandler registrieren, indem Sie die Methode navigator.registerProtocolHandler() verwenden.

requestAnimationFrame. Ermöglicht die Kontrolle über das Rendern von Animationen für eine bessere Leistung.

Vollbild-API. Steuerelemente nutzen den gesamten Bildschirm für eine Webseite oder Anwendung, ohne die Browseroberfläche anzuzeigen.

Zeigersperr-API. Ermöglicht die Fixierung des Zeigers auf Inhalte, sodass Spiele oder ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.

Online- und Offline-Events. Um eine gute offlinefähige Webanwendung zu erstellen, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Übrigens müssen Sie auch wissen, wann Ihre Bewerbung wieder online ist.

8. Gerätezugriff

Verwenden Sie die Kamera-API. Ermöglicht Ihnen die Verwendung und Bedienung der Kamera Ihres Computers sowie den Zugriff auf Fotos von dort.

Touch-Ereignisse. Handler, der auf Ereignisse reagiert, wenn der Benutzer den Touchscreen drückt.

Geolokalisierung nutzen. Lassen Sie den Browser Geolocation-Dienste nutzen, um den Standort des Benutzers zu lokalisieren.

Geräteausrichtung erkennen. Ermöglicht Benutzern das Abrufen von Informationen, wenn das Gerät, auf dem der Browser ausgeführt wird, die Ausrichtung ändert. Dies kann als Eingabegerät verwendet werden (z. B. um ein Spiel zu erstellen, das auf die Position des Geräts reagiert) oder um das Layout der Seite an die Ausrichtung des Bildschirms (Querformat oder Hochformat) anzupassen.

Zeigersperr-API. Ermöglicht die Fixierung des Zeigers auf Inhalte, sodass Spiele oder ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.

9. Stildesign

Neue Hintergrundstilfunktion. Jetzt können Sie mit box-shadow einen Schatten für die logische Box festlegen und außerdem mehrere Hintergründe festlegen.

Mehr schöne Ränder. Ränder können nicht nur mithilfe von Bildern formatiert werden, indem „border-image“ und die damit verbundenen normalen Eigenschaften verwendet werden, sondern auch abgerundete Ränder können jetzt über die Eigenschaft „border-radius“ unterstützt werden.

Animieren Sie Ihre Stile. Mithilfe von CSS-Übergängen zum Animieren zwischen verschiedenen Zuständen oder mithilfe von CSS-Animationen zum Animieren von Teilen der Seite ohne ein Triggerereignis können Sie jetzt das Bewegen von Elementen auf der Seite steuern.

Typografie-Verbesserungen. Autoren haben eine größere Kontrolle, was zu einer besseren Formatierung führt. Sie können nicht nur den Textüberlauf und die Silbentrennung steuern, sondern auch einen Schatten darauf setzen oder die Verzierungen feiner steuern. Dank der neuen @font-face-Regel können wir jetzt benutzerdefinierte Schriftarten herunterladen und anwenden. .

Neues Präsentationslayout. Um die Designflexibilität zu verbessern, wurden zwei neue Layouts hinzugefügt: CSS-Layout mit mehreren Spalten und CSS-Layout mit flexiblen Boxen.

Verwandte Empfehlungen: „ HTML-Video-Tutorial “