À quels aspects faut-il prêter attention dans la structure des pages HTML5-Tutoriel H5-php.cn

Cette fois, je vais vous apporter à quels aspects de la structure des pages html5 vous devez prêter attention. Quelles sont les notes de la structure des pages html5 Voici des cas pratiques, jetons un coup d'oeil.

Introduction aux éléments sémantiques

La norme HTML5 ajoute de nombreux nouveaux éléments sémantiques, s'ils sont divisés par type, il existe une structure de page, un contenu de texte, un formulaire, etc.

Ici, nous introduisons principalement les nouveaux éléments dans la structure de la page.

Qu'est-ce qu'un élément sémantique ?

Pour faire simple, un élément sémantique consiste à donner une certaine signification à un élément (tag), et le nom de l'élément est la signification que le l’élément veut exprimer.

Par exemple, signifie en-tête et

Fonctionnalités

① Facile à maintenir : l'utilisation d'éléments sémantiques donnera des informations plus claires sur la structure de la page, ce qui facilitera la maintenance de la page ultérieurement. Pas besoin de revoir le code : recherchez le div puis recherchez le ClassName spécifique.

②Accessibilité : aide avec les lecteurs d'écran et autres outils d'accessibilité.

③ Propice à l'optimisation des moteurs de recherche : Après avoir vérifié certains éléments sémantiques du HTML5, les robots de recherche peuvent collecter des informations sur les pages qu'ils indexent.

Mise en page originale de l'interface

Dans la mise en page de la page, est un élément très courant. Avec certains styles, il peut être appliqué à des scénarios spécifiques, tels que l'en-tête, la barre latérale. , Barre de navigation et plus encore.

Afin de faciliter la maintenance, les concepteurs attribuent souvent ClassName (nom de classe de style) ou ID avec un nom spécial à ces .

Par exemple, un élément représentant un en-tête de page, son ClassName ou son ID peut être un en-tête de page, un en-tête, etc.

Éléments sémantiques de la structure de la page

Explication

Les éléments sémantiques de la structure de la page sont principalement utilisés pour la mise en page globale de la page. La plupart d'entre eux sont des éléments de niveau bloc, qui. sont utilisés à la place de Tels que : en-tête, pied de page, etc.

Il n'a pas de style particulier, il doit donc quand même être utilisé avec CSS.

Introduction détaillée

: Définir la zone d'en-tête d'une page Web ou d'un article. Peut inclure un logo, une navigation, une barre de recherche, etc.

Version minimale du navigateur : IE 9, Chrome 5

Instructions d'utilisation :

①Lorsqu'il est utilisé pour marquer l'en-tête d'une page Web, il peut inclure un logo, une navigation et barre de recherche et autres informations.

② Lorsqu'il est utilisé pour marquer le titre du contenu, envisagez d'utiliser uniquement lorsque le titre contient également d'autres informations. Dans des circonstances normales, utilisez

: Définir le contenu principal de la page Web.

Version minimale du navigateur : IE non pris en charge, Chrome 35

: définissez la zone de pied de page d'une page Web ou d'un article. Peut inclure des droits d’auteur, des dépôts et d’autres contenus.

Version minimale du navigateur : IE 9, Chrome 5

Instructions d'utilisation :

①Lorsqu'il est utilisé comme pied de page d'une page Web, il contient généralement les droits d'auteur du site Web, les restrictions légales, liens, etc.

②Lorsqu'il est utilisé comme pied de page d'un article, il contient généralement des informations sur l'auteur.

: marquez le lien navigation dans la page . Une zone contenant plusieurs hyperliens .

Version minimale du navigateur : IE 9, Chrome 5

Instructions d'utilisation :

①Une page peut contenir plusieurs éléments , etc.

②Les informations de contact et les informations d'authentification dans la zone n'ont pas besoin d'être incluses dans l'élément

: généralement marqué comme une zone indépendante dans la page Web.

Version minimale du navigateur : IE 9, Chrome 5

Instructions d'utilisation :

① peut être utilisé comme une zone indépendante dans une page Web, comme une section dans un article.

: Un bloc de contenu complet et indépendant ; il peut contenir des éléments structurels indépendants tels que et . Tels que les actualités, les articles de blog et autres contenus indépendants (à l'exclusion des commentaires ou des profils d'auteurs).

Version minimale du navigateur : IE 9, Chrome 5

: définit un bloc de contenu en dehors du contenu principal environnant. Tels que : annotation.

Version minimale du navigateur : IE 9, Chrome 5

: représente un élément de contenu indépendant, souvent utilisé en conjonction avec utilisé dans les images d'articles, les illustrations, les tableaux, les extraits de code, etc.

Version minimale du navigateur : IE 9, Chrome 8 : définit le titre de l'élément

Version minimale du navigateur : IE 9, Chrome 8

Je pense que vous maîtrisez la méthode 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 utiliser les balises vidéo et audio et les barres de progression dans H5

Nouvelle interaction entre H5 et C3 Quelles sont les fonctionnalités

Résumé des balises au niveau du bloc H5

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

À quels aspects faut-il prêter attention dans la structure des pages HTML5