ホームページ > 記事 > ウェブフロントエンド > HTMLのdivタグ
HTMLのdivタグ
- PHPzオリジナル
- 2024-09-04 16:26:20907ブラウズ
この記事では、HTML の div タグについて説明します。 HTML には、他の多くの HTML タグとコンテンツのグループに使用される 2 つの重要なタグがあります。1 つは
です。別のタグは です。タグ。コンテンツとタグを1行にまとめて表現するのがspanタグです。スタイルで垂直にグループ化し、spanタグで別のタグが発生します。 div タグは、Web ページ上の表、リスト、段落などの多くの HTML タグで使用される分割タグです。ほとんどの div タグは、コンテンツまたは HTML タグのセクションを分割または作成するために空の Web ページを使用しました。特別なコンテンツの特定のデザインを作成する div タグは、div レイアウトや CSS デザインに影響を与えないため便利です。
a.
構文:
さまざまな HTML タグには、次のような開始タグと終了タグがあります。
div タグは
を開くために必須です。
を閉じます。タグ。必須の HTML タグとコンテンツは div タグ内に配置します。
<div> Content of Div tag in HTML </div>
必要なデータまたはコンテンツのセクションを作成するには、コンテナ内で複数の div タグが使用されます。例: ヘッダー、フッター、ナビゲーション バー、テーブル、画像、テキストなど。CSS を使用してさまざまな div タグをデザインし、JavaScript を使用して簡単に条件を適用できます。
の方法タグは HTML で機能しますか?
div タグは、さまざまな HTML タグとテキストをまとめて保持できます。
div タグを使用した例と div タグを使用しない例を確認できます。
a. を使用するHTML のタグ
コード:
<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>
出力:
説明:
- 上記の試験では、HTML で div タグを使用しています。最初の div はオレンジ色、2 番目の div は黄色です。
- Div にはヘッダータグと段落が一緒に含まれます。 2 つの div タグは、異なるコンテンツを持つコンテナを分割します。
b. を使用せずに、 HTML のタグ
コード:
<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>
出力:
説明:
- 上記の例は、HTML で div タグを使用していません。ヘッダーとその段落は別のセクションにあります。
- ヘッダーは黄色、段落はオレンジ色です。すべてのヘッダーとそのコンテンツ段落のサイズは異なります。
div タグの使用
以下は div タグの用途とニーズです:
- div タグは主に、画像やその説明などのタグと要素をグループ化するために使用されます。 Web ページでは、多くの HTML タグを使用してコンテンツを作成します。すべての HTML タグはそれぞれ異なり、特定の意味を持っています。 div タグは、必要なすべての HTML タグを結合します。
- divタグとは分割タグのことです。 Web ページでは、ヘッダー、フッター、ナビゲーション バーなどの多くのエンティティが div タグによって 1 つのコンテナーに多数のセクションが作成され、すべてのセクションがエレガントになります。
- CSS を使用したスタイル設定や JavaScript による操作に簡単に使用できます。コンテキストやレイアウトには影響しません。 divタグを使ったSteadyスタイルは簡単です。
- div タグは、Web ページが魅力的に見え、ユーザーにとってコンテンツが理解できるようにするのに役立ちます。
- Web 開発者のプログラムの複雑さを解消します。 div タグは便利です。
div タグ HTML の例
言及されている例を以下に示します:
例 #1
この例は、クラスを含む div タグです。たとえば、左派、中位派、右派です。 divは縦に入るコンテナです。ただし、1 つのセクションに異なる div を右、左、または中央として配置できます。これはコンテンツの位置管理に役立ちます。
コード:
<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>
出力:
例 #2
テーブルの div タグ。
この例では、テーブルに div タグを使用しました。時々テーブルのレイアウトが変更されることがありますが、div タグに配置されたテーブルはレイアウトに影響しません。
コード:
<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>
出力:
例 #3
スタイルを使用した div の例。
これは CSS スタイルを使用する簡単な例です。
コード:
<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>
出力:
結論
divタグはWebページ上にパーティションを作るための分割タグです。これは、HTML タグとコンテンツを含む 1 つの空のコンテナーです。 div タグを使用すると、Web アプリケーションはすっきり、クリーンで魅力的に見えます。 Web アプリケーションはユーザーと開発者にとって理解しやすくなっています。
コード:
<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>
出力:
説明:
- 上記の試験では、HTML で div タグを使用しています。最初の div はオレンジ色、2 番目の div は黄色です。
- Div にはヘッダータグと段落が一緒に含まれます。 2 つの div タグは、異なるコンテンツを持つコンテナを分割します。
b. を使用せずに、 HTML のタグ
コード:
<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>
出力:
説明:
- 上記の例は、HTML で div タグを使用していません。ヘッダーとその段落は別のセクションにあります。
- ヘッダーは黄色、段落はオレンジ色です。すべてのヘッダーとそのコンテンツ段落のサイズは異なります。
div タグの使用
以下は div タグの用途とニーズです:
- div タグは主に、画像やその説明などのタグと要素をグループ化するために使用されます。 Web ページでは、多くの HTML タグを使用してコンテンツを作成します。すべての HTML タグはそれぞれ異なり、特定の意味を持っています。 div タグは、必要なすべての HTML タグを結合します。
- divタグとは分割タグのことです。 Web ページでは、ヘッダー、フッター、ナビゲーション バーなどの多くのエンティティが div タグによって 1 つのコンテナーに多数のセクションが作成され、すべてのセクションがエレガントになります。
- CSS を使用したスタイル設定や JavaScript による操作に簡単に使用できます。コンテキストやレイアウトには影響しません。 divタグを使ったSteadyスタイルは簡単です。
- div タグは、Web ページが魅力的に見え、ユーザーにとってコンテンツが理解できるようにするのに役立ちます。
- Web 開発者のプログラムの複雑さを解消します。 div タグは便利です。
div タグ HTML の例
言及されている例を以下に示します:
例 #1
この例は、クラスを含む div タグです。たとえば、左派、中位派、右派です。 divは縦に入るコンテナです。ただし、1 つのセクションに異なる div を右、左、または中央として配置できます。これはコンテンツの位置管理に役立ちます。
コード:
<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>
出力:
例 #2
テーブルの div タグ。
この例では、テーブルに div タグを使用しました。時々テーブルのレイアウトが変更されることがありますが、div タグに配置されたテーブルはレイアウトに影響しません。
コード:
<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>
出力:
例 #3
スタイルを使用した div の例。
これは CSS スタイルを使用する簡単な例です。
コード:
<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>
出力:
結論
divタグはWebページ上にパーティションを作るための分割タグです。これは、HTML タグとコンテンツを含む 1 つの空のコンテナーです。 div タグを使用すると、Web アプリケーションはすっきり、クリーンで魅力的に見えます。 Web アプリケーションはユーザーと開発者にとって理解しやすくなっています。
コード:
<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>
出力:
説明:
- 上記の例は、HTML で div タグを使用していません。ヘッダーとその段落は別のセクションにあります。
- ヘッダーは黄色、段落はオレンジ色です。すべてのヘッダーとそのコンテンツ段落のサイズは異なります。
div タグの使用
以下は div タグの用途とニーズです:
- div タグは主に、画像やその説明などのタグと要素をグループ化するために使用されます。 Web ページでは、多くの HTML タグを使用してコンテンツを作成します。すべての HTML タグはそれぞれ異なり、特定の意味を持っています。 div タグは、必要なすべての HTML タグを結合します。
- divタグとは分割タグのことです。 Web ページでは、ヘッダー、フッター、ナビゲーション バーなどの多くのエンティティが div タグによって 1 つのコンテナーに多数のセクションが作成され、すべてのセクションがエレガントになります。
- CSS を使用したスタイル設定や JavaScript による操作に簡単に使用できます。コンテキストやレイアウトには影響しません。 divタグを使ったSteadyスタイルは簡単です。
- div タグは、Web ページが魅力的に見え、ユーザーにとってコンテンツが理解できるようにするのに役立ちます。
- Web 開発者のプログラムの複雑さを解消します。 div タグは便利です。
div タグ HTML の例
言及されている例を以下に示します:
例 #1
この例は、クラスを含む div タグです。たとえば、左派、中位派、右派です。 divは縦に入るコンテナです。ただし、1 つのセクションに異なる div を右、左、または中央として配置できます。これはコンテンツの位置管理に役立ちます。
コード:
<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>
出力:
例 #2
テーブルの div タグ。
この例では、テーブルに div タグを使用しました。時々テーブルのレイアウトが変更されることがありますが、div タグに配置されたテーブルはレイアウトに影響しません。
コード:
<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>
出力:
例 #3
スタイルを使用した div の例。
これは CSS スタイルを使用する簡単な例です。
コード:
<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>
出力:
結論
divタグはWebページ上にパーティションを作るための分割タグです。これは、HTML タグとコンテンツを含む 1 つの空のコンテナーです。 div タグを使用すると、Web アプリケーションはすっきり、クリーンで魅力的に見えます。 Web アプリケーションはユーザーと開発者にとって理解しやすくなっています。
以上がHTMLのdivタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML の SUP タグ次の記事：HTML の SUP タグ