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/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM