标签有关用法以及锚点定位;
一.頁面內的錨點定位;
錨點定位中,就算采用overflow:hidden將滾動條隱藏,但是它依然可以發生錨點定位,實現定點跳轉;
1.單向定位:
??? 錨定定位實在頁面必須要發生滾動的情況下,不滾動也能發生,效果不明顯;他的語法見下面代碼:
<a href="#2">錨點2</a>
....文本省略
<h2><a name="2" id="2">錨點2</a></h2>
2.雙向定位:
?
也是在單頁面內進行定位,就是這處定位到文章的某一處,又可以從文章這一處回到原來的位置;見代碼:
?
<a href="#wo" name="huiqu" id="huiqu">3年</a>
文本省略....
文本省略....
<a href="#huiqu" id="wo" name="wo">3年前的今天</a>
意思就是說從一處去,再從這一處來;
?
3.頁面跳轉定位看看是否能行,頁面跳轉也能精確的定位;
(1)單向定位:
?只要在html中a標簽中href屬性加一個另一個文件的相對路徑就能完成;
?
在index.html文件中
省略文本...
<a href="./index2.html#3">錨點3</a>
省略文本...
?
在index2.html文件中
文本省略
?<a id="3" name="3">3年前</a>
文本省略
(2)雙向定位(路由的雙向綁定):
?
其實只要在一個a標簽中加上相對的相互路徑;
?
index.html文件中
省略文本...
<a href="./index2.html#3" id="goBack" name="goBack">錨點3</a>
省略文本...
?
在index2.html文件中
省略文本...
?<a href="./index.html#goBack" id="3" name="3">3年前</a>
省略文本...
它的優勢可以很快的定位到某一點的某一個字上。
?
如果要實現頁面路由跳轉定位,可以通過js代碼:
window.parent.scrollTo(0, 0)
這是定位頂部,依然可以定位到某個某位值,但是要精確到某個字上就比較繁雜;接下來,我為大家介紹一個有關a標簽的其他用法;
其實a標簽有個target屬性;
_blank
瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。
_self
這個目標的值對所有沒有指定目標的 <a> 標簽是默認目標,它使得目標文檔載入并顯示在相同的框架或者窗口中作為源文檔。這個目標是多余且不必要的,除非和文檔標題 <base> 標簽中的 target 屬性一起使用。
_parent
這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中,那么它與目標 _self 等效。
_top
這個目標使得文檔載入包含這個超鏈接的窗口,用 _top 目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。
即:
<a target='_blank'></a>
//另外一個窗口打開
當然還有在css中的用法:ele:link/ele: visited /ele:active/ele: hover
我就不過多介紹這幾個了,特別提一下兩個偽類,ele:active和ele:hover,他們在其他元素也是常被用的兩個偽類,除此之外,余下的就是a標簽的獨有的偽類啦。
當然還有很少用到但又常用到一些方法,通過a標簽發送郵箱和打電話呀,都是有可能有道的,經常會看到有些網站會有一些運用。廢話不多講,見代碼吧:
<a href="mailto:郵箱地址"></a>
<a href='href:電話號碼'></a>
還可以通過a標簽完成一些下載功能:圖片及一些文件都是可以的;
<a href="#" download='a.html' id="newP">我是到5html</a>
var np = document.getElementById('newP');
np.onclick = function(){
var blob = new Blob([JSON.stringify('3897498')], {type: "" });
np.href = URL.createObjectURL(blob);
URL.revokeObjectURL(blob);
}
---------------------
作者:Scott_less
來源:CSDN
原文:https://blog.csdn.net/qq_30101879/article/details/78511227
版權聲明:本文為博主原創文章,轉載請附上博文鏈接!
轉載于:https://www.cnblogs.com/klb561/p/9900534.html
總結
以上是生活随笔為你收集整理的标签有关用法以及锚点定位;的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql主从和mysql主主和半同步复
- 下一篇: VMware vSAN6.7 网络设计-