HTML 區塊元素

Html 包含各種元素，它們將充當每個網頁的構建塊。每個網頁都有不同的視點，前端和後端都會實作邏輯。 Html 會有使用者定義或自訂的要求，如 CSS、引導框架等突出顯示網頁。一般來說，CSS 樣式根據其用途將 HTML 元素分為兩類：1. 區塊級元素和 2. 內聯元素。我們已經討論過先前的文章，例如 span 和 div element 用於 HTML 和

中的內聯元素。標籤用於 HTML 中的區塊級元素。

文法：

<div>
----------codes------
----------------------
</div>

一般來說，每個 HTML 標籤都有其預先定義的結構和功能。 HTML 中的區塊元素具有我們將在文件中使用的不同標籤。下面列出了一些標籤。

標籤：

,

、、、

-

、、

---

、

、、、 、

、


、、、

、
、

提到的標籤是 HTML 中預先定義的區塊元素。在 HTML 文件中呼叫時，每個標籤都有不同的功能。最有可能的是，我們使用

;區塊級元素中的標籤。程式碼是HTML中區塊級元素的通用語法，在需要時我們也會使用上述的預定義標籤；每個標籤都會有獨立且獨立的 HTML 內容。

區塊元素在 HTML 中如何運作？

它將使用 CSS 樣式和格式化模型，並覆蓋內聯和區塊元素。最有可能的是，它會負責格式化區塊元素。格式化區塊元素是 HTML 中區塊級元素之一。每個 CSS 元素看起來都像一個表單；它包含一個盒子，其中包含一些元件，如內容、填充和邊框；這些是 CSS 樣式中的不同元件。

• 內容：表示文字、圖片、影片等HTML元素的一般內容
• Padding：表示按格式覆蓋到任何內容中的任何填充，如 padding-top、padding-left、padding-right、padding-bottom 等。這些是屬性。
• 邊框：表示 HTML 內容中的任何邊框和填充；我們使用 border-top、border-bottom 等設定邊框

區塊元素想要設定 HTML 文件中的邊距和填滿。因為網頁需要適當的對齊才能讓用戶看起來更有吸引力。在某些情況下，區塊元素部分包含元素外部的邊距；元素內部的填充將圍繞內容。如果您需要元素的背景顏色或圖像，您可以指定它們，它們將顯示在內容和填充區域中。一般來說，邊距區域是透明的並顯示父元素的背景。但是，如果父元素（例如正文部分）尚未指派任何顯示屬性，則會發生異常。在這種情況下，邊距和填滿區域都顯示顏色或影像。邊距是指 HTML 元素外緣之間的距離，包括內容和內邊距。

我們也設定了邊框以突出網頁，包括邊框顏色、樣式、寬度和邊距。我們控制元素周圍邊框的外觀，並可以指定各種邊框類型。 CSS 的 border-style 屬性使用戶能夠設定自己的自訂邊框樣式，指定的值包括 none、solid、double、hidden、dotted、dashed、groove、ridge、inset 和 outset。如果我們將文件與邊框對齊，則不指定任何值表示預設值為無；這表示沒有為您的頁面指派邊框。除了隱藏值外，所有這些邊框樣式都包含在 css1 版本中，隱藏值是在 css2 版本中新增的。

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

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.

Code:

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:

<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>


<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pineapple</li>
</ul>
</div>

Output:



Example #2

Code:

<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>


<p>Sample <span style="color:green">green</span>
<span style="color:black">black</span></p>

Output:



Example #3

Code:

<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>

• Home
• AboutUs
• Contact Us

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中文網其他相關文章！