Définir le texte principal ou un contenu complet

<à part> Définir le contenu supplémentaire ou associé

La meilleure façon d'apprendre ces balises est bien sûr de essayez de les utiliser. Bien qu'il existe de nombreux modèles de mise en page Web prêts à l'emploi qui peuvent être facilement utilisés, pour les débutants, il est absolument nécessaire de mettre en œuvre vous-même une mise en page simple. Voici un exemple simple de mise en page pour démontrer l’utilisation des balises ci-dessus.

Exemple : Imitez la mise en page de la page d'accueil du blog

Implémentez la structure de la page Web comme indiqué dans la figure 2-1, qui est une page de blog très typique : tête, queue, barre de navigation horizontale, navigation dans la barre latérale et le contenu.

Figure 2-1

Comme vous pouvez le voir sur la figure 2-1, les zones implémentées par les balises correspondantes sont marquées par des noms, tels que En-tête

Avant d'écrire la page, il faut dire : les éléments de la page sont implémentés par HTML5, et l'effet d'affichage des éléments est rendu par CSS3 Le code CSS3 peut être placé dans le même fichier que le HTML5. code, ou il peut s'agir de fichiers indépendants, à condition qu'ils soient référencés dans des fichiers HTML5. Il est recommandé que chacun soit un fichier indépendant. Les avantages sont :

1) Respecter le principe de responsabilité unique : la page HTML5 se charge de la gestion des éléments, tandis que le fichier CSS3 se charge uniquement du rendu de l'effet d'affichage. du fichier HTML5 correspondant, indépendants les uns des autres, ne se croisent pas.

2) Réduire la complexité de la page et faciliter la maintenance : Imaginez, lorsque le nombre d'éléments sur la page augmente considérablement, à quel point la lisibilité sera mauvaise si les éléments et les attributs d'affichage des éléments sont gérés sur une page en même temps. La maintenance sera pénible.

3) Accélérez la vitesse de chargement du navigateur : Un autre avantage du point 2) est que les pages simples se chargeront naturellement plus rapidement.
Bien sûr, si vous avez l'habitude de mettre HTML5+CSS3 dans un seul fichier, ce n'est pas une mauvaise idée. Ce n'est qu'une suggestion.
Implémentons la figure 2-1 en détail.

1. Déclaration de document HTML5

Créez un nouveau fichier index.html Si l'outil de rédaction de pages Web que vous utilisez prend déjà en charge le type de fichier HTML5, alors le modèle HTML5 suivant doit être généré :

    Layout TEST

Peu importe si l'outil d'écriture de pages Web ne prend pas en charge HTML5 pour le moment, il est très simple d'écrire vous-même ces lignes de code.
Explication : La première ligne : est la simplification des types de documents par HTML5, simplifiant le complexe (Le rôle du type de document : le validateur l'utilise pour déterminer les règles à utiliser pour vérifier le code ; obligatoire ; Le navigateur affiche la page en mode standard)
2. En-tête

implémentation de la balise

Header

Remarque : 1) L'en-tête ne peut pas être confondu avec les titres h1, h2 et h3.

peut contenir tout, du logo de votre entreprise à un champ de recherche. L'exemple contient uniquement le titre.
2) La même page peut contenir plusieurs éléments

Chaque bloc ou article indépendant peut contenir son propre

. Par conséquent, dans l'exemple, un attribut id unique est ajouté à

pour faciliter le rendu flexible en CSS3. Vous verrez le rôle de la balise id dans le fichier CSS.
3. Implémentation de la balise Footer

 Footer

Description : La position est la fin de la page ou du bloc. L'utilisation est fondamentalement la même que celle de

, et il inclura également d'autres éléments. , l'identifiant est également spécifié ici
4. Navigation

implémentation de la balise

  Home
 One
 Two
 Three

Description : L'importance de la navigation. est crucial pour une page Web, rapide et pratique. Une bonne navigation est nécessaire pour fidéliser les visiteurs.
1) Peut être inclus dans

Nouveaux éléments HTML5