HTML標籤的分類
在講標籤分類的時候，我們作為初學者在剛使用標籤的時候會發現有些屬性在一些標籤上不起作用，例如寬、高、水平居中等，其實這個屬性的使用只有在區塊級標籤上使用才會起作用。個人認為這也是初學者非常容易忽略的地方，所以我就把它記下來！
首先我們可以依照顯示的不同將HTML#標籤分為：區塊級標籤，行內標籤，行內區塊標籤；現對其分別介紹。
區塊級標籤
#特點：獨佔一行，對高度、寬度、行高以及頂和底邊距都可設定的屬性值生效；如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬；
典型的區塊級標籤有： ，h系列， ，
行內標籤
特點：可以多個標籤存在一行，無法直接設定行內標籤的高度、寬度、行高以及頂和底邊距，完全靠內容撐開寬高！
典型的行內標籤有：，，，，，，，
#行內區塊標籤 ：
特徵：結合的行內與區塊層級的有點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示；
典型的行內標籤有：
，
那麼有的同學就會想了，難道我就不可以控制span或font的寬高了嗎？可以的，那麼我們這次拋開浮動和定位不說，就說透過display屬性來將它們互相轉換：
1、區塊級標籤轉換為行內標籤：display: inline;
2、行內標籤轉換為區塊級標籤：display:block;
#3、轉換為行內區塊標籤：display：inline-block;
只要給對應的標籤使用這個display這個屬性，取對應的值，就可以將顯示模式互相轉換。
下面請看如下範例：
1：將行內標籤轉換為區塊級標籤
<!DOCTYPE html>
<html>
<head>
<title>行内标签转块级标签</title>
<style type="text/css">
a{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
</style>
</head>
<body> <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
<a href="https://www.baidu.com">百度</a>
</body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>
運行結果如下;點紅色任一區域都能實現跳到百度，所以他可以實現擴大連結範圍。
2：將行內標籤轉換為行內區塊標籤
上面已經講過行內區塊級標籤和區塊級標籤的區別，我在強調一遍：區塊級標籤和行內區塊級標籤都是可以設定長和寬的，但區塊級標記當你設定好後
它是自動換行的，你不能在這一行再放其它東西，而行內塊級標籤在同一行中可以放置多個行內標籤，具體我有案例來解釋。
<html>
<head>
<title>块级和行内块级</title>
<style type="text/css">
a{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
p{
width:100px;
height:100px;
background-color: red;
margin-top:10px; /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a> <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
<a href="https://www.baidu.com">百度一下</a>
<p>我是p1</p> <!--这个是一般的块级标签，会上下分行-->
<p>我是p2</p>
</body>
</html>執行結果：
3.將區塊級標籤轉換為行內標籤
1 nbsp;html> 2 3 4 <title>块级标签转行内标签</title> 5 <style> 6 p{ 7 width: 100px; 8 height: 100px; 9 background-color: red;10 display: inline;11 }12 </style>13 14 15 <p>谷歌</p> <!--按道理p是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->16 <p>http://www.php.cn</p>17 18
效果如下：
有關塊級標籤，行內標籤，行內塊級標籤我就先寫到這裡，也歡迎大家看了之後能夠多指點，感謝。
更多css區塊級標籤，行內標籤，行內區塊標籤的轉換（2）相關文章請關注PHP中文網！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
Atom編輯器mac版下載
最受歡迎的的開源編輯器
