【前端筆記2.0】A標籤的常用應用

摘要： a標籤在前端應用中十分廣泛。下面介紹幾類常用的應用。 1. 第一個當然是跳轉連結了。 <a href="https://www.baidu.com">baidu</a> 2. 第二個能力是打電話。 <a href...

a標籤在前端應用中十分廣泛。下面介紹幾類常用的應用。

1. 第一個當然是跳轉連結了。

<a href="https://www.baidu.com">baidu</a>

2. 第二個能力是打電話。

<a href="tel:18877776666">call我</a>

3. 第三個是發郵件的功能。

<a href="mailto:[email protected]">點我發郵件</a>

4. 最後一個才是重點，a標籤的錨點作用。

<a href="#1">a標籤錨點作用，點選不重新整理頁面哦</a>

• 形式跟id選擇器類似。

• 有啥作用？

  1. 用作置頂

  2. 單頁面應用

4.1 用作置頂

案例演示：

<div id="top">header</div>

<div style="height: 3000px;">content</div>

<div style="border:1px solid red; position:fixed; bottom:100px; right:20px;">

<a href="#top">置頂</a>

</div>

• 如上給置頂按鈕定位在頁面右下角，當垂直方向滾動條滾動到任意位置時，點選置頂按鈕，頁面就會跳轉到設定有id為top元素的位置。

• 其實除了置頂外，還可以定位到頁面任意位置，只要給錨點定位到的位置設定一個單獨的id就行了。

4.2 單頁面應用

• 上面的錨點操作你可能會發現頁面的url地址多了一些字元，而這些字元正好是href屬性的值。

• 其實每次點選a標籤都會給url新增href屬性值(覆蓋並不會累加)，這個值叫做雜湊值(hash)，而且最重要的是，手動改變url的雜湊值，對於瀏覽器來說，頁面都不會重新整理 。而對於使用者來說體驗更好。

• 跟單頁面有什麼關係呢？單頁面應用簡單來說就是字面意思，整個網站或者應用都在一個頁面，而點選某一模組，並不會跳轉新頁面或者不會再本頁重新整理。由於a標籤錨點的特性所以應用在單頁面開發中再合適不過。

• H5中在history 物件中新增了用於單頁面開發的新方法。pushState和replaceState