suchen

Heim >Web-Frontend >HTML-Tutorial >Was sind die Unterschiede zwischen HTML5 und traditionellem HTML? Was sind die neuen und abgeschafften Elemente?

Was sind die Unterschiede zwischen HTML5 und traditionellem HTML? Was sind die neuen und abgeschafften Elemente?

yulia
yuliaOriginal
2018-09-17 17:58:312115Durchsuche

Dieser Artikel konzentriert sich hauptsächlich auf die Unterschiede zwischen HTML5 und traditionellem HTML sowie auf einige neue und abgeschaffte Elemente von HTML5. Ich hoffe, dass er für Sie hilfreich sein wird.

1. Änderungen in der HTML5-Syntax

Die in diesem Wissenspunkt erwähnten Änderungen beziehen sich auf die auf HTML4 basierenden Änderungen, hauptsächlich wie folgt:

1. Die Dateierweiterung (.html oder .htm) und der Inhaltstyp (text/html) von HTML5 bleiben unverändert.
2. In HTML5 werden Versionsdeklarationen bewusst nicht verwendet. Ein Dokument gilt für alle HTML-Versionen.
3. Ab HTML5 wird empfohlen, UTF-8 für die Zeichenkodierung von Dateien zu verwenden.
4. HTML5 gewährleistet maximale Kompatibilität mit früheren HTML-Versionen.
Um die Kompatibilität sicherzustellen, müssen wir mit dem Element beginnen. In HTML5 kann das Tag des Elements weggelassen werden. Insbesondere werden die Tags von Elementen in drei Typen unterteilt: „Das End-Tag darf nicht geschrieben werden“, „Das End-Tag kann weggelassen werden“ und „Das Start-Tag und das End-Tag können weggelassen werden“.

Die End-Tag-Elemente dürfen nicht geschrieben werden: area, base, br, col....
Das End-Tag kann weggelassen werden: li, dt, dd, p, rt...
Alle Start-Tags und End-Tags können weggelassen werden: html, head, body...

2. Neue Strukturelemente

section stellt einen Inhaltsblock auf der Seite dar, z. B. ein Kapitel, eine Kopfzeile, eine Fußzeile oder einen anderen Teil der Seite. Das Element

article stellt einen unabhängigen Inhalt auf der Seite dar, der nicht mit dem Kontext zusammenhängt, z B. in einem Blog. Das
aside-Element stellt zusätzlich zum Inhalt des
header-Elements einen Inhalt dar Block oder die gesamte Seite auf der Seite. Das
hgroup-Element wird verwendet, um den Titel der gesamten Seite oder eines Inhaltsblocks auf der Seite darzustellen. Das
footer-Element stellt die Fußnote der gesamten Seite dar Inhaltsblock auf der Seite. Im Allgemeinen enthält es den Namen des Erstellers, das Erstellungsdatum und die Kontaktinformationen des Erstellers; das
nav-Element stellt den Navigationslink-Teil der Seite dar; Stellt im Allgemeinen den Hauptfluss des Dokuments dar. Verwenden Sie das figcaption-Element, um der Abbildungselementgruppe einen Titel hinzuzufügen


2. Andere neu hinzugefügte Elemente

Das Audioelement definiert Audio, z. B. Musik oder andere Audiostreams. Das

Einbettungselement wird zum Einfügen verschiedener Multimedia-Inhalte verwendet. Das Format kann Midi, Wav, AU, MP3 usw. sein Präsentieren Sie dem Benutzer den Text, der hervorgehoben oder hervorgehoben werden muss. Eine typische Anwendung besteht darin, Benutzern in Suchergebnissen Suchschlüsselwörter hervorzuheben phonetisch oder Zeichen)

