Was sind die Unterschiede zwischen HTML5 und HTML4?

Unterschied: DOCTYPE, HTML, Meta, Script und andere Tags werden in HTML5 vereinfacht. HTML5 hat semantische Tags wie Header, Footer, Section, Article, Nav, Hgroup, Aside und Figure hinzugefügt.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

1 Markup-Methoden in HTML5

1.1 Inhaltstyp (ContentType)

• HTML5s Dateierweiterung und Inhaltstyp bleiben unverändert. Das heißt, die Erweiterung ist immer noch „.html“ oder „.htm“ und der Inhaltstyp ist immer noch „text/html“.

1.2 DOCTYPE

• HTML4

(Groß-/Kleinschreibung wird nicht beachtet)

• In H5 gilt ein Dokument bewusst

  ohne Versionsdeklarationen
für alle HTML-Versionen.

Darüber hinaus können Sie bei Verwendung von Tools auch die SYSTEM-ID in der DOCTYPE-Deklarationsmethode hinzufügen. Die Deklarationsmethode lautet wie folgt:

(Groß-/Kleinschreibung nicht beachtet, Anführungszeichen unterscheiden nicht zwischen einfachen oder doppelten Anführungszeichen)

1.3 Geben Sie die Zeichenkodierung an

HTML4

Verwenden Sie das
• meta-Element

  Die Zeichenkodierung in der Datei wird in der Form (angegeben durch das Attribut

  des
content-Elements) wie folgt angegeben:

HTML5

verwendet die Methode des direkten Anhängens des
• charset-Attributs

  an das -Element, um die Zeichenkodierung anzugeben.

Hinweis: Beide Methoden sind gültig, aber Sie können die beiden Methoden nicht gleichzeitig kombinieren. Ab H5 wird empfohlen, UTF-8 für zu verwenden Zeichenkodierung von Dateien.

2 Kompatibilität durch HTML5 gewährleistet

2.1 Markierte Elemente können weggelassen werden (1) Elemente mit schließenden Tags dürfen nicht geschrieben werden (d. h. die Verwendung von öffnenden Tags und schließenden Tags). Elemente einschließen ist nicht erlaubt. Form, nur die Form von „“ ist erlaubt. source, track, wbr

(2) Die Elemente des schließenden Tags können weggelassen werden li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody, tfoot, tr, td, th

(3) Alle Tags können weggelassen werden, Element (was bedeutet, dass das Element vollständig weggelassen werden kann)

html, head, body, colgroup, tbody

Hinweis: Auch wenn das Markup weggelassen wird, existiert das Element implizit weiterhin. Wenn beispielsweise das Body-Element weggelassen wird, ist es weiterhin in der Dokumentstruktur vorhanden und kann über document.body aufgerufen werden.
2.2 Attribute mit booleschen Werten
2.3 Anführungszeichen weglassen

(1) Beim Angeben eines Attributwerts, wenn Anführungszeichen auf beiden Seiten hinzugefügt werden Für den Attributwert können Sie entweder doppelte oder einfache Anführungszeichen verwenden.

(2) H5 hat auf dieser Grundlage einige Verbesserungen vorgenommen, wenn der Attributwert keine leeren Zeichenfolgen, „<“, „>“, „=", einfache Anführungszeichen, doppelte Anführungszeichen und andere Zeichen auf beiden Seiten enthält der Attributwert Die Anführungszeichen können weggelassen werden. Wie unten gezeigt

                                                        Element, Kopfzeilenelement, Fußzeilenelement, Navigationselement, Abbildungselement, Hauptelement

Andere in 3.2 hinzugefügte Elemente

Videoelement, Audioelement, Einbettungselement, Markierungselement, Fortschrittselement, Meterelement, Zeitelement, Ruby-Element, RT-Element, RP-Element, WBR-Element, Canvas-Element, Befehlselement , Detailelement, Datenlistenelement, Datagrid-Element, Keygen-Element, Ausgabeelement, Quellelement, Menüelement, Dialogelement

3.3 Neue Eingabeelementtypen

(1) E-Mail: Gibt an, dass die E-Mail-Adresse eingegeben werden muss Texteingabefeld

(2) URL: ein Texteingabefeld, das angibt, dass eine URL-Adresse eingegeben werden muss

(3) Zahl: ein Texteingabefeld, das angibt, dass ein numerischer Wert eingegeben werden muss

(4) Bereich: gibt an, dass Es muss ein numerischer Wert innerhalb eines bestimmten Bereichs eingegeben werden. Texteingabefeld

(5) Datumsauswahl: H5 verfügt über mehrere neue Eingabetextfelder zur Auswahl von Datum und Uhrzeit

1. Datum: Tag, Monat, Jahr auswählen

2. Monat : Monat, Jahr auswählen

3. Woche: Woche und Jahr auswählen

4. Zeit: Uhrzeit auswählen (Stunden und Minuten)

5. Datum/Uhrzeit: Uhrzeit, Tag, Monat, Jahr (UTC-Zeit) auswählen

6. datetime-local: Wählen Sie Uhrzeit, Tag, Monat, Jahr (Ortszeit) aus.

(6) Suche: Wird für die Suche verwendet.

(7) Tel.: Speziell für Telefonanrufe.

(8) Farbe: Farbauswahl Textfeld. Der ausgewählte Wert ist Text im Format „#000000“.

3.4 Veraltete Elemente

(1) Elemente, die durch CSS ersetzt werden können

Wie zum Beispiel: Basefont, Big, Center, Font, s, Strike, tt, u und andere Elemente

Darunter s und Strike Elemente können durch del-Element-Ersetzung ersetzt werden, das tt-Element wird durch das CSS-Attribut „font-famliy“ ersetzt.

