Vollständige Analyse der Dokumentstruktur und der neuen Etikett von HTML5

Autor：Eve Cole Aktualisierungszeit：2025-02-18 02:36:01

eins. HTML5 -Dokumentstruktur

1. Der erste Schritt: Öffnen Sie das Entwicklungswerkzeug und öffnen Sie den angegebenen Ordner.

2. Schritt 2: Speichern Sie die Datei index.html auf der Festplatte, .HTML ist ein Web -Suffix;

3. Schritt 3: Schreiben Sie das Grundformat von HTML5.

 <! 1. <Head> // einschließlich Dokumentmetadaten starten <meta charset = utf-8> // deklarieren Zeichenkodierung </title> // Dokumenttitel </head> // <body> // bedeutet den Inhalt von HTML -Dokumente <a href = http://www.baidu.com> baidu </a> // Ein Hyperlink -Element (Tag) </body> // zeigt HTML </html> ///das Ende des HTML an dokumentieren

zwei. Analyse der Dokumentstruktur

1.DocType

Deklaration von Dokumenttyp (Deklarationstyperklärung, auch als docType bezeichnet). Es sagt hauptsächlich dem Browser

Die Dateityp der Ansicht. In den vorherigen HTML4.01 und XHTML 1.0 zeigt es die spezifische HTML -Version und den spezifischen Stil an.

Jetzt muss HTML5 die Version und den Stil nicht darstellen.

2.html Element

Zunächst bedeutet das Element das Etikett, und das HTML -Element ist das HTML -Etikett. HTML -Elemente sind Elemente, die das Dokument beginnen und beenden. Es handelt sich um ein doppeltes Etikett, wiederholt und Schwanz, einschließlich Inhalt.

Dieses Element hat ein Attribut und einen Wert: Lang = ZH-CN,

Dies bedeutet, dass das Dokument Sprache verwendet: vereinfachtes Chinesisch.

<html lang = zh-cn> // Wenn es Englisch ist, ist es en '

Vereinfachte chinesische Seite: html lang = zh-cmn-hans

Traditionelle chinesische Seite: html lang = zh-cmn-hant

Englische Seite: html lang = en

3. Kopfelement

Metadatendaten werden verwendet, um Metadateninhalte zu berücksichtigen, <Link>, <meta>, <noscript>, <Script>, <Script>,

<Styles>, <title>. Diese Inhalte werden verwendet, um Informationen für Browser bereitzustellen, z. B. Link bietet CSS -Informationen und Skript

Geben Sie JavaScript -Informationen an, der Titel bietet Seitentitel.

<Head> ... </head> // Diese Informationen sind auf der Seite nicht sichtbar

<NoScript> Elemente werden verwendet, um den alternativen Inhalt (Text) zu definieren, wenn das Skript nicht ausgeführt wird.

Dieses Tag kann verwendet werden, um den Browser zu erkennen, der das Etikett <Script> erkennen kann, das Skript jedoch nicht unterstützen kann.

4. Meta -Element

Dieses Element wird verwendet, um Informationen zur Dokumentation bereitzustellen. äußern

Sagen Sie der Browser -Seite, welche Codes verwendet werden. Natürlich bleibt die Datei erhalten

UTF8 und der Browser setzt auch UTF8, um Chinesen korrekt anzuzeigen.

5. Titalelement

Dieses Element ist sehr einfach, wie der Name schon sagt: Stellen Sie den Titel in der oberen linken Ecke des Browsers.

<title> Grundstruktur </title>

6. Körperelement

Elemente, die verwendet werden, um Dokumentinhalte zu enthalten, dh den Bereich des Browsers. Alle sichtbaren Inhalte sollten hier sein

Fügen Sie die Elemente intern hinzu.

7. Ein Element

Ein Hyperlink wird ihn später ausführlich besprechen.

<a href = http://www.baidu.com> baidu </a>

drei. Elementaretikettsdiskussion

HTML ist eine marke Sprache, und wir haben die Struktur gerade im Detail diskutiert. Hier analysieren wir diese erneut

Etiketten oder Etiketten nennen es oft das, was aus Dingen als Elemente schriftlich besteht.

1. Elemente

Elemente sind eine Reihe von Etiketten, die dem Browser mitgeben, wie er mit einigen Inhalten umgeht. Jedes Element hat ein Schlüsselwort wie z.

<body>, <title>, <Meta> sind Elemente. Unterschiedliche Etikettennamen repräsentieren unterschiedliche Bedeutungen und beinhalten Absatzbezeichnungen, Text -Tags, Link -Labels, Bildbezeichnungen usw.

