【核心基礎知識】你不知道的HTML標籤

有一些非常重要卻容易被忽視的標籤,這些標籤大多數用在頁面頭部 head 標籤內,雖然對用戶不可見,但如果在某些場景下,比如交互實現、性能優化、搜索優化,合理利用它們就可以達到事半功倍的效果。

一、實現交互

在實現一個功能的時候,我們編寫的代碼越多,不僅開發成本越高,而且代碼的健壯性也越差。有幾個標籤,可以幫助我們更簡單地實現一些頁面交互效果。

1、meta 標籤:自動刷新/跳轉

假設要實現一個間隔一段時間自動跳轉的效果,你很可能會想到使用 JavaScript 定時器控制頁面跳轉來實現。但其實有更加簡潔的實現方法,比如通過 meta 標籤來實現:

<meta http-equiv="Refresh" content="5; URL=page2.html">

上面的代碼會在 5s 之後自動跳轉到同域下的 page2.html 頁面。我們要實現自動跳轉的功能,只需要在頁面的 meta 標籤內設置好下一個頁面的地址即可。

另一種場景,比如每隔一分鐘就需要刷新頁面的大屏幕監控,也可以通過 meta 標籤來實現,只需去掉後面的 URL 即可:

<meta http-equiv="Refresh" content="60">

既然這樣做又方便又快捷,爲什麼這種用法比較少見呢?

一方面是因爲 meta 標籤用法不被前端開發人員所熟知,另一方面也是因爲在使用它的時候,刷新和跳轉操作是不可取消的,所以對刷新需要手動取消的,還是推薦使用 JavaScript 定時器來實現。如果

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章