(2) Kein Frame-Framework mehr verwenden

Wie zum Beispiel: Frameset, Frame, Noframes.

Aufgrund der negativen Auswirkungen von Frames auf die Benutzerfreundlichkeit von Webseiten unterstützt H5 keine Frames mehr. Es werden nur noch iFrames oder zusammengesetzte Seiten unterstützt, die aus mehreren vom Server erstellten Seiten bestehen.

(3) Elemente, die nur von einigen Browsern unterstützt werden

wie zum Beispiel: Applet, BGSound, Blink, Marquee und andere Elemente.

Das Applet-Element kann durch ein Embed-Element oder ein Object-Element ersetzt werden, das BSGround-Element kann durch ein Audio-Element ersetzt werden und das Marquee kann durch Javascript-Programmierung ersetzt werden.

(4) Andere abgeschaffte Elemente

1. rb-Element, ersetzt durch Ruby-Element

2. acronym-Element, ersetzt durch abbr-Element

3. dir-Element, ersetzt durch ul-Element 4. isindex-Element, ersetzt durch die Kombination aus Formularelement und Eingabeelement

5. Listing.-Element, ersetzt durch pre-Element

6. xmp-Element, ersetzt durch code-Element

7. Nextid-Element, ersetzt durch GUIDS-Element

8. plaintext-Element, Verwendung Stattdessen den MIMEL-Typ „text/plain“

Empfohlenes Tutorial: „

html-Video-Tutorial

“

4. Globale AttributeDie sogenannten globalen Attribute beziehen sich auf Attribute, die für jedes Element verwendet werden können.

4.1 contentEditable-Attribut

(1) Die Hauptfunktion

ermöglicht es Benutzern, den Inhalt in einem Element zu bearbeiten. Daher muss das Element ein Element sein, das den Mausfokus erhalten kann, und dem Benutzer muss nach dem Klicken ein Cursor angezeigt werden die Maus. Der Benutzer bearbeitet den Inhalt in diesem Element nacheinander

(2) Wert

Dieses Attribut ist ein boolesches Attribut, das als wahr oder falsch angegeben werden kann.

(3) Versteckter Vererbungsstatus

Wenn dieses Attribut nicht angegeben ist, wird es durch den Vererbungsstatus bestimmt. Wenn das übergeordnete Element des Elements bearbeitbar ist, ist das Element bearbeitbar.

(4) isContentEditable-Attribut

Wenn das Element bearbeitbar ist, ist der Attributwert wahr, andernfalls ist er falsch.

4.2 designMode-Attribut

(1) Funktion

wird verwendet, um anzugeben, ob die gesamte Seite bearbeitbar ist, wird jedes Element auf der Seite, das das contentEditable-Attribut unterstützt, bearbeitbar.

(2) Wert

Dieses Attribut hat zwei Werte: „Ein“ (die Seite kann bearbeitet werden) und „Aus“ (die Seite kann nicht bearbeitet werden).

(3) Dieses Attribut kann nur in Javascript-Skripten bearbeitet und geändert werden

document.designMode = " on ";

(4) Browserunterstützung

1.IE8: Aus Sicherheitsgründen darf dieses Attribut nicht sein verwendet Versetzen Sie die Seite in den Bearbeitungsmodus.

2.IE9: Erlauben Sie die Verwendung dieses Attributs, um die Seite in den Bearbeitungsstatus zu versetzen.

3.Chorme3 und Safari: Verwenden Sie . Die Art und Weise des Inline-Frames: Der Inline-Frame kann bearbeitet werden.

4.Firefox und Opera: Erlauben Sie die Verwendung dieses Attributs, um die Seite in den Bearbeitungsstatus zu versetzen.

4.3 verstecktes Attribut

(1) Funktion

weist den Browser an, das Element nicht darzustellen, wodurch das Element unsichtbar wird.

(2) Wert

Boolesche Eigenschaft, entweder wahr oder falsch.

4.4 Rechtschreibprüfungsattribut

Das Rechtschreibprüfungsattribut ist ein neues Attribut, das von H5 für die beiden Texteingabefelder Eingabeelement (Typ=Text) und Textbereich bereitgestellt wird.

(1) Funktion

Führt eine Rechtschreib- und Grammatikprüfung des vom Benutzer eingegebenen Textinhalts durch.

(2) Wert

Boolescher Wert, wahr oder falsch.

(3) Hinweis

1. Der Attributwert muss als wahr oder falsch deklariert werden.

2. Wenn das Attribut „readOnly“ oder das Attribut „disabled“ des Elements auf „true“ gesetzt ist, wird keine Rechtschreibprüfung durchgeführt.

(4) Browser-Unterstützung

Derzeit unterstützen neben dem IE auch Browser wie Firefox, Chrome, Safari und Opera dieses Attribut.

4.5 Tabindex-Attribut

Der Tabindex jedes Steuerelements gibt an, auf welches Steuerelement zugegriffen wird. (Tippen Sie auf die Tabulatortaste)

(1) Heutzutage wird die Durchlaufreihenfolge der Steuerelemente durch die Position des Elements auf der Seite bestimmt und ist daher nicht mehr erforderlich.

(2) Eine weitere Funktion

Standardmäßig können nur Linkelemente und Formularelemente durch Drücken von Tasten den Fokus erhalten. Wenn Sie dieses Attribut auf andere Elemente anwenden, erhält das Element ebenfalls den Fokus. Nachdem Sie den Tabindex-Wert eines Elements auf einen negativen Wert (normalerweise -1) gesetzt haben, können Sie programmgesteuert zulassen, dass das Element den Fokus erhält, und das Element erhält den Fokus nicht, wenn die Tab-Taste gedrückt wird.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

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