Die Elemente sind im Allgemeinen in zwei Typen unterteilt: einzelne Tags (Luftelemente) und Dual -Tags. Ein einzelnes Etikett wird im Allgemeinen verwendet, um einen bestimmten Yuan zu deklarieren oder einzufügen

Beispielsweise wird die Zeichencodierung der Anweisung verwendet <meta> und <img> in das Bild eingefügt. p> ... </p>.

2. Eigenschaften und Werte

Zusätzlich zu einer einzelnen und doppelten Teilung können die internen Attribute und Werte des Elements festgelegt werden. Diese Attributwerte werden verwendet, um die Elemente zu ändern

Akt. Ersetzen Sie beispielsweise Hyperlinks: <a> HREF -Attribute die URL, in der Sie auf verschiedene Websites verlinken können.

Vier. juristische Person

Die HTML -Entität wird durch Spezialbedeutungen über den physischen Code angezeigt.

Zeigen Sie die Ergebnisse des Entitätsnamens der Entitätsnummer Beschreibung an

Raum

<<<<<<< 2

>> größer als Zahl

& & & & Und Nummer

Anführungszeichen

'' ''

￠ ¢ ¢ ¢

镑镑 £ £

圆圆 ¥ ¥ ¥ ¥ ¥

元元 € Euro

§ § § kleines Festival

权权 © Copyright

® ® ® Registriertes Markenzeichen

™ ™ ™ Markenzeichen

× × × Multiplikationszahl

÷ ÷ Außer Zahl

5. Neues Strukturetikett

Artikelelement

Repräsentiert einen unabhängigen Inhalt, der nicht mit dem Kontext auf der Seite zusammenhängt. Beispielsweise können Sie ihn verwenden

Abschnittselement

Repräsentiert einen Inhaltsblock auf der Seite, z. B. Kapitel, Header, Fußzeile oder andere Teile der Seite. Es kann in Kombination mit H1, H2 ... und anderen Elementen verwendet werden, um die Dokumentstruktur anzuzeigen. Beispiel: <Abschnitt> ... </Abschnitt>;

Neben Element

Drücken Sie die Hilfsinformationen zum Inhalt des Artikelelements zusätzlich zum Inhalt des Artikelelements aus.

Header -Element

Repräsentiert den Titel eines Inhaltsblocks oder einer realen Seite auf der Seite.

Hgroup -Element

Geben Sie eine Kombination aus dem Titelblock der realen Seite oder Seite an.

Fußzeile Element

Zeigt die Fußnote des Inhaltsblocks auf der gesamten Seite oder Seite an. Im Allgemeinen wird er den Namen des Erstellers, das kreative Datum und die Kontaktinformationen des Erstellers enthalten.

Marine -Element

Repräsentiert den Teil des Navigationslinks auf der Seite.

Figurenelement

Zeigt einen Abschnitt unabhängiger Stream -Inhalt an, der im Allgemeinen eine unabhängige Einheit im Inhalt des Dokuments darstellt. Verwenden Sie das Figcaption -Element, um der Figurenelementgruppe einen Titel hinzuzufügen. Zum Beispiel:

 <Aby> <FigCaption> PRC </Figcaption> <p> Die Republik China der Bevölkerung wurde 1949 geboren </p> </figur>

fünf. Metadaten

<Meta> Elemente können verschiedene Metadaten im Dokument definieren, und eine HTML -Seite kann mehrere <meta> enthalten

Element.

1. Geben Sie das Name/Wert -Metadatenpaar an

 <meta name = author content = bnbbs> <meta name = Beschreibung Inhalt = Dies ist eine HTML5 -Seite> <meta name = keywords content = html5, css3, response> <meta name = gen = Gen ERator Content = Sublime Text 3>

Beschreibung der Metropolitan Data Name

Autor des Autors aktuelle Seite

Beschreibung der aktuellen Beschreibungsseite

Schlüsselwörter aktuelles Seitenschlüsselwort

Das Codierungswerkzeug der aktuellen Seite der Generatorseite

2. Zeichenkodierung deklarisieren

3. Simulation HTTP -Headerfeld

 // 5 Sekunden lang zu der angegebenen URL <meta http-equiv = aktualisiert Inhalt = 5; >

Attributwertbeschreibung

Aktualisieren Sie die aktuelle Seite neu oder gibt eine URL an. Die Einheit Sekunden.

Inhaltstyp eine andere Möglichkeit, die Charaktercodierung zu deklarieren

sechs. Globales Attribut

Vorher haben die Elemente, die wir involviert haben

AUSWEIS. Globale Attribute sind das gemeinsame Verhalten aller Elemente.

1.ID -Attribut

 <p id = abc> Absatz </p>

Erläuterung: Das ID -Attribut vermittelt dem Element eine eindeutige Kennung. Diese Kennung wird normalerweise verwendet, um CSS und JavaScript zu geben

