Heim >Web-Frontend >HTML-Tutorial >Können Sie den Unterschied zwischen HTML5 und HTML erkennen?
Können Sie den Unterschied zwischen HTML5 und HTML erkennen?
- 青灯夜游Original
- 2021-02-22 13:57:442486Durchsuche
Ja. Die Unterschiede sind: In der Dokumentdeklaration hat HTML einen langen Code, und es ist schwierig, sich diesen Code zu merken, aber HTML5 ist anders, es gibt nur eine einfache Deklaration, „“. Sie können in HTML5 zeichnen, Videos und Audio einfügen, jedoch nicht in HTML.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
Was ist HTML5?
html5 ist eine Hypertext-Markup-Sprache, die zuerst von der WHATWG (Web Hypertext Application Technology Working Group) benannt und dann mit xhtml2.0 (Standard) des W3C kombiniert wurde, um die neueste Generation der Hypertext-Markup-Sprache zu erzeugen. Es kann einfach verstanden werden als: HTML 5 ≈ HTML4.0+CSS3+JS+API.
Was ist der Unterschied zwischen hmtl5 und html?
Die statischen Webseiten, die wir derzeit im Web-Frontend entwickeln, sind im Allgemeinen HTML4.0. Gleichzeitig entspricht es der xhtml1.0-Spezifikation des W3C. Was sind also die wesentlichen Unterschiede zwischen ihnen?
1. In der Dokumenttypdeklaration
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
HTML5:
<!DOCTYPE html>
Aus dem Vergleich zwischen den beiden geht hervor: In der Dokumenttypdeklaration hat HTML einen langen Codeabschnitt, und das ist auch der Fall Es ist schwierig, sich diesen Abschnittscode zu merken. Vermutlich generieren ihn viele Leute direkt mit Tools, oder? Aber HTML5 ist anders. Es verfügt nur über einfache Deklarationen, die für die Benutzer einfacher zu merken sind und schlanker sind.
2. In Bezug auf die strukturelle Semantik
html4.0: Es gibt keine Tags, die die strukturelle Semantik widerspiegeln. Wir nennen sie normalerweise so:
<div id="header"></div>
steht für den Kopf der Website.
html5: Es hat große semantische Vorteile. Bietet einige neue HTML5-Tags, wie zum Beispiel:
<header> 、<nav>、<article>、<aside>、<footer>..
3. Leistungsstarke neue Funktionen von HTML5
(1) Leistungsstarke Zeichenfunktion
Möglicherweise gibt es einige Animationen oder Bilder, die in HTML5 durch leistungsstarke Funktionen verwendet werden können Die Malfunktion kann mit JS realisiert werden. Aber es funktioniert nicht in HTML4.0.
In HTML5 gibt es zwei Dinge, die gezeichnet werden können. Schauen wir uns an, welche zwei magischen Dinge das sind.
Verwandte Empfehlung: „Html5-Video-Tutorial“
1. Canvas-Tag
Canvas zeichnet 2D-Grafiken über JavaScript. Canvas wird Pixel für Pixel gerendert.
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.
2.SVG
SVG ist eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet. 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. In SVG wird jede gezeichnete Form als Objekt behandelt. Ändern sich die Eigenschaften eines SVG-Objekts, kann der Browser die Grafik automatisch reproduzieren.
Im Vergleich zu anderen Bildformaten (wie JPEG und GIF) bietet die Verwendung von SVG folgende Vorteile:
(1) SVG-Bilder können mit einem Texteditor erstellt und geändert werden
(2) SVG-Bilder können durchsucht werden, indiziert, geskriptet oder komprimiert
(3) SVG ist skalierbar
(4) SVG-Bilder können in jeder Auflösung mit hoher Qualität gedruckt werden
(5) SVG kann ohne Verlust der Bildqualität vergrößert werden
Daher können beide verwendet werden Werfen wir zum Zeichnen einen Blick auf die Unterschiede zwischen ihnen:
Canvas
1. Hängt von der Auflösung ab
2. Unterstützt keine Ereignishandler
3. Schwache Textwiedergabefunktionen
4. Möglichkeit, das Ergebnis zu speichern Bilder im .png- oder .jpg-Format
5. Am besten geeignet für bildintensive Spiele, bei denen viele Objekte häufig neu gezeichnet werden SVG
1. Keine Abhängigkeit von der Auflösung
2. Unterstützt Event-Handler 3. Am besten geeignet für Anwendungen mit große Rendering-Bereiche (z. B. Google Maps) 4. Hohe Komplexität verlangsamt das Rendern (jede Anwendung, die das DOM übermäßig nutzt, wird nicht schnell sein) 5. Nicht für Spieleanwendungen geeignet(2) Video-Tag hinzufügen
Vielleicht Wenn wir in HTML4.0 ein Video einfügen möchten, müssen wir auch einen langen Codeabschnitt zitieren. Aber im Fall von HTML5. Wir müssen es nur für ein Video-Tag verwenden.<video src="视频地址"></video>//详细属性可以见下图
Welche Vorteile bietet die Bereitstellung eines solchen Labels? Erstens: Sparen Sie Programmierern Zeit beim Schreiben von Code. Zweitens: Ich denke, das Wichtigste ist die SEO-Optimierung. Ob wir das Webseitenmodul selbst benennen, es gibt immer noch eine solche Bezeichnung. Denn der ultimative Zweck beim Erstellen einer Website ist nur einer, nämlich Geld zu verdienen. Wenn Sie Gewinn machen wollen, können Sie Ihr Website-Ranking nur durch SEO-Optimierungstechnologie verbessern, sodass Ihre Website wertvoll wird, und genau diesen Punkt erfüllt HTML5. Warum sagst du das? Denn die von ihm definierten Tags sind optimierungsförderlicher und Spider können Sie identifizieren. Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !
Das obige ist der detaillierte Inhalt vonKönnen Sie den Unterschied zwischen HTML5 und HTML erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!