Wie man die semantische HTML -Struktur versteht

Ich glaube, jeder kennt HTML und CSS, kennt die Trennung der HTML -Struktur und der CSS -Leistung und kennt die Semantik von HTML. Dies sind die beliebten Schlüsselwörter in den letzten Jahren. Semantic HTML wurde erst vor ein oder zwei Jahren in China gesucht. Schauen Sie sich die HTML -Struktur an, über die jetzt in der Gruppe gesprochen wird. Interviewfragen zur HTML -Struktur, semantische HTML -HTML -Konten für einen großen Teil. Warum also semantische HTML verwenden? Was sind die Vorteile von semantischem HTML?

HTML bietet die Kontextstruktur und Bedeutung des Inhalts des Webseitendokuments. HTML selbst drückt es nicht aus. Wir sehen, dass beispielsweise <h1> fett ist, die Schriftgröße 2em, fett ist; <strong> ist mutig, denken Sie nicht, dass dies die Manifestation von HTML ist. Dies sind tatsächlich der Standard -CSS -Stil von HTML in Aktion. Zuerst müssen wir wissen, dass HTML nichts mit der Leistung der Seite zu tun hat, dies sind die Frage von CSS. Die Rolle von HTML auf einer Seite ist die Struktur und Bedeutung. In Laiendaten geht es darum, den Inhalt zu teilen. Was wird hier platziert und was wir sagen.

