Der Unterschied zwischen H5 und herkömmlichem HTML

In diesem Artikel werden hauptsächlich relevante Informationen zum Unterschied zwischen HTML5 und herkömmlichem HTML in HTML5-Studiennotizen vorgestellt. Freunde, die sie benötigen, können darauf verweisen 1. Änderungen in der HTML5-Syntax
Die in den Wissenspunkten genannten Änderungen beziehen sich auf die auf HTML4 basierenden Änderungen, die im Wesentlichen wie folgt lauten:
1 Die Dateierweiterung (.html oder .htm) und der Inhaltstyp (text/html) von HTML5 bleiben erhalten unverändert.
2. In HTML5 werden Versionsdeklarationen bewusst nicht verwendet und 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“.
• Schluss-Tag-Elemente sind nicht erlaubt: area, base, br, col....
• Schluss-Tags können weggelassen werden: li, dt, dd, p, rt...
• Beide Start-Tag und End-Tag können weggelassen werden: html, head, body.....
2.Neue Strukturelemente von
•Das Abschnittselement stellt einen Inhaltsblock auf der Seite dar, z. B. ein Kapitel, eine Kopfzeile, eine Fußzeile oder einen anderen Teil der Seite.
•Das Artikelelement stellt einen Teil der Seite dar, der keinen Kontext darstellt -bezogener unabhängiger Inhalt, z. B. ein Artikel in einem Blog oder ein Artikel in einer Zeitung;
•aside-Element stellt zusätzlich zum Inhalt des Artikelelements Zusatzinformationen dar; header-Element Stellt den Titel eines Inhaltsblocks auf der Seite oder der gesamten Seite dar;
•hgroup-Element wird verwendet, um die Titel der gesamten Seite oder eines Inhaltsblocks auf der Seite darzustellen; Seite oder ein Teil des Inhalts in der Fußzeile des Seitenblocks. Im Allgemeinen enthält es den Namen des Erstellers, das Erstellungsdatum und die Kontaktinformationen des Erstellers. Das
•nav-Element stellt den mit der
Navigation
verlinkten Teil der Seite dar; stellt einen unabhängigen Absatz dar. Stream-Inhalt stellt im Allgemeinen eine unabhängige Einheit im Haupt-Stream-Inhalt des Dokuments dar. Verwenden Sie das figcaption-Element, um der Abbildungselementgruppe einen Titel hinzuzufügen 2. Weitere neue Elemente

