Le contenu de cet article est de présenter les types d'éléments de balise html, afin que tout le monde puisse comprendre quels sont les éléments de balise couramment utilisés en html ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Tout d’abord, examinons en quels types d’éléments de balise html peuvent être divisés ?
Les éléments de balise en HTML sont généralement divisés en trois types différents : les éléments de bloc, les éléments en ligne et les éléments de bloc en ligne.
Présentons en détail les caractéristiques et les utilisations de ces trois types d'éléments, et faisons savoir à tout le monde quels sont les éléments de bloc et les éléments en ligne couramment utilisés ?
Éléments de bloc
Caractéristiques :
1. Chaque bloc occupe une rangée. Les éléments seront recommencer à partir d'une nouvelle ligne et être disposé de haut en bas
2. Vous pouvez contrôler directement la largeur, la hauteur et les attributs CSS associés du modèle de boîte (hauteur de l'élément, largeur, hauteur de ligne et marges supérieure et inférieure peut être définie)
3. Lorsque la largeur n'est pas définie, la largeur de l'élément au niveau du bloc est la largeur du contenu de son élément parent
4. Lorsque la hauteur n'est pas définie, le bloc La hauteur d'un élément de niveau est la hauteur de son propre contenu
En raison de ses propres caractéristiques, nous utilisons généralement des éléments de bloc pour construire de grandes mises en page (grandes structures).
Éléments de bloc couramment utilisés :
1. Éléments ordinaires
div (conteneurs de blocs couramment utilisés et balises principales de la mise en page CSS), p ( Paragraphe), hr (séparateur horizontal), table (tableau), formulaire (formulaire interactif)
2. Éléments de titre :
h1 (titre), h2 (sous-titre), h3 (niveau 3). titre), h4 (titre niveau 4), h5 (titre niveau 5), h6 (titre niveau 6)
3. Élément de liste
menu (liste de menus), ol (Liste ordonnée) , ul (liste non ordonnée), li (élément de liste), dl (définir la liste), dt (définir le terme), dd (définir la description)
Jetons un coup d'œil à ces blocs à travers un code simple Élément de forme
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块状元素</title>
<style>
div{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
h4{
background-color:papayawhip;
}
ul{
background-color: peru;
}
</style>
</head>
<body>
<div>div标签元素，占据一行</div>
<p>p标签元素，占据一行</p>
<h4>标题元素，占据一行</h4>
<ul>
<li>ul1 li 标签 元素</li>
<li>ul1 li 标签 元素</li>
</ul>
<ul>
<li>ul2 li 标签 元素</li>
<li>ul2 li 标签 元素</li>
</ul>
</body>
</html>Rendu :
Élément en ligne
Caractéristiques :
1. Afficher sur une ligne avec d'autres éléments en ligne de gauche à droite
2. Impossible de contrôler directement la largeur, la hauteur et les CSS associés des attributs du modèle de boîte, mais il est possible de définir directement les valeurs gauche et droitedes marges intérieure et extérieure
3. La largeur et la hauteur de l'élément en ligne sont déterminées par la taille de son propre contenu (texte, images , etc.)
4. Les éléments en ligne en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne (veuillez noter ici, n'imbriquez pas les éléments de niveau bloc dans les éléments en ligne)
En raison de ses propres caractéristiques , nous utilisons généralement des éléments en ligne pour créer du texte et de petites icônes (petites structures).
Éléments en ligne couramment utilisés :
1. Balises d'éléments ordinaires
span (conteneurs en ligne couramment utilisés, définissant des blocs dans le texte), a ( Point d'ancrage, lien), img (introduction des images), br (saut de ligne forcé), sub (indice), sup (exposant)
2. Balises de modification de texte
b (ajouter du gras) , strong (accent gras), i (italique), em (italique), big (texte en grande police), small (texte en petite police), s (souligné (non recommandé)), strike ( (souligné), del (supprimé texte dans le document), u (souligné)
3. Étiqueter les éléments utilisés dans le formulaire
textarea (zone de saisie de texte multiligne), input (zone de saisie), select (drop- liste déroulante), entrée d'étiquette (étiquette de définition d'élément (marque))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内元素</title>
<style>
span{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
</style>
</head>
<body>
<span>span标签元素1</span>
<span>span标签元素2</span>
<img src="1.png" style="max-width:90%" / alt="Quels types d'éléments de balises HTML existe-t-il ? Introduction aux éléments de balises courants en HTML" >
<img src="1.png" style="max-width:90%" / alt="Quels types d'éléments de balises HTML existe-t-il ? Introduction aux éléments de balises courants en HTML" >
<p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。我是一段测试代码，<i>被i标签变成斜体</i>。</p>
</html>Rendu :
Éléments de bloc en ligne
Caractéristiques :
1. Ils sont sur la même ligne que les autres éléments et ne s'enrouleront pas automatiquement. La disposition par défaut est de gauche à droite
2. La hauteur, la largeur, la hauteur de ligne, les marges supérieure et inférieure de l'élément peuvent être définies. Les éléments de bloc en ligne combinent les caractéristiques des éléments en ligne et des éléments de bloc, mais chacun a ses propres compromis. Par conséquent, les éléments de bloc en ligne sont utilisés plus fréquemment en raison de leurs caractéristiques dans l’utilisation quotidienne et sont utiles à de nombreux égards.Résumé : ci-dessus sont les trois types d'éléments de balise HTML présentés dans cet article, à savoir : les éléments de bloc, les éléments en ligne, les éléments de bloc en ligne et une introduction aux éléments de bloc et aux éléments en ligne couramment utilisés. Chaque type d'étiquette a ses propres caractéristiques. Vous pouvez l'essayer vous-même pour voir comment les différentes étiquettes sont utilisées, approfondir votre compréhension et utiliser différentes étiquettes dans différentes situations selon vos besoins. J'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de tutoriels connexes, veuillez visiter : Tutoriel vidéo HTML, Tutoriel vidéo HTML5, Tutoriel vidéo bootstrap !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
