HTML區塊級元素的詳細說明

前面的話

  在HTML5出現之前，人們一般把元素分成區塊級、內聯和內聯塊元素。本文將詳細介紹HTML區塊級元素

 

h

  標題(Heading)元素有六個不同的級別，&lt ;h1>是最高級的，而4e9ee319e0fa4abc21ff286eeb145ecc則是最低的。一個標題元素能簡單描述該節的主題

  從4a249f0d628e2318394fd9b75b4636b1到4e9ee319e0fa4abc21ff286eeb145ecc，重要性逐漸減小，字體大小也逐漸減小。使用標題元素時，要注意以下幾點

  1、不要為了減少標題的字體而使用低級別的標題，而是使用CSS的font-size樣式

  2、避免跳過某級標題：始終要從4a249f0d628e2318394fd9b75b4636b1開始，接下來使用c1a436a314ed609750bd7c7d319db4da 等等

  3 、使用2f8332c8dcfd5c7dec030a070bf652c3 元素時，為了方便起見，避免重複在一個頁面上使用4a249f0d628e2318394fd9b75b4636b1，4a249f0d628e2318394fd9b75b4636b1應該用來表示頁面的標題，其他的標題當從c1a436a314ed609750bd7c7d319db4da開始。使用2f8332c8dcfd5c7dec030a070bf652c3時，應當每個section都使用一個c1a436a314ed609750bd7c7d319db4da

【預設樣式】

//从h1到h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;

#  HTML5新增了d8eccd9ed644b68a6460a2bb84548c82標籤，它表示標題組，用於組合標題，只在區塊需要有多個層級的標題時使用

<hgroup>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>

 

p

  e388a4556c0f65e1904146cc1a846bee元素(paragraph)表示文本的一個段落，該元素通常表現為一整塊與相鄰文本分離的文本，或以垂直的空白隔離或以首行縮排

【預設樣式】

margin: 16px 0;

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

 

p

  e388a4556c0f65e1904146cc1a846bee元素(pide)(或HTML文檔分區元素)是一個通用型的流內容容器，它在語義上不代表任何特定類型的內容，它可以被用來對其它元素進行分組，一般用於樣式化相關的需求(使用class或id特性)或將具有相同特性的一組元素進行分組(例如lang)，它應該在沒有任何其它語義元素可用時才使用(比如23c3de37f2f9ebcb477c4a90aac6fffd或c787b9a589a3ece771e842a6176cf8e9)

 

hr

  f32b48428a809b51f04d3228cdf461fa元素表示段落級元素之間的主題轉換(例如，一個故事中的場景的改變，或一個章節的主題的改變)。在HTML的早期版本中，它是一個水平線。現在它仍能在視覺化瀏覽器中表現為水平線，但目前被定義為語義上的，而不是表現層面上

  f32b48428a809b51f04d3228cdf461fa用於段落級元素之間的分割，區塊之間不需要使用f32b48428a809b51f04d3228cdf461fa進行分割

<p>段落1</p>
<hr>
<p>段落2</p>

#【預設樣式】

margin: 8px 0;
border-style: inset;
border-width: 1px;

 

pre

#  e03b848252eb9375d56be284e690e873元素表示預定義格式文字。在該元素中的文字通常按照原始檔案中的編排，以等寬字體的形式展現出來，文字中的空白符(例如空格和換行符)都會顯示出來，通常表示已排版的內容，如程式碼區塊和字符畫等

<pre class="brush:php;toolbar:false">
body {
  color:red;
}

【預設樣式】

margin: 1em 0;
white-space: pre;

 

blockquote

  b8a712a75cab9a5aded02f74998372b4元素(或HTML區塊級引用元素)，代表其中的文字是引用內容。通常在渲染時，這部分的內容會有一定的縮排。若引文來自網絡，則可將原內容的出處URL位址設定到cite特性上，若要以文字的形式告知讀者引文的出處時，可以透過f3a85e1241a187c5ac462d886e9a968b元素

  [注意]引用的署名必須在引用外部定義

<blockquote cite="http://baike.baidu.com/view/921793.htm">
　　<p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>    
<p>鲁迅</p>

【預設樣式】

margin: 1em  40px;

 

address

#  a83cbaaa11067ffe805e7a0796ef5057元素可以讓作者為它最近的23c3de37f2f9ebcb477c4a90aac6fffd或6c04bd5ca3fcae76e30b72ad730ca86d祖先元素提供聯絡資訊。在後一種情況下，它會應用於整個文件

  当表示一个和联系信息无关的任意的地址时，使用e388a4556c0f65e1904146cc1a846bee元素而不是208700f394e4cf40a7aa505373e0130b元素。这个元素不能包含除了联系信息之外的任何信息，比如出版日期(这应该包含在865ebc4a8f40017839ddd62af936776f元素中)。通常，208700f394e4cf40a7aa505373e0130b元素可以放在当前section的c37f8231a37e88427e62669260f0074d元素中，如果存在的话

【默认样式】

font-style: italic;

 

其他

  除了上面介绍的e388a4556c0f65e1904146cc1a846bee、c8b28895262a62371d18ac056c4442e2、e388a4556c0f65e1904146cc1a846bee、f32b48428a809b51f04d3228cdf461fa、b8a712a75cab9a5aded02f74998372b4、208700f394e4cf40a7aa505373e0130b标签外，还有一些前面已经介绍过的标签属于块级标签

  包括骨架类标签(100db36a723c770d327fc0aef2ce13b1、6c04bd5ca3fcae76e30b72ad730ca86d)，列表类标签(ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、def3eed00a09ea710a4bfa4b7fe74771、67bc4f89d416b0b8236eaa5f43dee742、73de882deff7a050a357292d0a1fca94)，表单类标签(<a href="http://www.php.cn/wiki/125.html" target="_blank">for</a>m、2b5469ab79cf842344327415c3b3bb95、be6d67dae90cc1ad6469079e163d0939、e911751791aa3ba95dc724e2fb905976、5b7a15bed8615d1b843806256bebea72、5a07473c87748fb1bf73f23d45547ab8)，HTML5新增的结构标签(23c3de37f2f9ebcb477c4a90aac6fffd、15221ee8cba27fc1d7a26c47a001eb9b、1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、c787b9a589a3ece771e842a6176cf8e9、2f8332c8dcfd5c7dec030a070bf652c3)，HTML5新增的多媒体标签(24203f2f45e6606542ba09fd2181843a、614eb9dc63b3fb809437a716aa228d24)，HTML5新增的功能性标签(631fb227578dfffda61e1fa4d04b7d25、a5e9d42b316b6d06c62de0deffc36939)

 

最后

  可能有人会觉得0c6dc11e160d3b678d68754cc175188a标签应该是一个块级元素，因为它有换行，与块级元素的特征很相似。但它实际上是一个内联元素，它的用途是在文本中产生一个换行

以上是HTML區塊級元素的詳細說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！