Cette fois je vais vous présenter un cas pratique de balises sémantiques H5. Comment utiliser les balises sémantiques H5 ? Quelles sont les précautions lors de l'utilisation des balises sémantiques H5 ? Ce qui suit est un cas pratique, jetons-y un œil.
La mise en page est basée sur des éléments html5. Il est donc important de vous familiariser avec les éléments HTML5 avant de commencer, puis de vérifier si leur sémantique correspond à votre mise en page.
La structure HTML5
Il est très important que lors de l'écriture de code HTML5, ne remplacez pas simplement la balise
. Par exemple, wrapper ou conteneur div
L'une des nouvelles balises pouvant être utilisées pour remplacer l'élément div traditionnel est l'élément
de la page. L'élément h1 contenant une ancre est le titre de notre blog.
Au début, j'ai utilisé
À l'intérieur de l'élément div, chaque article de blog est enveloppé dans son propre élément article.
Sous une série de blogs, il y a une paire de liens paginés. Habituellement, l'importance des liens de pagination n'est pas équivalente à celle de l'élément
. Mais cette mise en page de blog traite toujours les liens de pagination comme navigation principale.
Avant la révision de l'élément
Dans cet exemple, l'élément side contient plusieurs éléments de section. Il y a un simple champ de recherche en bas de la barre latérale. Il nous donne accès à quelques nouvelles fonctionnalités des formulaires HTML5.
L'un d'eux est l'attribut placeholder
La mise en page se termine par l'élément pied de page. Dans cet exemple, l'élément footer doit être placé à l'extérieur du conteneur div afin que la largeur de l'élément footer s'étende sur toute la page.
header { margin: 0 0 98px 0; } header h1 { float: left; font-size: 36px; font-weight: normal; } header nav { float: right; text-align: right; padding: 6px 0 0 0; } header nav ul { list-style: none; } header nav li { float: left; font-size: 18px; width: 136px; margin: 0 0 0 20px; } header nav li:nth-child(1):before { content: "1. "; color: #a2a2a2; } header nav li:nth-child(2):before { content: "2. "; color: #a2a2a2; } header nav li:nth-child(3):before { content: "3. "; color: #a2a2a2; } header nav li:nth-child(4):before { content: "4. "; color: #a2a2a2; } header nav li:nth-child(5):before { content: "5. "; color: #a2a2a2; } #sidebar { width: 292px; float: left; padding: 4px 0 0 0; } #sidebar h3 { font-size: 18px; font-weight: normal; margin: 0 0 25px 0; } #sidebar ul { list-style: none; } #sidebar section { margin: 0 0 47px 0; } #sidebar #about a.more { display: block; text-align: right; } #sidebar #categories { width: 136px; float: left; margin: 0 20px 0 0; } #sidebar #social { width: 136px; float: left; } #footer-container { background: rgba(0,0,0,0.2); overflow: hidden; } footer { width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px; } footer #credits { list-style: none; float: left; } footer #credits li { float: left; margin: 0 6px 0 0; } footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } footer #back-top { float: right; font-size: 12px; }
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment créer un effet de glissement dans H5
Comment utiliser H5 pour appeler la caméra
Comment gérer l'incompatibilité des anciennes versions des navigateurs avec H5 et C3
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!