html5 semantische Tags: 2. Nav-Tag; 5. Abschnitts-Tag; ; 10. Adressschild.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
Jedes HTML-Tag hat seine eigene spezifische Bedeutung (Semantisierung) bedeutet die Verwendung semantisch passender Tags, damit die Seite eine gute Struktur und Seitenelemente hat. Es hat eine Bedeutung und kann sowohl von Menschen als auch von Suchmaschinen leicht verstanden werden. Ich habe ein anschaulicheres Beispiel gesehen:
Beim Hausbau sollten einige Teile aus Ziegeln, einige Teile aus Keramikfliesen und einige Teile mit Zement bedeckt sein Das Haus wird stark, ordentlich und schön sein.
Wenn Sie darauf bestehen, Ziegel durch Keramikfliesen zu ersetzen, können Sie kaum ein Haus bauen, aber ein solches Haus ist nicht stabil, stürzt leicht ein und sieht nicht gut aus.Es hat eine gute Struktur und ist für Menschen und Suchmaschinen leichter zu verstehen. Ein weiterer Punkt ist, dass es einfach zu entwickeln und zu warten ist und ich mich darüber beschweren möchte. Überlassen Sie das Aussehen und die Präsentation nicht dem Layout für Auftritt und Präsentation!Ebenso sind viele Dinge im Leben ähnlich!
Verwenden Sie alle Tags, die Sie ausdrücken möchten
Die Bedeutung und Rolle der Semantik
title
sollte eine Überschrift verwenden,body
sollte von tbody umgeben sein undTabellenüberschriften sollten von gewöhnlichen Zellen unterschieden werden, indem th für Tabellenüberschriften und td für Zellen verwendet werden Ehrlich gesagt, das ist mir wirklich nicht viel aufgefallen!
HTML5-semantische Tags: 1.header: Das Tag definiert den Header von „Webseite“ oder „Abschnitt“. enthält normalerweise h1-h6-Elemente oder hgroups als
die gesamte Seite. Sie können auch den Verzeichnisteil eines Abschnitts, eines Suchfelds, einer Navigation oder eines zugehörigen Logos umschließen.
<header>
<h1>毕业生实习</h1>
<span>2016/08/05</span>
</header>
<!--之前使用的是无语义的div+class-->
<div class='header'>...</div><header>
<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>
</header>kann der Kopfteil einer „Webseite“ oder eines beliebigen „Abschnitts“ sein
2.nav: Definiert den Teil des Navigationslinks.
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
<li><a href="#">xxx</a></li>
</ul>
</nav>
<!--之前使用的是无语义的div+class-->
<div class='nav'>...</div>Verwendung: Wird auf der gesamten Seite verwendetHauptnavigationsteil, verwenden Sie keine Navigationselemente, wenn sie nicht geeignet sind; kann als Linkgruppe für die Seitennavigation
verwendet werden,nicht alle Linkgruppen erforderlich Fügen Sie es in das Navigationselement ein
,Fügen Sie einfach die Haupt- und Basis-Linkgruppe ein
Spezifische Verwendungszwecke: herkömmliche Navigationsleiste, Seitenleistennavigation, Branchennavigation, Umblättervorgänge usw.
3.footer-Tag: Stellt die Fußzeile von „Webseite“ oder „Abschnitt“ dar.
通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
<footer> 作者：xxxx <br /> Copyright © xxx.All rights reserved. </footer> <!--之前使用的是无语义的div+class--> <div class='footer'>...</div>
用法：
4. hgroup元素：“网页”或“section”的标题
当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
<hgroup>
<h1>主标题</h1>
<h2>HTML 5</h2>
</hgroup>用法：
5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）
<section> <h1>section要包含标题</h1> <p>section要包含内容...</p> </section>
用法：
6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)
<article>
<header>
<h1>标题处</h1>
</header>
<p>内容描述</p>
<footer>脚部声明标注</footer>
</article>用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！
article、section间的相互嵌套关系：
拜读博文：http://www.html5jscss.com/html5-semantics-section.html
7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。
书籍中的定义很长很绕，在收集之后，发现主要有两种用法:（啃下概念）
1.用于article标签之内，此时表示的是该独立内容的附属信息部分；
<article>
<p>article内容区</p>
<aside>
<span>附属信息1</span>
<span>附属信息2</span>
<span>附属信息3</span>
</aside>
</article>2.用于article标签之外，此时作为页面或站点全局的附属信息部分。
<aside>
<h1>附属信息标题</h1>
<a href="#">附属信息...</a>
<a href="#">附属信息...</a>
<a href="#">附属信息...</a>
</aside>用法：
（一句话概括：不同的位置表示为对应区域的附属信息！）
8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。
figcaption标签：用于元素定义figure的标题。
1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。
2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。
<figure>
<figcaption>figure的标题</figcaption>
<img src="pic.jpg" alt="...">
</figure>9. time标签：定义时间或日期
<p>定义时间...<time>9:00</time></p> <p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>
以上为实践操作中可能会用到的标签，HTML5还新增了很多标签，但因为用途与浏览器兼容性问题，还是为人所慎用的！待拓展！
10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。
表示文档或文章的作者/拥有者的联系信息，在body标签中表示文档的作者的联系信息；在article标签中表示文章作者的联系信息；
W3School示例文档：http://www.w3school.com.cn/tags/tag_address.asp
用法：
总结：掌握语义化含义、作用以及应当注意的细节，HTML5中常用的语义化新标签！知识点不在于多，而研究透彻应学以致用！
推荐教程：《html视频教程》
Das obige ist der detaillierte Inhalt vonWas sind die semantischen Tags in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
So öffnen Sie das JSON-Format
So beheben Sie einen CPU-Lüfterfehler
Was ist ECharts?
location.reload-Nutzung
Einführung in das Dex-Konzept der digitalen Währung
Warum kommt vom Computer kein Ton?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
