html標(biāo)簽元素有：1、標(biāo)簽獨(dú)占一行，可指定寬、高的塊狀標(biāo)簽；2、標(biāo)簽在一行內(nèi)，寬度與高度由內(nèi)容決定，只有在內(nèi)容超過HTML的寬度時(shí)，才會(huì)換行的行內(nèi)標(biāo)簽；3、同時(shí)具備內(nèi)聯(lián)元素、塊狀元素特點(diǎn)的行內(nèi)塊狀標(biāo)簽。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

HTML標(biāo)簽的類型可分為三種:塊級標(biāo)簽,行內(nèi)標(biāo)簽,內(nèi)聯(lián)塊狀標(biāo)簽。

塊級標(biāo)簽：

塊狀標(biāo)簽：標(biāo)簽獨(dú)占一行，可指定寬、高。

特性：

• 能夠識別寬高

• margin和padding的上下左右均對其有效

• 可以自動(dòng)換行

• 多個(gè)塊狀元素標(biāo)簽寫在一起，默認(rèn)排列方式為從上至下

• 可以使用margin:0 auto居中對齊

常用的塊狀元素有：

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

內(nèi)聯(lián)標(biāo)簽：

內(nèi)聯(lián)(行級)標(biāo)簽：標(biāo)簽在一行內(nèi)，寬度與高度由內(nèi)容決定，只有在內(nèi)容超過HTML的寬度時(shí)，才會(huì)換行。

特性：

• 無法設(shè)置寬高

• margin上下無效，只有左右有效果，padding都有效果，會(huì)撐大空間；box-sizing:border-box;無效，因?yàn)樵搶傩葬槍心Ｐ汀?/p>

• 不會(huì)自動(dòng)換行

常用的內(nèi)聯(lián)元素有：

<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

內(nèi)聯(lián)塊狀標(biāo)簽：

內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。(css2.1新增)，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。

特性：

• 不會(huì)自動(dòng)換行

• 能夠設(shè)置寬高

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

• 可以使用text-align:center使內(nèi)容相對于父盒子水平居中對齊，例如img標(biāo)簽，可以使用text-align:center，相對父盒子居中對齊、margin:0 auto無效

• 水平排列，但所有元素默認(rèn)會(huì)有1個(gè)空格的間隙，因?yàn)樵刂g在html中書寫有回車換行，瀏覽器解析會(huì)將其解析成一個(gè)空格。

常用的內(nèi)聯(lián)塊狀元素有：

<img>、<input>

HTML標(biāo)簽類型是可以轉(zhuǎn)換的：

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

• display:linline-block;轉(zhuǎn)換為行內(nèi)塊元素

• display:block;轉(zhuǎn)換為塊級元素

推薦學(xué)習(xí)：html視頻教程