Was sind die am häufigsten verwendeten Strukturelemente in HTML?

Häufig verwendete Strukturelemente in HTML sind: 1. div, das Partitionen oder Abschnitte im Dokument definieren kann und zur Bereitstellung von Struktur und Hintergrund für Inhalte auf Blockebene im HTML-Dokument verwendet wird; 2. Abschnitt, der den Inhalt darstellt; im Dokument. 3. Artikel stellt eine unabhängige Struktur in einem Dokument, einer Seite, einer Anwendung oder einer Website dar, die eine unabhängig zuordenbare oder wiederverwendbare Struktur sein soll. 4. stellt einen Teil dar, der wenig damit zu tun hat der Rest des Seiteninhalts 5. Header bedeutet den Seitenkopf oder Blockkopf.

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

Strukturelemente, auch Blockelemente genannt, sind Elemente, mit denen der Inhaltsbereich von Blöcken definiert wird. Zuvor gab es nur ein

-Blockelement. HTML5 fügte 7 neue semantische Strukturelemente hinzu, darunter

,

,

,

;,

Häufig verwendete Strukturelemente in HTML

div-Elemente

div-Elemente werden zum Erstellen großer Blöcke (Blockebene) verwendet. Inhalte bieten Struktur- und Kontextelemente.

kann Unterteilungen oder Abschnitte (Abteilung/Abschnitt) im Dokument definieren.

-Tag kann das Dokument in unabhängige und unterschiedliche Teile unterteilen. Es kann als strenges Organisationstool verwendet werden und verwendet keine damit verbundenen Formatierungen.

Wenn Sie

mit ID oder Klasse markieren, wird das Tag effektiver.

Hinweis:

ist ein Element auf Blockebene, was bedeutet, dass Browser normalerweise einen Zeilenumbruch vor und nach dem div-Element einfügen.

Tipp: Verwenden Sie das

-Element, um Elemente auf Blockebene zu gruppieren, damit sie mithilfe von Stilen formatiert werden können.

Abschnittselement

Das Abschnittselement () stellt einen Bereich (oder Abschnitt) im Dokument dar und ist ein gemeinsames Element auf Blockebene. Beispielsweise enthält eine Themengruppe im Inhalt im Allgemeinen eine Überschrift. Generell gilt, dass jeder

-Element nicht in mehrere Teile unterteilt werden kann ein gewöhnlicher Container. So sollte

verwendet werden. Im Allgemeinen sollte ein

in der Dokumentgliederung erscheinen

article-Element

Das

-Element stellt eine unabhängige Struktur in einem Dokument, einer Seite, einer Anwendung oder einer Website dar, die unabhängig zuweisbar sein soll Wiederverwendbare Strukturen. Dies kann ein Forumsbeitrag, ein Magazin- oder Nachrichtenartikel, ein Blog, ein vom Benutzer eingereichter Kommentar, eine interaktive Komponente oder ein anderer unabhängiger Inhalt sein. Wenn das Element

verschachtelt verwendet wird, stellt das Element den Artikel dar, der sich auf das äußere Element bezieht. Beispielsweise kann ein

-Element, das einen Blog-Kommentar darstellt, in einem

-Element verschachtelt werden. Die Autoreninformationen des

-Elements können bereitgestellt werden. aber es funktioniert nicht mit dem

-Element. Das Veröffentlichungsdatum und die Veröffentlichungszeit des

-Elements können durch das pubdate-Attribut des

und ist es notwendig, das

aside-Element im Titel hinzuzufügen.

　Das

-Element stellt einen Teil dar, der für den Rest des Seiteninhalts nahezu irrelevant ist unabhängiger Teil des Inhalts und kann separat abgetrennt werden, ohne dass dies Auswirkungen auf das Ganze hat. Wird im Allgemeinen zur Darstellung von Seitenleisten verwendet, die keinen direkten Bezug zum Inhalt haben. Der Inhalt von

