前幾天看了落落長的grid使用
相信應該有一滴滴的概念了

今天來輕鬆一下~
看看我幹過的蠢事⊙▽⊙ 搏君一笑~~

<a>標籤的使用

<a>是用作超連結使用，透過 href 連結到其他地方

<!-- 相對連結 -->
<a href="/css/style.css">相對連結</a>

<!-- 絕對連結 -->
<a href="https://ithelp.ithome.com.tw/users/20140586/ironman">絕對連結</a>

測試的時候為了避免跳來跳過去會在href裡面放入"#" 或是 "javescript:;"

實作上

平時我們希望可以點擊圖片連結到其他部分時，可以用<a>標籤包住<img>

<a href="#">
    <img src="aaa.jpg" alt="aaa">
</a>

但某天我遇到<a>標籤沒有包住我要的範圍

結構大概是這樣的(簡化)

我想用<a>包住覆蓋在圖片上的文字層，讓滑鼠接觸到時可以跳轉以外還可以做出效果

<a href="#" class="photo-link">
    <a>CULTURE</a>
    <h2>Biotech Stocks</h2>
    <div>  
</a>

但瀏覽器幫我改成了

<a href="#" class="photo-link"> </a>
    <a>CULTURE</a>
    <h2>Biotech Stocks</h2>
    <div>  

導致文字的位置大大偏移!!!

查了一下文件後發現
雖然<a>標籤可以包住div、p、span...等element
但遇到<a>時，HTML5就會進行修正(自動幫你結尾)，導致結構亂掉

HTML5修正

在W3C的規範裡面說

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).

意思就是<a>標籤裡面不能有按鈕或是其他連結
https://www.w3.org/TR/2011/WD-html5-author-20110809/the-a-element.html

這個時候把裡面的<a>拿掉就可以正常運作囉~

<a href="#" class="photo-link">
    <span >CULTURE</span>
    <h2>Biotech Stockst</h2>
    <div>  
</a>

昨天打完AZ今天全身散光光 _(´ཀ`」 ∠)