[1]h [2]p [3]div [4]hr [5]pre [6]blockquote [7]address [8]其他 ...
前面的話
在HTML5出現之前,人們一般把元素分為塊級、內聯和內聯塊元素。本文將詳細介紹HTML塊級元素
h
標題(Heading)元素有六個不同的級別,<h1>
是最高級的,而<h6>
則是最低的。一個標題元素能簡要描述該節的主題
從<h1>
到<h6>
,重要性逐漸減小,字體大小也逐漸減小。在使用標題元素時,要註意以下幾點
1、不要為了減小標題的字體而使用低級別的標題,而是使用CSS的font-size樣式
2、避免跳過某級標題:始終要從<h1>
開始,接下來使用<h2>
等等
3、使用<section>
元素時,為了方便起見,避免重覆在一個頁面上使用<h1>
,<h1>
應該用來表示頁面的標題,其他的標題當從<h2>
開始。使用<section>
時,應當每個 section都使用一個<h2>
【預設樣式】
//從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新增了<hgroup>
標簽,它表示標題組,用於組合標題,只在區塊需要有多個級別的標題時使用
<hgroup>
<h1>水果</h1>
<h2>蘋果</h2>
</hgroup>
p
<p>
元素(paragraph)表示文本的一個段落,該元素通常表現為一整塊與相鄰文本分離的文本,或以垂直的空白隔離或以首行縮進
【預設樣式】
margin: 16px 0;
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
div
<div>
元素(divide)(或HTML文檔分區元素)是一個通用型的流內容容器,它在語義上不代表任何特定類型的內容,它可以被用來對其它元素進行分組,一般用於樣式化相關的需求(使用class或id特性)或者對具有相同特性的一組元素進行分組(比如lang),它應該在沒有任何其它語義元素可用時才使用(比如<article>
或<nav>
)
hr
<hr>
元素表示段落級元素之間的主題轉換(例如,一個故事中的場景的改變,或一個章節的主題的改變)。在HTML的早期版本中,它是一個水平線。現在它仍能在可視化瀏覽器中表現為水平線,但目前被定義為語義上的,而不是表現層面上
<hr>
用於段落級元素之間的分割,區塊之間不需要使用<hr>
進行分割
<p>段落1</p>
<hr>
<p>段落2</p>
【預設樣式】
margin: 8px 0;
border-style: inset;
border-width: 1px;
pre
<pre>
元素表示預定義格式文本。在該元素中的文本通常按照原文件中的編排,以等寬字體的形式展現出來,文本中的空白符(比如空格和換行符)都會顯示出來,通常表示已排版的內容,如代碼塊和字元畫等
<pre>
body {
color:red;
}
</pre>
【預設樣式】
margin: 1em 0;
white-space: pre;
blockquote
<blockquote>
元素(或者HTML塊級引用元素),代表其中的文字是引用內容。通常在渲染時,這部分的內容會有一定的縮進。若引文來源於網路,則可以將原內容的出處URL地址設置到cite特性上,若要以文本的形式告知讀者引文的出處時,可以通過<cite>
元素
[註意]引用的署名必須在引用外部定義
<blockquote cite="http://baike.baidu.com/view/921793.htm">
<p>橫眉冷對千夫指,俯首甘為孺子牛</p>
</blockquote>
<p>魯迅</p>
【預設樣式】
margin: 1em 40px;
address
<address>
元素可以讓作者為它最近的<article>
或者<body>
祖先元素提供聯繫信息。在後一種情況下,它應用於整個文檔
當表示一個和聯繫信息無關的任意的地址時,使用<p>
元素而不是<address>
元素。這個元素不能包含除了聯繫信息之外的任何信息,比如出版日期(這應該包含在<time>
元素中)。通常,<address>
元素可以放在當前section的<footer>
元素中,如果存在的話
【預設樣式】
font-style: italic;
其他
除了上面介紹的<div>
、<h>
、<p>
、<hr>
、<blockquote>
、<address>
標簽外,還有一些前面已經介紹過的標簽屬於塊級標簽
包括骨架類標簽(<html>
、<body>
),列表類標簽(<ul>
、<ol>
、<dl>
、<dd>
、<dt>
),表單類標簽(form
、<fieldset>
、<output>
、<legend>
、<optgroup>
、<option>
),HTML5新增的結構標簽(<article>
、<aside>
、<header>
、<footer>
、<nav>
、<section>
),HTML5新增的多媒體標簽(<figure>
、<figcaption>
),HTML5新增的功能性標簽(<summary>
、<details>
)
最後
可能有人會覺得<br>
標簽應該是一個塊級元素,因為它有換行,與塊級元素的特征很相似。但它實際上是一個內聯元素,它的用途是在文本中產生一個換行