(總結(jié))在HTML中標(biāo)簽的嵌套的規(guī)則

? ??????我們?cè)谑褂肏TML布局時(shí)萍启,標(biāo)簽是首當(dāng)其沖的關(guān)鍵基本元素女揭,且都帶有各自的屬性和特點(diǎn)录肯,搭建HTML有時(shí)候就像是在搭房子趴腋,總是一環(huán)套一環(huán),一塊接一塊的嘁信。而這些 :'磚瓦泥'的嵌套方式就十分重要了于样。

一、HTML 標(biāo)簽包括 塊級(jí)元素(block)潘靖、內(nèi)嵌元素(inline)

  1、塊級(jí)元素

  一般用來(lái)搭建網(wǎng)站架構(gòu)蚤蔓、布局卦溢、承載內(nèi)容等它包括以下這些標(biāo)簽:

  address、blockquote、center单寂、dir贬芥、div、dl宣决、dt蘸劈、dd、fieldset尊沸、form威沫、h1~h6、hr洼专、isindex棒掠、menu、noframes屁商、noscript烟很、ol、p蜡镶、pre雾袱、table、ul

  2官还、內(nèi)嵌元素

  一般用在網(wǎng)站內(nèi)容之中的某些細(xì)節(jié)或部位芹橡,用以“強(qiáng)調(diào)、區(qū)分樣式妻枕、上標(biāo)僻族、下標(biāo)、錨點(diǎn)”等等屡谐,下面這些標(biāo)簽都屬于內(nèi)嵌元素:

  a述么、abbr、acronym愕掏、b度秘、bdo、big饵撑、br剑梳、cite、code滑潘、dfn垢乙、em、font语卤、i追逮、img酪刀、input、kbd钮孵、label骂倘、q、s巴席、samp历涝、select、small漾唉、span荧库、strike、strong毡证、sub电爹、sup、textarea料睛、tt丐箩、u、var

 二恤煞、HTML 標(biāo)簽的嵌套規(guī)則

  1. 塊元素可以包含內(nèi)聯(lián)元素或某些塊元素屎勘,但內(nèi)聯(lián)元素卻不能包含塊元素,它只能包含其它的內(nèi)聯(lián)元素:

  <div><h1></h1><p></p></div> —— 對(duì)

  <a href=”#”><span></span></a> —— 對(duì)

  <span><div></div></span> —— 錯(cuò)

????????2. 塊級(jí)元素不能放在<p>里面:

  <p><ol><li></li></ol></p> —— 錯(cuò)

  <p><div></div></p> —— 錯(cuò)

  3. 有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)嵌元素居扒,不能再包含塊級(jí)元素概漱,這幾個(gè)特殊的標(biāo)簽是:

  h1、h2喜喂、h3瓤摧、h4、h5玉吁、h6照弥、p、dt

  4. li 內(nèi)可以包含 div 標(biāo)簽 —— 這一條其實(shí)不必單獨(dú)列出來(lái)的进副,但是網(wǎng)上許多人對(duì)此有些疑惑这揣,就在這里略加說(shuō)明:

  li 和 div 標(biāo) 簽都是裝載內(nèi)容的容器,地位平等影斑,沒(méi)有級(jí)別之分(例如:h1给赞、h2 這樣森嚴(yán)的等級(jí)制度^_^),要知道矫户,li 標(biāo)簽連它的父級(jí) ul 或者是 ol 都 可以容納的片迅,為什么有人會(huì)覺(jué)得 li 偏偏容納不下一個(gè) div 呢?別把 li 看得那么小氣嘛皆辽,別看 li 長(zhǎng)得挺瘦小障涯,其實(shí) li 的胸襟很大 的……

  5. 塊級(jí)元素與塊級(jí)元素并列罐旗、內(nèi)嵌元素與內(nèi)嵌元素并列:

  <div><h2></h2><p></p></div> —— 對(duì)

  <div><a href=”#”></a><span></span></div> —— 對(duì)

  <div><h2></h2><span></span></div> —— 錯(cuò)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末膳汪,一起剝皮案震驚了整個(gè)濱河市唯蝶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌遗嗽,老刑警劉巖粘我,帶你破解...
    沈念sama閱讀 216,692評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異痹换,居然都是意外死亡征字,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)娇豫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)匙姜,“玉大人,你說(shuō)我怎么就攤上這事冯痢〉粒” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,995評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵浦楣,是天一觀的道長(zhǎng)袖肥。 經(jīng)常有香客問(wèn)我,道長(zhǎng)振劳,這世上最難降的妖魔是什么椎组? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,223評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮历恐,結(jié)果婚禮上寸癌,老公的妹妹穿的比我還像新娘。我一直安慰自己弱贼,他們只是感情好蒸苇,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,245評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著哮洽,像睡著了一般填渠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鸟辅,一...
    開(kāi)封第一講書(shū)人閱讀 51,208評(píng)論 1 299
  • 那天氛什,我揣著相機(jī)與錄音,去河邊找鬼匪凉。 笑死枪眉,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的再层。 我是一名探鬼主播贸铜,決...
    沈念sama閱讀 40,091評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼堡纬,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了蒿秦?” 一聲冷哼從身側(cè)響起烤镐,我...
    開(kāi)封第一講書(shū)人閱讀 38,929評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎棍鳖,沒(méi)想到半個(gè)月后炮叶,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡渡处,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,570評(píng)論 2 333
  • 正文 我和宋清朗相戀三年镜悉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片医瘫。...
    茶點(diǎn)故事閱讀 39,739評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡侣肄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出醇份,到底是詐尸還是另有隱情稼锅,我是刑警寧澤,帶...
    沈念sama閱讀 35,437評(píng)論 5 344
  • 正文 年R本政府宣布被芳,位于F島的核電站缰贝,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏畔濒。R本人自食惡果不足惜剩晴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,037評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望侵状。 院中可真熱鬧赞弥,春花似錦、人聲如沸趣兄。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,677評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)艇潭。三九已至拼窥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蹋凝,已是汗流浹背鲁纠。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,833評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鳍寂,地道東北人改含。 一個(gè)月前我還...
    沈念sama閱讀 47,760評(píng)論 2 369
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像迄汛,于是被迫代替她去往敵國(guó)和親捍壤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子骤视,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,647評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評(píng)論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5鹃觉? 答:HTML5是最新的HTML標(biāo)準(zhǔn)专酗。 注意:講述HT...
    kismetajun閱讀 27,474評(píng)論 1 45
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開(kāi)發(fā)》時(shí),所整理的筆記帜慢。筆記內(nèi)容為根據(jù)個(gè)人需求所...
    墨荀閱讀 2,336評(píng)論 0 7
  • 學(xué)習(xí)目標(biāo): 了解html的基本結(jié)構(gòu) 掌握標(biāo)題標(biāo)簽: 掌握段落標(biāo)簽: 掌握通用塊標(biāo)簽: 掌握?qǐng)D片標(biāo)簽: 掌握超鏈接標(biāo)...
    husky_1閱讀 2,518評(píng)論 0 12
  • HTML4的元素嵌套規(guī)則 在我們的印象中會(huì)有這樣的嵌套規(guī)則: 內(nèi)聯(lián)元素不能嵌套塊元素 元素和 元素不能嵌套塊元素 ...
    zpeople閱讀 1,083評(píng)論 0 1