Balise div en HTML-tutoriel HTML-php.cn

Balise div en HTML

PHPz

Libérer： 2024-09-04 16:26:20

original

937 Les gens l'ont consulté

Dans cet article, nous verrons la balise div en HTML. HTML a deux balises importantes qui sont utilisées pour un groupe de nombreuses autres balises et contenus HTML. L'une est

une autre balise est étiqueter. La balise span est utilisée pour un groupe de contenu et de balise sur une seule ligne. Le regroupement vertical avec style et les différentes balises se fait par balise span. La balise div est une balise de division utilisée pour de nombreuses balises HTML telles que les tableaux, les listes et les paragraphes de la page Web. La plupart du temps, la balise div utilisait une page Web vide pour partitionner ou créer une section pour le contenu ou les balises HTML. Créer une conception particulière pour une balise div de contenu spécial est utile car cela n'affecte pas la disposition div ni aucune conception CSS.

Syntaxe :

Les différentes balises HTML ont des balises d'ouverture et de fermeture comme :

La balise div est obligatoire pour ouvrir

et fermeture

étiqueter. Balises HTML requises et contenu placé à l'intérieur de la balise div.

<div>
Content of Div tag in HTML
</div>

Copier après la connexion

Pour créer la section des données ou du contenu requis, plusieurs balises div sont utilisées dans un conteneur. Exemple : en-tête, pied de page, barre de navigation, tableau, images, textes, etc. Différentes balises div que nous pouvons concevoir différemment en utilisant CSS et appliquer facilement des conditions en utilisant JavaScript.

Comment
La balise fonctionne en HTML ?

La balise div peut contenir diverses balises HTML et textes ensemble.

Vous pouvez voir l'exemple d'utilisation d'une balise div et sans balise div.

a. En utilisant
balise en HTML

Code :

<html>
<head>
<title>how to work div</title>
<style type=text/css>
.one{
background-color:orange;
}
.two{
background-color:yellow;
}
</style>
</head>
<body>
<div class="one" >
<h1> Content1 of div tag in Html </h1>
<p>   Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p>
</div>
<div class="two">
<h1> Content2 of div tag in Html </h1>
<p>   To make section of required data or content multiple div tags are used in container.
Example: header, footer, navigation bar, table, images, texts etc. </p>
</div>
</body>
</html>

Copier après la connexion

Sortie :

Balise div en HTML

Explication :

L'examen ci-dessus utilise une balise div en HTML. Le premier div est de couleur orange et le deuxième div est de couleur jaune.
Div contient une balise d'en-tête et un paragraphe ensemble. Deux balises div divisent le conteneur avec un contenu différent.

b. Sans utiliser
balise en HTML

Code :

<html>
<head>
<title>how to work div</title>
<style type=text/css>
p{
background-color:orange;
}
h1{
background-color:yellow;
}
</style>
</head>
<body>
<h1> Content1 of div tag in Html </h1>
<p>   Div tag is used for a group many HTML tags like table, list, a paragraph on a web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p>
<h1> Content2 of div tag in Html </h1>
<p>   To make section of required data or content multiple div tags are used in container.
Example: header, footer, navigation bar, table, images, texts etc.</p>
</body>
</html>

Copier après la connexion

Sortie :

Balise div en HTML

Explication :

L'exemple ci-dessus n'utilise pas de balise div en HTML. L'en-tête et leur paragraphe sont dans une section différente.
L'en-tête est jaune et le paragraphe est de couleur orange. Tous les en-têtes et leurs paragraphes de contenu ont des tailles différentes.

Utilisations de la balise div

Voici les utilisations et les besoins de la balise div :

La balise div est principalement utilisée pour regrouper des balises et des éléments comme les images et leurs descriptions. Dans les pages Web, il utilise de nombreuses balises HTML pour créer du contenu. Toutes les balises HTML sont différentes avec des significations particulières. La balise div combine toutes les balises HTML requises.
Une balise div signifie des balises de division. Dans les pages Web, de nombreuses entités telles que l'en-tête, le pied de page, la barre de navigation, etc. la balise div crée de nombreuses sections dans un seul conteneur pour rendre toutes les sections élégantes.
Il est facilement utilisé pour le style à l'aide de CSS et la manipulation avec JavaScript. Cela n’affecte pas le contexte ni la mise en page. Le style Steady utilisant une balise div est simple.
La balise div est utile pour qu'une page Web soit attrayante et comprenne le contenu pour l'utilisateur.
Supprimer la complexité du programme pour un développeur web ; la balise div est utile.

