HTML 5 Vorschau
|
<br />Original: http://www.alistapart.com/articles/previewofhtml5 Von Lachlan Hunt Übersetzt von: zhaozy in 3user.com Zusammenfassung <br />Das Web entwickelt sich ständig weiter. Jeden Tag erscheinen neue und innovative Websites, die die Grenzen von HTML in jeder Hinsicht erweitern. HTML 4 gibt es seit fast 10 Jahren, und Herausgeber suchen weiterhin nach neuen Technologien, die mehr Funktionalität bieten, geraten jedoch aufgrund der Einschränkungen von Auszeichnungssprachen und Browsern oft in eine schwierige Situation. Um Autoren flexiblere, interoperablere, interaktivere und spannendere Websites und Anwendungen bereitzustellen, führt HTML 5 eine Reihe von Funktionen ein und verbessert diese, darunter Formularsteuerelemente, Anwendungsprogrammierschnittstellen (APIs), Multimedia, Struktur und Semantik. Die Arbeit an HTML 5 begann 2004 und wird nun durch die gemeinsamen Bemühungen der W3C HTML WG und der WHATWG vollständig umgesetzt. An den Bemühungen des W3C sind viele wichtige Akteure beteiligt, vor allem die vier großen Browser-Anbieter: Apple, Mozilla, Opera und Microsoft sowie eine Reihe anderer Organisationen und Einzelpersonen mit unterschiedlichen Interessen und Fachkenntnissen. Die Arbeit an der detaillierten Spezifikation ist noch im Gange und noch lange nicht abgeschlossen. Ebenso können sich die in diesem Artikel beschriebenen Funktionen in Zukunft ändern. Dieser Artikel ist nur eine Übersicht über einige der Hauptfunktionen des aktuellen Entwurfs. Struktur HTML 5 führt eine ganze Reihe neuer Elemente ein, um das Erstellen von Webseiten zu vereinfachen. Die meisten auf HTML 4 basierenden Seiten enthalten eine Reihe gemeinsamer Strukturen, wie z. B. Kopf- und Fußzeilen und Spalten. Derzeit markieren wir diese Blöcke normalerweise mit Div-Elementen und definieren eine beschreibende ID oder Klasse für sie.  Das Diagramm zeigt ein typisches 2-Spalten-Layout mit Div-Elementen mit ID- und Klassenattributen. Es enthält eine Kopf- und Fußzeile, eine horizontale Navigationsleiste unter der Kopfzeile und der Hauptinhalt umfasst Artikel und eine Seitenleiste rechts. Die umfangreiche Verwendung von Div-Elementen ist auf das Fehlen einer klaren Semantik zur Beschreibung dieser Blöcke in der aktuellen HTML 4-Version zurückzuführen. HTML 5 führt neue Elemente zur Darstellung dieser verschiedenen Blöcke ein.  Diese Div-Elemente können durch neue Elemente ersetzt werden: Header, Nav, Section, Article, Aside und Footer. <Text> <header>...</header> <nav>…</nav> <Artikel> <Abschnitt> ... </Abschnitt> </Artikel> <beiseite>...</beiseite> <footer>...</footer> </body> Die Verwendung dieser neuen Elemente bietet mehrere Vorteile (im Vergleich zu HTML 4). In Verbindung mit Überschriftenelementen (h1 - h6) können sie verschachtelte Ebenen von Abschnittsüberschriften markieren, die über die sechs Ebenen in früheren HTML- Versionen hinausgehen. Die Spezifikation enthält einen detaillierten Algorithmus zum Generieren einer Gliederung. Dieser berücksichtigt die Strukturierung dieser Inhalte und ist dennoch abwärtskompatibel mit früheren Versionen. Dies ermöglicht die Generierung eines Inhaltsverzeichnisses in Bearbeitungstools und Browsern, um Benutzern die Navigation im Dokument zu erleichtern. Die folgende Markup-Struktur verwendet beispielsweise verschachtelte Abschnitts- und h1-Elemente: <Abschnitt> <h1>Ebene 1</h1> <Abschnitt> <h1>Ebene 2</h1> <Abschnitt> <h1>Stufe 3</h1> </Abschnitt> </Abschnitt> </Abschnitt> Beachten Sie, dass zur besseren Kompatibilität mit aktuellen Browsern an entsprechenden Stellen auch die Verwendung anderer Überschriften-Elemente (h2 - h6) anstelle von h1-Elementen möglich ist. Indem sie den genauen Zweck von Abschnitten innerhalb einer Seite anhand bestimmter Abschnittselemente identifizieren, können unterstützende Technologien Benutzern dabei helfen, einfacher auf der Seite zu navigieren. Sie können beispielsweise Navigationsblöcke ohne großen Aufwand überspringen oder schnell von einem Artikel zum nächsten springen, ohne dass der Autor Sprunglinks bereitstellen muss. Für Autoren wird der Quellcode klarer und einfacher zu schreiben, wenn sie redundante Divs aus einem Dokument entfernen und durch offensichtlichere Elemente ersetzen. Vorherige Seite 1 2 3 4 Nächste Seite Gesamten Artikel lesen |
<<: Super ausführliches Tutorial zur Installation von MySQL 8.0.23
>>: React implementiert Endlosschleifen-Scrollinformationen
Artikel empfehlen
Unterschiede zwischen FLOW CHART und UI FLOW
Viele Konzepte im UI-Design mögen in der Formulie...
Detaillierter Prozess der SpringBoot-Integration von Docker
Inhaltsverzeichnis 1. Demo-Projekt 1.1 Schnittste...
Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?
Bevor wir dieses Problem verstehen, schauen wir u...
Schritte zum Upgrade des Ubuntu 16.04-Kernels
1. Umwelt Ubuntu 16.04 läuft auf einer virtuellen...
Ideen zum Erstellen von Welleneffekten mit CSS
Zuvor habe ich mehrere Möglichkeiten vorgestellt,...
Implementierungscode für die teilweise Aktualisierung einer HTML-Seite
Aktualisierung der Ereignisantwort: Aktualisierun...
Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen
Inhaltsverzeichnis 1. Vorbereitung Ziehen Sie das...
Eine kurze Erläuterung, warum Daemon Off beim Ausführen von Nginx in Docker verwendet wird
Ich bin sehr glücklich. Wenn ich auf dieses Probl...
Eine kurze Analyse des Reaktionsprinzips und der Unterschiede von Vue2.0/3.0
Vorwort Seit der offiziellen Einführung von vue3....
Das neueste Installations-Tutorial für virtuelle Maschinen VMware 14
Zuerst gebe ich Ihnen den Aktivierungscode für VM...
Detaillierte Erläuterung der 4 gängigen Datenquellen in Spark SQL
Allgemeine Lade-/Schreibmethoden Optionen manuell...
MySQL Community Server 5.6 Installations- und Konfigurations-Tutorial unter Windows 8
Dieser Artikel zeichnet das Installations- und Ko...
Die vue-cli-Konfiguration verwendet den vollständigen Prozessdatensatz von Vuex
Inhaltsverzeichnis Vorwort Installation und Verwe...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17
Funktionen von MySQL: MySQL ist ein relationales ...
So machen Sie React-Komponenten im Vollbildmodus
einführen Dieser Artikel basiert auf React + antd...