HTML行內(nèi)元素與塊級元素有哪些及區(qū)別？

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

HTML常見的行內(nèi)元素有：

還有包括一些文本元素如：<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>那就說不過去了吧。

那它們之間的區(qū)別是什么呢？

·塊級元素

1.總是從新的一行開始，即各個(gè)塊級元素獨(dú)占一行，默認(rèn)垂直向下排列；

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

3.寬度沒有設(shè)置時(shí)，默認(rèn)為100%；

4.塊級元素中可以包含塊級元素和行內(nèi)元素。

·行內(nèi)元素

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

2.高度、寬度是不可控的，設(shè)置無效，由內(nèi)容決定。

設(shè)置margin左右有效，有邊距效果；

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

設(shè)置padding左右有效，設(shè)置padding上下會撐大空間但是不會產(chǎn)生邊距效果（同上）。

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> 行內(nèi)元素</span>
	   <span> 行內(nèi)元素</span>
	   <div>塊級元素</div>
   </body>
</html>

3.根據(jù)標(biāo)簽語義化的理念，行內(nèi)元素最好只包含行內(nèi)元素，不包含塊級元素。

轉(zhuǎn)換

當(dāng)然塊級元素與行內(nèi)元素之間的特性是可以相互轉(zhuǎn)換的。HTML可以將元素分為行內(nèi)元素、塊狀元素和行內(nèi)塊狀元素三種。

使用display屬性能夠?qū)⑷呷我廪D(zhuǎn)換：

(1)display:inline;轉(zhuǎn)換為行內(nèi)元素；

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

　　(3)display:inline-block;轉(zhuǎn)換為行內(nèi)塊狀元素。

行內(nèi)塊狀元素綜合了行內(nèi)元素和塊狀元素的特性：

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

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

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

級元素與內(nèi)聯(lián)元素的概念與區(qū)別

在HTML中，大多數(shù)元素都被定義為塊級元素或內(nèi)聯(lián)元素。

塊級元素通常會獨(dú)立成行，而內(nèi)聯(lián)元素會并排顯示。

在我們學(xué)過的元素中，

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

內(nèi)聯(lián)元素如<td><a><img>

下面我們通過練習(xí)來直觀看看他們的區(qū)別。

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

<body>
  <h1>第一個(gè)網(wǎng)頁</h1><hr><h2>表格元素</h2><hr>
  <p>塊級元素與內(nèi)聯(lián)元素</p>
  <p>零基礎(chǔ)自學(xué)網(wǎng)頁制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標(biāo)題</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>

如圖：

內(nèi)聯(lián)元素展示如下

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

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

效果如圖：

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

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

熟知html元素是塊級還是內(nèi)聯(lián)對以后進(jìn)行頁面布局有一定的指導(dǎo)意義。

<div>與<span>標(biāo)簽

為了方便開發(fā)者對頁面內(nèi)容進(jìn)行布局和調(diào)整，html開發(fā)者為html加入了專門的區(qū)塊元素<div></div>。

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

比如這個(gè)！

筆者第一個(gè)漫畫作品

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

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

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

強(qiáng)制為其添加邊框分割：

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

通過給<div>標(biāo)簽設(shè)置不同的id屬性，可以在css文件中對不同<div>區(qū)塊中的所有信息進(jìn)行統(tǒng)一調(diào)整樣式的操作。

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

但是，如果我們想對一個(gè)塊級元素中的不同文字或圖片這些內(nèi)聯(lián)元素進(jìn)行單獨(dú)操作怎么做呢？

html開發(fā)者為我們提供了<span></span>這樣的內(nèi)聯(lián)標(biāo)簽。比如我們對<p>我有一個(gè)夢想</p>這個(gè)段落元素中的"夢想"兩個(gè)字進(jìn)行變化顏色的操作，我們可以這樣寫：

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

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

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

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

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

行內(nèi)元素：span, strong, em, br, img , input, label, select, textarea, cite,

內(nèi)聯(lián)元素(inline element)a - 超鏈接

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

em - 強(qiáng)調(diào)

font - 字體設(shè)定(不推薦)

i - 斜體

img - 圖片

input - 輸入框

label - 表格標(biāo)簽

select - 選擇框

small - 小字體文本

span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊

strong - 粗體強(qiáng)調(diào)

sub - 下標(biāo)

sup - 上標(biāo)

textarea - 多行文本輸入框

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

* center - 居中

* div - 常用塊級容易，也是css layout的主要標(biāo)簽

* dl - 定義列表

* form - 交互表單

* h1 - 大標(biāo)題

* h2 - 副標(biāo)題

* h3 - 3級標(biāo)題

* h4 - 4級標(biāo)題

* h5 - 5級標(biāo)題

* h6 - 6級標(biāo)題

* hr - 水平分隔線

* ol - 排序表單

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 無序列表

塊級元素和行內(nèi)元素的區(qū)別：

1）塊級元素會獨(dú)占一行，其寬度自動(dòng)填滿其父元素寬度

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

2）塊級元素可以設(shè)置 width, height屬性，行內(nèi)元素設(shè)置width, height無效

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

文章自留地：

成笑笑博客_一個(gè).Net和安卓技術(shù)狂愛者博客。

主要以發(fā)布和分享.Net和安卓文章為主，爭做全棧開發(fā)工程師，愛學(xué)習(xí)，愛挑戰(zhàn)，愛編程。用技術(shù)改變生活。

歡迎關(guān)注，微信公眾號:net知識分享（net4k8k）[做個(gè)12k的技術(shù)員].博客網(wǎng)址：www.chengxiaoxiao.com.

歡迎加入qq技術(shù)交流群：538742639.

在線咨詢

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML行內(nèi)元素與塊級元素有哪些及區(qū)別？

級元素與內(nèi)聯(lián)元素的概念與區(qū)別

HTML完整學(xué)習(xí)目錄

您的項(xiàng)目需求