Mit der Freigabe HTML5 wurden viele neue Funktionen zu HTML hinzugefügt. Und was noch besser ist, einige Browser unterstützen bereits einige dieser Funktionen, während andere darauf hinarbeiten. Sie können das Hinzufügen dieser Funktionen zu Browsern auf dieser Seite verfolgen.
1. Neuer Doctype und Charset.
Eine der Stärken von HTML5 ist seine Einfachheit.
Ja, das ist alles. Buchstäblich zwei Wörter. Diese Einfachheit ist wahrscheinlich darauf zurückzuführen, dass HTML5 für sich allein existiert und nicht Teil von SGML bleibt.
Charset ist auch sehr einfach, es verwendet utf-8 und wird auf die gleiche Weise gesetzt, buchstäblich mit einem Tag:
2. Neue Struktur
HTML5 versteht, dass eine Webseite eine Struktur hat, genau wie beispielsweise ein Buch. Normalerweise ist dies die Navigation, der Inhalt selbst, das Seitenmenü (Sidebar) und die Kopfzeile. Und HTML5 bietet Tags für all diese Elemente.
- definiert Abschnitte der Seite
- definiert den Titel der Seite
– definiert den Artikel oder Hauptinhalt auf der Seite
– definiert ein Bild, Artikelzusammenfassung
3. Neue Einbauelemente.
Diese neuen Elemente definieren einige Grundkonzepte und bezeichnen Seitenelemente:
- Inhalt angeben
– um einige Messungen anzuzeigen, wie z. B. Speicherplatz
4. Neue Unterstützung für dynamische Seiten
HTML 5 wurde entwickelt, um die Aufgaben von Webentwicklern zu vereinfachen, daher gibt es viele neue Funktionen zur Unterstützung dynamischer Seiten.
Kontextmenü – HTML 5 unterstützt die Erstellung und Verwendung von Kontextmenüs in Webseiten und Anwendungen
asynchronous-Attribut – Dieses Tag teilt dem Browser mit, dass das Skript asynchron geladen werden soll, damit es das Laden und Rendern der restlichen Seite nicht verlangsamt.
– enthält detaillierte Informationen über das Element.
- Erstellt eine Tabelle, die aus einer Datenbank oder einer anderen dynamischen Seitenquelle erstellt wird
- definiert die Aktionen, die passieren sollen, wenn das dynamische Element aktiviert wird
5. Neue Arten von Formularen
HTML5 unterstützt alle alten Formulartypen, aber es sind auch neue hinzugekommen:
Terminzeit
datetime-lokal
Monat
Nummer
Angebot
Email
6. Neue Elemente
Es gibt einige neue Elemente in HTML5:
So können Sie QuickInfos Bilder oder Grafiken hinzufügen oder einfach unterwegs dynamische Grafiken auf der Seite erstellen.
7.Entfernte Elemente
Es gibt auch HTML4-Elemente, die in HTML5 nicht mehr verwendet werden können. Die meisten von ihnen sind veraltet, daher sind solche Aktionen nicht überraschend.
Übersetzung
Webtechnologien entwickeln sich ständig weiter. Jeden Tag werden neue Websites erstellt, die die Leistungsfähigkeit von HTML erweitern. HTML 4 gibt es seit fast einem Jahrzehnt, aber Herausgeber suchen nach neuen Wegen, um die Funktionalität des Formats zu erweitern. Die Vielfalt an Sprachen und Browsern schränkt jedoch einige seiner Fähigkeiten ein.
Um Entwicklern ein flexibleres, interoperables Produkt zu bieten und Projekte interaktiver und interessanter zu gestalten, führt HTML 5 eine Reihe von Funktionen ein und erweitert sie, darunter Formularsteuerelemente, APIs, Multimedia, Struktur und Semantik.
Die Arbeit an HTML 5 begann 2004. Die Entwicklungen sind derzeit im Rahmen einer Zusammenarbeit zwischen der W3C HTML WG und der WHATWG im Gange. Viele bekannte Unternehmen sind an der Entwicklung beteiligt, darunter: Apple, Mozilla, Opera und Microsoft sowie eine Reihe anderer Organisationen und Einzelpersonen mit unterschiedlichen Interessen und Hintergründen.
Beachten Sie, dass sich die Spezifikation noch in der Entwicklung befindet und noch lange nicht vollständig ist. Daher ist es möglich, dass sich in diesem Artikel erwähnte Funktionen in Zukunft ändern. Dieser Artikel soll die neuen Features des Formats HTML Version 5 beschreiben.
Struktur
HTML 5 führt eine Reihe neuer Elemente ein, die die Seitenstruktur viel einfacher machen. Die meisten HTML4-Seiten enthalten eine Reihe von gemeinsame Strukturen, wie Kopf- und Fußzeilen (Seitenkopf und -fuß) und Spalten, und heute wird es zur Tradition, sie mit div-Elementen hervorzuheben und ihnen eine Klasse oder ID zuzuweisen.
Die Abbildung zeigt ein typisches 2-Spalten-Layout mit div-Elementen, denen eine Klasse oder ID zugewiesen ist. Die Struktur enthält - die "Kopfzeile" der Seite, die Fußzeile, das Navigationsmenü und den Inhalt, aufgeteilt in 2 Spalten -
Die Verwendung von div-Elementen ist vorzuziehen, da in der aktuellen HTML-Versionen 4 fehlt die Semantik, um diese Teile genauer zu beschreiben. HTML5 dieses Problem wird durch die Einführung neuer Elemente gelöst, von denen jedes seinen eigenen Namen hat.
Der Dokumentencode sieht so aus:
...
...
...
...
...
Die Verwendung dieser Elemente hat mehrere Vorteile. In Kombination mit Elementüberschriften (h1 - h6) ermöglicht dies das Einbetten eines Unterabschnitts mit einer Überschrift auf jeder Ebene, im Gegensatz zu den möglichen 6 Ebenen in der vorherigen HTML-Version. Die Spezifikation enthält einen detaillierten Algorithmus zum Generieren von Grenzen. Diese Elemente können als Authoring- und Browser-Tools verwendet werden, um ein Inhaltsverzeichnis zu erstellen und Benutzern beim Navigieren durch ein Dokument zu helfen.
Die folgende Struktur ist beispielsweise mit verschachtelten h1-Elementen geschichtet:
Level 1
Level 2
Stufe 3
Beachten Sie, dass für maximale Kompatibilität mit verschiedene Browser, können Sie verschiedene Überschriftenebenen wie h2, h3 usw. verwenden.
Indem der Zweck von Abschnitten auf einer Seite mithilfe bestimmter Abschnittselemente definiert wird, kann diese Technologie dem Benutzer helfen, einfacher auf der Seite zu navigieren. Beispielsweise kann ein Benutzer einfach zu einem Menüabschnitt navigieren oder schnell von einem Artikel zum nächsten navigieren, ohne dass ein Entwickler einen solchen Navigationslink erstellen muss. Auch Entwickler können feiern, denn durch das Ersetzen der div-Elemente durch die passenden Elemente wird der Quellcode einfacher und „sauberer“.
Das "header"-Element stellt den Titel der Seite dar. Dieser Abschnitt kann nicht nur die Überschrift als solche enthalten, sondern auch beliebige Unterüberschriften, die dem Benutzer helfen, den Inhalt der Seite besser zu verstehen.
Eine Vorschau auf HTML 5
Von Lachlan Hunt
Beispiel-Blog
Tagline hier einfügen.
Das Element "Fußzeile". stellt die "Fußzeile" der Seite dar. Dieser Teil der Seite enthält normalerweise einen Link zu den Urheberrechten, Zählern usw.
"nav"-Element- definiert den Seitennavigationsabschnitt:
"beiseite"-Element definiert einen Abschnitt, der sich tangential auf den Inhalt der Seite bezieht und am häufigsten als Anhang verwendet wird.
Einführung
HTML 4 begleitet uns seit etwa 10 Jahren. Während dieser Zeit gab es keine ernsthaften Schritte, um es zu verbessern. Natürlich ist XHTML erschienen, aber es verschärft nur die Regeln und zwingt Sie, immer besseren Code zu schreiben. Gleichzeitig kümmern Sie sich voll und ganz um die Einhaltung der Norm. HTML 5 wurde entwickelt, um mehr zu leisten. Es fügt eine Reihe sehr wichtiger Innovationen hinzu.
Die Arbeit an HTML5 begann bereits 2004, aber erst jetzt (2009) beginnt es, ernsthaftes Interesse zu wecken. Die Browserunterstützung nimmt zu und das Element, das ich am meisten mag (CANVAS), wird von 4 der 5 gängigsten Browser unterstützt. Es ist jedoch nicht ganz realistisch, obwohl möglich, HTML 5 zu verwenden, da neue Norm wird in MSIE nicht unterstützt.
Was ist neu in HTML 5?
Schild
Schild
Kontextmenüs
HTML5 bietet auch eine Methode zum einfachen Hinzufügen von Kontextmenüs zu einer Webseite. Vielleicht sind solche Menüs für normale Websites nicht sehr nützlich. Aber für Anwendungen, in denen viele Funktionen gruppiert und kontextbezogen angezeigt werden möchten, ist dieses Feature genau das Richtige.
Neue Strukturelemente
Da HTML 4 lose strukturiert ist, wurden der 5. Version der Spezifikation neue Elemente hinzugefügt, um diesen Mangel zu beheben:
Abschnitt oder Absatz.
- Seitenkopf (nicht zu verwechseln mit )
- Dieses Tag kann beispielsweise einen Blog-Artikel enthalten.
- kann z. B. zum Erstellen von Diagrammen verwendet werden.
Neue Inline-Elemente
Der HTML5-Standard führt neue Elemente ein, mit denen Sie Textfragmente, die Zeiten und Zahlen enthalten, auf besondere Weise auswählen können:
- markiert einen Textabschnitt. Sie können beispielsweise gefundene Begriffe in der Liste der Suchergebnisse markieren.
- um Zahlen in einem bestimmten Bereich darzustellen. Es kann verschiedene Attribute haben: Wert, Min., Max., Niedrig, Hoch und Optimum.
Neue Arten von Eingabefeldern
HTML5 fügt eine Reihe neuer Typen für Eingabefelder hinzu:
Terminzeit
datetime-lokal
Monat
Nummer
Angebot
Email
Einige von ihnen werden häufig in den Benutzeroberflächen von Desktop-Anwendungen verwendet. Und höchstwahrscheinlich sind sie allen Ihren Benutzern bereits bekannt.
Veraltete Elemente
Die folgenden HTML-Elemente sind veraltet:
Akronym
Applet
Basisschrift
Center
rahmen
Rahmenset
istindex
keine Frames
Noskript
schlagen
Syntax zum Angeben der Codierung
Die Syntax zum Festlegen der Codierung eines Dokuments in HTML5 ist jetzt sehr einfach:
Interaktive Innovationen
Mehrere Innovationen, die das Erstellen von Websites und Webanwendungen einfacher und angenehmer machen:
- zusätzliche Informationen über etwas. Dieses Tag kann beispielsweise in Browsern verwendet werden, um einen Tooltip zu implementieren. Das Tag kann ein offenes Attribut haben, das angibt, ob der Inhalt des Tags anfänglich dem Benutzer gezeigt wird oder nicht.
- Im Gegensatz zu herkömmlichen Tabellen (die statisch sein sollen) kann dieses Tag verwendet werden, um einen interaktiven Datensatz darzustellen. Zum Beispiel für eine Tabelle mit Zeilen- oder Spaltenauswahl, Inline-Datenbearbeitung, Sortierung usw.
Neue Dokumenttyp-Definition (DTD)
In HTML5 ist es viel einfacher, eine DTD zu deklarieren:Die DTD-Deklaration ist hübscher geworden und, denke ich, leichter zu merken. Dies ist höchstwahrscheinlich darauf zurückzuführen, dass HTML nicht mehr mit SGML in Verbindung gebracht wird.
Optionales href in Links
Das href-Attribut ist jetzt optional, da Links in Verbindung mit Skripten verwendet werden können. Es wird wahrscheinlich in Webanwendungen nützlich sein.
Async-Attribut
Das Attribut gibt dem Browser einen Hinweis, dass der Skriptblock asynchron ausgeführt werden kann, anstatt zu warten, bis die Seite vollständig geladen ist.
Fazit
Natürlich werden nicht alle Browser den gesamten Standard unterstützen (ich denke, der Leser hat sich jetzt an den "Lieblings" MSIE erinnert). Aber die Unterstützung kommt mit der Zeit. Und auch die neuen HTML 5-Elemente sind an die aktuelle Situation angepasst. Andererseits unterstützen die meisten Browser die Spezifikation bereits teilweise. Also zum Beispiel das Tag
Wir freuen uns also.
Für Interessierte ist die HTML 5-Spezifikation unter folgendem Link zu finden -
Was ist also neu in HTML5, das nicht in HTML4 war?
Und im Grunde ist alles neu. Die HTML5-Spezifikation bringt viele Änderungen unterschiedlicher Ebene und Bedeutung mit sich. Grundlegende Änderungen lassen sich in mehrere Blöcke unterteilen:
Die Semantik der Sprache. HTML5 führte eine Reihe neuer semantischer Tags ein, um die interne Struktur von Webseiten sinnvoller zu organisieren.
Betrachten Sie die berühmtesten von ihnen:
Navi- wird verwendet, um eine Navigationsleiste zu erstellen;
beiseite- ist ein vereinheitlichendes Tag, das sich am besten zum Hervorheben einer Seitenleiste eignet. Es kann sowohl Navigationsblöcke als auch andere Elemente enthalten, die nicht der Navigation dienen (Werbebanner, Foto des Autors, Schaltflächen für soziale Netzwerke usw.);
Sektion- auch ein vereinheitlichendes Tag. Darüber hinaus kann es in verschiedenen Rollen agieren: entweder die Seite in mehrere Themenbereiche unterteilen oder den Artikel direkt auf der Seite in separate Abschnitte unterteilen;
Artikel- dient dazu, die Seite in separate Artikel zu unterteilen. Sowohl die Abschnitts- als auch die Artikel-Tags haben eine Reihe interessanter Funktionen. Beispielsweise können Sie jetzt die Überschrift der ersten Ebene H1 auf derselben Seite sicher mehrmals verwenden, was zuvor nicht akzeptabel war;
hgruppe- das Tag dient dazu, die Seitentitel in einer logischen Einheit zu gruppieren;
Video- dient zum einfachen Einfügen von Videos auf Seiten der Website;
Audio-- auch zum einfachen Einfügen von Medieninhalten auf Seiten der Website konzipiert;
Leinwand- Erstellt einen Bereich, in dem Sie mithilfe von JavaScript verschiedene Objekte zeichnen, Bilder anzeigen, transformieren und Eigenschaften ändern können.
Über die restlichen Tags können Sie sich unter htmlbook.ru informieren.
Multimedia. HTML5 unterstützt jetzt Multimedia-Inhalte (Audio- und Videoplayer) im HTML-Markup out of the box – mit der passenden API zur Steuerung der Wiedergabe und Codecs.
Grafik. Das Arbeiten mit Grafiken ist dank des Canvas-Tags und einer speziellen JavaScript-API für die Arbeit damit viel einfacher geworden. Ebenfalls offiziell in HTML5 enthalten ist das svg-Tag, mit dem Sie es einbetten können Vektorgrafiken, beschrieben durch den entsprechenden Webstandard (SVG, Scalable Vector Graphics).
Webformulare. Neue Webformularelemente: sowohl Typen als auch Attribute, mit denen Sie die Funktionen herkömmlicher Formulare mit integrierten Tools erweitern können, ohne zusätzliche Bibliotheken zur Validierung von Eingabedaten und Formulareingaben zu verwenden.
JavaScript-API. API zum Arbeiten mit Grafiken und Multimedia, neue erweiterte Funktionen zum Verschieben von Objekten und Arbeiten mit der Historie von Übergängen (History API) sowie eine Reihe kleiner Dinge, wie z. B. die Möglichkeit, Inhalte direkt an der aktuellen Stelle mit Content bearbeitbar zu machen Bearbeitbare Attribute.
Vieles andere. Verbesserte Netzwerkkommunikation. Deutlich verbesserte Datenspeicherung. Web-Tools Arbeiter für die Ausführung Hintergrundprozesse. WebSocket-Schnittstelle zum Aufbau einer dauerhaften Verbindung zwischen einer residenten Anwendung und einem Server. Verbesserte Geschwindigkeit beim Speichern und Laden von Seiten. Unterstützung für CSS3 in der UI-Steuerung, wodurch HTML5-inhaltsorientiert wird.
Es ist also offensichtlich, dass das HTML5-Format einen grundlegend neuen Ansatz zur Erstellung spektakulärer und einprägsamer Grafiken, interaktiver Elemente und anderer Komponenten eines hochwertigen Webdesigns und einer Benutzeroberfläche zeigt. Dies bietet einen unbestreitbaren Vorteil - die Möglichkeit, Flash-Elemente abzulehnen, die bestimmte Schwierigkeiten beim Laden von Seiten verursachen. Gleichzeitig wird eine gewisse Zeit benötigt, um solche Seiten zu laden. Darüber hinaus benötigen Sie für die korrekte Arbeit mit HTML5 einen Computer mit der entsprechenden Systemkapazität, und Browserentwickler sind zu faul, um alle HTML5-Funktionen vollständig zu unterstützen.
Seit mehr als 10 Jahren Hypertext-Auszeichnungssprache HTML hat sich praktisch nicht geändert, was angesichts der enormen Geschwindigkeit der Entwicklung von Webtechnologien sehr seltsam war, und jetzt ist die Änderung endlich passiert und aufgetreten HTML5.
BEI HTML5 Einige neue Elemente und Attribute wurden hinzugefügt und einige alte wurden entfernt (z. B. Schriftart und Center).
Die folgenden Elemente wurden hinzugefügt:
1) Header.
2) Fusszeile.
4) Sektion.
5) Artikel.
6) beiseite.
7) Zahlen.
8) Dialog.
9) m (Marke).
10) Zeit.
11) Meter.
12) Fortschritt.
13) Video.
14) Audio-.
15) Einzelheiten.
16) Datenraster.
17) Speisekarte.
18) Befehl.
Alles andere blieb unverändert. Das heißt, es wird keine Probleme geben, vorausgesetzt, Sie sind mit dem Standard vertraut. Eigentlich bleibt alles beim alten, nur neue Features sind hinzugekommen.
Dank Innovationen HTML5 Sie können die Arbeit von Webmastern viel einfacher machen, indem Sie dasselbe Markup vereinfachen.
Sicherlich fragen Sie sich: „Wird das funktionieren HTML5 mit älteren Browsern?" Die Antwort lautet: "Natürlich ja, aber die neuen Elemente werden natürlich nicht angezeigt." Oder anders gesagt, jeder sieht die neuen Seiten, aber Besitzer moderner Browserversionen werden etwas sehen mehr und anders.
Ich bin mir sicher, dass bald HTML5 denselben Prozentsatz an Benutzern sehen können, den sie jetzt sehen HTML4 die über 10 Jahre alt ist.
Informationen zur Verwendung neuer Funktionen HTML5 Wir werden in den folgenden Artikeln mit Ihnen sprechen.
sushiandbox.ru Mastering PC - Internet. Skypen. Soziale Netzwerke. Lektionen auf Windows.
