1.4 網(wǎng)頁結(jié)構(gòu)

網(wǎng)頁結(jié)構(gòu)即網(wǎng)頁內(nèi)容的布局，布局是否合理直接影響頁面的用戶體驗(yàn)及相關(guān)性，并在一定程度上影響網(wǎng)站的整體結(jié)構(gòu)。

從頁面布局的角度看，一個(gè)頁面的布局類似一篇文章的排版，需要分為多個(gè)區(qū)塊，較大的區(qū)塊又可再細(xì)分為小區(qū)塊。塊內(nèi)為多行逐一排列的文字、圖片、超鏈接等內(nèi)容，這些區(qū)塊一般稱為塊級(jí)元素；而區(qū)塊內(nèi)的文字、圖片或超鏈接等一般稱為行級(jí)元素，如圖1-4所示。

頁面的這種布局結(jié)構(gòu)，其本質(zhì)上是由各種HTML標(biāo)簽組織完成的。HTML標(biāo)簽分為塊級(jí)標(biāo)簽和行級(jí)標(biāo)簽（也可以稱為塊級(jí)元素和行級(jí)元素）。

1．塊級(jí)元素

塊級(jí)元素顯示的外觀按“塊”顯示，生成一個(gè)元素框，具有一定的寬度和高度。它會(huì)填充其父級(jí)元素的內(nèi)容，旁邊不能有其他元素。換句話說，塊級(jí)元素在元素框之前和之后生成了“分隔”符。例如，＜div＞塊標(biāo)簽、＜p＞段落標(biāo)簽等。

2．行級(jí)元素

行級(jí)元素顯示的外觀按“行”顯示，在一個(gè)文本行內(nèi)生成元素框，而不會(huì)打斷這行文本。例如，＜img＞圖片標(biāo)簽、＜a＞超鏈接標(biāo)簽等。

3．塊級(jí)元素與行級(jí)元素的區(qū)別

（1）塊級(jí)元素與行級(jí)元素外觀上的區(qū)別

塊級(jí)元素各占據(jù)一行，垂直方向排列；行級(jí)元素在一條直線上排列，都是同一行的，水平方向排列。

（2）塊級(jí)元素與行級(jí)元素包含關(guān)系的區(qū)別

塊級(jí)元素可以包含塊級(jí)元素和行級(jí)元素；行級(jí)元素不能包含塊級(jí)元素。

（3）塊級(jí)元素與行級(jí)元素屬性的區(qū)別

塊級(jí)標(biāo)簽具有一定的寬度和高度，可以通過設(shè)置width、height屬性來控制；而行級(jí)元素設(shè)置width、height屬性是無效的。