Die HTML -Struktur ist das Skelett einer Seite. Eine Seite ist wie ein Haus. Die HTML -Struktur ist eine Wand aus Stahlverstärkungsbeton. Wenn ein Haus keine Wand aus Stahlverstärkungsbeton hat, werden es ein Haufen Ziegel sein und kann nicht in Menschen oder Arbeiten leben. CSS ist ein dekoratives Material, ein Holzboden, ein Marmor, eine Farbe und wird verwendet, um das Haus zu dekorieren. Es ist nicht erforderlich, mehr über die Kraft von CSS zu sagen. Wenn CSS keine HTML -Struktur hat, handelt es sich um einen Haufen Holzbretter, der miteinander ohne tatsächliche Gebrauchswert gemalt ist. CSS stützt sich ausschließlich auf (x) HTML -Dokumenten, die darauf hinweisen. Wenn Sie die volle Kraft von CSS in vollen Zügen bringen möchten, ist es sehr notwendig, ein HTML mit sauberem und strukturiertem Inhalt bereitzustellen. HTML ist der gemeinsame Begriff für das Veröffentlichen von Hypertext im Internet ... HTML verwendet Tags, um Text zu strukturieren ( http://www.w3.org/markup/ ).

HTML ist eine Methode zur Ergänzung der Struktur und Bedeutung von Textinhalten (oder Semantik). Es wird uns sagen: Diese Zeile ist ein Titel, und diese Zeilen bilden einen Absatz. Diese Texte sind Listen von Elementen, und diese Texte sind Hyperlinks, die zu einer anderen Datei im Internet verlinken. Es ist erwähnenswert, dass HTML uns nicht sagen sollte: Diese Texte sind blau und diese Texte sind rot. Dieser Teil des Inhalts ist die richtigste Spalte, und diese Zeile ist kursiv. Diese leistungsbezogenen Informationen sind die Arbeit von CSS. Denken Sie bei der Front-End-Entwicklung daran: HTML sagt uns, wie ein Stück Inhalt ist (oder seine Bedeutung), nicht wie es aussieht. Wenn wir semantische Tags erwähnen, sollte das, was wir HTML nennen, vollständig von den Präsentationsinformationen getrennt sein, und die darin enthaltenen Tags sollten die Struktur des Dokuments semantisch definieren.

Die semantische HTML -Struktur ist eigentlich sehr einfach. Meister Sie zunächst die Semantik jedes Tags in HTML. <div> ist ein Behälter; <strong> ist ein Schwerpunkt; <ul> <li> ist eine ungeordnete Liste usw. Wenn Sie den Inhalt sehen, denken Sie darüber nach, welche Tags sie besser beschreiben und alle Tags verwenden können.

Wir wissen, dass die neu hinzugefügten Tags von HTML5 wie <Header> und <fouter>, HTML, zu einer robusteren semantischen HTML -Struktur entwickelt. XHTML2 ist in dieser Hinsicht nicht so fortgeschritten wie HTML5, was auch ein Grund für den Tod von XHTML2 ist. Dies zeigt auch, dass die semantische HTML -Struktur der Entwicklungstrend von HTML ist.

HTML selbst drückt sich nicht aus. Wir sehen, dass <H1> zum Beispiel fett ist, mit einer Schriftgröße von 2EM, fett; <strong> ist mutig, denken Sie nicht, dass dies die Manifestation von HTML ist. Dies sind tatsächlich die Standard -CSS -Stile von HTML in Aktion, sodass das Entfernen oder Verlust von Stilen dazu führen kann, dass die Seite eine klare Struktur darstellt, ist nicht der Vorteil der semantischen HTML -Struktur, aber Browser haben Standardstile. Der Zweck des Standardstils besteht auch darin, die Semantik von HTML besser auszudrücken. Es kann gesagt werden, dass der Standardstil des Browsers und die semantische HTML -Struktur untrennbar sind.

Wenn Sie beispielsweise semantische Markierungen verwenden, buchstabiert der Bildschirmleser Ihre Wörter einzeln, anstatt zu versuchen, sie vollständig auszusprechen.

Durch die Verwendung semantischer Tagging wird sichergestellt, dass diese Geräte Webseiten auf sinnvolle Weise wiedergeben. Im Idealfall besteht die Aufgabe, ein Gerät zu beobachten, darin, Webseiten im Einklang mit den Bedingungen des Geräts selbst zu rendern.

Die semantische Markierung bietet dem Gerät die relevanten Informationen, die es benötigt, und beseitigt sich, um alle möglichen Anzeigsituationen (einschließlich vorhandener oder neuer Geräte in Zukunft) zu berücksichtigen. Ein Telefon kann beispielsweise einen mit einem Titel markierten Textabsatz erstellen. Der Handcomputer kann ihn in einer größeren Schriftart anzeigen. Wenn Sie den Text als Titel markiert haben, können Sie sicher sein, dass der Leser die Seite basierend auf seinen eigenen Bedingungen angemessen anzeigt.

In der Vergangenheit haben Sie möglicherweise nicht darüber nachgedacht, dass Suchmaschinencrawler auch Besucher von Websites sind, aber jetzt sind sie tatsächlich äußerst wertvolle Benutzer. Ohne sie können Suchmaschinen Ihre Website nicht indizieren, und dann ist es sehr schwierig, der durchschnittliche Benutzer zu besuchen zu können.

Daher kann die Seite in der unteren Position der Suchergebnisse in der unteren Position der Suchergebnisse angegeben. Neben der Verbesserung der Benutzerfreundlichkeit ist das semantische Tagging der korrekten Verwendung von CSS und JavaScript förderlich, da es selbst viele Haken bietet, um den Stil und das Verhalten der Seite anzuwenden.

SEO hängt hauptsächlich von den Inhalten und externen Links Ihrer Website ab.

W3C setzt einen guten Standard für uns. Jeder im Team folgt diesem Standard, was viele differenzierte Dinge reduzieren, die Entwicklung und Wartung erleichtern, die Entwicklungseffizienz verbessern und sogar die modulare Entwicklung realisieren kann .

Wenn Sie unterschiedliche Meinungen haben, fügen Sie sie bitte hinzu. Bitte hinterlassen Sie eine Nachricht, um zu diskutieren.

Vielen Dank an GUI, Milkentee, Xiaozhi, Diebstahl von Reis, Caspar und CSS Forest Group zur Diskussion