1. 程式人生 > >標籤有關用法以及錨點定位;

標籤有關用法以及錨點定位;

一.頁面內的錨點定位;

錨點定位中,就算採用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
版權宣告:本文為博主原創文章,轉載請附上博文連結!