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

來源:互聯網
上載者:User
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只是用來使得網頁的語義性更為完善。
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.