html內聯（行內）元素、塊級（塊狀）元素和行內塊元素分類

時間 2019-11-11

標籤 html 內聯元素塊狀分類欄目 HTML 简体版

原文原文鏈接

HTML能夠將元素分類方式分爲內聯（行內）元素、塊級（塊狀）元素和行內塊元素三種。css

注：HTML是標籤語言，那麼既然是標籤，就能夠本身定義一些本身元素（如<wode>自定義的元素</wode>等），自定義元素瀏覽器默認解析爲內聯元素，爲防止不一樣瀏覽器解析不一樣的問題，建議經過css的display屬性來規定自定義元素的屬性。相信使用過UI框架的朋友，會看到一些html手冊之外的一些元素，其實這些都是一些自定義的元素。html

首先須要說明的是，這三者是能夠互相轉換的，使用css的display屬性可以將三者任意轉換： 程序員

CSS display 屬性

屬性值

值	描述
none	此元素不會被顯示。
block	此元素將顯示爲塊級元素，此元素先後會帶有換行符。
inline	默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會做爲列表顯示。
run-in	此元素會根據上下文做爲塊級元素或內聯元素顯示。
compact	CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
table	此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
inline-table	此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。
table-row-group	此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group	此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group	此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row	此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group	此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column	此元素會做爲一個單元格列顯示（相似 <col>）
table-cell	此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption	此元素會做爲一個表格標題顯示（相似 <caption>）
inherit	規定應該從父元素繼承 display 屬性的值。

例：canvas

<html>
<head>
<style type="text/css">
p {
  display: inline
}
div {
  display: none
}
</style>
</head>

<body>
<p>本例中的樣式表把段落元素設置爲內聯元素。</p>

<p>而 div 元素不會顯示出來！</p>

<div>div 元素的內容不會顯示出來！</div>
</body>
</html>

顯示結果：瀏覽器

1.內聯（行內）元素

　　行內元素最常使用的就是span，其餘的只在特定功能下使用，修飾字體<b>和<i>標籤，還有<sub>和<sup>這兩個標籤能夠直接作出平方的效果，而不須要相似移動屬性的幫助，很實用。框架

　　行內元素特徵：(1)設置寬高無效ide

　　　　　　　　　(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間性能

　　　　　　　　　(3)不會自動進行換行字體

2.塊級（塊狀）元素

　　塊狀元素表明性的就是div，其餘如p、nav、aside、header、footer、section、article、ul-li、address等等，均可以用div來實現。不過爲了能夠方便程序員解讀代碼，通常都會使用特定的語義化標籤，使得代碼可讀性強，且便於查錯。spa

　　塊狀元素特徵：(1)可以識別寬高

　　　　　　　　　(2)margin和padding的上下左右均對其有效

　　　　　　　　　(3)能夠自動換行

　　　　　　　　　(4)多個塊狀元素標籤寫在一塊兒，默認排列方式爲從上至下

3.行內塊元素

　　行內塊狀元素綜合了行內元素和塊狀元素的特性，可是各有取捨。所以行內塊狀元素在平常的使用中，因爲其特性，使用的次數也比較多。

　　行內塊狀元素特徵：(1)不自動換行

　　　　　　　　　　　(2)可以識別寬高

　　　　　　　　　　　(3)默認排列方式爲從左到右

4.同一類型的元素，到底該用哪一個。

其實同一類型的元素，屬性是同樣的，顯示出的效果也同樣，用哪一個均可以。但是爲了代碼的可讀性，規範化，建議特定的場景用特定的元素。

好比：盒子容器用div，文字段落用p，反過來效果同樣，但不符合規範。

塊級元素和行內元素的分類

html中的塊級元素：

標籤	描述
<address>	定義地址。
<article>	定義文章。
<aside>	定義頁面內容以外的內容。
<audio>	定義聲音內容。
<blockquote>	定義長的引用。
<canvas>	定義圖形。
<caption>	定義表格標題。
<dd>	定義定義列表中項目的描述。
<div>	定義文檔中的節。
<dl>	定義定義列表。
<dt>	定義定義列表中的項目。
<details>	定義元素的細節。
<fieldset>	定義圍繞表單中元素的邊框。
<figcaption>	定義 figure 元素的標題。
<figure>	定義媒介內容的分組，以及它們的標題。
<footer>	定義 section 或 page 的頁腳。
<form>	定義供用戶輸入的 HTML 表單。
<h1> to <h6>	定義 HTML 標題。
<header>	定義 section 或 page 的頁眉。
<hr>	定義水平線。
<legend>	定義 fieldset 元素的標題。
<li>	定義列表的項目。
<menu>	定義命令的列表或菜單。
<meter>	定義預約義範圍內的度量。
<nav>	定義導航連接。
<noframes>	定義針對不支持框架的用戶的替代內容。
<noscript>	定義針對不支持客戶端腳本的用戶的替代內容。
<ol>	定義有序列表。
<output>	定義輸出的一些類型。
<p>	定義段落。
<pre>	定義預格式文本。
<section>	定義 section。
<table>	定義表格。
<tbody>	定義表格中的主體內容。
<td>	定義表格中的單元。
<tfoot>	定義表格中的表注內容（腳註）。
<th>	定義表格中的表頭單元格。
<thead>	定義表格中的表頭內容。
<time>	定義日期/時間。
<tr>	定義表格中的行。
<ul>	定義無序列表。

html中的行內元素：

標籤	描述
<a>	定義錨。
<abbr>	定義縮寫。
<acronym>	定義只取首字母的縮寫。
<b>	定義粗體字
<bdo>	定義文字方向。
<big>	定義大號文本。
<br>	定義簡單的折行。
<button>	定義按鈕 (push button)。
<cite>	定義引用(citation)。
<code>	定義計算機代碼文本。
<command>	定義命令按鈕。
<dfn>	定義定義項目。
<del>	定義被刪除文本。
<em>	定義強調文本。
<embed>	定義外部交互內容或插件。
<i>	定義斜體字。
<img>	定義圖像。
<input>	定義輸入控件。
<kbd>	定義鍵盤文本。
<label>	定義 input 元素的標註。
<map>	定義圖像映射。
<mark>	定義有記號的文本。
<objec>	定義內嵌對象。
<progress>	定義任何類型的任務的進度。
<q>	定義短的引用。
<samp>	定義計算機代碼樣本。
<select>	定義選擇列表（下拉列表）。
<small>	定義小號文本。
<span>	定義文檔中的節。
<strong>	定義強調文本。
<sub>	定義下標文本。
<sup>	定義上標文本。
<textarea>	定義多行的文本輸入控件。
<time>	定義日期/時間。
<tt>	定義打字機文本。
<var>	定義文本的變量部分。
<video>	定義視頻。
<wbr>	定義可能的換行符。

注：當你不知道某一元素爲何屬性時，可經過F12調用瀏覽器調試器查看

圖例：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。