HTML 區塊
- WBOY原創
- 2024-09-04 16:39:25685瀏覽
HTML 是一種用於建立網頁的語言，其中使用不同的區塊。這些元素是樣式化的，分為兩種不同的類型：HTML 區塊級元素和內聯元素。所有這些類型的元素都包含在
中。 HTML 區塊的標記。區塊級元素的結構用於設計網頁的主要佈局。如果我們談論結構視圖，它會建立比內聯元素視圖更大的結構視圖。每個區塊級元素都以佔據螢幕整個寬度的新行開始。它們必須寫在開頭 和結束標籤 .
元素分組是以節或子節的形式劃分佈局的重要方法。可以將任何區塊元素放入另一個區塊元素中，我們也可以將內聯元素放入 HTML Blocks 元素中，但不可能將區塊級元素放入內聯元素中而不是 中。元素標籤。
不同 HTML 區塊的語法
讓我們來看看不同 HTML 區塊級元素的語法如下：
1。 div 元素：它作為區塊元素工作，佔據螢幕的整個寬度並始終從新行開始。
<div>
{ ……Lines of code…...}
</div>
2。表：表格用於以表格格式顯示數據，包括表頭、表體（具有表格行和表格列）。
<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 區塊級元素的不同元素如下：
- ：地址標籤用於指定HTML文章中作者的聯絡資訊。
-
: 文章用來指定獨立的內容。 - 這是位於主要內容之外的元素；通常，它被視為側邊欄。
-
:
每當我們從其他來源取得內容時，都會使用區塊引用。 - Canvas 是 Web 文件中用來提供圖形空間的元素。
- : 它是整個 Web 開發中最重要的元素，用於將 HTML 文件分割為多個部分或部分。
- 在 Web 表單中使用與群組相關的標籤或元素，這些標籤或元素被組合到欄位集中。
- HTML 表單是使用此區塊級元素定義的。它最常用於 Web 開發過程。
- 用來表示網頁的頁腳部分。
-
這些是 HTML 語言中使用的標題，定義等級 1 到 6。:
: 此元素用於指示網頁的標題部分。- 這是 HTML 5 中引入的最新元素，用於指示頁面的部分，包括其中的導航連結。
: Section 元素用來表示其文件的通用部分。:每當我們想要以表格格式顯示資料時，表格就是一個完美的解決方案。它將為您的 HTML 文件建立一個表格。
- 如果您想在 HTML 文件中包含視訊內容，那麼也可以在程式碼中使用簡單的視訊元素。
- ：如果使用者想要顯示項目列表，則可以使用
- 元素。
- :
- ：
此元素用於以描述清單的格式描述不同的術語。HTML 區塊範例
以下是一些 HTML 區塊的範例：
範例#1
在下面的範例中，我們將使用一些基本的 Html 區塊元素，如 div、p、標題、帶有有序和無序列表的清單元素等。
代碼：
<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>
輸出：
Example #2
Here we will see another example in which we are creating a table.
Code:
<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中文網其他相關文章！