ist unabhängig vom Inhalt, mit dem er verknüpft ist. Zum Beispiel die Werbung eines Artikels, zugehörige Hintergrund- und Zitatinhalte usw.

nav-Element

Die HTML-Navigationsleiste (

) stellt einen Bereich dar, der mehrere Hyperlinks zu anderen Seiten oder innerhalb der Seite enthält . Linkliste in anderen Teilen

Nicht alle Links müssen das Element

verwenden. Es wird beispielsweise nur verwendet, um einige beliebte Links in die Navigationsleiste einzufügen Fügen Sie eine

-Linkliste hinzu. Eine Webseite kann auch mehrere

-Elemente enthalten. Beispielsweise ist eines die Navigationsliste innerhalb der Website und das andere die Navigationsliste innerhalb dieser Seite

　Das

-Element stellt den Seitenkopf oder Blockkopf dar, der zum Gruppieren des Einführungsinhalts und der Hilfsnavigation des Blocks verwendet wird, sodass es das Titelelement des Blocks und andere Einführungsinhalte enthalten kann (Katalog). , Logo usw.)

　 [Hinweis] Da die Elemente

kein Abschnittsinhalt sind, werden neue Abschnitte nicht in die Gliederung eingefügt.

footer-Element

　 Das Element

stellt den neuesten Kapitelinhalt dar Die Fußzeile des Abschnittsstammelements. Eine Fußzeile enthält normalerweise Informationen wie den Autor des Kapitels, Copyright-Daten oder Links zum Dokument

　[Hinweis] Die Autoreninformationen im

-Element sollten im

-Element enthalten sein Beschreibung:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>苹果首页</title>
</head>
<body>
<nav>
  <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPhone</a></li> 
    <li><a href="#">Watch</a></li> 
    <li><a href="#">Music</a></li> 
    <li><a href="#">技术支持</a></li> 
    <li><a href="#">搜索</a></li> 
    <li><a href="#">购物袋</a></li>           
  </ul>
</nav>
<article>
  <section>展示1</section>
  <section>展示2</section>
  <section>展示3</section>
  <section>展示4</section>
  <nav>
    <ul>
      <li>按钮1</li>
      <li>按钮2</li>
      <li>按钮3</li>
      <li>按钮4</li>
    </ul>
  </nav>
</article>
<aside>
  <ul>
    <li><a href="#">Watch</a></li>
    <li><a href="#">Pencil</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">MacBook</a></li>
  </ul>
</aside>
<footer>
  <nav>
    <div>选购及了解</div>
    <div>商店</div>
    <div>应用</div>
    <div>账户</div>
    <div>关于</div>
  </nav>
  <section>
    <div>其他杂项</div>
  </section>
</footer>
</body>
</html>

Erläuterung: main

Der Hauptgrund dafür ist, dass IE-Browser es nicht unterstützen. Das Hauptelement (

) stellt das Dokument dar. Körper> oder der Hauptteil der Anwendung. Der Hauptteil besteht aus Inhalten, die in direktem Zusammenhang mit dem Dokument stehen oder sich auf das zentrale Thema des Dokuments oder die wichtigsten Funktionsteile der Anwendung erstrecken. Dieser Teil des Inhalts sollte im Dokument eindeutig sein und keinen Inhalt enthalten, der in einer Reihe von Dokumenten wiederholt wird. Das

-Tag darf keine Vererbung der folgenden Elemente sein, einschließlich

,

, , oder

. In einem Dokument kann nicht mehr als ein

-Tag erscheinen

Ein normales äußerstes Layout sollte also wie folgt aussehen

<header></header>
<main>
  <section></section>
  <section></section>
  <section></section>
</main>
<footer></footer>

Aber jetzt ist das Layout im Allgemeinen wie folgt

<header></header>
<section></section>
<section></section>
<section></section>
<footer></footer>

(Lernvideo-Sharing:

web Erste Schritte mit dem vorderen Ende

)

Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten Strukturelemente in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!