Maison > Article > interface Web > Quels sont les nouveaux éléments structurels du HTML5 ? Utilisation de nouveaux éléments structurels en HTML5 (recommandé)
Quels sont les nouveaux éléments structurels du HTML5 ? Utilisation de nouveaux éléments structurels en HTML5 (recommandé)
- 寻∝梦original
- 2018-08-14 16:22:595904parcourir
Quelles sont les nouvelles structures du HTML5 et comment peuvent-elles être utilisées ? Cet article vous l'expliquera en détail.
Nouveaux éléments de structure principaux HTML5 :
élément article
élément section
nav
élément de côté
élément de temps
pudate attribut
détails de l'élément :
élément article
peut être intégré et exprimé Plug-in
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width = "600" height = "400"</embed>
</object>
</article>élément section
Il est généralement déconseillé d'utiliser l'élément section sans contenu d'en-tête
Ne le confondez pas avec l'élément article
Résumé : n'utilisez pas l'élément section comme conteneur de page pour définir les styles
Si les éléments article, apart et nav sont plus conformes aux conditions d'utilisation, alors n'utilisez pas l'élément élément de section
S'il n'y a pas de contenu de titre, n'utilisez pas l'élément de section
nav
est utilisé comme groupe connecté pour la navigation dans les pages, où les éléments de navigation sont connectés à d’autres pages ou à d’autres parties de la page actuelle. Placez simplement les groupes de connexion principaux et de base dans les éléments de navigation
Scénarios d'application :
Barre de navigation traditionnelle
Navigation dans la barre latérale
Navigation dans la page
Opération de tournage de page
Ne pas l'utiliser en html5 Le menu l'élément remplace l'élément nav
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href = "#">主页</a></li>
<li><a href = "#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>html5和css3的历史</h1>
<nav>
<ul>
<li><a href = "#">HTML5历史</a></li>
<li><a href = "#">CSS3历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5历史</h1>
<p>....</p>
</section>
<section>
<h1>css3历史</h1>
<p>....</p>
</section>
<footer>
<a href = "#">删除</a>
<a href = "#">修改</a>
</footer>
</article>
<footer>
<p><small>版权声明：</small></p>
</footer>
</body>
</html>l'élément de côté
représente la partie d'informations auxiliaires de la page ou du texte actuel
contient la première référence, côté Barre latérale, achats, barre de navigation, etc.
<html>
<head>
<meta charset="UTF-8">
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章的正文。。。。。。</p>
<aside>
<h1>名词解释</h1>
<p>这是一个对语言来说很重要的内容体</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href = "#">2015-3-10</a></li>
<li><a href = "#" >大牛：真希望可以好好的学习一下</a></li>
</ul>
</nav>
</aside>
</body>
</html>élément de temps
24 heures
<html>
<head>
<meta charset="UTF-8">
<title>Time元素</title>
</head>
<body>
<time datatime = "2017-10-09">2017-10-09</time>
<time datatime = "2017-10-09T20:00">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
</body>
</html>Attribut pudate
<html>
<head>
<meta charset="UTF-8">
<title>update属性</title>
</head>
<body>
<article>
<header>
<h1>苹果</h1>
<p>发布日期
<time datetime="2017-10-09" pubudate>2015-10-09</time></p>
<p>舞会时间
<time datetime ="2015-10-09">2015-10-09</time></p>
</header>
</article>
</body>
</html>[Recommandations associées]
Éléments de base du HTML, vous permettant d'apprendre le HTML à partir de scratch
Qu'est-ce qu'un fichier HTML ? Une compréhension préliminaire des fichiers 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!