HTML 有一些預先定義的標籤和元素；它可能具有元素中的一些功能和類型，例如區塊級、內聯 html 元素。網頁有一組不同的導航，邏輯將從前端 html 實現，使用者定義的或自訂的要求將用於突出顯示網頁，例如使用 css、引導框架。我們已經討論了上一篇文章，如 span 和div element 用於 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> <pre class="brush:php;toolbar:false">,<section>,<table>,<tfoot>,<ul>,<video>
上述標籤是html區塊級標籤中預先定義的標籤；當我們在html頁面中呼叫標籤時，每個標籤都有不同的用法和功能。很可能我們使用
<html> <body> <div> ----------codes------ ---------------------- </div> </body> </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>
<head>
<style>
div.sample {width:133px;border:5px dotted green;padding:13px;}
div.sample ul {color:red;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Mango</li>
<li>Coconut</li>
<li>Lemon</li>
</ul>
</div>
</body>
</html>輸出：
<html>
<head>
<style>
div.sample {width:123px;border:10px dotted blue;padding:18px;}
div.sample ul {color:yellow;}
</style>
</head>
<body>
<p>Sample <span style = "color:black">Home</span><br/>
<span style = "color:LightGreen">Contactus</span></p>
</body>
</html>輸出：
<html>
<head>
<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>
</head>
<body>
<ul class="first">
<li><a href="#products">Products</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#support">Support</a></li>
</ul>
</body>
</html>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
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
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.
以上是HTML 中的區塊級元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