Rufen Sie das Auswahlelement auf. Einmal eine Seite gibt es nur den gleichen ID -Namen.

2. Class -Attribut

 <p class = abc> Absatz </p> <p class = abc> Absatz </p> <p class = abc> Absatz </p>

Erläuterung: Das Klassenattribut wird verwendet, um Elemente zu klassifizieren. Setzen Sie CSS -like gleichzeitig durch ein oder mehrere Elemente im Dokument

Modus.

3. Accesskey Attribut

 <Eingabe type = text name = user contoKey = n>

Erläuterung: Der Verknüpfungsvorgang, die ALT+-Spolstertaste unter Windows, behaupten, dass der Browser -Alt nicht in Konflikt steht.

4.Kontabierbares Attribut

 <p inhaltlich = true> Kann ich </p> ändern

Erläuterung: Lassen Sie den Text in einem bearbeitbaren Zustand sein. Oder direkt

Setzen Sie das Attribut.

5.DIR -Attribut

 <p Dir = rtl> text rechts </p>

Erläuterung: Lassen Sie Text von links nach rechts (LTR) oder von rechts nach links (RTL).

6.Hidden Attribut

 <p versteckt> Text rechts </p>

Erläuterung: Elemente ausblenden.

7. Llang Attribut

 <p lang = en> html5 </p>

Erläuterung: Sie können die Sprache lokal festlegen.

8.Titalattribut

 <p type = application/x-shockwave-flash> </Object>

3. Reichweite

4.Autofocus

5. Mark

<Mark> wird hauptsächlich verwendet, um die Wörter zu präsentieren, die visuell prominent sein müssen. Eine typischere Anwendung der <mark> -bezeichnung besteht darin, die Suchschlüsselwörter in den Suchergebnissen für Benutzer anzuzeigen.

Html5: <mark> </mark>

Html4: <span> </span>

6. Zusammenfassung

Das <summary> Tag enthält den Titel des Detailelements, und das Detailelement wird verwendet, um die Details des entsprechenden Dokuments oder des Dokumentfragments zu beschreiben. Das zusammenfassende Element sollte die erste Unterelement des Detailelements sein.

Html5: <details> <summary> html 5 </summary> In diesem Dokument lehrt Sie alles, was Sie für die HTML verlassen müssen. </Details>

HTML4: Keine

7. Detalist

<Datalist> Etikett definiert die optionale Datenliste. Mit dem Eingabeelement können Sie die Drop -Down -Liste der Eingabewerte erstellen.

Datalist und seine Optionen werden nicht angezeigt, es handelt sich nur um eine legale Eingabegeliste.

Bitte verwenden Sie die Listeneigenschaft des Eingabeelements, um den Datalisten zu binden.

 <Eingabeliste = CRAS /> <Datalist ID = CARS> <Optionswert = BMW> <Option Value = Form> <Option Value = Volvo> < /datalist>

9. Befehl

Drücken Sie die Befehlstaste aus

Nur wenn sich das Befehlselement im Menüelement befindet, ist das Element sichtbar. Andernfalls wird dieses Element nicht angezeigt, aber Sie können es verwenden, um die Tastaturverknüpfungsschlüsse anzugeben

 <Meens> <Befehl Onclick = Alert ('Hello World')> Klicken Sie auf mich!

acht. Verlassenes Etikett

Ausdruckselement

Basisfont

groß

Center

SCHRIFTART

schlagen

Es wird empfohlen, sie durch korrekte Semantik zu ersetzen und CSS zu verwenden, um den Effekt nach dem Rendering sicherzustellen

Rahmen -ähnliches Element

Aufgrund der vielen Verfügbarkeit und Zugänglichkeit des Frameworks entfernt die HTML5 -Spezifikation die folgenden Elemente.

rahmen

Frameset

Noframes

Aber HTML5 unterstützt Iframe.

Attributklasse

Viele ausdrucksstarke Attribute werden auch durch neue Spezifikationen entfernt, wie folgt:

ausrichten

Link, Vlink, Alink, Textattribute auf Körper Tags

BGColor

Höhe und Breite

Scrolleneigenschaft auf Iframe -Element

Valig

Hspace und VSpace

Cellpadding, Zellspazier- und Randattribute auf Tabellenbezeichnungen

Profilattribute auf Header -Etikett

Das Zielattribut auf dem Link -Tag a

Longdesc -Attribute von IMG- und Iframe -Elementen

ABBR ersetzt Akronym (verwendet zur Darstellung der Abkürzung)

Objekt ersetzt Applet

UL ersetzte Dir

andere

Das oben beschriebene Dokumentstruktur und das neue Etikett des HTML5, der Ihnen den Herausgeber vorgestellt hat. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!