HTML行內元素與塊級元素有哪些及區別？

起之前工作面試時，面試官問的一個問題：行內元素有哪些，和塊級元素有什么區別？這是一道蠻基礎的面試題，但是很多初學者平時只注重標簽語義，忽視了標簽行內和塊級的特性，因此對于上述問題很有可能答不上來或者答不全。

HTML常見的行內元素有：

還有包括一些文本元素如：<br> 、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。

要是只回答<span>和<img>那就說不過去了吧。

HTML常見的塊級元素有：

<div>、<table>、<form>、<p>、<ul>、

<h1>......<h6>、<hr> 、<pre>、<address>、<center>、<marquee> 、<blockquote> 等。

要是只回答<div>那就說不過去了吧。

那它們之間的區別是什么呢？

·塊級元素

1.總是從新的一行開始，即各個塊級元素獨占一行，默認垂直向下排列；

2.高度、寬度、margin及padding都是可控的，設置有效，有邊距效果；

3.寬度沒有設置時，默認為100%；

4.塊級元素中可以包含塊級元素和行內元素。

·行內元素

1.和其他元素都在一行，即行內元素和其他行內元素都會在一條水平線上排列；

2.高度、寬度是不可控的，設置無效，由內容決定。

設置margin左右有效，有邊距效果；

設置margin上下會撐大空間但是不會產生邊距效果（即盒模型margin-top/bottom有值，但頁面上沒有邊距效果）。

設置padding左右有效，設置padding上下會撐大空間但是不會產生邊距效果（同上）。

padding效果如下展示：


<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
   </head>
	<style>
		span{
			border:1px solid red;
			padding:10px;
		}
		div{
			border:1px solid blue;
		}
	</style>
   <body>
	   <div>塊級元素</div>
	   <span> 行內元素</span>
	   <span> 行內元素</span>
	   <div>塊級元素</div>
   </body>
</html>

3.根據標簽語義化的理念，行內元素最好只包含行內元素，不包含塊級元素。

轉換

當然塊級元素與行內元素之間的特性是可以相互轉換的。HTML可以將元素分為行內元素、塊狀元素和行內塊狀元素三種。

使用display屬性能夠將三者任意轉換：

(1)display:inline;轉換為行內元素；

　　(2)display:block;轉換為塊狀元素；

　　(3)display:inline-block;轉換為行內塊狀元素。

行內塊狀元素綜合了行內元素和塊狀元素的特性：

(1)不自動換行，與其他行內元素都會在一條水平線上排列；

(2)高度、寬度、margin及padding都是可控的，設置有效，有邊距效果；

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

級元素與內聯元素的概念與區別

在HTML中，大多數元素都被定義為塊級元素或內聯元素。

塊級元素通常會獨立成行，而內聯元素會并排顯示。

在我們學過的元素中，

塊級元素如：<h> <p> <table>這些。

內聯元素如<td><a><img>

下面我們通過練習來直觀看看他們的區別。

塊級元素展示，代碼如下：

<body>
  <h1>第一個網頁</h1><hr><h2>表格元素</h2><hr>
  <p>塊級元素與內聯元素</p>
  <p>零基礎自學網頁制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如圖：

內聯元素展示如下

示例代碼：這段代碼被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰斗機</a>
<img src="img/戰斗機/image3.jpg" width = "200px"/>

效果如圖：

其中，<img>標簽中的width屬性規定了圖片的寬度為200px，也就是200像素。

HTML中，如果只對圖片的寬或高進行數值指定，那么未指定的數值會隨著指定數值進行等比例縮放！

熟知html元素是塊級還是內聯對以后進行頁面布局有一定的指導意義。

<div>與<span>標簽

為了方便開發者對頁面內容進行布局和調整，html開發者為html加入了專門的區塊元素<div></div>。

<div></div>是一個塊級元素，大家可以把它理解為一個容器，它本身是不會顯示在頁面上的。

比如這個！

筆者第一個漫畫作品

如果拋開畫面內容，我們看到的是一堆對畫面進行分割的方格子。像這樣

<div></div>元素的作用就是對頁面進行了這樣的分割。

實際上我們的頁面布局都是基于這樣思路進行分割的，只是頁面上不會像漫畫一樣顯示外邊框而已。例如：

強制為其添加邊框分割：

大家看明白了嗎？<div></div>就是用來對頁面進行分割劃區域的。

通過給<div>標簽設置不同的id屬性，可以在css文件中對不同<div>區塊中的所有信息進行統一調整樣式的操作。

這是對塊級元素整體改變樣式的方法。

但是，如果我們想對一個塊級元素中的不同文字或圖片這些內聯元素進行單獨操作怎么做呢？

html開發者為我們提供了<span></span>這樣的內聯標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作，我們可以這樣寫：

通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。

今天的內容結束了，下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table

行內元素：span, strong, em, br, img , input, label, select, textarea, cite,

內聯元素(inline element)a - 超鏈接

b - 粗體(不推薦)br - 換行

em - 強調

font - 字體設定(不推薦)

i - 斜體

img - 圖片

input - 輸入框

label - 表格標簽

select - 選擇框

small - 小字體文本

span - 常用內聯容器，定義文本內區塊

strong - 粗體強調

sub - 下標

sup - 上標

textarea - 多行文本輸入框

塊元素(block element)* blockquote - 塊引用

* center - 居中

* div - 常用塊級容易，也是css layout的主要標簽

* dl - 定義列表

* form - 交互表單

* h1 - 大標題

* h2 - 副標題

* h3 - 3級標題

* h4 - 4級標題

* h5 - 5級標題

* h6 - 6級標題

* hr - 水平分隔線

* ol - 排序表單

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 無序列表

塊級元素和行內元素的區別：

1）塊級元素會獨占一行，其寬度自動填滿其父元素寬度

行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，知道一行排不下，才會換行，其寬度隨元素的內容而變化

2）塊級元素可以設置 width, height屬性，行內元素設置width, height無效

3) 塊級元素可以設置margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。

文章自留地：

成笑笑博客_一個.Net和安卓技術狂愛者博客。

主要以發布和分享.Net和安卓文章為主，爭做全棧開發工程師，愛學習，愛挑戰，愛編程。用技術改變生活。

歡迎關注，微信公眾號:net知識分享（net4k8k）[做個12k的技術員].博客網址：www.chengxiaoxiao.com.

歡迎加入qq技術交流群：538742639.

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML行內元素與塊級元素有哪些及區別？

級元素與內聯元素的概念與區別

HTML完整學習目錄

您的項目需求