首先我們來了解一下html標簽元素可以分成哪些類型？

HTML中標簽元素一般會分成三種不同類型，分別為：塊狀元素，行內元素，行內塊狀元素。

下面我們來詳細介紹一下這三種類型元素的特點以及用處，并且讓大家了解常用的塊狀元素與行內元素有哪些？

塊狀元素

特點：

1、獨占一行，每一個塊狀元素都會從新的一行重新開始，從上到下排布

2、可以直接控制寬度、高度以及盒子模型的相關css屬性（元素的高度、寬度、行高以及頂和底邊距都可設置）

3、在不設置寬度的情況下，塊級元素的寬度是它父級元素內容的寬度

4、在不設置高度的情況下，塊級元素的高度是它本身內容的高

因為它自身具有的這些特點，我們通常會使用塊狀元素來進行大布局（大結構）的搭建。

常用的塊狀元素：

1、普通元素

div（常用塊狀容器，也是css layout的主要標簽）、p（段落）、hr（水平分隔線）、table（ 表格）、form（交互表單）

2、標題元素：

h1（大標題）、h2（副標題）、h3（三級標題）、h4 （四級標題）、h5 （五級標題）、h6（六級標題）

3、列表元素

menu（菜單列表）、ol（有序列表）、ul（無序列表）、li（列表項）、dl（定義列表）、dt（定義術語）、dd（定義描述）

我們通過簡單代碼來看看這些塊狀元素

 !DOCTYPE html  html  head  meta charset= UTF-8  title 塊狀元素 /title  style  div{ background-color: palegoldenrod; background-color:paleturquoise ; background-color:papayawhip; background-color: peru; /style  /head  body  div div標簽元素，占據一行 /div  p p標簽元素，占據一行 /p  h4 標題元素，占據一行 /h4  li ul1 li 標簽 元素 /li  li ul1 li 標簽 元素 /li  /ul  li ul2 li 標簽 元素 /li  li ul2 li 標簽 元素 /li  /ul  /body  /html 

效果圖：

行內元素

特點：

1、和其他內聯元素從左到右在一行顯示

2、不能直接控制寬度、高度以及盒子模型的相關css屬性，但是直接設置內外邊距的左右值是可以的

3、內聯元素的寬高是由本身內容的大小決定（文字、圖片等）

4、內聯元素只能容納文本或者其他內聯元素（此處請注意，不要在內聯元素中嵌套塊級元素）

因為它自身具有的這些特點，我們通常會使用行內元素來進行文字、小圖標（小結構）的搭建。

常用的行內元素：

1、普通元素標簽

span（常用內聯容器，定義文本內區塊），a（錨點，鏈接），img（引入圖片），br（強制換行），sub（下標），sup（上標）

2、文本文字修飾標簽

b（加粗），strong（加粗強調），i（斜體），em（斜體強調），，big（大字體文本），small（ 小字體文本），s（中劃線（不推薦使用）），strike（中劃線），del（文檔中已被刪除的文本），u（下劃線）

3、表單內使用的標簽元素

textarea（多行文本輸入框），input（輸入框），select（下拉列表），label input（元素定義標注（標記））

 !DOCTYPE html  html  head  meta charset= UTF-8  title 行內元素 /title  style  span{ background-color: palegoldenrod; background-color:paleturquoise ; /style  /head  body  span span標簽元素1 /span  span span標簽元素2 /span  img src= 1.png width= 100px /  img src= 1.png width= 100px /  p 換一行看看文字效果，我是一段測試代碼， b 被b標簽加粗 /b 。我是一段測試代碼， i 被i標簽變成斜體 /i 。 /p  /html 

效果圖：

行內塊狀元素

特點：

1、和其他元素都在一行上，不會自動換行，默認排列方式為從左到右；

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

行內塊狀元素綜合了行內元素和塊狀元素的特點，但是各有取舍。因此行內塊狀元素在日常的使用中，由于其特點，使用的次數也比較多，在很多方面都很有用。

總結：以上就是本篇文章所介紹的html標簽元素的三個類型，分別為：塊狀元素，行內元素，行內塊狀元素；以及常用的塊狀元素與行內元素介紹。每種類型的標簽都有每種的特點，大家可以自己動手嘗試，看看不同標簽的使用，加深理解，根據需要在不同的情況下使用不同的標簽。希望能對大家的學習有所幫助，更多相關教程請訪問： HTML視頻教程，Html5視頻教程，bootstrap視頻教程！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。