html5標(biāo)記分為3類：1、塊級(jí)元素，其特點(diǎn)為能夠設(shè)置寬高、可以自動(dòng)換行、margin和padding的上下左右均對(duì)其有效；2、行內(nèi)元素，其特點(diǎn)為無(wú)法設(shè)置寬高、不會(huì)自動(dòng)換行；3、行內(nèi)塊元素，其特點(diǎn)為能夠設(shè)置寬高、不會(huì)自動(dòng)換行。

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

HTML5中的標(biāo)記分為塊級(jí)元素、行內(nèi)元素、行內(nèi)塊元素。

行內(nèi)元素：

• 無(wú)法設(shè)置寬高。

• margin上下無(wú)效，只有左右有效果；padding都有效果，會(huì)撐大空間。

• box-sizing:border-box;無(wú)效，因?yàn)樵搶傩葬槍?duì)盒模型。

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

塊級(jí)元素：

• 能夠設(shè)置寬高

• margin和padding的上下左右均對(duì)其有效

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

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

• 可以使用margin:0 auto居中對(duì)齊

行內(nèi)塊元素：

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

• 能夠設(shè)置寬高

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

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

• margin:0 auto無(wú)效

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

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

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

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

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

掌握元素類別?，F(xiàn)將學(xué)過(guò)的標(biāo)簽分類如下：

1、塊級(jí)元素

標(biāo)題<h></h>

有序列表<ol><li></li></ol>

無(wú)序列表<ul><li></li></ul>

定義列表<dl></dl>

段落標(biāo)簽<p></p>

預(yù)格式文本<pre></pre>

大段引用<blockquote></blockquote>

小段引用<q></q>

劃分區(qū)塊<div></div>

定義<figure></figure>

音頻<audio></audio>

視頻<video></video>

表格<table></table>

表單<form></form>

添加一條直線 <hr>

裝載獨(dú)立文章<article>

定義文檔章節(jié)<section>

定義非正文內(nèi)容<aside>

頁(yè)眉<header>

頁(yè)腳<footer>

導(dǎo)航鏈接部分<nav>

為文檔或 section 定義聯(lián)系信息<address>

制作更小字號(hào)的文本<small>

下標(biāo)文本<sub>

上標(biāo)文本<sup>

2、行內(nèi)元素

標(biāo)簽類型代碼書寫

超鏈接<a></a>

傾斜<em></em>;<i></i>

加粗</strong></strong>;<b></b>

縮寫<abbr></abbr>

跨越多個(gè)字符<span></span>

獲取用戶輸入<input>

創(chuàng)建下拉列表<select>

創(chuàng)建多行文本框<textarea>

定義控件標(biāo)注<lable>

3、行內(nèi)塊元素

標(biāo)簽類型代碼書寫

圖片<img />

內(nèi)聯(lián)框架<iframe></iframe>

推薦教程：《html視頻教程》