前言：a標簽，不止你在用，我也在用。但某些時候我們可以考慮用button替代a。
在多頁應用中，a標簽很常見，我們常用來作為一個普通超鏈接，進行頁面跳轉。
而在單頁應用中，我們使用路由進行頁面切換，a標簽的使用就少了。
不過當我們不需要跳轉，只需要點擊某個元素來達到一些效果的需求時，常常使用a標簽。
如圖，智聯招聘上的這些選項，就是a標簽，沒有使用a標簽進行頁面的跳轉，而是監聽點擊事件然后進行一些操作，這其實也是我們比較普遍的a標簽用法。
這是一個修改了樣式的a標簽——
a{ text-decoration: none; color: #666666; font-size: 20px; } a:hover{ color: #3EA4DA; }
看似很好，但隱藏着一些我們不想要的效果——
1.能拖拽 
2.會跳轉，即使不寫href地址，也會刷新頁面
當然，我們可以通過js解決以上兩個問題：
href值為javascript:; 點擊后執行一條空代碼不跳轉頁面
ondragstart='return false' 阻止拖動事件的默認行為
<a href="javasricpt:;" ondragstart='return false' >我是一個a標簽</a>
不過我想提出另一個思路：用button替代a
這是同樣進行了樣式修改的button標簽 
和a標簽對比，差別不大，只需修改樣式，無需寫js代碼。
且樣式修改也很簡單，三個關鍵——border、background、outline設為none即可
button{ border: none; background: none; outline: none; font-size: 20px; color: #666666; } button:hover{ color: #3EA4DA; }
最后，並不是要求大家都要使用button，而舍去a，而且我個人有時也會習慣用a，只是提供一個思路：可用button替代a
補充：
Q：反正都是要去除默認樣式的，為什么不直接用一個span標簽？
A：
1.鼠標樣式：當鼠標移入span時，顯示的樣式為
，不像button和a標簽是我們比較喜歡的效果：
、
。
當然，這個可以通過樣式cursor:default;修改。default是默認樣式，箭頭，同button；pointer是手指，同a。
2.雙擊選中文本：雙擊span就會選中文本，如圖
。用戶點擊某一元素時，有時會多次點擊，點擊時間間隔短，便會產生雙擊效果，就會選中文字如圖，這個效果就不是很好了。
3.HTML語義化：HTML100多個標簽的存在，就是為了HTML語義化，而不是讓我們所有元素都是div或span。
HTML豐富的標簽，目的在於通過標簽名傳達標簽內容類型的一些信息，就像h1標簽傳達了標題，header標簽傳達了頭部...
在這里a標簽和button標簽，則傳達了是鏈接、按鈕，都是用於點擊的元素
Q：為什么要語義化？（轉載自：https://blog.csdn.net/qq_38128179/article/details/80811339）
A：
- 代碼結構: 使頁面沒有css的情況下，也能夠呈現出很好的內容結構
- 有利於SEO: 爬蟲依賴標簽來確定關鍵字的權重，因此可以和搜索引擎建立良好的溝通，幫助爬蟲抓取更多的有效信息
- 提升用戶體驗： 例如title、alt可以用於解釋名稱或者解釋圖片信息，以及label標簽的靈活運用。
- 便於團隊開發和維護: 語義化使得代碼更具有可讀性，讓其他開發人員更加理解你的html結構，減少差異化。
- 方便其他設備解析: 如屏幕閱讀器、盲人閱讀器、移動設備等，以有意義的方式來渲染網頁。