問題
在實際網頁佈局之中，我們有時候需要一整塊點選區域中間還要有部分按鈕點選，也就是需要a標籤巢狀a標籤，如下：
<!-- a標籤進行巢狀的時候 --> <a href="#codeup">outerA <a href="#codeupinner">innerA</a> </a>
但是我們會發現，這種巢狀，瀏覽器會直接錯誤解析，解析結果如下：
<!-- 而瀏覽器則會解析成 -- > <a href="#codeup">outerA</a> <a href="#codeupinner">innerA</a>
那麼針對這種情況如何解決呢？
方案一：使用object標籤進行巢狀
例如我麼如下寫，就不會錯誤解析了！
<a href="#codeup"> outerA <object><a href="#codeupinner">innerA</a></object> </a>
這種寫法的典型應用最多的是列表整個需要點選，列表裡面有電話號碼需要單獨點選撥打！
<a class="codeup_list" href="跳轉頁面"> 列表內容 <object><a href="tel:694434565">撥打電話</a></object> </a>
方案二：使用定位方式
這種方式是迫不得已的方式，思路就是我們不用巢狀。直接程式碼如下書寫：
<a href="#codeup">outerA</a> <a href="#codeupinner">innerA</a>
外層的codeup透過設定display:inline-block，以及絕對定位，將其放在裏層a標籤的位置。然後透過調整裏層a標籤及外層a的z-index大小，使得滑鼠能正確選中a標籤；
這種方法的核心思想就是透過定位來模擬實現我們想要達到的效果！
方案三：使用 HTML的 < area>< map>標籤來實現
記得在學校學校網頁製作的時候，用的是dreamweaver，dreamweaver中可以使用圖片熱區來實現圖片的點選效果。沒錯，我們可以使用熱區來實現a標籤的巢狀效果啊！
area標籤很久沒有使用了，普及一下基礎知識：
area可以指定shape及coords。
如果 shape 屬性設定為 "rect"，則該值規定矩形左上角和右下角的座標。（x1,y1,x2,y2）
如果 shape 屬性設定為 "circ"，則該值規定圓心的座標和半徑。（x,y,radius）
如果 shape 屬性設定為 "poly"，則該值規定多邊形各頂點的值。如果第一個座標和最後一個座標不一致，那麼爲了關閉多邊形，瀏覽器必須新增最後一對座標。（x1,y1,x2,y2,..,xn,yn）
area和map要配合使用，可以在圖片上面指定部分熱區，也可以在列表中指定熱區。
假如我們運用area和map在列表中a標籤內部指定熱區，就可以實現類似我們上面a標籤巢狀的效果了！
還是上面的例子，我們可以如下書寫：
<a href="#codeup"> outerA <map> <area shape="rect" coords="0,0,200,21" href="codeupinner" > </map> </a>
方案四：使用span等標籤加js事件來代替a標籤
當然我們也可以用span，標籤等替代a標籤，只不過要多寫一些js跳轉程式碼了，透過js來實現a標籤所能實現的效果！
