HTML中部分標籤的嵌套問題

本文轉載於:猿2048網站▶HTML中部分標籤的嵌套問題

書寫HTML結構的時候，對於標籤的嵌套問題，在我發現這個問題以前，都不在本身的考慮之中，還傻傻的覺得標籤之間是能夠進行百搭的！

其實，有些標籤是不能進行隨意嵌套，若是你沒有深受其害，你是不會發現它的存在的，更不會體會到它能帶給你的那種抓狂感！

那麼到底是那個兩個標籤呢？請看，就是a標籤和p標籤，乍一看都是像欠揍的樣子，是否是？

（1）a標籤不能嵌套a標籤（連接嵌套）

<a href="###">父元素<a href="###">子元素</a></a> ; //嵌套父子級

瀏覽器解析爲兄弟級關係：

<a href="###">父元素</a>;
<a href="###">子元素</a>;

特別地：只要a標籤裏面也任何形式嵌套a標籤，都會被瀏覽器解析爲兄弟級關係；

【直接嵌套a標籤】

【div間接嵌套a標籤】

 

（2）p標籤不能嵌套塊級標籤

<p>父元素<div>子元素</div></p> ; //嵌套父子級

瀏覽器解析爲兄弟級：

<p>父元素</p>;
<div>子元素</div>;

特別地：只要p標籤裏面也任何形式嵌套塊級標籤，都會被解析爲兄弟級關係，即便設置display屬性；

【直接嵌套div元素】

注：間接嵌套塊級元素，以及設置display屬性兩種狀況，但願你們經過代碼測試，通過我測試是不能嵌套的！

（3）如若須要進行連接嵌套，能夠推薦使用area標籤

對於連接的嵌套，平時若是你們留意的話，不少人都是把兩個連接所在a標籤單獨分開來寫，不直接嵌套；或者就是經過js代碼來實現的；

如今，能夠採用area標籤直接進行連接的嵌套；

<area shape="" coords="" href="" alt="" target="_blank"> ;

特別地，area標籤本質是用來建立區域熱點的，須要配合map標籤使用

<img usemap="#test" src="">
<map id="test" name="test">
    <area shape="" coords="" href="#rect" alt="">
</map>

對於area標籤的使用，並非我介紹的重點，若須知詳情你們能夠參考張鑫旭博客：http://www.zhangxinxu.com/wordpress/2017/05/html-area-map/