Heim >Web-Frontend >HTML-Tutorial >div-Tag in HTML
div-Tag in HTML
- PHPzOriginal
- 2024-09-04 16:26:20980Durchsuche
In diesem Artikel werden wir uns mit dem div-Tag in HTML befassen. HTML verfügt über zwei wichtige Tags, die für eine Gruppe vieler anderer HTML-Tags und -Inhalte verwendet werden. Eines davon ist
Syntax:
Die verschiedenen HTML-Tags haben öffnende und schließende Tags wie:
Das div-Tag ist zum Öffnen von
<div> Content of Div tag in HTML </div>
Um den Abschnitt mit den erforderlichen Daten oder Inhalten zu versehen, werden mehrere div-Tags in einem Container verwendet. Beispiel: Kopfzeile, Fußzeile, Navigationsleiste, Tabelle, Bilder, Texte usw. Verschiedene div-Tags können wir mit CSS unterschiedlich gestalten und Bedingungen einfach mit JavaScript anwenden.
Wie Tag funktioniert in HTML?
Das div-Tag kann verschiedene HTML-Tags und Texte zusammenfassen.
Sie können sich das Beispiel für die Verwendung eines div-Tags und ohne div-Tag ansehen.
a. Mit Tag in 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>
Ausgabe:
Erklärung:
- Die obige Prüfung verwendet ein div-Tag in HTML. Das erste Div ist orange und das zweite Div ist gelb.
- Div enthält ein Header-Tag und einen Absatz zusammen. Zwei div-Tags unterteilen Container mit unterschiedlichem Inhalt.
b. Ohne Tag in 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>
Ausgabe:
Erklärung:
- Das obige Beispiel verwendet kein div-Tag in HTML. Die Überschrift und ihr Absatz befinden sich in einem anderen Abschnitt.
- Die Kopfzeile ist gelb und der Absatz ist orange. Alle Überschriften und ihre Inhaltsabsätze haben unterschiedliche Größen.
Verwendung des div-Tags
Im Folgenden sind die Verwendungszwecke und Anforderungen des div-Tags aufgeführt:
- Das div-Tag wird hauptsächlich zum Gruppieren von Tags und Elementen wie Bildern und deren Beschreibungen verwendet. Auf Webseiten werden viele HTML-Tags zum Erstellen von Inhalten verwendet. Alle HTML-Tags sind unterschiedlich und haben eine bestimmte Bedeutung. Das div-Tag kombiniert alle erforderlichen HTML-Tags.
- Ein div-Tag bedeutet Division-Tags. Auf Webseiten gibt es viele Entitäten wie Kopfzeile, Fußzeile, Navigationsleiste usw. Mit dem div-Tag werden viele Abschnitte in einem Container zusammengefasst, um alle Abschnitte elegant zu gestalten.
- Es lässt sich leicht zum Stylen mit CSS und zum Bearbeiten mit JavaScript verwenden. Es hat keinen Einfluss auf den Kontext und das Layout. Der Steady-Stil mit einem div-Tag ist einfach.
- Das div-Tag ist nützlich, damit eine Webseite attraktiv aussieht und den Inhalt für den Benutzer versteht.
- Entfernen Sie die Komplexität des Programms für einen Webentwickler; Das div-Tag ist nützlich.
Beispiele für div-Tag-HTML
Im Folgenden finden Sie die genannten Beispiele:
Beispiel #1
Dieses Beispiel ist ein div-Tag mit Klassen. Zum Beispiel linke, mittlere und rechte Klasse. div ist ein Container, der vertikal hereinkommt. Aber wir können verschiedene Div in einem Abschnitt als rechte, linke oder mittlere Seite platzieren; Dies ist nützlich für die Positionsverwaltung für Inhalte.
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>
Ausgabe:
Beispiel #2
div-Tag für die Tabelle.
In diesem Beispiel haben wir div-Tags für die Tabelle verwendet. Manchmal ändert sich das Tabellenlayout, aber die in das div-Tag eingefügte Tabelle hat dann keine Auswirkungen auf die Layouts.
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>
Ausgabe:
Beispiel #3
div-Beispiel mit Stil.
Dies ist ein einfaches Beispiel für die Verwendung des CSS-Stils.
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>
Ausgabe:
Fazit
Das div-Tag ist ein Division-Tag, um eine Partition auf einer Webseite zu erstellen. Dies ist ein leerer Container, der HTML-Tags und -Inhalte enthält. Die Verwendung von Div-Tags als Webanwendung sieht ordentlich, sauber und attraktiv aus. Die Webanwendung ist für Benutzer und Entwickler einfacher zu verstehen.
Das obige ist der detaillierte Inhalt vondiv-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：SUP-Tag in HTMLNächster Artikel：SUP-Tag in HTML
Das div-Tag kann verschiedene HTML-Tags und Texte zusammenfassen.
Sie können sich das Beispiel für die Verwendung eines div-Tags und ohne div-Tag ansehen.
a. Mit Tag in 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>
Ausgabe:
Erklärung:
- Die obige Prüfung verwendet ein div-Tag in HTML. Das erste Div ist orange und das zweite Div ist gelb.
- Div enthält ein Header-Tag und einen Absatz zusammen. Zwei div-Tags unterteilen Container mit unterschiedlichem Inhalt.
b. Ohne Tag in 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>
Ausgabe:
Erklärung:
- Das obige Beispiel verwendet kein div-Tag in HTML. Die Überschrift und ihr Absatz befinden sich in einem anderen Abschnitt.
- Die Kopfzeile ist gelb und der Absatz ist orange. Alle Überschriften und ihre Inhaltsabsätze haben unterschiedliche Größen.
Verwendung des div-Tags
Im Folgenden sind die Verwendungszwecke und Anforderungen des div-Tags aufgeführt:
- Das div-Tag wird hauptsächlich zum Gruppieren von Tags und Elementen wie Bildern und deren Beschreibungen verwendet. Auf Webseiten werden viele HTML-Tags zum Erstellen von Inhalten verwendet. Alle HTML-Tags sind unterschiedlich und haben eine bestimmte Bedeutung. Das div-Tag kombiniert alle erforderlichen HTML-Tags.
- Ein div-Tag bedeutet Division-Tags. Auf Webseiten gibt es viele Entitäten wie Kopfzeile, Fußzeile, Navigationsleiste usw. Mit dem div-Tag werden viele Abschnitte in einem Container zusammengefasst, um alle Abschnitte elegant zu gestalten.
- Es lässt sich leicht zum Stylen mit CSS und zum Bearbeiten mit JavaScript verwenden. Es hat keinen Einfluss auf den Kontext und das Layout. Der Steady-Stil mit einem div-Tag ist einfach.
- Das div-Tag ist nützlich, damit eine Webseite attraktiv aussieht und den Inhalt für den Benutzer versteht.
- Entfernen Sie die Komplexität des Programms für einen Webentwickler; Das div-Tag ist nützlich.
Beispiele für div-Tag-HTML
Im Folgenden finden Sie die genannten Beispiele:
Beispiel #1
Dieses Beispiel ist ein div-Tag mit Klassen. Zum Beispiel linke, mittlere und rechte Klasse. div ist ein Container, der vertikal hereinkommt. Aber wir können verschiedene Div in einem Abschnitt als rechte, linke oder mittlere Seite platzieren; Dies ist nützlich für die Positionsverwaltung für Inhalte.
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>
Ausgabe:
Beispiel #2
div-Tag für die Tabelle.
In diesem Beispiel haben wir div-Tags für die Tabelle verwendet. Manchmal ändert sich das Tabellenlayout, aber die in das div-Tag eingefügte Tabelle hat dann keine Auswirkungen auf die Layouts.
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>
Ausgabe:
Beispiel #3
div-Beispiel mit Stil.
Dies ist ein einfaches Beispiel für die Verwendung des CSS-Stils.
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>
Ausgabe:
Fazit
Das div-Tag ist ein Division-Tag, um eine Partition auf einer Webseite zu erstellen. Dies ist ein leerer Container, der HTML-Tags und -Inhalte enthält. Die Verwendung von Div-Tags als Webanwendung sieht ordentlich, sauber und attraktiv aus. Die Webanwendung ist für Benutzer und Entwickler einfacher zu verstehen.
Das obige ist der detaillierte Inhalt vondiv-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：SUP-Tag in HTMLNächster Artikel：SUP-Tag in 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>
Ausgabe:
Erklärung:
- Die obige Prüfung verwendet ein div-Tag in HTML. Das erste Div ist orange und das zweite Div ist gelb.
- Div enthält ein Header-Tag und einen Absatz zusammen. Zwei div-Tags unterteilen Container mit unterschiedlichem Inhalt.
b. Ohne Tag in 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>
Ausgabe:
Erklärung:
- Das obige Beispiel verwendet kein div-Tag in HTML. Die Überschrift und ihr Absatz befinden sich in einem anderen Abschnitt.
- Die Kopfzeile ist gelb und der Absatz ist orange. Alle Überschriften und ihre Inhaltsabsätze haben unterschiedliche Größen.
Verwendung des div-Tags
Im Folgenden sind die Verwendungszwecke und Anforderungen des div-Tags aufgeführt:
- Das div-Tag wird hauptsächlich zum Gruppieren von Tags und Elementen wie Bildern und deren Beschreibungen verwendet. Auf Webseiten werden viele HTML-Tags zum Erstellen von Inhalten verwendet. Alle HTML-Tags sind unterschiedlich und haben eine bestimmte Bedeutung. Das div-Tag kombiniert alle erforderlichen HTML-Tags.
- Ein div-Tag bedeutet Division-Tags. Auf Webseiten gibt es viele Entitäten wie Kopfzeile, Fußzeile, Navigationsleiste usw. Mit dem div-Tag werden viele Abschnitte in einem Container zusammengefasst, um alle Abschnitte elegant zu gestalten.
- Es lässt sich leicht zum Stylen mit CSS und zum Bearbeiten mit JavaScript verwenden. Es hat keinen Einfluss auf den Kontext und das Layout. Der Steady-Stil mit einem div-Tag ist einfach.
- Das div-Tag ist nützlich, damit eine Webseite attraktiv aussieht und den Inhalt für den Benutzer versteht.
- Entfernen Sie die Komplexität des Programms für einen Webentwickler; Das div-Tag ist nützlich.
Beispiele für div-Tag-HTML
Im Folgenden finden Sie die genannten Beispiele:
Beispiel #1
Dieses Beispiel ist ein div-Tag mit Klassen. Zum Beispiel linke, mittlere und rechte Klasse. div ist ein Container, der vertikal hereinkommt. Aber wir können verschiedene Div in einem Abschnitt als rechte, linke oder mittlere Seite platzieren; Dies ist nützlich für die Positionsverwaltung für Inhalte.
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>
Ausgabe:
Beispiel #2
div-Tag für die Tabelle.
In diesem Beispiel haben wir div-Tags für die Tabelle verwendet. Manchmal ändert sich das Tabellenlayout, aber die in das div-Tag eingefügte Tabelle hat dann keine Auswirkungen auf die Layouts.
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>
Ausgabe:
Beispiel #3
div-Beispiel mit Stil.
Dies ist ein einfaches Beispiel für die Verwendung des CSS-Stils.
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>
Ausgabe:
Fazit
Das div-Tag ist ein Division-Tag, um eine Partition auf einer Webseite zu erstellen. Dies ist ein leerer Container, der HTML-Tags und -Inhalte enthält. Die Verwendung von Div-Tags als Webanwendung sieht ordentlich, sauber und attraktiv aus. Die Webanwendung ist für Benutzer und Entwickler einfacher zu verstehen.
Das obige ist der detaillierte Inhalt vondiv-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
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>
Ausgabe:
Erklärung:
- Das obige Beispiel verwendet kein div-Tag in HTML. Die Überschrift und ihr Absatz befinden sich in einem anderen Abschnitt.
- Die Kopfzeile ist gelb und der Absatz ist orange. Alle Überschriften und ihre Inhaltsabsätze haben unterschiedliche Größen.
Verwendung des div-Tags
Im Folgenden sind die Verwendungszwecke und Anforderungen des div-Tags aufgeführt:
- Das div-Tag wird hauptsächlich zum Gruppieren von Tags und Elementen wie Bildern und deren Beschreibungen verwendet. Auf Webseiten werden viele HTML-Tags zum Erstellen von Inhalten verwendet. Alle HTML-Tags sind unterschiedlich und haben eine bestimmte Bedeutung. Das div-Tag kombiniert alle erforderlichen HTML-Tags.
- Ein div-Tag bedeutet Division-Tags. Auf Webseiten gibt es viele Entitäten wie Kopfzeile, Fußzeile, Navigationsleiste usw. Mit dem div-Tag werden viele Abschnitte in einem Container zusammengefasst, um alle Abschnitte elegant zu gestalten.
- Es lässt sich leicht zum Stylen mit CSS und zum Bearbeiten mit JavaScript verwenden. Es hat keinen Einfluss auf den Kontext und das Layout. Der Steady-Stil mit einem div-Tag ist einfach.
- Das div-Tag ist nützlich, damit eine Webseite attraktiv aussieht und den Inhalt für den Benutzer versteht.
- Entfernen Sie die Komplexität des Programms für einen Webentwickler; Das div-Tag ist nützlich.
Beispiele für div-Tag-HTML
Im Folgenden finden Sie die genannten Beispiele:
Beispiel #1
Dieses Beispiel ist ein div-Tag mit Klassen. Zum Beispiel linke, mittlere und rechte Klasse. div ist ein Container, der vertikal hereinkommt. Aber wir können verschiedene Div in einem Abschnitt als rechte, linke oder mittlere Seite platzieren; Dies ist nützlich für die Positionsverwaltung für Inhalte.
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>
Ausgabe:
Beispiel #2
div-Tag für die Tabelle.
In diesem Beispiel haben wir div-Tags für die Tabelle verwendet. Manchmal ändert sich das Tabellenlayout, aber die in das div-Tag eingefügte Tabelle hat dann keine Auswirkungen auf die Layouts.
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>
Ausgabe:
Beispiel #3
div-Beispiel mit Stil.
Dies ist ein einfaches Beispiel für die Verwendung des CSS-Stils.
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>
Ausgabe:
Fazit
Das div-Tag ist ein Division-Tag, um eine Partition auf einer Webseite zu erstellen. Dies ist ein leerer Container, der HTML-Tags und -Inhalte enthält. Die Verwendung von Div-Tags als Webanwendung sieht ordentlich, sauber und attraktiv aus. Die Webanwendung ist für Benutzer und Entwickler einfacher zu verstehen.
Das obige ist der detaillierte Inhalt vondiv-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!