La norme HTML5 ajoute beaucoup de nouveaux éléments sémantiques.
Ici, nous introduisons principalement de nouveaux éléments sur la structure de la page.
Qu'est-ce qu'un élément sémantiqueEn termes simples, les éléments sémantiques sont de donner un sens à l'élément (étiquette).
Comme <weader> représentant l'en-tête, <footh> pour indiquer le pied de page.
Caractéristiques① Maintenance facile: l'utilisation des éléments sémantiques aura des informations plus claires de structure de page, ce qui est facile à maintenir la maintenance de suivi de la page. Pas besoin d'afficher à nouveau le code: Recherchez la division avant de trouver le nom de classe spécifique.
② Cabinet-sans aide à lire le lecteur d'écran et d'autres outils auxiliaires.
③ Optimisation optimisée du moteur de recherche: Après avoir vérifié certains éléments sémantiques de HTML5, les robots de recherche peuvent collecter des informations sur sa page d'index.
Disposition d'interface d'origineDans la disposition de la page, <div> est un élément très courant.
Pour faciliter la maintenance, les concepteurs donnent souvent ces <div> ClassName (catégorie de style) ou ID avec des noms spéciaux.
Par exemple, un élément <div> qui représente l'en-tête, son nom de classe ou ID peut être le chef de page, l'en-tête, etc.
Exemple:
Structure de page Élément sémantique illustrerLes éléments sémantiques de la structure de la page sont principalement utilisés pour la disposition globale de la page.
Et il n'a pas de style spécial, il doit encore être utilisé avec CSS.
Introduction détaillée <A-tête>: Définissez la zone de tête de la page Web ou de l'article. Il peut contenir le logo, la navigation, la barre de recherche, etc.La version la plus basse du navigateur: IE 9, Chrome 5
Instructions pour une utilisation:
① Lorsqu'il est utilisé pour étiqueter la page Web, il peut inclure des informations telles que le logo, la navigation, la barre de recherche.
② Lorsque le titre est utilisé pour marquer le contenu, uniquement lorsque le titre est également attaché à d'autres informations, le <age-tête> est considéré.
<Siplit>: Définissez le contenu principal de la page Web.La version la plus basse du navigateur: IE ne prend pas en charge, Chrome 35
<foomer>: Définissez la zone de queue de la page Web ou de l'article. Il peut inclure le droit d'auteur et le dépôt.La version la plus basse du navigateur: IE 9, Chrome 5
Instructions pour une utilisation:
① En tant que page Web, il comprend généralement le droit d'auteur du site Web, des restrictions légales et des liens.
② En tant que note de bas de page de l'article, il contient généralement les informations pertinentes de l'auteur.
<NAV>: Marquez le lien de navigation de la page. Contient plusieurs zones surclassées.La version la plus basse du navigateur: IE 9, Chrome 5
Instructions pour une utilisation:
① Une page peut contenir plusieurs éléments <Nav>, tels que la navigation et la recommandation d'articles connexes.
② Les informations de contact et les informations de certification dans la zone <Severter> n'ont pas à être incluses dans l'élément <AnAc>.
<Cathre>: Il est généralement marqué comme une zone indépendante sur la page Web.La version la plus basse du navigateur: IE 9, Chrome 5
Instructions pour une utilisation:
① peut être utilisé comme un domaine indépendant de la page Web, comme une section de l'article.
<Arttiticle>: Blocs de contenu complet et indépendant; Tels que les nouvelles, les articles de blog et autres contenus indépendants (à l'exclusion des commentaires ou des profils d'auteur).La version la plus basse du navigateur: IE 9, Chrome 5
<à part>: Définissez les blocs de contenu en dehors du contenu principal de l'environnement. Comme: Annotation.La version la plus basse du navigateur: IE 9, Chrome 5
<Figure>: Il représente une section de contenu indépendant et est souvent utilisé avec <Figcaption> (représente), qui peut être utilisé pour les images, les illustrations, les formulaires, les segments de code, etc. dans l'article.La version la plus basse du navigateur: IE 9, Chrome 8 <Figcaption>: Définissez le titre de l'élément <Figure>.
La version la plus basse du navigateur: IE 9, Chrome 8
Exemple de diagramme
Ancienne version de la prise en charge du navigateur IE8 ci-dessusLe navigateur sera utilisé comme élément interne pour les éléments qui ne le savent pas. Les éléments sémantiques liés à la page sont des éléments au niveau des blocs, vous n'avez donc qu'à définir les navigateurs qui ne prennent pas en charge ces éléments pour les afficher en tant qu'éléments au niveau du bloc.
Ajoutez le code suivant au style:
Article, mis à part, les détails, FigCaption, Figure, Footer, Header, Hgroup, Main, Nav, Section, Résumé {Affichage: Block;} IE8 et IE8 ci-dessousLes navigateurs ci-dessous IE8 et IE8 ne prennent pas en charge le style d'application d'élément utile qui ne peut pas être reconnu.
Créez donc ces éléments sémantiques via JS et ajoutez des styles de base.
Prenez un en-tête comme exemple <Script> Document.CreateElement ('En-tête'); Fichier externe d'applicationCes créations fastidieuses ont déjà écrit Lei Feng, juste chargé sur l'ancienne version de IE.
<! - [si lt ie9]> <script src = // cdn.bootcss.com/html5shiv/html5