書寫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/