站長資訊網(wǎng)
html5標(biāo)記分為3類：1、塊級元素，其特點(diǎn)為能夠設(shè)置寬高、可以自動(dòng)換行、margin和padding的上下左右均對其有效；2、行內(nèi)元素，其特點(diǎn)為無法設(shè)置寬高、不會(huì)自動(dòng)換行；3、行內(nèi)塊元素，其特點(diǎn)為能夠設(shè)置寬高、不會(huì)自動(dòng)換行。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
HTML5中的標(biāo)記分為塊級元素、行內(nèi)元素、行內(nèi)塊元素。
行內(nèi)元素：
-
無法設(shè)置寬高。
-
margin上下無效，只有左右有效果；padding都有效果，會(huì)撐大空間。
-
box-sizing:border-box;無效，因?yàn)樵搶傩葬槍心Ｐ汀?/p> -
不會(huì)自動(dòng)換行
塊級元素：
-
能夠設(shè)置寬高
-
margin和padding的上下左右均對其有效
-
可以自動(dòng)換行
-
多個(gè)塊狀元素標(biāo)簽寫在一起，默認(rèn)排列方式為從上至下
-
可以使用
margin:0 auto居中對齊
行內(nèi)塊元素：
-
不會(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è)空格。
但標(biāo)簽的類型是可以轉(zhuǎn)換的
-
display:inline: 轉(zhuǎn)換為行內(nèi)元素 -
display:linline-block轉(zhuǎn)換為行內(nèi)塊元素 -
display:block轉(zhuǎn)換為塊級元素
掌握元素類別。現(xiàn)將學(xué)過的標(biāo)簽分類如下：
1、塊級元素
標(biāo)題<h></h>
有序列表<ol><li></li></ol>
無序列表<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>
頁眉<header>
頁腳<footer>
導(dǎo)航鏈接部分<nav>
為文檔或 section 定義聯(lián)系信息<address>
制作更小字號的文本<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視頻教程》
