一端幼、html的標簽元素可以分為3類:
塊狀元素(塊元素)
行內(nèi)元素(內(nèi)聯(lián)元素)
行內(nèi)塊狀元素(可變元素)
1、塊狀元素:
塊級元素是指本身屬性為display:block;的元素弧满。因為它自身的特點婆跑,我們通常使用塊級元素來進行大布局(大結(jié)構(gòu))的搭建。 ?
布局上:獨占一行庭呜,可以容納內(nèi)聯(lián)元素和其他塊元素
?樣式上:設(shè)置width滑进、height有效,可以設(shè)置盒子模型的相關(guān)css屬性募谎,
?在不設(shè)置寬度的情況下扶关,塊級元素的寬度是它父級元素內(nèi)容的寬度
?在不設(shè)置高度的情況下,塊級元素的高度是它本身內(nèi)容的高度
2数冬、行內(nèi)元素:
內(nèi)聯(lián)元素是指本身屬性為display:inline;的元素节槐。因為它自身的特點,我們通常使用塊級元素來進行文字、小圖標(小結(jié)構(gòu))的應(yīng)用铜异。? ??
布局上:和其他元素從左到右在一行排列哥倔,只能容納文本或者其他內(nèi)聯(lián)元素(不要在內(nèi)聯(lián)元素中嵌套塊級元素)
樣式上:不能直接控制width、height揍庄,只能使用盒模型部分屬性咆蒿,如padding、line_height币绩、margin-left蜡秽、margin-right。
內(nèi)聯(lián)元素的寬高是由本身內(nèi)容的大小決定(文字缆镣、圖標等)
?3芽突、?行內(nèi)塊狀元素:盡可能少的占用橫向空間,和其他元素都在一行上董瞻;可以設(shè)置width寞蚌、height、margin钠糊、padding等盒模型相關(guān)屬性挟秤。
?? ??? ? *常用:img、input抄伍、td艘刚。
二、元素之間的轉(zhuǎn)化:
?????????????? display:block截珍;(將元素變?yōu)閴K級元素)
?????????????? display:inline攀甚;? (將元素變?yōu)樾屑壴?
?????????????? display:inline-block;(將元素變?yōu)樾屑墘K元素)
三岗喉、其他
? ? ? ?a. 塊元素特立獨行秋度;內(nèi)聯(lián)元素隨波逐流。
? ? ? ?b.塊元素通常用作網(wǎng)頁的主要構(gòu)建模塊钱床,而內(nèi)聯(lián)元素常用來標記小段內(nèi)容(修飾文本)
? ? ? ?c.設(shè)計一個頁面時荚斯,一般從較大的塊開始 ,然后完善頁面的時候再加入內(nèi)聯(lián)元素查牌。???? ?
? ? ? ?d. 對標簽?zāi)軌蚯逦姆诸愂缕冢莆諛撕灥奶匦裕谶x擇標簽時避免猶豫不決纸颜,提高布局效率刑赶。
四、html5新特性
HTML5新結(jié)構(gòu)標簽
HTML5-新的屬性語法
HTML5圖形
HTML5音視頻標簽
對本地離線存儲的更好的支持
新的表單控件懂衩,比如 calendar、date、time浊洞、email牵敷、url、search
移除的元素:
純表現(xiàn)的元素:basefont法希,big枷餐,center,font, s苫亦,strike毛肋,tt,u;
?對可用性產(chǎn)生負面影響的元素:frame屋剑,frameset润匙,noframes;
支持HTML5新標簽: IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽唉匾,可以利用這一特性讓這些瀏覽器支持HTML5新標簽孕讳,瀏覽器支持新標簽后,還需要添加標簽?zāi)J的樣式巍膘。當然也可以直接使用成熟的框架厂财、比如html5shim;
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>