詳解HTML區塊級元素-html教學-PHP中文網

詳解HTML區塊級元素

迷茫

發布： 2017-03-25 12:16:00

原創

1680 人瀏覽過

<h2>前面的話

在HTML5出現之前，人們一般把元素分為區塊級、內聯和內聯塊元素。 <h1>

是最高級的，而

<h6>

則是最低的。 h1>

到<h6>，重要性逐漸減小，字體大小也逐漸減少。為了減少標題的字體而使用低階的標題，而是使用CSS的font-size樣式 2、避免跳過某級標題：始終要從

<h1>

開始，接下來使用<h2> 等等 3、使用

元素時，為了方便起見，避免重複在一個頁面上使用

<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>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>

登入後複製

p #< ;p>

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

【預設樣式】

margin: 16px 0;
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

登入後複製

p

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

)

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

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

進行分割

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

登入後複製

#【預設樣式】

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

登入後複製

pre

<code>元素表示預先定義格式文字。在該元素中的文字通常按照原始檔案中的編排，以等寬字體的形式展現出來，文字中的空白符(例如空格和換行符)都會顯示出來，通常表示已排版的內容，如程式碼區塊和字元畫等</code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;"><pre class="brush:php;toolbar:false">
body {
  color:red;
}

登入後複製

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

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

詳解HTML區塊級元素

<h6>

<p>段落1</p> <hr> <p>段落2</p>
登入後複製

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

詳解HTML區塊級元素

<h6>

<p>段落1</p> <hr> <p>段落2</p>登入後複製

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

<p>段落1</p> <hr> <p>段落2</p>
登入後複製

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