コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
さまざまな HTML ブロックの構文
HTML ブロックの要素
:
HTML ブロックの例
例 #1
Example #4
Conclusion
ホームページ ウェブフロントエンド htmlチュートリアル HTML ブロック

HTML ブロック

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Sep 04, 2024 pm 04:39 PM
html html5 HTML Tutorial HTML Properties HTML tags

HTML は、さまざまなブロックを使用して Web ページを構築するために使用される言語です。これらの要素はスタイル要素であり、HTML ブロック レベル要素とインライン要素の 2 つの異なるタイプに分けられます。これらの種類の要素はすべて で囲まれます。 HTMLブロックのタグ。ブロックレベルの要素は、Web ページのメイン レイアウトをデザインするために構造化されています。

構造ビューについて話している場合、インライン要素ビューよりも大きな構造ビューが作成されます。すべてのブロックレベルの要素は、画面の全幅を占める新しい行で始まります。これらは開始 そして終了タグ

要素のグループ化は、セクションまたはサブセクションの形式でレイアウトを分割するための重要な方法です。任意のブロック要素を別のブロック要素に入れることは可能です。また、インライン要素を HTML ブロック要素に入れることもできますが、 ではなくブロックレベルの要素をインライン要素に入れることはできません。要素タグ。

さまざまな HTML ブロックの構文

さまざまな HTML ブロックレベル要素の構文が次のとおりであることを見てみましょう:

1. div 要素: これはブロック要素として機能し、画面の全幅を占め、常に新しい行で始まります。

<div>
{ ……Lines of code…...}
</div>
ログイン後にコピー

2. table: table は、テーブルヘッダー、テーブル行とテーブル列を持つテーブル本体を含む表形式でデータを表示するために使用されます。

<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
ログイン後にコピー

3.リスト要素: 順序付きリストと順序なしリスト。

<h6>An Unordered list </h6>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h4>An Ordered list</h4>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ログイン後にコピー

4.フォーム要素の配置: 次のようにフォーム要素を配置して HTML フォームを作成します。

<form>
<input type=”text” name=” ” />
<textarea rows=” 3” col=”5” name=””></textarea>
<input type=”submit” name=”” />
</form>
ログイン後にコピー

HTML ブロックの要素

HTML として使用されるさまざまな要素があります。ブロックレベルの要素は次のとおりです。

  1. : Address タグは、HTML 記事内で著者の連絡先情報を指定するために使用されます。
  2. : 記事は、自己完結型のコンテンツを指定するために使用されます。
  4. : 別のソースからコンテンツを取得するときは常に、blockquote が使用されます。
  5. : Canvas は、グラフィック スペースを提供するために Web ドキュメントで使用される要素です。
  6. : これは、Web 開発全体で最も重要な要素であり、HTML ドキュメントをセクションまたは部門に分割するために使用されます。
  7. : フィールドセットにまとめられる Web フォームで使用されるグループ関連のラベルまたは要素。
  8. : HTML フォームは、このブロックレベル要素を使用して定義されます。これは、Web 開発プロセスで最も一般的に使用されます。
  9. : Web ページのフッターセクションを示すために使用されます。

  10. -

    :
     これらは、レベル 1 から 6 を定義する HTML 言語で使用される見出しです。
  11. : この要素は、Web ページのヘッダー セクションを示すために使用されます。
  13. : Section 要素は、そのドキュメントの一般的なセクションを表すために使用されます。
  14. : データを表形式で表示したい場合、テーブルは最適なソリューションです。 HTML ドキュメントにテーブルが作成されます。
  15. HTML ドキュメントにビデオ コンテンツを含めたい場合は、コード内で単純な video 要素を使用することによっても可能です。
  17. : ユーザーがアイテムのリストを表示したい場合は、
  18. を使用することができます。要素。
    19. : リストを順番に表示します。
      1. : リストを順不同で表示します。
      • : この要素は、説明リストの形式でさまざまな用語を説明するために使用されます。

    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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543916882171.png" class="lazy" alt="HTML ブロック" ></p>
<h4 id="Example">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:

    HTML ブロック

    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:

    HTML ブロック

    Example #4

    Here we are trying to Address the element in HTML blocks.

    Code:

    <address>
Presented BY <a href="mailto:[email&#160;protected]">Narendra Modi</a>.<br>
Visit us at:Delhi<br>
primeminister.com<br>
Box 104, Red Fort<br>
Delhi
</address>
    ログイン後にコピー

    Output:

    HTML ブロック

    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.

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

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    もっと見る

    人気の記事

    Windows11 KB5054979の新しいものと更新の問題を修正する方法
    4週間前 By DDD
    KB5055523を修正する方法Windows 11にインストールできませんか？
    3週間前 By DDD
    Inzoi：学校と大学への応募方法
    1 か月前 By DDD
    KB5055518を修正する方法Windows 10にインストールできませんか？
    3週間前 By DDD
    Atomfallのサイトオフィスキーを見つける場所
    4週間前 By DDD
    もっと見る

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト（SublimeText3）

    もっと見る

    ホットトピック

    Gmailメールのログイン入り口はどこですか？
    7909
    15
    Java チュートリアル
    1652
    14
    CakePHP チュートリアル
    1411
    52
    Laravel チュートリアル
    1303
    25
    PHP チュートリアル
    1248
    29
    もっと見る
    Related knowledge
    HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

    HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

    HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

    これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

    HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

    HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

    HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

    HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

    HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

    HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

    HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

    HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

    HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

    HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

    HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

    HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

    See all articles