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)桐罕。