ホームページ > 記事 > ウェブフロントエンド > HTML のブロック レベル要素
HTML のブロック レベル要素
- WBOYオリジナル
- 2024-09-04 16:19:051168ブラウズ
HTML には事前定義されたタグと要素がいくつかあります。ブロック レベル、インライン HTML 要素などの要素にいくつかの機能とタイプが含まれる場合があります。 Web ページには異なるナビゲーションのセットがあり、ロジックはユーザー定義のフロントエンド HTML から実装されます。CSS やブートストラップ フレームワークなど、Web ページを強調表示するためにカスタマイズされた要件が使用されます。以前の記事で、span やブートストラップ フレームワークについてはすでに説明しました。 div 要素は、html および
構文:
HTML タグには、事前定義されたタグと要素に対して独自の事前定義された構造と機能があります。 HTML のブロックレベルの要素には、いくつかの異なるタグのセットがあります。要素は Web ページで使用されます。タグの一部を以下に示します。
<address>,<article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption> <figure>,<footer>,<form>,<h1>-<h6>,<header>,<hr>,<li>,<main>,<nav>,<noscript>,<ol>,<p> <pre class="brush:php;toolbar:false">,<section>,<table>,<tfoot>,<ul>,<video>
上記のタグは、HTML ブロックレベルのタグで事前定義されたタグです。 HTML ページでタグを呼び出すとき、各タグには異なる使用方法と機能があります。おそらく
<html> <body> <div> ----------codes------ ---------------------- </div> </body> </html>
上記のコードは、HTML のブロックレベル要素の一般的な構文です。前の段落で説明したいくつかの事前定義タグも使用します。必要に応じて、各タグには HTML 内に独立した自己完結型のコンテンツが含まれます。
HTML のブロック レベル要素とは何ですか?
ブロックレベルの要素は、Web ページを強調表示するために CSS スタイルを使用し、Web ユーザーがビジネスの成長を促進するための HTML フォーマット モデルを開発するためにより洗練されたスタイルを使用します。インライン要素とブロック要素の両方をカバーするルールがあります。おそらく、ブロック レベルの要素の書式設定をカバーするために使用されます。すべての CSS 要素は HTML タグを使用してフォームを作成し、それにはボックスが含まれます。コンテンツ、パディング、ボーダーなどのコンポーネントが含まれる場合があります。これらは CSS スタイルのコンポーネントの一部です。
ブロックレベルの要素は、適切な配置と表示が必要なため、Web ページにマージンとパディングを設定する必要があります。同時に、要素セクションには、要素パディングの外側に存在するために使用されるマージンも含まれます。これは要素の内部に存在し、HTML 本体のコンテンツ全体をカバーします。要素に背景色または画像が必要な場合は、それらが割り当てられ、コンテンツ領域とパディング領域の両方に同じものが表示されます。一般に、マージン領域は常に透明を覆い、親要素の背景を表示します。表示プロパティがボディセクションに割り当てられていない親要素の場合、例外が発生し、両方のマージンに色や画像が表示されます。注: マージンは、HTML 要素 (コンテンツとパディングの両方) の外縁間の距離を指します。
Web ページを次のレベルに強調表示するために境界領域を設定することもできます。これには、境界線の色、スタイル、幅、余白が含まれます。 Web ページに表示されるのと同じように、要素およびすべてのタイプの周囲の境界線が表示されます。CSS には、ユーザーが none、solid、double、などの値を使用して独自にカスタマイズされた境界線スタイルを設定できるようにする独自の境界線スタイル プロパティがあります。非表示、点線、破線、溝、尾根、インセット、アウトセット。ドキュメントを境界線で揃えた場合、値を指定しません。デフォルト値は何も割り当てられていません。これは、Web ページに境界線が割り当てられていないことを意味します。これらの境界線スタイルは、次のバージョン、つまり css2 バージョンで追加された非表示の値を除き、css1 バージョンに含まれており、使用できます。
HTML 4 以降では、div 要素はブロックレベルの要素であり、デザインに使用され、指定された分割でドキュメントを分割します。この要素には特定の特性形式がなく、非推奨です。HTML で属性を整列します。この要素を使用すると、
div.sample {width:137px;background:green;border:7px dotted black;padding:3px;}
div.sample ul {color:blue;}
マークされたコードは、div タグで実装された CSS 属性と機能を理解するためのサンプルです。
HTML のブロックレベル要素の例
HTML のブロックレベル要素の例を以下に示します。
例 #1
<html>
<head>
<style>
div.sample {width:133px;border:5px dotted green;padding:13px;}
div.sample ul {color:red;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Mango</li>
<li>Coconut</li>
<li>Lemon</li>
</ul>
</div>
</body>
</html>
出力:
例 #2
<html>
<head>
<style>
div.sample {width:123px;border:10px dotted blue;padding:18px;}
div.sample ul {color:yellow;}
</style>
</head>
<body>
<p>Sample <span style = "color:black">Home</span><br/>
<span style = "color:LightGreen">Contactus</span></p>
</body>
</html>
出力:
Example #3
<html>
<head>
<style>
.example1 {
background-color: darkgreen;
list-style-type: none;
text-align: center;
margin: 3;
padding: 13;
}
.example2 {
display: inline-block;
font-size: 32px;
padding: 27px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#products">Products</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#support">Support</a></li>
</ul>
</body>
</html>
Output:
In the above examples, we have used the basics of the block-level elements in the first two examples and also aligned the menus tabs with text values in the
paragraph tag will be used for blocking the text which has already specified in the user-level areas. In the final example, we will use for
Conclusion
The block-level elements are covered with the entire space for elements that are used to create the blocks. The User browsers will display the block-level elements by using the new line and full-width for both before and after the html elements. We can visualize the elements using boxes like a stack.
以上がHTML のブロック レベル要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。