html中標簽元素的三種類型

一端幼、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)容的大小決定(文字缆镣、圖標等)

常見行內(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)標簽

結(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>

如何區(qū)分HTML5: DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市峡懈,隨后出現(xiàn)的幾起案子璃饱,更是在濱河造成了極大的恐慌,老刑警劉巖肪康,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荚恶,死亡現(xiàn)場離奇詭異,居然都是意外死亡梅鹦,警方通過查閱死者的電腦和手機裆甩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來齐唆,“玉大人嗤栓,你說我怎么就攤上這事」坑剩” “怎么了峡继?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長私恬。 經(jīng)常有香客問我柜裸,道長,這世上最難降的妖魔是什么味滞? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任樱蛤,我火速辦了婚禮钮呀,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘昨凡。我一直安慰自己爽醋,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布便脊。 她就那樣靜靜地躺著蚂四,像睡著了一般。 火紅的嫁衣襯著肌膚如雪哪痰。 梳的紋絲不亂的頭發(fā)上遂赠,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音晌杰,去河邊找鬼跷睦。 笑死,一個胖子當著我的面吹牛乎莉,可吹牛的內(nèi)容都是我干的送讲。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼惋啃,長吁一口氣:“原來是場噩夢啊……” “哼哼鬓!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起边灭,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤异希,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后绒瘦,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體称簿,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年惰帽,在試婚紗的時候發(fā)現(xiàn)自己被綠了憨降。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡该酗,死狀恐怖授药,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情呜魄,我是刑警寧澤悔叽,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站爵嗅,受9級特大地震影響娇澎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜睹晒,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一趟庄、第九天 我趴在偏房一處隱蔽的房頂上張望括细。 院中可真熱鬧,春花似錦戚啥、人聲如沸勒极。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至键痛,卻和暖如春炫彩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背絮短。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工江兢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人丁频。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓杉允,卻偏偏與公主長得像,于是被迫代替她去往敵國和親席里。 傳聞我的和親對象是個殘疾皇子叔磷,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361