Balises sémantiques HTML5 : 1. balise d'en-tête ; 2. balise de navigation ; 3. balise de pied de page ; 4. balise de section ; 6. balise d'article ; 9. étiquette temporelle ; 10. étiquette d'adresse.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
Chaque balise HTML a sa propre signification spécifique (sémantique), et la sémantique fait référence à Utilisation des balises sémantiquement appropriées pour que la page ait une bonne structure et que les éléments de la page aient une signification, ce qui la rend facile à comprendre pour les personnes et les moteurs de recherche.
J'ai vu un exemple plus frappant :
Lors de la construction d'une maison, certaines parties doivent être en briques, certaines parties doivent être en carreaux de céramique et d'autres les pièces doivent être faites de carreaux de céramique. Les endroits doivent être recouverts de ciment, pour que la maison soit solide, soignée et belle.
Si vous insistez pour remplacer les briques par des carreaux de céramique, vous pouvez à peine construire une maison, mais une telle maison n'est pas solide, facile à s'effondrer et son apparence n'est pas belle.
De même, beaucoup de choses dans la vie sont similaires ! Utilisez la balise qui doit être utilisée pour exprimer . Elle a une bonne structure et est plus facile à comprendre pour les gens et les moteurs de recherche. Un autre point est qu'il est facile à développer et à maintenir. J'ai vu beaucoup de structures de pages Web et je veux m'en plaindre. Tout cela est déroutant. Laissez simplement l'apparence de la tâche au CSS. disposer pour le plaisir de l'apparence !
Pour le titre , utilisez la légende, L'en-tête est entouré par la tête, la partie corps est entourée par le corps et la queue est entourée par le pied. Les en-têtes de tableau et les cellules générales doivent être distingués Utilisez th pour les en-têtes de tableau et td pour les cellules
Les champs de formulaire doivent utiliser des balises d'ensemble de champs Wrap ; et utilisez la balise légende pour expliquer le but du formulaire ; (Pour être honnête, je ne l'ai pas vraiment remarqué !)
Le texte de description correspondant à chacun La balise d'entrée doit être utilisée avec la balise d'étiquette et est associée à l'entrée correspondante via l'attribut id.
1.header : La balise définit l'entête de la "page web" ou de la "section" .
contient généralement des éléments h1-h6 ou des hgroups , comme la page entière ou le titre d'un bloc de contenu. Vous pouvez également envelopper la table des matières d'une section, un champ de recherche, un système de navigation ou tout logo associé .
<header>
<h1>毕业生实习</h1>
<span>2016/08/05</span>
</header>
<!--之前使用的是无语义的div+class-->
<div class='header'>...</div><header>
<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>
</header>2.nav : définit la partie du lien de navigation.
<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>Utilisations spécifiques : barre de navigation traditionnelle, navigation dans la barre latérale, navigation par secteur d'activité, opérations de changement de page, etc.Balise 3.footer : représente "page Web" ou "section" pied de page.
通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
如果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视频教程》
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
Les pièces BAGS peuvent-elles être conservées longtemps ?
Méthode de détection des liens morts d'un site Web
Les principaux dangers des virus chevaux de Troie
Implémenter la méthode de saut 301 via le code js
Comment annuler le compte Douyin sur Douyin
Suffixe du nom du fichier de modification par lots Linux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
