摩登567+641480+初識塊級元素

xiemuran發表於2021-10-18

HTML（超文字標記語言）中元素大多數都是“塊級”元素或 行內元素 (en-US)。塊級元素佔據其父元素（容器）的整個水平空間，垂直空間等於其內容高度，因此建立了一個“塊”。這篇文章幫助解釋這個概念。

通常瀏覽器會在塊級元素前後另起一個新行。下面的例子表明了塊級元素的作用：

塊級元素示例

HTML

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

CSS

p { background-color: #8ABB55; }

用法

  • 塊級元素只能出現在  <body> 元素內。

塊級元素與行內元素

塊級元素與行內元素有幾個關鍵區別：

格式
預設情況下，塊級元素會新起一行。
內容模型
一般塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素建立比行內元素更”大型“的結構。

HTML 標準中塊級元素和行內元素的區別至高出現在 4.01 標準中。在 HTML5，這種區別被一個更復雜的 內容類別 (en-US)代替。”塊級“類別大致相當於 HTML5 中的 流內容 (en-US)類別，而”行內“類別相當於 HTML5 中的 措辭內容 (en-US)類別，不過除了這兩個還有其他類別。

元素列表

以下是 HTML 中所有的塊級元素列表（雖然”塊級“在新的 HTML5 元素中沒有明確定義）

<address>
聯絡方式資訊。
<article>  HTML5
文章內容。
<aside>  HTML5
伴隨內容。
<audio>  HTML5
音訊播放。
<blockquote>
塊引用。
<canvas>  HTML5
繪製圖形。
<dd>
定義列表中定義條目描述。
<div>
文件分割槽。
<dl>
定義列表。
<fieldset>
表單元素分組。
<figcaption>  HTML5
圖文資訊組標題
<figure>  HTML5
圖文資訊組 (參照  <figcaption>)。
<footer>  HTML5
區段尾或頁尾。
<form>
表單。
<h1> (en-US),  <h2> (en-US),  <h3> (en-US),  <h4> (en-US),  <h5> (en-US),  <h6> (en-US)
標題級別 1-6.
<header>  HTML5
區段頭或頁頭。
<hgroup>  HTML5
標題組。
<hr>
水平分割線。

<noscript>
不支援指令碼或禁用指令碼時顯示的內容。
<ol>
有序列表。
<output>  HTML5
表單輸出。
<p>
行。
<pre>
預格式化文字。
<section>  HTML5
一個頁面區段。
<table>
表格。
<tfoot>
表腳註。
<ul>
無序列表。
<video>  HTML5
影片。


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69997780/viewspace-2837874/，如需轉載，請註明出處，否則將追究法律責任。

相關文章