HTML フォームは、このブロックレベル要素を使用して定義されます。これは、Web 開発プロセスで最も一般的に使用されます。
Web ページのフッターセクションを示すために使用されます。
-
:
これらは、レベル 1 から 6 を定義する HTML 言語で使用される見出しです。
: この要素は、Web ページのヘッダー セクションを示すために使用されます。
これは HTML 5 で導入された最新の要素で、ナビゲーション リンクを含むページのセクションを示すために使用されます。
: Section 要素は、そのドキュメントの一般的なセクションを表すために使用されます。
: データを表形式で表示したい場合、テーブルは最適なソリューションです。 HTML ドキュメントにテーブルが作成されます。
HTML ドキュメントにビデオ コンテンツを含めたい場合は、コード内で単純な video 要素を使用することによっても可能です。
: ユーザーがアイテムのリストを表示したい場合は、
を使用することができます。要素。
: リストを順番に表示します。
:
リストを順不同で表示します。
:
この要素は、説明リストの形式でさまざまな用語を説明するために使用されます。
HTML ブロックの例
以下に HTML ブロックの例をいくつか示します:
例 #1
以下の例では、div、p、見出し、順序付きリストと順序なしリストを含む lists 要素など、いくつかの基本的な HTML ブロック要素を使用します。
コード:
<html>
<head>
<title>HTML Block Level Elements </title>
</head>
<body>
<h1>HTML Block Level Elements </h1>
<p>This is the example of HTML block elements showing multiple block
level elements enclosed within it .Here we can also use inline elements too
</p>
<div>
<h3>Example including div , p , headings elements, list elements</h3>
<p>This example shows different kind of HTML block elements like div, p
, headings in between h1 to h6 </p>
</div>
<h2>Example of Lists</h2>
<h4>An Unordered HTML List showing Countries </h4>
<ul>
<li>Mumbai</li>
<li>Pune</li>
<li>Nagpur</li>
</ul>
<h4>An Ordered HTML List showing Countries</h4>
<ol>
<li>Mumbai</li>
<li>Pune</li>
<li>Nagpur</li>
</ol>
</body>
</html>
<p><strong>出力:</strong></p>
<p><img src="https://img.php.cn/upload/article/000/000/000/172543916882171.png" alt="HTML ブロック" ></p>
<h4>Example #2</h4>
<p>Here we will see another example in which we are creating a table.</p>
<p><strong>Code:</strong></p>
<pre class="brush:php;toolbar:false"><style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
</style>
<table>
<tr>
<th>Sr No</th>
<th>Emp ID</th>
<th>Emp Name</th>
<th>Designation</th>
</tr>
<tr>
<td>1</td>
<td>111</td>
<td>John</td>
<td>Developer</td>
</tr>
<tr>
<td>2</td>
<td>112</td>
<td>Alebela</td>
<td>Tester</td>
</tr>
<tr>
<td>3</td>
<td>113</td>
<td>Rakesh</td>
<td>Project Manager</td>
</tr>
<tr>
<td>4</td>
<td>114</td>
<td>Siya</td>
<td>UX Designer</td>
</tr>
<tr>
<td>5</td>
<td>115</td>
<td>Kuldeep</td>
<td>Web Developer</td>
</tr>
</table>
ログイン後にコピー
Output:
Example #3
Now by using HTML blocks elements, we are going to create an HTML form as follows:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body >
<form >
<h2>Welcome to HTMl Block Demo</h2>
<h4>Please login here</h4>
User ID : <input type = "text" name = "user_id" />
<br><br>
Password: <input type = "password" name = "password" />
<br><br>
<input type = "checkbox" name = "remember" value = "on"> Remember Me
<br><br>
<input type = "submit" name = "Login" value = "Submit" />
</form>
</body>
</html>
ログイン後にコピー
Output:
Example #4
Here we are trying to Address the element in HTML blocks.
Code:
<address>
Presented BY <a href="mailto:[email protected]">Narendra Modi</a>.<br>
Visit us at:Delhi<br>
primeminister.com<br>
Box 104, Red Fort<br>
Delhi
</address>
ログイン後にコピー
Output:
Conclusion
The above information concluded that the HTML blocks level element included in the HTML document’s body. It will create some large HTML blocks of sections like paragraphs or pages with the division. One can include another block-level element into the block-level elements. It’s also possible to include inline elements into the block-level element but including block-level elements into the inline elements is not possible.
以上がHTML ブロックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
