Detaillierte Einführung in h5-semantische Tags-HTML-Tutorial-php.cn

HTML 5-Innovation – semantische Tags (1)

1. Bevor HTML 5 herauskam, verwendeten wir Divs zur Darstellung von Seitenkapiteln, aber diese Divs hatten keine praktische Bedeutung. (Auch wenn wir die CSS-Stil-ID und -Klasse verwenden, um die Bedeutung dieses Inhalts zu beschreiben). Bei diesen Tags handelt es sich lediglich um Anweisungen, die wir dem Browser geben, um bestimmte Teile einer Webseite zu definieren. Aber jetzt sind diese Tags, die vorher keine „Bedeutung“ hatten, aufgrund des Aufkommens von HTML5 verschwunden. Dies ist, was wir normalerweise „Semantik“ nennen.

2. Warum semantische Tags verwenden?
Es ist einfacher, von Suchmaschinen indiziert zu werden.
(2). Erleichtern Sie Screenreadern das Lesen von Webseiteninhalten.
(3). Kann das Thema der Seite besser widerspiegeln.
(4). Bessere Kompatibilität und Unterstützung für mehr Netzwerkgeräte.
2. Gemeinsame semantische Tags

Header – Header- und Navigations-Tags

Header-Header, das direkte untergeordnete Element unter dem Körper Das Header-Element Wird im Allgemeinen verwendet, um einleitende Informationen auf der Seite zu platzieren, z. B. den Namen der Website, das Logo oder die Navigationsleiste. Das

 <header><h1>html5语义化标签</h1><nav><h1>导航</h1><ul><li>章节标签</li><li>标题标签</li></ul></nav></header>

Nach dem Login kopieren

nav-Element stellt den Navigationslinkbereich der Seite dar. Wird verwendet, um den Hauptnavigationsabschnitt der Seite zu definieren.

Der Hauptteil – Hauptteil und Abschnitt

主体部分如下：<article> <hgroup>     <h1>我是标题</h1>     <cite>《我是作品标题》</cite><br>     <span>我是时间 <time pubdate="" datetime="2017-03-02">2017年03月02日</time></span>     <p>我是内容</p> </hgroup> <section>     <blockquote>我是引文我是引文我是引文我是引文我是引文我是引文</blockquote>     <figure>         <img alt="" src="images/sess1.jpg">         <figcaption>我是图片</figcaption>     </figure>     <table borde="1">         <caption>我是表格标题</caption>         <thead>         <tr>             <th>我是表格头部1</th>             <th>我是表格头部2</th>         </tr>         </thead>         <tbody>         <tr>             <td>我是内容1</td>             <td>我是内容1</td>         </tr>         <tr>             <td>我是内容1</td>             <td>我是内容1</td>         </tr>         </tbody>         <tfoot>         <tr>             <td>我是表格结尾1</td>             <td>我是表格结尾2</td>         </tr>         </tfoot>         </tr>     </table> </section> <footer>
     我是文章页脚 </footer></article><aside> <hgroup>     <h2>我是标题标签</h2>     <p>我是内容</p> </hgroup> <code> 我是代码</code> <pre class="brush:php;toolbar:false">
             静夜思
           作者：李白
     床前明月光，疑是地上霜。
     举头望明月，低头思故乡。

Nach dem Login kopieren

Die Darstellung des Thementeils ist wie folgt:

1): Artikel-Tag: Dieses Tag kann am leichtesten mit „Abschnitt“ und „Div“ verwechselt werden. Tatsächlich stellt „Artikel“ einen eigenständigen Inhalt in einem Dokument, einer Seite oder einer Website dar und dient dazu, Entwicklern die Möglichkeit zu geben, unabhängig voneinander zu arbeiten weiterentwickeln oder wiederverwenden. Die Struktur von Artikeln sieht im Allgemeinen wie folgt aus:

    <article>     <hgroup><header>         <h1></h1>         <h2></h2></header>     </hgroup>     <section></section>     <footer></footer></article>

Nach dem Login kopieren

Zu den Anwendungen von Artikeln gehören Forenbeiträge, Blogartikel, ein Benutzerkommentar und ein interaktives Widget. (Sonderteil) Zusätzlich zum Inhalt verfügt der Artikel über einen Titel (normalerweise in der Kopfzeile) und eine Fußzeile.

2): hgroup-Tag: Dieses Tag kombiniert die Titel von Webseiten oder Abschnitten. Laienhaft ausgedrückt ist es viel bequemer, eine Reihe von Titeln in einen Korb zu werfen.

3):Cite-Tag: Wird verwendet, um den Titel eines Buchs oder einer Zeitschrift zu definieren, das Inhalte zitiert und keine anderen Informationen wie Autor, Datum usw. zulässt.

