Maison >interface Web >tutoriel HTML >Qu'est-ce qu'une balise div ? Comment utiliser la balise div en HTML ?
Qu'est-ce qu'une balise div ? Comment utiliser la balise div en HTML ?
- 不言original
- 2018-11-26 13:36:188140parcourir
La balise div en HTML est une base importante pour réaliser des pages Web et est essentielle pour apprendre les connaissances HTML. Cet article vous présentera comment utiliser les balises div en HTML.
Qu'est-ce qu'une balise div ? La balise
div représente un ensemble de structures nécessaires. Le but est de diviser les caractères pris en sandwich entre les balises div en blocs. Par conséquent, une balise div distincte n’a aucun effet tel que le changement de couleur ou le changement de style de caractère.
De plus, si la balise div ne rentre pas dans d’autres éléments, ne l’utilisez pas encore.
Cependant, en fait, lorsque nous devons spécifier quel élément, nous utilisons souvent des balises div.
En ajoutant l'identifiant et la classe à la balise div et en utilisant CSS pour gérer l'identifiant et la classe, vous pouvez changer la couleur de la balise div ou la changer pour un autre style.
Comparaison des balises div et des balises Section
Je pense que la balise section est plus appropriée pour afficher une seule collection sur le document
La balise section est utilisé pour indiquer des groupes à des fins de documentation.
Je pense que les sections ont des termes pour les sections
Tout comme ce concept de clause section, la balise section est un bloc et n'a généralement aucune signification si elle est extraite.
Dans un article de journal, je ne pense pas que l'intention de l'article entier puisse être transmise même si vous coupez uniquement les éléments du chapitre.
Par comparaison, la balise section est utilisée différemment de la balise div, mais est utilisée comme une phrase pour représenter un groupe.
Utilisation de la balise div
Écrivez la balise div comme suit.
<div>内容</div>
Comme mentionné ci-dessus, les balises div sont très utiles en ajoutant un identifiant et une classe. Comment attribuer un identifiant et une classe est la suivante.
<div id="id名">内容</div> <div id="class名">内容</div>
Au fait, que sont l'identité et la classe ?
Au fait, que sont l'identité et la classe ? L'identifiant et la classe sont appelés attributs, l'identifiant est quelque chose comme si j'avais un numéro D, quelque chose avec le même nom d'identifiant ne peut être utilisé qu'une seule fois dans la page.
Au lieu de cela, nous utilisons l'attribut id pour les choses que nous n'utilisons qu'une seule fois.
En revanche, l'attribut class peut être utilisé plusieurs fois sur la même page. Si vous souhaitez spécifier "cet élément a la même couleur que cet élément", utilisez l'attribut class.
Bien sûr, vous pouvez utiliser l'attribut class même si vous ne l'utilisez qu'une seule fois.
Regardons un exemple pratique
Regardons d'abord le résultat d'être entouré de balises div
Pour l'identifiant et la classe, nous précisons le nom de la couleur pour chaque nom.
Créez div.html en utilisant le code source suivant et ouvrez-le dans votre navigateur.
div.html
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="red">苹果</div>
<div class="skyblue">天空</div>
<div class="yellow">香蕉</div>
<div class="blue">大海</div>
<div class="lightyellow">蒲公英</div>
</body>
</html> s'affiche dans le navigateur comme suit :
Ce qui précède affiche uniquement le texte, maintenant Colorons l'arrière-plan en utilisant CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#red {
background-color: #FF0000;
}
.skyblue {
background-color: skyblue;
}
.yellow{
background-color: yellow;
}
.blue{
background-color: blue;
}
.beige{
background-color: beige;
}
</style>
</head>
<body>
<div id="red">苹果</div>
<div class="skyblue">天空</div>
<div class="yellow">香蕉</div>
<div class="blue">大海</div>
<div class="beige">蒲公英</div>
</body>
</html>s'affiche dans le navigateur comme suit :
Vous pouvez voir que l'arrière-plan est coloré, et vous pouvez également confirmer que plusieurs éléments identiques ont été spécifiés.
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!