溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

web前端入門到實(shí)戰(zhàn)：HTML元素嵌套問題

發(fā)布時(shí)間：2020-08-11 08:58:01 來(lái)源：ITPUB博客 閱讀：191 作者：智云編程 欄目：web開發(fā)

HTML元素嵌套問題

元素嵌套

塊元素可以包含內(nèi)聯(lián)元素或 某些塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，只能包含其他的內(nèi)聯(lián)元素。

P元素嵌套問題

<p>
  <div></div>
</p>

在P元素中嵌套div等塊級(jí)元素，在瀏覽器中解析如下：

web前端入門到實(shí)戰(zhàn)：HTML元素嵌套問題

可以看到在元素最后會(huì)多出一個(gè)空的 <p></p>。

通過查詢，發(fā)現(xiàn)原來(lái) p元素內(nèi)無(wú)法包裹 塊級(jí)元素。
因?yàn)槲覀兪褂玫腄TD中規(guī)定了 塊級(jí)元素是不能放在 <p>里面的，再加上一些瀏覽器縱容這樣的寫法：

<p>這是一個(gè)段落的開始
<p>這是另一個(gè)段落的開始
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

當(dāng)一個(gè) <p>標(biāo)簽還沒結(jié)束時(shí)，遇到下一個(gè)塊元素就會(huì)把自己結(jié)束掉，其實(shí)瀏覽器是把它們處理成這樣：

<p>這是一個(gè)段落的開始</p>
<p>這是另一個(gè)段落的開始</p>

這也就解釋了，為何瀏覽器中最后會(huì)多出1個(gè)空的 <p></p>。

塊級(jí)元素嵌套問題

可以先把所有的塊元素再次劃分成幾個(gè)級(jí)別的，我們已經(jīng)知道 <html>是在最外層， <html>下一級(jí)里面只會(huì)有 <head>、<body>、<frameset>、<noframes>，而我們已經(jīng)知道了可視的元素只會(huì)出現(xiàn)在 <body>里，所以我們把 <body>劃在第一個(gè)級(jí)里面。接著，把 不可以自由嵌套的元素劃在第三個(gè)級(jí)，其他的就歸進(jìn)第二個(gè)級(jí)。所謂的不可自由嵌套的元素就是里面只能放內(nèi)聯(lián)元素的，它們包括有：標(biāo)題標(biāo)記的 <h2>、<h3>、<h4>、<h5>、<h6>、<h7>、<caption>；段落標(biāo)記的 <p>；分隔線 <hr>和一個(gè)特別的元素 <dt>(它只存在于列表元素 <dl>的子一級(jí))。

三級(jí)元素就是指，只能嵌套內(nèi)聯(lián)元素的塊級(jí)元素。 p也恰好是其中之一。

為什么第二級(jí)的元素可以自由嵌套

我們可以把它們看成是一些容器（或者說(shuō)是盒子）， 這些容器的大小可以自由變化，例如我們可以把 <ul>嵌在 <div>里面，也可以把 <div>嵌在 <li>里面。

在HTML里有幾個(gè)元素是比較特別的： <ul>、<ol>、<dl>、<table>，它們的子一層必須是指定元素， <ul>、<ol>的子一級(jí)必須是 <li>； <dl>的子一級(jí)必須是 <dt>或者 <dd>； <table>的子一層必須是 <caption>或 <thead>、<tfoot>、<tbody>等，而再子一層必須是 <tr>（ <tr>只存在于 <thead>、<tfoot>、<tbody>中），之后才是可放內(nèi)容的 <td>或者 <th>。

內(nèi)聯(lián)元素

其實(shí)在內(nèi)聯(lián)元素中，還是可以再區(qū)分一下的，有幾個(gè)元素（ <img>、<input>等）比較特別，它們可以定義寬高。雖然在 IE瀏覽器里，所有的元素都可以定義寬高，但這是 IE自己的標(biāo)準(zhǔn)，并非所有瀏覽器都支持， W3C稱它們?yōu)閞eplaced元素，其實(shí)它們也就是我們常說(shuō)的行內(nèi)塊，雖然這些元素屬于inline，但是卻具有一定的block（可以設(shè)置寬高），我們也可以賦予任何元素css屬性display:inline-block。
本身具有inline-block的元素應(yīng)該沒有！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手