4): Zeit-Tag: Dieser Tag besteht im Allgemeinen aus drei Komponenten: Ein maschinenlesbarer Zeitstempel: Das Format muss aus durch Minuszeichen getrennten Jahres-, Monats- und Tageszahlen bestehen Auf das Datum folgt dann der Zeitwert im 24-Stunden-Format und der Zeitzonenversatz in der Form datetime="2012-2-15T22:49:40+08:00". Für Menschen lesbarer Textinhalt: Der Das Format ist beliebig, solange es verständlich ist. Ein optionales Pubdata-Tag: Pubdata ist ein boolescher Wert. Schreiben Sie den Attributnamen bei Bedarf einfach als Pubdata. Der Schönheit halber können wir aber auch pubdata="" schreiben. Was wir auch beachten müssen, ist, dass, wenn die Zeit in einem Artikel steht, sie die Veröffentlichungszeit dieses Artikels darstellt, wenn sie nicht im Artikel steht , es stellt den Veröffentlichungszeitpunkt des gesamten Dokuments dar.

5): Abschnitts-Tag: stellt den „Abschnitt“ oder „Absatz“ im Dokument dar. „Abschnitt“ kann sich auf die Unterabschnitte entsprechend dem Thema in einem Artikel beziehen; „Abschnitt“ kann sich auf die Abschnitte in beziehen eine Seite.
Abschnitte haben normalerweise auch einen Titel. Obwohl Abschnitte in HTML5 die Titel h1–h6 automatisch herabstufen, ist es am besten, sie manuell herabzustufen.

6):blockquote-Tag: Dieses Tag definiert ein Blockzitat aus einer anderen Quelle. Der gesamte Text zwischen

ist vom regulären Text getrennt, oft links und rechts eingerückt und manchmal kursiv. Das heißt, Blockverweise haben ihren eigenen Platz.

7):figure-Tag: Gibt unabhängige Stream-Inhalte an (Bilder, Diagramme, Fotos, Code usw.). Der Inhalt des
figure-Elements sollte mit dem Hauptinhalt in Zusammenhang stehen, aber bei Entfernung keine Auswirkungen auf den Dokumentenfluss haben.

8):figcaption-Tag: Definieren Sie den Titel (die Bildunterschrift) des Abbildungselements.
Das „figcaption“-Element sollte als erstes oder letztes untergeordnetes Element des „figure“-Elements platziert werden.

9): Semantisierung des Tabellen-Tags: Das Tabellen-Tag stellt die Elemente thead, tfoot und tbody bereit, die Zeilen in der Tabelle gruppieren. Beim Erstellen einer Tabelle möchten Sie möglicherweise eine Kopfzeile, einige Zeilen mit Daten und eine Gesamtzeile am Ende haben. Diese Unterteilung gibt dem Browser die Möglichkeit, das Scrollen des Tabellenkörpers unabhängig von Tabellenkopf- und -fußzeilen zu unterstützen. Beachten Sie, dass Sie bei Verwendung der Elemente thead, tfoot und tbody in einer Tabelle alle Elemente in der Reihenfolge thead, tbody und tfoot verwenden müssen, damit der Browser die Fußzeile rendern kann, bevor er alle Daten empfängt.

10): Das Nebenelement ist im Artikelelement als ergänzender Informationsteil des Hauptinhalts enthalten. Der Inhalt kann verwandte Informationen, Tags, Ranking-Erklärungen usw. sein, die sich auf den aktuellen Artikel beziehen. (Spezieller Abschnitt)

11):code: Dieses Tag ist ein Phrasen-Tag, der zum Definieren von Computercodetext verwendet wird.

12):pre Tag: pre kann vorformatierten Text definieren. In einem pre-Element eingeschlossener Text behält normalerweise Leerzeichen und Zeilenumbrüche bei. Der Text wird außerdem in einer Schriftart mit fester Breite gerendert. Eine häufige Anwendung des Pre-Tags ist die Darstellung von Quellcode.

code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示所必须的样式。那么这个时候我们可以想象一下，code标签和pre标签可不可以一块使用呢？答案是可以的，code标签和pre标签是可以嵌套使用的，但是必须注意两者的嵌套顺序。

13):dialog标签：该标签定义对话框或窗口，这可以很方便的使用弹出层窗口。
默认情况下，该标签支持的浏览器(Chrome 37+和Opera 27+)会以隐藏的形式呈现
元素，只有调用JavaScript的show()或showModal()方法才可以显现，调用close()方法再次将其隐藏。通常情况下，会在一个click事件上执行此方法。

3.尾部——footer

<footer><p>copyright &copy @</p><address>我是地址</address> </footer>
Nach dem Login kopieren

adderss标签:该标签定义文档作者或拥有者的联系信息，通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。如果
元素位于
元素内部，则它表示该文章作者或拥有者的联系信息。通常的做法是将 address 元素添加到网页的头部或底部。注意，不应该使用
标签来描述邮政地址，除非这些信息是联系信息的组成部分。

三、总结
能语义化的标签当然不止这些，还有很多，这里仅仅是把可能常见的展示出来，其余的标签在此不一一列举了。
最后展示一张全家福来结束本篇笔记：

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in h5-semantische Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!