suchen
HeimWeb-FrontendHTML-TutorialWas sind die Unterschiede zwischen HTML5 und traditionellem HTML? Was sind die neuen und abgeschafften Elemente?

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:

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen HTML5 und traditionellem HTML? Was sind die neuen und abgeschafften Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Warum sind HTML -Tags für die Webentwicklung wichtig?Warum sind HTML -Tags für die Webentwicklung wichtig?May 02, 2025 am 12:03 AM

HtmltagsareessentialwebdevelopmentaTheStructureAndenhanceWebpages.1) Sie definelayout, semantics und interaktivität.2) SemantictagsimproveAccessibilityandseo.3) ordnungsgemäße Kennzeichnung.

Erläutern Sie die Bedeutung der Verwendung eines konsistenten Codierungsstils für HTML -Tags und -attribute.Erläutern Sie die Bedeutung der Verwendung eines konsistenten Codierungsstils für HTML -Tags und -attribute.May 01, 2025 am 12:01 AM

Ein konsistenter HTML -Codierungsstil ist wichtig, da er die Lesbarkeit, Wartbarkeit und Effizienz des Codes verbessert. 1) Verwenden Sie Kleinbuchstaben und Attribute, 2) Behalten Sie die konsistente Einklebung, 3) Wählen und halten Sie sich an Einzel- oder Doppelzitate.

Wie implementieren Sie Multi-Project-Karussell in Bootstrap 4?Wie implementieren Sie Multi-Project-Karussell in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Lösung zur Implementierung von Multi-Project-Karussell in Bootstrap4, das Multi-Project-Karussell in Bootstrap4 implementiert, ist keine leichte Aufgabe. Obwohl Bootstrap ...

Wie erreicht die offizielle Website von Deepseek den Effekt des durchdringenden Maus -Scroll -Events?Wie erreicht die offizielle Website von Deepseek den Effekt des durchdringenden Maus -Scroll -Events?Apr 30, 2025 pm 03:21 PM

Wie kann man den Effekt der Penetration des Maus -Scroll -Ereignisses erreichen? Wenn wir im Internet stöbern, begegnen wir oft auf spezielle Interaktionsdesigns. Zum Beispiel auf der offiziellen Website von Deepseek � ...

So ändern Sie den Wiedergabesteuerungsstil von HTML -VideoSo ändern Sie den Wiedergabesteuerungsstil von HTML -VideoApr 30, 2025 pm 03:18 PM

Der Standard -Playback -Steuerungsstil von HTML -Video kann nicht direkt über CSS geändert werden. 1. Erstellen Sie benutzerdefinierte Steuerelemente mit JavaScript. 2. verschönern diese Kontrollen durch CSS. 3. Berücksichtigen Sie Kompatibilität, Benutzererfahrung und -leistung. Wenn Sie Bibliotheken wie Video.js oder PLYR verwenden, können Sie den Prozess vereinfachen.

Welche Probleme werden durch die Verwendung von nativem Select auf Ihrem Telefon verursacht?Welche Probleme werden durch die Verwendung von nativem Select auf Ihrem Telefon verursacht?Apr 30, 2025 pm 03:15 PM

Potenzielle Probleme bei der Verwendung natives Auswahl von Mobiltelefonen bei der Entwicklung mobiler Anwendungen haben wir häufig auf die Auswahl von Kästchen. Normalerweise Entwickler ...

Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon?Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon?Apr 30, 2025 pm 03:12 PM

Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon? Bei der Entwicklung von Anwendungen auf mobilen Geräten ist es sehr wichtig, die richtigen UI -Komponenten auszuwählen. Viele Entwickler ...

Wie optimieren Sie die Kollisionsabwicklung von Dritten in einem Raum mit drei.Js und Octree?Wie optimieren Sie die Kollisionsabwicklung von Dritten in einem Raum mit drei.Js und Octree?Apr 30, 2025 pm 03:09 PM

Verwenden Sie drei.Js und Octree, um die Kollisionsabwicklung von Drittrohr im Raum zu optimieren. Verwenden Sie Octree in drei.js, um das Roaming von Drittpersonen im Raum zu implementieren, und fügen Sie Kollisionen hinzu ...

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version