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

HTML元素嵌套問題

元素嵌套

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

創(chuàng)新互聯(lián)不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的網(wǎng)站制作、做網(wǎng)站質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式營銷型網(wǎng)站建設(shè)需求，讓再小的高端網(wǎng)站設(shè)計(jì)也能產(chǎn)生價(jià)值！

P元素嵌套問題

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

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

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

通過查詢，發(fā)現(xiàn)原來 p元素內(nèi)無法包裹 塊級元素。
因?yàn)槲覀兪褂玫腄TD中規(guī)定了 塊級元素是不能放在 <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>。

塊級元素嵌套問題

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

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

為什么第二級的元素可以自由嵌套

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

在HTML里有幾個(gè)元素是比較特別的： <ul>、<ol>、<dl>、<table>，它們的子一層必須是指定元素， <ul>、<ol>的子一級必須是 <li>； <dl>的子一級必須是 <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í)它們也就是我們常說的行內(nèi)塊，雖然這些元素屬于inline，但是卻具有一定的block（可以設(shè)置寬高），我們也可以賦予任何元素css屬性display:inline-block。
本身具有inline-block的元素應(yīng)該沒有！

當(dāng)前名稱：web前端入門到實(shí)戰(zhàn)：HTML元素嵌套問題
文章分享：http://www.rwnh.cn/article12/gopgdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、搜索引擎優(yōu)化、軟件開發(fā)、網(wǎng)站制作、網(wǎng)站營銷、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容