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
So überwachen Sie die Linux-Speichernutzung mit einem Bash-Skript
Vorwort Auf dem Markt sind zahlreiche Open-Source...
Details zu Linux-Dateideskriptoren, Dateizeigern und Inodes
Inhaltsverzeichnis Linux - Dateideskriptor, Datei...
So stellen Sie ein SpringBoot-Projekt mit Dockerfile bereit
1. Erstellen Sie ein SpringBoot-Projekt und packe...
So stoppen Sie die CSS-Animation mittendrin und behalten die Haltung bei
Vorwort Ich bin einmal auf ein schwieriges Proble...
Lösen Sie das Problem der VScode-Konfiguration durch Remote-Debugging des Linux-Programms
Werfen wir einen Blick auf das Problem des VScode...
Wie Sie die redundanten Felder der Datenbank sinnvoll nutzen
Privot ist die Zwischentabelle von Viele-zu-viele...
Vue implementiert Chat-Schnittstelle
In diesem Artikelbeispiel wird der spezifische Co...
Implementieren der Formularübermittlung ohne Aktualisierung der Seite basierend auf HTML
Die Verwendung von Ajax zum Implementieren der For...
Detaillierte Erklärung des Hash-Jump-Prinzips von Vue
Inhaltsverzeichnis Der Unterschied zwischen Hash ...
Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten
Einfaches Beispiel für das Hinzufügen und Entfern...
Der Unterschied zwischen Schlüssel und Index in MySQL
Schauen wir uns zunächst den Code an: ALTER TABLE...
JavaScript zum Implementieren des Click-to-Switch-Bestätigungscodes und der Bestätigung
In diesem Artikel wird der spezifische JavaScript...
Detaillierte Erklärung der Datentypen und Schemaoptimierung in MySQL
Ich lerne derzeit etwas über MySQL-Optimierung. D...
Detaillierte Erklärung der Set-Datenstruktur von JavaScript
Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...
Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell
Wie oben gezeigt, sind Füllwerte zusammengesetzte...