Nouveaux éléments HTML5
Nouveaux éléments HTML
Les balises et attributs sémantiques HTML5 permettent aux développeurs de mettre en œuvre facilement des mises en page Web claires. Associés au rendu de l'effet CSS3, il est très pratique de créer rapidement des pages Web riches et flexibles.
Les nouveaux éléments de balise pour apprendre le HTML5 cette fois sont :
<header> définit l'en-tête de la page ou de la section
<footer> section la queue ;
<nav> définit la zone de navigation de la page ou de la section
<section> 🎜><article> 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
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Layout TEST</title> </head> <body> </body> </html>
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 : <!DOCTYPE html> 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
<header> implémentation de la balise
<header id="page_header">
<h1>Header</h1>
</header>
Remarque : 1) L'en-tête ne peut pas être confondu avec les titres h1, h2 et h3. <header> 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 <header> Chaque bloc ou article indépendant peut contenir son propre <header>. Par conséquent, dans l'exemple, un attribut id unique est ajouté à <header> 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>
<footer id="page_footer"> <h2>Footer</h2> </footer>
Description : La position est la fin de la page ou du bloc. L'utilisation est fondamentalement la même que celle de <header>, et il inclura également d'autres éléments. , l'identifiant est également spécifié ici
4. Navigation
<nav> implémentation de la balise
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </nav>
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 <header> ou <footer> ou dans d'autres blocs, et une page peut avoir plusieurs navigations.
2) La navigation nécessite généralement le rendu CSS, et vous verrez le rendu CSS plus tard.
5. Implémentation des balises Bloc et article
<section> et <article>
<section id="posts"> /*可以包含多个< article>*/ <article> /*article的内容*/ </article> <article> /*article的内容*/ </article> </section>
<section> .
Ce qui suit est le contenu général de <article>
<article> <header> <h2>Article Header</h2> </header> <p>Without you?I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article>
Vous pouvez voir qu'il peut contenir de nombreux éléments.
6. Narration et barre latérale
La balise <aside> implémente la narration, et la barre latérale est implémentée par <section>.
<aside> est une information supplémentaire ajoutée au contenu principal, y compris des introductions, des images, etc.
<aside> <p>sth. in aside </p> </aside>
<aside>
<article> <header> <h2>Article Header</h2> </header> <aside> <p>sth. in aside </p> </aside> <p>Without you?I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article>
Barre latérale, pas de narration ! Considérez-le comme une zone sur la droite, comprenant des liens, et utilisez <section> et <nav>
<section id="sidebar"> <nav> <ul> <li><a href="2012/04">April 2012</a></li> <li><a href="2012/03">March 2012</a></li> <li><a href="2012/02">February 2012</a></li> <li><a href="2012/01">January 2012</a></li> </ul> </nav> </section>À ce stade, l'utilisation de chaque balise est comme ceci. Voici le code complet du fichier HTML5 index.html
Afficher le code
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Layout TEST</title> </head> <body> <h2>body</h2> <header id="page_header"> <h1>Header</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </nav> </header> <section id="posts"> <h2>Section</h2> <article> <h2>article</h2> <header> <h2>Article Header</h2> </header> <aside> <h2>Article Aside</h2> </aside> <p>Without you?I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article> <article> <h2>article</h2> <header> <h2>Article Header</h2> </header> <aside> <h2>Article Aside</h2> </aside> <p>Without you?I'd be a soul without a purpose. </p> <footer> <h2>Article Footer</h2> </footer> </article> </section> <section id="sidebar"> <h2>Section</h2> <header> <h2>Sidebar Header</h2> </header> <nav> <h3></h3> <ul> <li><a href="2012/04">April 2012</a></li> <li><a href="2012/03">March 2012</a></li> <li><a href="2012/02">February 2012</a></li> <li><a href="2012/01">January 2012</a></li> </ul> </nav> </section> <footer id="page_footer"> <h2>Footer</h2> </footer> </body> </html>.
Ce qui suit est une introduction détaillée aux nouveaux élémentsNouvel élément
<canvas> sous forme de graphiques et d'autres images. Cette balise est basée sur l'API de dessin de JavaScript <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
balise Description
<audio> Définir le contenu audio
<vidéo>
<source> Définir les ressources multimédias <vidéo> et
<intégrer>
Nouvel élément de formulaire
Description de la balise
<datalist> Définit la liste d'options. Utilisez cet élément en conjonction avec un élément d'entrée pour définir les valeurs possibles de l'entrée.
<keygen> Spécifie le champ du générateur de paire de clés à utiliser dans le formulaire.
<output> Définir différents types de sortie, tels que la sortie de script.
Nouveaux éléments sémantiques et structurels
HTML5 fournit de nouveaux éléments pour créer une meilleure structure de page :
Description de la balise
<article>
<aside> Définit le contenu de la barre latérale de la page.
<bdi> Vous permet de définir un morceau de texte indépendamment du paramètre de direction du texte de son élément parent.
<commande> Définir des boutons de commande, tels que des boutons radio, des cases à cocher ou des boutons
<détails> >
<dialog> Définit une boîte de dialogue, telle qu'une boîte de dialogue <summary> L'étiquette contient le titre de l'élément de détails <figure> contenu (images, graphiques, photos, code, etc.). <figcaption> Définir le titre de l'élément <figure> <footer> <header> Définit la zone d'en-tête du document <mark> <mètre> Définir les poids et mesures. À utiliser uniquement pour les mesures avec des valeurs maximales et minimales connues.<nav> définit la partie du lien de navigation.
<progress> Définit la progression de tout type de tâche.
<ruby> Définir les commentaires ruby (pinyin ou caractères chinois).
<rt> Définir l'interprétation ou la prononciation du caractère (phonétique ou caractère chinois).
<rp> Utilisé dans les commentaires Ruby pour définir le contenu affiché par les navigateurs qui ne prennent pas en charge les éléments Ruby.
<section> Définit la section (section, section) dans le document.
<heure> Définir la date ou l'heure.
<wbr> Spécifie où dans le texte il est approprié d'ajouter un caractère de nouvelle ligne.
Éléments supprimés
Les éléments HTML 4.01 suivants ont été supprimés dans HTML5 :
<acronym> ;
<applet>
<basefont>
<big>
<center>
<dir> ;
<font>
<frame>
<frameset>
<noframes>
<strike> ;
<tt>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
