HTML 中的區塊級元素

HTML 有一些預先定義的標籤和元素；它可能具有元素中的一些功能和類型，例如區塊級、內聯 html 元素。網頁有一組不同的導航，邏輯將從前端 html 實現，使用者定義的或自訂的要求將用於突出顯示網頁，例如使用 css、引導框架。我們已經討論了上一篇文章，如 span 和div element 用於 html 和

中的內聯元素。標籤用於 html 中的區塊級元素。 html 類別的每個部分都有一組不同的功能；邏輯應該在前端實現。

文法：

html 標籤有自己的預定義結構以及預先定義標籤和元素的功能。 html 中的區塊級元素有一些不同的標籤集；元素將在網頁中使用。下面列出了一些標籤。

<address>,<article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption>
<figure>,<footer>,<form>,<h1>-<h6>,<header>,<hr>,<li>,<main>,<nav>,<noscript>,<ol>,<p>
</p>
<pre class="brush:php;toolbar:false">,<section>,<table>,<tfoot>,<ul>,<video>
<p>上述標籤是html區塊級標籤中預先定義的標籤；當我們在html頁面中呼叫標籤時，每個標籤都有不同的用法和功能。很可能我們使用</p>
<div>; html 中區塊級元素中的標籤。 
<pre class="brush:php;toolbar:false">

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

上面的程式碼是HTML中區塊級元素的通用語法。我們還將使用前面段落中提到的一些預定義標籤；如果需要，每個標籤都會在 html 中擁有獨立且獨立的內容。

什麼是 HTML 中的區塊級元素？

區塊級元素將使用 css 樣式來突出顯示網頁，並為網路使用者提供更複雜的功能，以開發業務成長的 html 格式模型。它有涵蓋行內元素和區塊元素的規則。最有可能的是，它用於覆蓋格式化區塊級元素。每個css元素都會使用html標籤建立表單，並且它包含框；它可能有一些元件，如內容、填充和邊框；這些是 css 樣式中的一些元件。

區塊級元素想要設定網頁中的邊距和填充，因為它們需要正確的對齊和視圖。同時，元素部分也包含用於存在於元素填充外部的邊距；它存在於元素內部，覆蓋整個 html 正文內容。如果元素需要背景顏色或圖像，則會指派它們，並且相同的內容將顯示在內容和填滿區域中。一般來說，邊距區域總是覆蓋父元素的透明並顯示背景，如果父元素沒有將顯示屬性分配給正文部分，則會發生異常，這會導致在兩個邊距中顯示任何顏色或圖像和內邊距區域注意：邊距是指html 元素（內容和內邊距）外邊緣之間的距離。

我們也可以設定邊框區域，讓網頁高亮更上一層樓；它包括邊框顏色、樣式、寬度和邊距。與出現在網頁中的元素周圍的邊框以及所有類型相同。 CSS 有自己的 border-style 屬性，使用戶能夠使用一些值來設定自己的自訂邊框樣式，例如 none、solid、double、隱藏、點線、虛線、凹槽、脊線、嵌入和起始。如果我們將文件與邊框對齊，則不指定任何值，預設值「none」未分配，這表示沒有為網頁指派邊框。這些邊框樣式包含在 css1 版本中並可用，但隱藏值除外，這些隱藏值是在下一版本（即 css2 版本）中新增的。

Html 4以後，div元素是區塊級元素，用於設計和分隔文件的指定分區；該元素沒有特定的特徵格式，並且在HTML 中不推薦使用Align 屬性，它可以用於居中或在 中預設其內容的右側。標籤旨在採用 CSS 樣式中的任何格式。此外，它還具有嵌套 div 標籤等選項。它必須組合與 div 嵌套的其他元素。無論我們聲明和分配什麼，樣式、邊框和對齊方式都在文件中的 div 標記中指定，從而影響那些特定的嵌套元素區域。用於 div 標籤的一些基本屬性和值是邊框、背景圖像和其他使用者定義的格式樣式。

div.sample {width:137px;background:green;border:7px dotted black;padding:3px;}
div.sample ul {color:blue;}

標記的程式碼是了解 div 標籤實現的 CSS 屬性和功能的範例。

HTML 中的區塊級元素範例

html 中區塊級元素的範例如下：

範例#1

<style>
div.sample {width:133px;border:5px dotted green;padding:13px;}
div.sample ul {color:red;}
</style>


<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Mango</li>
<li>Coconut</li>
<li>Lemon</li>
</ul>
</div>

輸出：

範例#2

<style>
div.sample {width:123px;border:10px dotted blue;padding:18px;}
div.sample ul {color:yellow;}
</style>


<p>Sample <span style="color:black">Home</span><br>
<span style="color:LightGreen">Contactus</span></p>

輸出：

Example #3

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

• Products
• Email
• Support

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

and tags. is used for in-line elements but

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

element in html is used for navigating the web pages with some block-level contents in the documents. We already shared information about the working of block-level elements and specified with some css properties are enabled for block-level attributes using background-color,text-styles with some options like list text-alignments, padding and margins font-styles; these are some attributes with values specified within the navigation web pages.

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.