·Audio-Element-Definition Audio
, wie Musik oder andere Audio-Streams; •Einbettungselement wird zum Einfügen verschiedener Multimedia verwendet, das Format kann Midi, Wav, AU, MP3 sein usw.; •Markierungselement Um dem Benutzer Text, der hervorgehoben oder hervorgehoben werden muss, visuell darzustellen, besteht eine typische Anwendung darin, dem Benutzer die Suchschlüsselwörter in den
Suchergebnissen·progress-Element stellt den laufenden Prozess dar • Ruby-Element stellt Ruby dar Kommentar
(chinesische Lautschrift oder Schriftzeichen) • rt-Element stellt die Erklärung oder Aussprache des Schriftzeichens dar (Chinesisch phonetisch (phonetisch oder zeichenhaft) • rp-Element in Wird in Ruby-Annotationen verwendet, um Inhalte zu definieren, die von Browsern angezeigt werden, die Ruby-Elemente nicht unterstützen.
•Das wbr-Element stellt weiche Zeilenumbrüche dar, und wenn die Breite nicht ausreicht, werden hier aktiv Zeilenumbrüche durchgeführt
•LeinwandElemente repräsentieren Grafiken wie Diagramme und andere Bilder
•cammand-Elemente stellen Befehle
Button
dar, wie z. B.
Radio Button, Checkbox
oder Button•Das Detailelement stellt die detaillierten Informationen dar, die der Benutzer benötigt und kann get• Das Datagrid-Element stellt eine Liste optionaler Daten dar, die in Form einer Baumliste angezeigt werden•keyDas gen-Element stellt den generierten Schlüssel dar•Das Ausgabeelement stellt verschiedene Ausgabetypen dar, beispielsweise Skripte. Ausgabe
• Das Quellelement definiert Medienressourcen für Medienelemente (wie e26e9bceaa3cecafde05584c3fef9fba und 4218491fec31d29458f32c3ffee1002b)
• Das Menüelement stellt die Menüliste dar
3. Neues Eingabeelement
•
E-Mail
Typ stellt das Texteingabefeld dar, in das E-
Hauptadresse eingegeben werden muss
•URL-Typ stellt dar Texteingabefeld, in das die URL-Adresse eingegeben werden muss •Zahlentyp Texteingabefeld, das einen numerischen Wert darstellt, der eingegeben werden muss •Bereich Typ stellt ein Texteingabefeld dar, das eingegeben werden muss ein numerischer Wert innerhalb eines bestimmten Bereichs HTML5 verfügt über mehrere neue Eingaben für die Auswahl von Datums- und Uhrzeitangaben. Textfeld:
•
Datum
——Wählen Sie Tag, Monat und Jahr aus•Monat — —Wählen Sie den Monat und das Jahr aus•Woche – Woche und Jahr auswählen
•Zeit – Uhrzeit auswählen (Stunden und Minuten)
•DatumUhrzeit – Uhrzeit, Tag, Monat, Jahr (UTC-Zeit) auswählen
•datetime.local – Uhrzeit, Tag, Monat, Jahr (Ortszeit) auswählen
3. Elemente abschaffen
1. Elemente, die durch CSS ersetzt werden können
•Für Elemente wie basefont, big, center, font, s, Strike, tt, u befürwortet HTML5, dass ihre Funktionen ausschließlich für Bildschirmanzeigedienste bestimmt sind. Bildschirmanzeigefunktionen werden einheitlich im CSS bearbeitet Stylesheet, daher werden diese Elemente abgeschafft
2. FrameFrame nicht mehr verwenden
•Für FrameSet-Element, Frame-Element und Noframes-Element . Aufgrund der negativen Auswirkungen von Frame-Frames auf die Benutzerfreundlichkeit von Webseiten wird Frame-Frames in HTML5 nur dann nicht mehr unterstützt, wennFrame-Frames vom Server unterstützt werden schafft gleichzeitig die oben genannten drei Elemente ab.
3. Elemente, die nur von einigen Browsern unterstützt werden
• Für Elemente wie Applet, BGSound, Blink, Marquee usw., da nur einige Browser diese Elemente unterstützen, insbesondere das BGSound-Element und das Marquee Element, wird nur vom Internet Explorer unterstützt und ist daher in HTML 5 veraltet. 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 das JavaScript ersetzt werden ProgrammierungMethode
4. Andere abgeschaffte Elemente: •Entfernen Sie das rb-Element und ersetzen Sie es durch das Ruby-Element
•Entfernen Sie das Akronymelement und ersetzen Sie es durch das abbr-Element
•Entfernen Sie das dir-Element und ersetzen Sie es durch das ul-Element
•Entfernen Sie das isindex-Element und verwenden Sie das Formularelement in Kombination mit dem Eingabeelement, um
•Entfernen Sie das Listing-Element und verwenden Sie das pre-Element, um •Entfernen Sie das xmp-Element und verwenden Sie das Code-Element, um
zu ersetzen. •Entfernen Sie das nextid-Element und verwenden Sie GUIDS-Ersetzung.
• Zerstören Sie das Klartextelement und verwenden Sie den MIME-Typ „text/plian“, um

4. Fügen Sie das
-Attribut hinzu und verwerfen Sie das Attribut 1. Neue Attribute 1. Neues Autofokus-Attribut, Dadurch können Elemente beim Öffnen des Bildschirms automatisch den Fokus erhalten, indem Attribute angegeben werden zu welchem ​​Formular es gehört, und platzieren Sie es dann an einer beliebigen Stelle auf der Seite, nicht innerhalb des Formulars;
required-Attribut hinzugefügt, das angibt, dass es überprüft wird, wenn der Benutzer es sendet Geben Sie den Inhalt in das Element ein;

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 zwar nur wird verwendet, wenn das href-Attribut vorhanden ist;
•Fügen Sie das href
lang-Attribut hinzu, um mit dem a-Element und dem Link-Element konsistent zu bleiben
•Attribut Reverend, das die in umgekehrter Reihenfolge anzuzeigende Liste angibt; •Fügen Sie das Attribut async zum Skriptelement hinzu, das definiert, ob das Skript asynchron ausgeführt werden soll; Abschaffung von Attributen

• Alle Attribute, die durch CSS-Stylesheets ersetzt werden können, werden abgeschafft. • Redundante Attribute wie: Ziel, ProDatei
, Version usw . werden abgeschafft;
5.
Globale Attribute

Das Konzept der „globalen Attribute“. beziehen sich auf Attribute, die für jedes Element verwendet werden können. 1. contentEditable-Attribut
•Dieses Attribut ermöglicht es Benutzern, den Inhalt im Element zu bearbeiten. Der Mausfokus kann abgerufen werden ein boolescher Wert und kann als wahr oder falsch angegeben werden. Darüber hinaus verfügt dieses Attribut auch über einen versteckten Vererbungsstatus. Wenn es wahr ist, ist die Bearbeitung zulässig. Wenn es nicht angegeben ist, wird es 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 überprüft hauptsächlich die Benutzereingabe Inhalt. Rechtschreib- und Grammatikprüfung. Der Attributwert ist ein boolescher Wert. Sie müssen eindeutig angeben, dass der Attributwert wahr oder falsch ist. textarea-Rechtschreibprüfung = „true“ > Formularattribut

in HTML4 In HTML5 müssen die untergeordneten Elemente innerhalb des Formulars innerhalb des Formulars geschrieben werden, aber in HTML5 können sie an einer beliebigen Stelle auf der Seite geschrieben werden und dann ein Formularattribut für angeben element Der Attributwert ist die ID der Formulareinheit, sodass Sie deklarieren können, dass das Element zum angegebenen Formular gehört.
Der Code lautet wie folgt:

Das Eingabeelement gehört zum Formular. Es wird in das Formular geschrieben und es ist nicht erforderlich, das anzugeben Formularattribut dafür. Das Textarea-Element wird außerhalb des Formulars geschrieben, ist jedoch dem Formular untergeordnet, sodass die ID des Formulars auf das Formularattribut des Textarea-Elements festgelegt wird.

Der Vorteil besteht darin, dass Sie, wenn Sie Stile zu den Elementen auf der Seite hinzufügen müssen, diese bequemer hinzufügen können, da sie nicht mehr über die Formulare verstreut sind.

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>form属性</title> 
</head> 
<body> 
<form action="" id="testform"> 
<input type="text" name="" /> 
</form> 
<textarea form="testform" name="" cols="30" rows="10"></textarea> 
</body> 
</html>

[Verwandte Empfehlungen]

1.

Kostenloses HTML5-Video-Tutorial

2. Ein Eingabefeld erscheint beim Erstellen einer virtuellen Tastatur in H5 Was tun bei Verstopfung?

3.

Detaillierte Erläuterung der Methode zur Implementierung der Vollbildwiedergabe auf WeChat in HTML5

4.

Detaillierte Erläuterung der Browserkompatibilitätsprobleme mit Neue H5-Tags

5.

Gesamtüberblick über die Verwendung von H5 zum Erstellen von Webseiten

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen H5 und herkömmlichem HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!