首頁 > web前端 > css教學 > 詳解連結的rel與target區別_經驗交流

詳解連結的rel與target區別_經驗交流

WBOY
發布: 2016-05-16 12:05:34
原創
1914 人瀏覽過

target="_blank"是否的存在是否有必要我想目前還有很多正處在一種盲區。我查閱了相關的文獻,發現其實情況並非是我們所想的那樣,事實上target="_blank"並非是不符合標準的,而用rel與JS的解決方案也是沒有必要的,因為這是個誤區,只要我們了解了rel與target的真正意義我們就清楚了其實這裡本不應存在爭議。以下我將我透過查閱文獻所得到的知識與大家分享,我們先來了解target與rel的意思:

target ,允許指定在什麼位置顯示已經選擇的超連結內容。也就是說連結的內容將會在什麼樣的視窗被顯示。 target 的屬性值有四個保留的名稱,分別是:_blank,_self,_parent,_top。其中_blank的意思是瀏覽器總是會在一個新開啟的、未命名的視窗中載入target="_blank"連結的文件。這裡大家也許會很不懂「未命名」是什麼意思。事實上target 是可以給新開啟的視窗賦一個ID,例如:target="name" 這就表示透過target="name"連結載入的文件將會在一個叫做"name"的視窗顯示。如果沒有ID為"name"的窗口,那麼瀏覽器就會新建一個名為"name"的窗口來顯示連結文件。如果目前視窗的ID就是"name"那麼這個連結文件就會在目前的視窗中取代原有的內容顯示出來。而_self的意思其實就是當前文檔,的預設目標就是_self,這個屬性值一般來說是用不到的。 _parent是使連結文件在父級視窗顯示,這個屬性值只在框架結構中使用,如果身本就是頂級框架,那麼其作用與_self相同。 _top同樣是應用在框架中的,但是他的效果是清除框架來顯示目標文件。這對於從框架結構轉向無框架結構是很有作用的。

現在我們知道了,target 是一目標顯示的屬性與瀏覽器密切相關的。那麼rel又是什麼呢, 為什麼很多人把他當作是target 的替代屬性呢?下面我們就來認識rel。其實不只有一個rel還有一個對應的屬性叫rev,這兩個屬性的意思分別是:從來源文檔到目標文檔的關係;從目標文檔到來源文檔的關係。這裡的來源文檔可以理解為連結所處在的當前文檔,而目標文檔也就是這個連結將要開啟的文檔。這下我們應該清楚了,其實rel與rev是一種文件之前的連結關係,而並非是與瀏覽器相關的如何顯示目標文件的屬性。

那麼rel與rev有哪些關係呢?下面將一一列取並解釋其中的含義:

next,連結到下一個文檔;
prev,連結到前一個文檔;
head,連結到集合中的頂級文檔;
toc,連結到集合的目錄;
parent,連結到來源上面的文件;
Child,連結到來源下面的文件;
index,連結到此文件的索引;
glossary,連結到此文件的術語表;

其中next與prev是一組。顯示了目前文件與目標文件之前的關係是同級的關係,可以寫成這樣
。 head與toc可以形成一個組合,表示者是由目錄連結到最終的文檔,或是由文檔連結到目錄。 parent與child是一組,表示由目前的文件連結到父級文件或是子級文件。而index與glossary可以與head分別組合,形成由文檔到索引,或是由索引到文檔;文檔到術語表或是術語表到文檔。

也許這樣講可能還是不很清楚,下面舉個例子:我在這裡整理了一個電影文檔資源,那麼我需要對這些資源進行分類,我把電影分成:武俠片、戰爭片、愛情片、恐怖片、紀錄片。那麼我在電影根目錄需要連結到下面的子類的時候那麼連結的關係應該是:rel=child rev=parent ,而如果目前是武俠片的頻道頁,我需要轉愛情片頻道或是其它頻道時,那麼連結關係就應該是:rel=next rev=prev,當我們由一個武俠片連結到「臥虎藏龍」這部電影的文檔時連結的關係應該是:rel=head rev=toc,當由「臥虎藏龍」連結到索引的時候連結關係又變成了:rel=index rev=head。

由於目前的CSS還不能抓取rel與rev的屬性值,所以沒有辦法給不同關係的連結提供不同的樣式,所以現在rel與rev只是用來使得網頁的語意性更為完善。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板