HTMLのdivタグ-htmlチュートリアル-php.cn

HTMLのdivタグ

PHPz

リリース： 2024-09-04 16:26:20

オリジナル

958 人が閲覧しました

この記事では、HTML の div タグについて説明します。 HTML には、他の多くの HTML タグとコンテンツのグループに使用される 2 つの重要なタグがあります。1 つは

です。別のタグはです。タグ。コンテンツとタグを1行にまとめて表現するのがspanタグです。スタイルで垂直にグループ化し、spanタグで別のタグが発生します。 div タグは、Web ページ上の表、リスト、段落などの多くの HTML タグで使用される分割タグです。ほとんどの div タグは、コンテンツまたは HTML タグのセクションを分割または作成するために空の Web ページを使用しました。特別なコンテンツの特定のデザインを作成する div タグは、div レイアウトや CSS デザインに影響を与えないため便利です。

構文:

さまざまな HTML タグには、次のような開始タグと終了タグがあります。

div タグは

を開くために必須です。

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

ログイン後にコピー

必要なデータまたはコンテンツのセクションを作成するには、コンテナ内で複数の div タグが使用されます。例: ヘッダー、フッター、ナビゲーションバー、テーブル、画像、テキストなど。CSS を使用してさまざまな div タグをデザインし、JavaScript を使用して簡単に条件を適用できます。

の方法タグは HTML で機能しますか?

div タグは、さまざまな HTML タグとテキストをまとめて保持できます。

div タグを使用した例と div タグを使用しない例を確認できます。

を使用する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タグ

説明:

上記の試験では、HTML で div タグを使用しています。最初の div はオレンジ色、2 番目の div は黄色です。
Div にはヘッダータグと段落が一緒に含まれます。 2 つの div タグは、異なるコンテンツを持つコンテナを分割します。

を使用せずに、 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タグ

説明:

上記の例は、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>

ログイン後にコピー

出力:

HTMLのdivタグ

例 #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>

ログイン後にコピー

出力:

HTMLのdivタグ

例 #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>

ログイン後にコピー

出力:

HTMLのdivタグ

結論

divタグはWebページ上にパーティションを作るための分割タグです。これは、HTML タグとコンテンツを含む 1 つの空のコンテナーです。 div タグを使用すると、Web アプリケーションはすっきり、クリーンで魅力的に見えます。 Web アプリケーションはユーザーと開発者にとって理解しやすくなっています。

以上がHTMLのdivタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。