Exemples de balises div HTML

Vous trouverez ci-dessous les exemples mentionnés :

Exemple n°1

Cet exemple est une balise div avec des classes. Par exemple, classe gauche, moyenne et droite. div est le conteneur qui entre verticalement. Mais nous pouvons placer différents div dans une section comme côté droit, gauche ou milieu ; ceci est utile pour la gestion des positions pour le contenu.

Code :

<html>
<head>
<title> Example1 </title>
<style type=text/css>
.leftdiv
{
float: left;
background-color:blue;
}
.middlediv
{
float: left;
background-color:green;
}
.rightdiv
{
float: left;
background-color:black;
}
div{
padding : 1%;
color: white;
background-color:grey;
width: 28%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h2> Left Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used for a web page to partition or make a section for content or HTML tags.
To make a particular design for some special content div tag is useful because it does not
affect the div layout and any CSS design.
</p>
</div>
<div class="middlediv">
<h2> Middle Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags.
To make particular design for some special content div tag is useful because it is does not
affect on the div layout and any CSS design.
</p>
</div>
<div class="rightdiv">
<h2> Right Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used for a web page to partition or make a section for content or HTML tags.
To make particular design for some special content div tag is useful because it is does not
affect on the div layout and any CSS design.
</p>
</p>
</div>
</body>
</html>

Copier après la connexion

Sortie :

Balise div en HTML

Exemple n°2

balise div pour la table.

Dans cet exemple, nous avons utilisé des balises div pour le tableau. Parfois, la disposition du tableau change, mais le tableau placé dans la balise div n'est alors pas affecté sur les mises en page.

Code :

<html>
<head>
<title> Example2 </title>
<style type=text/css>
div{
color:white;
background-color:grey;
border:solid black;
}
tr, td{
border: 1px solid grey;
padding-top: 10px;
padding-bottom: 10px;
}
th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
</style>
</head>
<body>
<div>
<h2> Student Information </h2>
<table>
<tr>
<th>student name</th>
<th>specialisation</th>
<th>city</th>
</tr>
<tr>
<td>vishu</td>
<td>computer and IT </td>
<td>kolkatta</td>
</tr>
<tr>
<td>john</td>
<td> graphics design</td>
<td> delhi</td>
</tr>
<tr>
<td>nagma</td>
<td> mechatronics</td>
<td>nagpur</td>
</tr>
<tr>
<td>erfan </td>
<td>animation video </td>
<td>mumbai</td>
</tr>
<tr>
<td> swadut </td>
<td> electronics</td>
<td> pune</td>
</tr>
<tr>
<td> manasi </td>
<td> CS </td>
<td> pune</td>
</tr>
</table>
</div>
</body>
</html>

Copier après la connexion

Sortie :

Balise div en HTML

Exemple #3

exemple div avec style.

Ceci est un exemple simple d'utilisation du style CSS.

Code :

<html>
<head>
<title> Example3 </title>
<style>
div{
height:300px;
width:500px;
color:white;
border:1px solid;
background-color:grey;
}
</style>
</head>
<body>
<center>
<div>
<caption>
<h2> div tags in HTML</h3>
</caption>
<h3>
Div tag is division tag used for group many HTML tag like table, list, paragraph in web page.
</h3>
</div>
</center>
</body>
</html>

Copier après la connexion

Sortie :

Balise div en HTML

Conclusion

La balise div est une balise de division permettant de réaliser une partition sur une page web. Il s'agit d'un conteneur vide contenant des balises et du contenu HTML. L’utilisation de l’application Web de balises div semble soignée, propre et attrayante. L'application Web est plus facile à comprendre pour les utilisateurs et les développeurs.

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!