Cas réel de la balise sémantique H5-Tutoriel H5-php.cn

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 la balise

Parfois, l'élément

est toujours un bon choix sémantiquement

. 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

Dans l'élément

, nous pouvons également placer l'élément

qui enveloppe le menu de navigation principal

de la page. L'élément h1 contenant une ancre est le titre de notre blog.

Au début, j'ai utilisé

pour envelopper le contenu de la page, mais après avoir lu certains documents, j'ai senti que ce n'était pas sémantiquement correct à 100%. Choisissez toujours l'élément div,

À 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

(qui peut être utilisé à plusieurs endroits, pas seulement dans la navigation principale)

. Mais cette mise en page de blog traite toujours les liens de pagination comme navigation principale.

Avant la révision de l'élément

, il n'y avait aucun élément sémantiquement spécifique pour une barre latérale. Cependant, vous pouvez désormais utiliser l’élément side en toute sécurité sans vous soucier des problèmes de syntaxe.

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;
		}

Copier après la connexion

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!

Étiquettes associées：

html5 实际案例

source：php.cn

Article précédent：Comment créer un effet de traînée dans H5 Article suivant：Balises en ligne avancées H5

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur