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

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

在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>標簽實現文本內鏈接——零基礎自學網頁制作

tml元素主要分為3類，塊級元素、內聯元素以及內聯塊級元素，本篇文章我們來就詳細介紹一下各個分類的含義以及對應的特點。

（1）塊級元素

在html中div、 p、hx、form、ul 、 li、dl、dd就是塊級元素。css屬性設置display:block就是將元素顯示為塊級元素。塊級元素特點：

1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行；（一個塊級元素獨占一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設置；

3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

我們這里將塊級元素代碼寫一下然后看一下在瀏覽器中的顯示效果。html代碼就如下所示：

在網頁中我們可以看到，這些元素每一個都單獨占據一行的空間，不管內容是否夠一行。

（2）內聯元素

在html中，span、a、label、input、 strong 和em就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。內聯元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高及頂部和底部邊距不可設置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

注意：為 a 元素設置了寬和高，但都沒有起到作用，原因是a在默認的時候是內聯元素，內聯元素是不可以設置寬和高的。

我們這里將內聯元素代碼寫一下然后看一下在瀏覽器中的顯示效果。html代碼就如下所示：

在網頁中我們可以看到，這些元素會在一行一直排著顯示，直到充滿整行空間才會換行顯示。

（3）內聯塊級元素

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯塊狀元素。inline-block元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

注意：img是inline元素，但是他同時也是替換元素，他有著特殊的表現：

1. 可以設置width/height;

2. 默認的，img元素在屏幕占據的空間與其圖片的實際像素一致，除非CSS有設置或者自身的width/height HTML 屬性有設置；

3. 如果img標簽的包裹元素為也為inline元素，則img的邊界可以超出其直接父元素的邊界，直到自己的寬、高達到最大或者設定值為止，而且文檔流中img的兄弟元素也不能遮蓋住img。最常見的就是a里面包含的img；

4. 所以從行為上看,img元素作為替換元素，有著類似于Inline-block的行為，盡管在SPEC里面，他的確是一個inline元素。

對于html的元素分類今天就先介紹到這里，大家在平時可以自己多加練習練習，做到每個標簽屬于什么元素。

每日金句： 成功的秘訣就是每天都比別人多努力一點。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

級元素：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.

在線咨詢

上一篇：如何實現注入html的中文不顯示亂碼？
下一篇：《江蘇少年網》我為國旗點個贊活動入口地址我為國旗點個贊玩法

您的項目需求

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