HTML塊級(jí)元素和行內(nèi)元素

出處

1. HTML 塊級(jí)元素(block element)

塊級(jí)元素總是在新的行上開始,并盡可能地占據(jù)本行全部可用的寬度症汹。
以下為常見的塊級(jí)元素:

<address> <article> <aside> <blockquote>
 <canvas> <dd> <div> <dl> <dt> <fieldset>
 <figcaption> <figure> <footer> <form> <h1>~<h6> 
<header><hr><li> <main> <nav> <noscript> <ol> <output>
 <p> <pre> <section> <table> <tfoot> <ul> <video>

2. HTML 行內(nèi)元素(inline element)

相反,行內(nèi)元素不會(huì)另起一行庞萍,它也只占用必要的寬度嗤栓。
一言以蔽之:塊級(jí)元素講究排場(chǎng),行內(nèi)元素勤儉節(jié)約V位健(當(dāng)然棒动,也不是說(shuō)誰(shuí)好誰(shuí)壞,元素?zé)o貴賤宾添,存在即合理)
以下為常見的行級(jí)元素:

<a> <abbr> <acronym> <b> <bdo> <big> <br> 
<button> <cite> <code> <dfn> <em> <i> <img> 
<input> <kbd> <label> <map> <object> <q> 
<samp> <script> <select> <small> <span> <strong>
 <sub> <sup> <textarea> <time> <tt> <var>

3. 行內(nèi)元素與塊級(jí)元素對(duì)比

一般情況下船惨,行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。
而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素缕陕。
這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級(jí)元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)粱锐。

4. 為什么要將內(nèi)容分為塊級(jí)和行內(nèi)?

……
    <p>黑夜給了我黑色的          

        <span>眼睛</span>扛邑,</p>
    <p>我卻用它尋找     <span>光明</span>怜浅。</p>
……
效果

這是因?yàn)?HTML 要求瀏覽器將連續(xù)的空白字符合并為一個(gè)空格,這種做法其實(shí)很有道理蔬崩,因?yàn)檫@樣可以把 HTML 文檔的布局和文檔內(nèi)容自身的布局給區(qū)別開來(lái)恶座。
相當(dāng)于你文檔中使用空格換行來(lái)達(dá)到所謂的美觀需求的布局,HTML 是不予理會(huì)的沥阳,如果你想要內(nèi)容在網(wǎng)頁(yè)上以美美噠的形式展現(xiàn)出來(lái)跨琳,那好,請(qǐng)使用 HTML 的語(yǔ)法來(lái)實(shí)現(xiàn)桐罕。

5.思維導(dǎo)圖(by 不二如是

思維導(dǎo)圖
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末脉让,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子功炮,更是在濱河造成了極大的恐慌溅潜,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,222評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件死宣,死亡現(xiàn)場(chǎng)離奇詭異伟恶,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)毅该,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門博秫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)潦牛,“玉大人,你說(shuō)我怎么就攤上這事挡育“屯耄” “怎么了?”我有些...
    開封第一講書人閱讀 157,720評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵即寒,是天一觀的道長(zhǎng)橡淆。 經(jīng)常有香客問(wèn)我,道長(zhǎng)母赵,這世上最難降的妖魔是什么逸爵? 我笑而不...
    開封第一講書人閱讀 56,568評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮凹嘲,結(jié)果婚禮上师倔,老公的妹妹穿的比我還像新娘。我一直安慰自己周蹭,他們只是感情好趋艘,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,696評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著凶朗,像睡著了一般瓷胧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上棚愤,一...
    開封第一講書人閱讀 49,879評(píng)論 1 290
  • 那天搓萧,我揣著相機(jī)與錄音,去河邊找鬼遇八。 笑死矛绘,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的刃永。 我是一名探鬼主播,決...
    沈念sama閱讀 39,028評(píng)論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼羊精,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼斯够!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起喧锦,我...
    開封第一講書人閱讀 37,773評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤读规,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后燃少,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體束亏,經(jīng)...
    沈念sama閱讀 44,220評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,550評(píng)論 2 327
  • 正文 我和宋清朗相戀三年阵具,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了碍遍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片定铜。...
    茶點(diǎn)故事閱讀 38,697評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖怕敬,靈堂內(nèi)的尸體忽然破棺而出揣炕,到底是詐尸還是另有隱情,我是刑警寧澤东跪,帶...
    沈念sama閱讀 34,360評(píng)論 4 332
  • 正文 年R本政府宣布畸陡,位于F島的核電站,受9級(jí)特大地震影響虽填,放射性物質(zhì)發(fā)生泄漏丁恭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,002評(píng)論 3 315
  • 文/蒙蒙 一斋日、第九天 我趴在偏房一處隱蔽的房頂上張望涩惑。 院中可真熱鬧,春花似錦桑驱、人聲如沸竭恬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)痊硕。三九已至,卻和暖如春押框,著一層夾襖步出監(jiān)牢的瞬間岔绸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工橡伞, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盒揉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,433評(píng)論 2 360
  • 正文 我出身青樓兑徘,卻偏偏與公主長(zhǎng)得像刚盈,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子挂脑,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,587評(píng)論 2 350

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