Heim > Artikel > Web-Frontend > Was sind die semantischen Tags in HTML5?
Was sind die semantischen Tags in HTML5?
- 青灯夜游Original
- 2021-05-06 15:29:0318844Durchsuche
html5 semantische Tags: 2. Nav-Tag; 5. Abschnitts-Tag; ; 10. Adressschild.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
HTML-Semantisierung:
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
Wenn der Stil entfernt wird oder verloren geht, kann die Seite eine klare Struktur
- Benutzererfahrung präsentieren: Titel und Alt werden beispielsweise verwendet, um Substantive oder zu erklären Erklären Sie Bildinformationen. Die flexible Verwendung von Label-Tags ist gut für SEO: Durch die Einrichtung einer guten Kommunikation mit Suchmaschinen können Crawler effektivere Informationen crawlen: Crawler verlassen sich auf Labels, um den Kontext und die Gewichtung jedes Schlüsselworts zu bestimmen Praktisch: Andere Geräte analysieren (z. B. Screenreader, Blindreader, mobile Geräte), um Webseiten auf sinnvolle Weise darzustellen
- ist praktisch für Teamentwicklung und -wartung , und die Semantik ist besser lesbar, was der nächste Schritt ist Webseiten. Trends, Teams, die W3C-Standards befolgen, folgen alle diesem Standard, was die Differenzierung verringern kann.
- Was sollte man bei der Semantik beachten?
- Verwenden Sie so wenige unsemantische p-, span-Tags usw.; verwenden Sie stärkere semantische Tags, die neu in HTML5 hinzugefügt wurden. Verwenden Sie keine stilisierten Tags wie Schriftart, b usw . Warten Sie, Sie können CSS vollständig zum Implementieren von Stilen verwenden (außerdem werden solche „stilisierten Tags“ in HTML5 grundsätzlich abgeschafft!)
Betonen Sie den Text, versuchen Sie, den starken Tag zu verwenden, um die Hervorhebung zu verstärken, und setzen Sie den em-Tag in Kursivschrift
- Für das Schreiben von Tabellen Spezifikationen:
title
sollte eine Überschrift verwenden, header - sollte thead verwenden,
body
sollte von tbody umgeben sein und tail - sollte von tfoot umgeben sein.
Tabellenü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 oder - den Titel eines Inhaltsblocks
. 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>oder
<header>
<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>
</header>kann der Kopfteil einer „Webseite“ oder eines beliebigen „Abschnitts“ sein
Wenn hgroup oder h1-h6 alleine gut funktionieren können, verwenden Sie keine Header.
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
- Hinweis
- : In der Fußzeile wird es beispielsweise eine Reihe von Links
- geben, einschließlich Nutzungsbedingungen , Homepage, Copyright-Erklärung usw., die Verwendung des Fußzeilenelements
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>
用法：
- 可以是“网页”或任意“section”的底部部分；
- 没有个数限制，除了包裹的内容不一样，其他跟header类似。
- 多用于包含服务条款，友情链接、作者信息、版权信息等
4. hgroup元素：“网页”或“section”的标题
当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
<hgroup>
<h1>主标题</h1>
<h2>HTML 5</h2>
</hgroup>用法：
- 如果只需要一个h1-h6标签就不用hgroup
- 如果有连续多个h1-h6标签就用hgroup
- 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签
5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）
<section> <h1>section要包含标题</h1> <p>section要包含内容...</p> </section>
用法：
- article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用p
- 当容器需要标题和内容时，建议使用section标签，若只是普通的容器，应该用p元素较好！section标签非p！
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>用法：
- aside在article内表示主要内容的附属信息
- 在article之外则可做侧边栏，页面或站点全局的附属信息部分
- 如果是广告，其他日志链接或者其他分类导航也可以用
（一句话概括：不同的位置表示为对应区域的附属信息！）
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
用法：
- 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
- 元素通常连同其他信息被包含在 footer 元素中。
总结：掌握语义化含义、作用以及应当注意的细节，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!