HTML5-Struktur: So erstellen Sie das erste HTML5-Template
In diesem Artikel werde ich die am häufigsten verwendete HTML5-Struktur vorstellen, anhand derer Sie die Bedeutung einiger HTML-Tags kennen, die gerade in HTML5 hinzugefügt wurden.
Wenn Sie auf einige in HTML5 geschriebene Websites verweisen, sehen Sie Tags wie header , nav , section , footer , … Diese Tags gab es vorher nicht, aber seit der Geburt von HTML5 werden sie von den Leuten verwendet. Wenn Sie Englisch können, können Sie die Bedeutung jeder Karte auf einen Blick erraten.
Bevor wir beginnen, möchte ich einige gemeinsame Positionen auf einer Website vorstellen.
1. Die HTML-Struktur einer typischen Webseite
Jede Website hat eine andere Oberfläche. In Bezug auf die Benutzeroberfläche müssen sie jedoch einige Positionen wie folgt einnehmen:
Wenn es kein HTML5 gibt, werden wir jede Position mit einem div -Tag umgeben und dann ID oder Klasse verwenden, um diese Positionen zu deklarieren.
<body> <div id="header"> HEADER </div> <div id="menu"> MENU </div> <div id="main"> <div id="content"> MAIN CONTENT </div> <div id="sidebar"> MAIN SIDEBAR </div> </div> <div id="footer"> FOOTER </div> </body>Aber wenn HTML5 erscheint, ist es anders, wir werden separate Tags verwenden, jede Position wird ein entsprechendes Tag haben. Das ist in Bezug auf die Bedeutung, aber in Bezug auf die Natur unterscheiden sich diese Tags nicht von div- Tags, nur unterschiedliche Namen.
Lassen Sie uns nun untersuchen, wie diese Struktur in HTML5 konvertiert wird.
2. Häufigste HTML5-Struktur
HTML5 ist ziemlich cool, die Tags haben den richtigen Namen für das, was es sein soll. Beispielsweise wird das header -Tag an der Kopfzeilenposition verwendet, das Footer-Tag wird an der footer verwendet…
Sie sehen den HTML5-Teil, den ich für die obige Schnittstelle erstellt habe:
<!doctype html> <html lang="vi"> <head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> <body> <header> <h1>Phần header</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> </nav> <section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> <footer> Copyright 2014 By web888.vn </footer> </body> </html>Dies ist eine Standardstruktur für eine mit HTML5 erstellte Vorlage. Ich spreche für mich selbst, nicht für die gesamte HTML5-Schreibgemeinschaft.
Sie betrachten die erste Zeile <!doctype html> , die eine erforderliche Deklaration ist, wenn eine Vorlage mit HTML5 erstellt wird. Als nächstes kommt der Abschnitt <html lang="vi"> , Sie sollten der Übersichtlichkeit halber auch lang in das HTML-Tag einfügen.
Der head unten ist nicht umstritten, oder? Dies ist die Informationserklärung für die Website.
<head> <meta charset="utf-8" /> <title>Chương Trình HTML Đầu Tiên</title> </head> Im body ist das Wichtigste, im Körperteil verwende ich die folgenden Tags:
Das header -Tag wird verwendet, um den gesamten Header Ihrer Website zu enthalten. Wenn Sie zuvor das div-Tag verwendet haben, verwenden Sie mit HTML5 stattdessen dieses Tag.
<header> <h1>Phần header</h1> </header> Nav -Tag, dieses Tag wird häufig verwendet, um Navigationsteile wie Menüs zu enthalten.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serie</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Ebook</a></li> </ul> Das section -Tag ist ein Tag, das verwendet wird, um den Hauptinhalt der Website zu enthalten. Wenn Sie kein HTML5 verwenden, können Sie es mit dem div#content -Tag umgeben.
Innerhalb dieses Abschnitts unterteile ich ihn in 2 Positionen, die erste ist der Hauptinhalt der Website, die zweite ist die Seitenleiste.
<section> <section> Phần nội dung chính trang web </section> <aside> Phần bên phía sidebar </aside> </section> aside vom Tag wird dieses Tag häufig verwendet, um Seitenleistenrahmen wie left-sidebar , right-sidebar zu enthalten.
<aside> Phần bên phía sidebar </aside> Und das letzte Tag ist das footer -Tag, anstatt ein div und eine Formatierung zu deklarieren, verwenden wir das Fußzeilen-Tag, um es zu umschließen.
<footer> Copyright 2014 By web888.vn </footer>Sie sehen, wenn wir diese HTML5-Standard- Tags verwenden, müssen wir nicht kommentieren, welcher Teil die Kopfzeile und welcher Teil die Fußzeile ist, richtig? Sehr intuitiv und einfach zu aktualisieren.
Führen Sie es aus und hier ist das Ergebnis unserer HTML5-Vorlage:
Oh, warum sieht die Benutzeroberfläche so kitschig aus? Der Grund dafür ist, dass wir kein CSS verwendet haben, um die Benutzeroberfläche zu dekorieren. Dies zeigt, dass HTML5-Tags zwar ihre eigenen Namen haben, aber im Wesentlichen mit einem normalen div -Tag identisch sind.
3. Fazit
Also habe ich die HTML5-Struktur eingeführt, die oft auf einer Webseite zu finden ist. Es gibt noch viele andere HTML-Tags wie Artikel, SVG, .. und wir werden in den nächsten Artikeln mehr darüber erfahren.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
