、
、<section>、<table>、<tfoot>、<ul>、<video>
<p>上記のタグは、HTML で事前定義されたブロック要素です。各タグは、HTML ドキュメント内で呼び出されるときに異なる機能を果たします。おそらく、<div> を使用します。ブロックレベル要素のタグ。コードは HTML のブロックレベル要素の一般的な構文であり、必要に応じて上記の定義済みタグも使用します。各タグは、HTML 内に独立した自己完結型のコンテンツを持ちます。</p>
<h3>HTML ではブロック要素はどのように機能しますか?</h3>
<p>書式設定モデルで CSS スタイルを使用し、インライン要素とブロック要素の両方をカバーします。おそらく、ブロック要素のフォーマットを処理してくれるでしょう。ブロック要素の書式設定は、HTML のブロックレベル要素の 1 つです。すべての CSS 要素はフォームのように見えます。コンテンツ、パディング、ボーダーなどのコンポーネントを含むボックスが含まれています。これらは CSS スタイルのさまざまなコンポーネントです。</p>
<ul>
<li>
<strong>コンテンツ: </strong>テキスト、画像、ビデオなどの HTML 要素の一般的なコンテンツを表します。</li>
<li>
<strong>Padding:</strong> これは、padding-top、padding-left、padding-right、padding-bottom など、形式によってコンテンツに含まれるパディングを示します。これらはプロパティです。</li>
<li>
<strong>境界線: </strong>HTML コンテンツおよびパディング内の境界線を表します。 border-top、border-bottom などを使用して境界線を設定します。</li>
</ul>
<p>ブロック要素は、HTML ドキュメントのマージンとパディングを設定したいと考えています。なぜなら、ユーザーが本来より魅力的に見えるようにするためには、ウェブページを適切に配置する必要があるからです。ある箇所では、ブロック要素セクションに要素の外側にマージンが含まれています。要素内のパディングはコンテンツを囲みます。要素の背景色や画像が必要な場合は、それらを割り当てることができ、それらはコンテンツ領域とパディング領域の両方に表示されます。一般に、マージン領域は透明で、親要素の背景が表示されます。ただし、body セクションなどの親要素に表示プロパティが割り当てられていない場合は、例外が発生します。このような場合、マージン領域とパディング領域の両方に色または画像が表示されます。マージンとは、コンテンツとパディングの両方を含む HTML 要素の外縁間の距離を指します。</p>
<p>Web ページを強調表示するために、境界線の色、スタイル、幅、余白などの境界線も設定します。要素の周囲の境界線の外観を制御し、さまざまな境界線のタイプを指定できます。 CSS の枠線スタイル プロパティを使用すると、ユーザーは、なし、実線、二重、非表示、点線、破線、溝、尾根、インセット、アウトセットなどの値で指定された独自のカスタマイズされた枠線スタイルを設定できます。ドキュメントを境界線で揃えた場合、値を指定しないことは、デフォルト値がなしであることを意味します。これは、ページに枠線が割り当てられていないことを意味します。これらの境界線スタイルはすべて、CSS2 バージョンで追加された非表示の値を除き、CSS1 バージョンに含まれています。</p>
<p>Starting from HTML 4, the div element is a block-level element for designing documents with specified divisions. Div elements lack specific formatting characteristics by default. However, you can still use the deprecated Align attributes in HTML to the center or align content to the right side; it’s a default in deprecated elements in HTML. In <div> tag was intended to take any format in CSS styles, and div has the options like nested div tags and other elements nested with div elements whatever styles, borders, and alignments we specified it would affect for those nested elements. Some basic codes for div tags with border, background image, and other user-defined format styles.</p>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false">div.sample {width:150px;background:#FF0002;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
The above codes are samples to understand the CSS attributes and functionalities implemented with the div tag. We will discuss some basic examples in the below sections.
Examples of HTML Block Elements
Given below are the following examples:
Example #1
Code:
<html>
<head>
<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pineapple</li>
</ul>
</div>
</body>
</html>
Output:
Example #2
Code:
<html>
<head>
<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>
</head>
<body>
<p>Sample <span style = "color:green">green</span>
<span style = "color:black">black</span></p>
</body>
</html>
Output:
Example #3
Code:
<html>
<head>
<style>
.first {
background-color: green;
list-style-type: none;
text-align: center;
margin: 2;
padding: 2;
}
.second {
display: inline-block;
font-size: 30px;
padding: 23px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#home">Home</a></li>
<li><a href="#aboutus">AboutUs</a></li>
<li><a href="#contactus">Contact Us</a></li>
</ul>
</body>
</html>
Output:
In the above example, we see the different scenarios for the block-level elements first two examples, we use and align the menus or tabs or text values in the
and
tags. is used for inline elements, but paragraph tag will use for blocking the text or values which is to be specified in the user-level areas. A final example will be used for the element in HTML for navigating the web pages with some block-level contents. We already discussed the working of block-level elements area; block-level attributes enable the activation of specific CSS properties such as background color, text styles with list options, text alignments, padding and margins, and font styles; these attributes have values specified with the navigation web pages.
Conclusion
In the conclusion part, the HTML block elements will occupy the entire space for its parent elements (containers) to create the blocks. Browsers will generally display the block-level elements with the new line and full width before and after the HTML elements. We can visualize the elements with boxes like a stack.
以上がHTML ブロック要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
