html5標(biāo)記的3種類型：1、塊級(jí)元素，其display值為“block”，特點(diǎn)為能夠設(shè)置寬高、邊距，會(huì)自動(dòng)換行；2、行內(nèi)元素，其display值為“inline”，不會(huì)自動(dòng)換行，無(wú)法設(shè)置寬高；3、行內(nèi)塊狀元素，不會(huì)自動(dòng)換行、能夠設(shè)置寬高。

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

html5標(biāo)記的分類

標(biāo)記又被稱為元素

• 根據(jù)標(biāo)簽特性可以分為：塊標(biāo)簽、行內(nèi)(內(nèi)聯(lián))標(biāo)簽、行內(nèi)塊標(biāo)簽

• 根據(jù)標(biāo)簽閉合規(guī)則，可以分為：?jiǎn)螛?biāo)簽(空標(biāo)簽，自閉合標(biāo)簽)、雙標(biāo)簽

常用的塊狀元素：<div> <p> <h1>…..<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

常用的行內(nèi)元素：<a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var>

常用的行內(nèi)塊狀元素：<img> <input>

塊級(jí)元素特點(diǎn)：display:block;

1、每個(gè)塊級(jí)元素都從新的一行開(kāi)始，并且其后的元素也另起一行。

2、元素的高度、寬度、行高以及上下左右的margin、padding值都可設(shè)置。

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

行內(nèi)元素特點(diǎn)：display:inline;

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

2、元素的高度、寬度及頂部和底部邊距不可設(shè)置（只支持左右方向的margin、padding）；

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

行內(nèi)塊狀元素的特點(diǎn)：display:inline-block;

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

2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。（支持上下左右的margin、padding值）

3、margin:0 auto無(wú)效

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

標(biāo)記類型的轉(zhuǎn)換

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

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

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

• 設(shè)置display:block 轉(zhuǎn)換為塊級(jí)元素

（學(xué)習(xí)視頻分享：html視頻教程、web前端）