rt-Element stellt Zeichen dar (Chinesisch (Pinyin oder Zeichen) Erklärung oder Aussprache
rp-Element wird in Ruby-Kommentaren verwendet, um zu definieren, was von Browsern angezeigt wird, die Ruby-Elemente nicht unterstützen.
Das wbr-Element stellt einen weichen Linienumbruch dar, und wenn die Breite nicht ausreicht, wird es hier aktiv umgebrochen.
Das Canvas-Element stellt Grafiken wie Diagramme und andere Bilder dar.
Das Cammand-Element stellt Befehlsschaltflächen dar , wie etwa Optionsfelder und Kontrollkästchen.
Details-Element stellt die detaillierten Informationen dar, die der Benutzer benötigt und erhalten kann
das Datagrid-Element stellt eine Liste optionaler Daten dar, die in Form eines angezeigt werden Baumliste
keygen-Element stellt den generierten Schlüssel dar
Das Ausgabeelement stellt verschiedene Arten der Ausgabe dar, beispielsweise die Ausgabe eines Skripts
Das Quellelement definiert Medienressourcen für Medienelemente (z. B.

URL-Typ stellt das Texteingabefeld dar, in das die URL-Adresse eingegeben werden muss

Zahl Der Typ stellt ein Texteingabefeld dar, in das ein numerischer Wert eingegeben werden muss
Bereich Der Typ stellt ein Texteingabefeld dar wobei ein numerischer Wert innerhalb eines bestimmten Bereichs eingegeben werden muss

HTML5 verfügt über mehrere neue Eingabetextfelder zur Auswahl von Datums- und Uhrzeitangaben:
Datum – Tag, Monat, Jahr auswählen
Monat – Monat, Jahr auswählen
Woche – Woche und Jahr auswählen

Zeit – Uhrzeit auswählen (Stunden und Minuten)

Datum/Uhrzeit – – Uhrzeit, Tag, Monat, Jahr (UTC-Zeit) auswählen
datetime.local – Uhrzeit und Tag auswählen , Monat, Jahr (Ortszeit)



3. Elemente zerstören

1. Elemente, die durch CSS ersetzt werden können Für Elemente B. Basefont, Big, Center, Font, S, Strike, TT, U, weil ihre Funktionen rein sind Gehen Sie zum Bildschirmanzeigedienst, und HTML5 befürwortet das Einfügen der Bildschirmanzeigefunktion in das CSS-Stylesheet für eine einheitliche Bearbeitung, also diese Elemente werden abgeschafft
2. Der Frame Frame wird nicht mehr verwendet

Für das Frameset-Element, Frame-Elemente und Noframes-Elemente werden Frames nicht mehr unterstützt HTML5. Es werden nur Iframes oder eine vom Server erstellte zusammengesetzte Seite unterstützt. Gleichzeitig werden die oben genannten drei Elemente abgeschafft.


3. Elemente werden nur von einigen Browsern unterstützt

Für Elemente wie Applet, BGSound, Blink und Marquee wurden diese Elemente in HTML 5 abgeschafft, da nur einige Browser diese Elemente unterstützen, insbesondere das BGSound-Element und das Marquee-Element, die nur von Internet Explorer unterstützt werden. Das applet-Element kann durch das ernedd-Element oder das object-Element ersetzt werden, das bgsound-Element kann durch das audio-Element ersetzt werden und das Marquee kann durch JavaScript-Programmierung ersetzt werden

4. Andere veraltete Elemente:
Zerstöre das rb-Element und verwende Ruby. Elementersetzung
löscht das Akronymelement, verwendet abbr-Element als Ersatz,
als Ersatz für das dir-Element, verwendet ul-Element als Ersatz für
löscht das isindex-Element, verwendet das form-Element in Kombination mit dem Eingabeelement für Ersetzen Sie
, um das Listing-Element abzuschaffen. Verwenden Sie das pre-Element, um
zu ersetzen, um das xmp-Element zu verwerfen. Verwenden Sie das Codeelement, um
zu ersetzen, um das nextid-Element zu verwerfen. Verwenden Sie GUIDS, um
zu ersetzen, um das zu verwerfen Klartextelement, verwenden Sie den MIME-Typ „text/plian“, um

vier .Neue Attribute und abgeschaffte Attribute

Neue Attribute
1. verwandte Attribute

Neues Autofokus-Attribut, das dafür sorgt, dass das Element automatisch den Fokus erhält, wenn der Bildschirm geöffnet wird
Fügen Sie ein Platzhalterattribut hinzu, das den Benutzer zur Eingabe auffordert und ihm mitteilt, was er eingeben kann;
Fügen Sie ein Formularattribut hinzu, geben Sie an, zu welchem ​​Formular es gehört, und platzieren Sie es dann an einer beliebigen Stelle auf der Seite, nicht innerhalb des Formulars.
Das erforderliche Attribut wurde hinzugefügt, das angibt, dass es beim Absenden durch den Benutzer überprüft wird. und es muss Eingabeinhalt im Element geben;
.....
2 Linkbezogene Attribute
Fügen Sie das Medienattribut hinzu, das den Typ des Mediums/Geräts angibt, für das die Ziel-URL optimiert ist und kann nur verwendet werden, wenn das href-Attribut und das rel-Attribut zum Attribut „a“ und „link“ hinzugefügt werden Reverend, der die Liste angibt, die in umgekehrter Reihenfolge angezeigt werden soll;
fügt dem Skriptelement das async-Attribut hinzu, das definiert, ob das Skript asynchron ausgeführt wird
......


2. Attribute zerstören

Alle Attribute, die durch CSS-Stylesheets ersetzt werden können, sind veraltet.

Redundante Attribute wie: Ziel, Profil, Version usw. werden abgeschafft Neues Konzept der „globalen Attribute“ wurde hinzugefügt. Die sogenannten globalen Attribute beziehen sich auf Attribute, die für jedes Element verwendet werden können.

1. Dieses Attribut ermöglicht Benutzern die Bearbeitung Der Inhalt des Elements kann den Mausfokus erhalten und kann als wahr oder falsch angegeben werden. Wenn es wahr ist, ist die Bearbeitung zulässig , Bearbeitung ist nicht zulässig, wenn angegeben, wird dies durch Vererbung bestimmt.
2. designMode-Attribut
Mit diesem Attribut wird bestimmt, ob die gesamte Seite bearbeitet werden kann. Es gibt zwei Attribute „on“ und „off“. Wenn das Attribut „ein“ ist, kann es bearbeitet werden; wenn es „aus“ ist, kann es nicht bearbeitet werden.

3. Verstecktes Attribut

Alle Elemente dürfen ein verstecktes Attribut verwenden, das dem versteckten Element im Eingabeelement ähnelt. Seine Funktion besteht darin, den Browser zu benachrichtigen, das Element nicht darzustellen und das Element unsichtbar zu machen. Der Attributwert ist ein boolescher Wert. Wenn er wahr ist, ist er unsichtbar; wenn er falsch ist, ist er sichtbar. 4. Rechtschreibprüfungsattribut Dieses Attribut ist ein neues Attribut, das von HTML 5 für die beiden Texteingabefelder Eingabeelement (Typ=Text) und Textbereich bereitgestellt wird. Es prüft hauptsächlich die Rechtschreibung und Grammatik des Benutzereingabeinhalts. Der Attributwert ist ein boolescher Wert. Sie müssen eindeutig angeben, dass der Attributwert wahr oder falsch ist. Die Schreibmethode ist wie folgt: