對(duì)于鏈接在HTML中的寫法,在這里就不用詳述了,大家可以在許多初級(jí)教程中找到這方面的介紹。我們著重介紹以下幾個(gè)方面:

  一、鏈接的種類
  鏈接有兩種,一種是不同頁面間的鏈接,這種最常見。另外一種則是頁內(nèi)鏈接,我們一般稱為頁內(nèi)錨(achor)鏈。
  頁面之間的鏈接是用URL(United Resource Location:統(tǒng)一資源定位符)來表示,如果是同一個(gè)站點(diǎn)之間頁面的鏈接,則可直接根據(jù)目錄之間的關(guān)系來表達(dá)這種鏈接,而不必用“http://...”這樣的形式。如在content目錄下有一個(gè)HTML文件的鏈接鏈接到該站點(diǎn)與content目錄同級(jí)的目錄chat下的index.htm文件,鏈接則直接表示為:../chat/index.htm。如果你學(xué)過DOS命令諸如目錄操作命令的話,相信對(duì)這種表示方法不會(huì)陌生,只不過是將“\”變?yōu)椤?”。
  而對(duì)于頁內(nèi)錨鏈,有些朋友可能會(huì)疑惑了,什么叫做頁內(nèi)錨鏈,有什么用呢?對(duì)此,我們以一個(gè)很實(shí)際的例子來看一看其用處:
  如果一篇文章很長(zhǎng),并分為幾個(gè)部分,文章前面一般都列有該文章的各要點(diǎn),如果我們因要擇其中一部分閱讀而不停地拉動(dòng)滾動(dòng)條是不是費(fèi)時(shí)而費(fèi)神呢?頁面錨鏈可以讓你很方便地點(diǎn)擊要點(diǎn)鏈接,從而直接閱讀到該部分內(nèi)容。

  ●定義“錨”
  要用頁內(nèi)錨鏈,首先要定義這些所謂的“錨”,即用符號(hào)來標(biāo)識(shí)文件中某部分的位置。這要用到HTML標(biāo)記中一個(gè)很常見而又重要的屬性:id(Identification:標(biāo)識(shí)符)。用id可以來指代所屬標(biāo)記的HTML內(nèi)容。其定義形式如下:
  $#@60;Tag id=″...″$#@62;HTML內(nèi)容$#@60;/Tag$#@62;
  如 $#@60;p id=″content″$#@62;.........$#@60;/p$#@62;
  這樣,id content就表示了一個(gè)段落。
  在同一HTML文件中,除了特殊用途外,id最好是唯一的。不然,錨鏈只會(huì)連接到第一個(gè)id所標(biāo)識(shí)的內(nèi)容。

  ●加錨鏈
  定義好“錨”以后,將鏈接指向錨位置的鏈接形式如下:
  $#@60;a href=″#id″$#@62;....$#@60;/a$#@62;,即以#再加上id格式。
  如:
  $#@60;a href=″#chapter1″$#@62;第一章$#@60;/a$#@62;
  $#@60;a hr ″#chapter2″$#@62;第二章$#@60;/a$#@62;
  $#@60;a href=″#chapter3″$#@62;第三章$#@60;/a$#@62;
  ..............
  $#@60;P id=″chapter1″$#@62;
  ...第一章內(nèi)容..
  $#@60;/P$#@62;
  $#@60;P id=″chapter2″$#@62;
  ...第二章內(nèi)容..
  $#@60;/P$#@62;
  $#@60;P id=″chapter3″$#@62;
  ...第三章內(nèi)容..
  $#@60;/P$#@62;

  ●引用不同頁面內(nèi)的“錨”
  可能有些朋友要問,以上加的錨鏈都是在同一個(gè)頁面之間的,如果是一個(gè)頁面中的錨鏈接到同站點(diǎn)或另一個(gè)網(wǎng)站的另一個(gè)頁面中的錨怎么辦?很簡(jiǎn)單,形式為:
  $#@60;a href=″URL#id″$#@62;....$#@60;/a$#@62;
  如 $#@60;a href=″http://netschool.yesky.com/homepage/index.htm#block1″$#@62;指向地址:http://netschool.yesky.com/homepage/index.htm文件的第一部分$#@60;/a$#@62;

  二、鏈接的相關(guān)屬性
  ●用CSS樣式類改變鏈接外觀
  在與網(wǎng)友們交流過程中,他們問到的有關(guān)鏈接的問題最多大概集中于:一些網(wǎng)站頁面當(dāng)鼠標(biāo)移動(dòng)時(shí)鏈接字會(huì)變顏色、字體、出現(xiàn)下劃線等,看起來很精彩,是怎么做的呢?要用到程序嗎?
  答案:非也,鏈接的CSS可以解你之惑!
  CSS(層疊樣式單)它主要是用來定義主頁內(nèi)容相關(guān)標(biāo)記的顯示風(fēng)格及排列等,可以針對(duì)不同的標(biāo)記定義不同的樣式類,并可以形成樣式表文件供整個(gè)網(wǎng)站的主頁文件調(diào)用,或者在某個(gè)主頁中單獨(dú)定義,這樣,可實(shí)現(xiàn)在網(wǎng)站風(fēng)格統(tǒng)一的前提下,而又各有變化,哲學(xué)中物質(zhì)的統(tǒng)一性與多樣性的對(duì)立統(tǒng)一之說可謂一語中的。在天極網(wǎng)的網(wǎng)頁陶吧欄目(http://homepage.yesky.com)中有很多關(guān)于CSS的講述,這里不再贅述,單講鏈接的幾個(gè)重要的CSS屬性:
  hover:當(dāng)鼠標(biāo)懸停在鏈接上方時(shí)
  active:當(dāng)點(diǎn)擊鏈接時(shí)
  visited:當(dāng)點(diǎn)擊鏈后
  這樣就構(gòu)成點(diǎn)擊鏈接的全過程:移動(dòng)到鏈接上→點(diǎn)擊→點(diǎn)擊后,我們可以在樣式表中定義三個(gè)不同的階段鏈接的外觀,形式如下:
  $#@60;style$#@62;
  A{
  .....
  }
  A:hover{
  .....
  }
  A:active{
  .....
  }
  A:visited{
  .....
  }
  $#@60;/style$#@62;
  上面,其中A{...}的定義表示鏈接在正常狀態(tài)下的顯示,這樣,我們就可以用不同的樣式表CSS類型來確定一個(gè)站點(diǎn)或特定頁面的鏈接顯示特性。
  以下是一個(gè)例子:
  A {
  font-size : 9pt;font-weight : normal;font-style : normal;color: #0066CC;text-decoration : none;
  }
  A:Hover {
  font-size : 9pt;
  font-weight : normal;
  font-style : normal;
  color: #0066CC;
  text-decoration : underline;
  }
  A:Active {
  font-size : 9pt;
  font-weight : normal;
  font-style : normal;
  color:red;
  text-decoration : none;
  }
  A:Visited {
  font-size : 9pt;
  font-weight : normal;
  font-style : normal;
  color: #0066CC;
  text-decoration : none;
  }
  上面的例子中專門對(duì)鏈接標(biāo)記定義了相應(yīng)的樣式類,并對(duì)鏈接的幾種不同狀態(tài)對(duì)鏈接字的字體、顏色、修飾(如加下劃線)等也作了定義。
(未完待續(xù))

標(biāo)簽:鏈接大觀

相關(guān)文章

隨機(jī)推薦