A和Link的rel屬性的詳細介紹

不設限發表於2011-12-05
 

在<link>標籤中,“rel=stylesheet”,rel是關聯的意思,關聯的是一個樣式表(stylesheet)文件,它表示這個link在文件初始化時將被使用。一般這裡是不需要改動的   
 
     rel 和 rev 屬性可以同時在 <a> 標籤中使用。二者均描述了href所指定文件與當前頁面的關係.
rel (relationship) 屬性規定了從源文件到目標文件的關係。rev (reverse) 屬性規定了從目標文件到當前文件的反向關係。
瀏覽器可以使用它們改變錨內容的外觀,或者自動構建文件瀏覽選單。其他工具也可以使用這些屬性構建特殊的連結集合、目錄和索引等。
 
 
    關於target="_blank"去留的問題在網上已經被反覆爭議很多次了。有的說要留,有的說要去掉。主張留的一方主要是考慮到target="_blank"的屬性目前來講還沒有一個好的方式來解決,而主張去的一方則拿出了rel與JS的解決方案。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的意思其實就是當前文件,<a>的預設目標就是_self,這個屬性值一般來說是用不到的。_parent是使連結文件在父級視窗顯示,這個屬性值只在框架結構中使用,如果身本就是頂級框架,那麼其作用與_self相同。_top同樣是應用在框架中的,但是他的效果是清除框架來顯示目標文件。這對於從框架結構轉向無框架結構是很有作用的。
 
     現在我們知道了,target 是一目標顯示的屬性與瀏覽器密切相關的。那麼rel又是什麼呢, 為什麼很多人把他當作是target 的替代屬性呢?下面我們就來認識一下rel。其實不只有一個rel還有一個與之對應的屬性叫rev,這兩個屬性的意思分別是:從源文件到目標文件的關係;從目標文件到源文件的關係。這裡的源文件可以理解為連結所處在的當前文件,而目標文件也就是這個連結將要開啟的文件。這下我們應該清楚了,其實rel與rev是一種文件之前的連結關係,而並非是與瀏覽器相關的如何顯示目標文件的屬性。

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


        next,連結到下一個文件;
   prev,連結到前一個文件;
   head,連結到集合中的頂級文件;
   toc,連結到集合的目錄;
   parent,連結到源上面的文件;
   Child,連結到源下面的文件;
   index,連結到此文件的索引;
   glossary,連結到此文件的術語表;
 
其中next與prev是一組。表明了當前文件與目標文件之前的關係是同級的關係,可以寫成這樣
<a href="movie_002.htm" rel=next rev=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只是用來使得網頁的語義性更為完善。
 
另:
css樣式的rel屬性:
rel屬性用於定義連線的檔案和html文件之間的關係。rel=stylesheet指定一個固定或首選的樣式而rel="alternate    stylesheet"定義一個互動樣式。固定樣式在樣式表啟用時總被應用。
連結標籤a的rel屬性
超級連結<a>標記代表一個連結點,是英文anchor的簡寫。它的作用是把當前位置的文字或圖片連線到其他的頁面、文字或影像,這已是眾所周知了,但關於它的語法結構可能有點鮮為人知,而要用活它則必須瞭解其語法結構。<a>標記的基本語法結構是:    
   <a    
   class=type    
   id=value    
   href=reference    
   name=value    
   rel=same|next|parent|previous    
   rev=value    
   target=window    
   style=value    
   title=title    
   onclick=function    
   onmouseout=function    
   onmouseover=function>    </a>    
     從標記的語法結構可以看出,在設定一個超級連結時有很多引數可供選擇,以實現不同的連結效果,這有點出乎意料吧?!    
     其中class和id選項:用於設定連結點所屬的型別和分配的id號,通常不加以設定。最常用的兩個引數是href和name。其中href是hypertext    reference的縮略詞,用於設定連結地址。連結地址必須為url地址,如果沒有給出具體路徑,則預設路徑和當前頁的路徑相同。    連結到的檔案也分為幾種情況:如果為html檔案,則在當前瀏覽器中直接開啟;如果為可執行檔案,則直接執行或下載,我們提供下載的檔案就是用它的這種特性做的;如果為文字檔案如word格式的檔案,則在瀏覽器中開啟此檔案,並可以進行編輯加工。    
   rel:表示設定連結的關係:rel=same表示待連結的檔案與此檔案相同,rel=next表示待連結的檔案為下一頁,rel=parent表示本檔案為待連結檔案的父檔案,rel=previous則表示待連結的檔案為上一頁。    
   rev:則用於設定反向連結。    
   target:是在採用幀視窗的情況下設定連結到哪一個視窗,還有target="_bank"是表示新開一視窗開啟網頁。    
   title:用於設定連結點被選到時顯示的標題。    
   onclick:對應於一個事件,當連結點被點選後將觸發這個事件,執行對應的子程式。    
   onmouseover:與onclick類似,對應的事件在滑鼠移到連結點上時被觸發。    
   onmouseout:對應的事件在滑鼠移出鎮接點後被觸發。    
   舉幾個例子:    <a    href=http://www.blue1000.com/article/"index.htm">回到主頁</a>    
   <a    href=http://www.blue1000.com/article/"sound.wav">播放語音檔案</a>    
   <a    href="javascipt.open()">執行對應的程式</a>    
   <a    herf="document.doc">開啟對應的文件進行加工</a>

相關文章