Éléments HTML
Élément HTML
Qu'est-ce qu'un élément HTML ?
L'élément HTML fait référence à tout le code depuis la balise de début jusqu'à la balise de fin.
Par exemple :
<p>Contenu du paragraphe</p>
<p> est la balise de début, </p> "Contenu du paragraphe" est le contenu de l'élément
<a> le contenu du lien </a>
<a> est la balise de début, </a> et "contenu du lien" est le contenu de l'élément
Syntaxe de l'élément HTML
L'élément HTML commence par une balise de début
L'élément HTML commence par une balise de fin Le contenu de l'élément
de fin est le contenu entre la balise d'ouverture et la balise de fermeture
Certains éléments HTML ont un contenu vide (contenu vide)
Les éléments vides sont exécutés dans la balise d'ouverture. Clôture (se termine par la fin de la balise d'ouverture)
La plupart des éléments HTML peuvent avoir des attributs.
Remarque : vous en apprendrez plus sur les attributs dans le prochain chapitre de ce tutoriel.
Éléments HTML imbriqués
<pLa plupart des éléments html="" peuvent être imbriqués (peuvent contenir d'autres éléments ="").
Qu'est-ce que la nidification ? Quelles sont les règles de nidification ?
L'imbrication signifie que les éléments de niveau bloc (block) contiennent des éléments en ligne (inline), couche par couche, jusqu'à ce qu'ils soient terminés.
Les documents HTML sont composés d'éléments HTML imbriqués.
Les balises HTML incluent des éléments de niveau bloc (block) et des éléments en ligne (inline)
Les éléments de niveau bloc
sont généralement utilisés pour créer l'architecture, la mise en page et le transport d'un site Web. contenu... Il comprend les balises suivantes
Le code est le suivant :
address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1~h6 , hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul
Éléments en ligne
Généralement utilisé dans certains détails ou parties du contenu du site Web pour "souligner, distinguer les styles, les exposants, les indices, les points d'ancrage", etc. Les balises suivantes sont toutes des éléments en ligne
Le code est le suivant :
a, abbr, acronyme, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span , strike, strong, sub, sup, textarea, tt, u, var
Règles d'imbrication pour les balises HTML
les éléments de bloc peuvent contenir des éléments en ligne ou certains éléments de bloc, mais les éléments en ligne ne peuvent pas contenir d'éléments de bloc. Ils ne peuvent contenir que d'autres éléments en ligne
Le code est le suivant :
<div>< ;h1></h1>< ;p></p></div> —— Droite</p> <p> <a href=”#”><span>< ;/p> <p>
Les éléments de niveau bloc ne peuvent pas être placés à l'intérieur de <p> : Le code est le suivant :
li peut contenir des balises div. - Cet élément n'a pas besoin d'être répertorié séparément, mais de nombreuses personnes sur Internet sont confuses à ce sujet, je vais donc l'expliquer brièvement ici :
Les balises Li et div sont toutes deux des conteneurs pour charger du contenu. Elles ont la même valeur. statut et n'ont pas de hiérarchie (par exemple : h1, h2 une hiérarchie si stricte^_^). Vous devez savoir que la balise li est connectée à son parent. ul et ol peuvent être pris en charge. Pourquoi certaines personnes pensent-elles que li ne peut pas s'adapter. un div ? Ne pensez pas que Li est si avare Même si Li a l'air assez mince, en fait Li a un grand cœur...
Éléments de niveau bloc et. niveau bloc Le code de juxtaposition des éléments, des éléments en ligne et des éléments en ligne
est le suivant :
Instance de document HTML
<!DOCTYPE html> <html> <body> <p>这里是测试事例</p> </body> </html>
L'exemple ci-dessus contient trois éléments HTML.
Exemple d'analyse HTML
<p> Élément :
<p>Voici le test case </p>
L'élément <p> définit un paragraphe dans un document HTML.
Cet élément a une balise de début <p> et une balise de fin </p>. Le contenu de l'élément
est : Voici l'exemple de test
<body>. ;Élément :
<body>
<p>Voici l'exemple de test</p>
</body>
L'élément <body> le corps principal du document HTML.
Cet élément a une balise de début <body> et une balise de fin </body>. Le contenu de l'élément
est un autre élément HTML (l'élément p).
<html> Élément :
<html>
<body>
<p>Voici un cas de test</p>
</body>
</html>
L'élément <html>
Cet élément a une balise de début <html> et une balise de fin </html>. Le contenu de l'élément
est un autre élément HTML (élément body).
N'oubliez pas la balise de fermeture
Même si vous oubliez d'utiliser la balise de fermeture, la plupart des navigateurs afficheront le code HTML correctement :
<p>Ceci est un paragraphe
<p>Ceci est un paragraphe
L'exemple ci-dessus peut également être affiché normalement dans le navigateur car la balise de fermeture est facultative.
Mais ne vous fiez pas à cette approche. Oublier d'utiliser une balise de fermeture peut produire des résultats ou des erreurs imprévisibles.
Élément HTML vide
Un élément HTML sans contenu est appelé un élément vide. Les éléments vides sont fermés dans la balise d'ouverture.
<br> est un élément vide sans balise de fermeture (la définition de la balise <br> s'enroule).
Dans XHTML, XML et les futures versions de HTML, tous les éléments doivent être fermés.
L'ajout d'une barre oblique dans la balise d'ouverture, telle que <br />, est la bonne façon de fermer un élément vide et est acceptée par HTML, XHTML et XML.
Même si <br> est valable dans tous les navigateurs, l'utilisation de <br />
Astuce HTML : utilisez des balises minuscules
Les balises HTML ne sont pas sensibles à la casse : <P> est équivalent à <p>. De nombreux sites Web utilisent des balises HTML en majuscules.
W3CSchool utilise des balises minuscules car le World Wide Web Consortium (W3C) recommande les minuscules dans HTML 4 et les rendra obligatoires dans les futures versions de (X)HTML.
![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)
