學習要點:
1.超鏈接的屬性
2.相對與絕對路徑
3.錨點設置
主講教師:李炎恢
本章主要探討 HTML5 中文本元素最重要的一個超鏈接,探討它自身的屬性以及路徑問題。
一.超鏈接的屬性
<a>元素屬於文本元素,有一些私有屬性或者叫局部屬性。那麼,相對應的還有通用屬性或叫做全局屬性。這方面的知識,後面會詳細探討。
屬性名稱
說明
href
指定<a>元素所指資源的 URL
hreflang
指向的鏈接資源所使用的語言
media
說明所鏈接資源用於哪種設備
rel
說明文檔與所鏈接資源的關系類型
target
指定用以打開所鏈接資源的浏覽環境
type
說明所鏈接資源的 MIME 類型(比如 text/html)
在這幾個屬性當中,只有 href 和 target 一般比較常用,而 href 是必須要用的。其他幾個屬性,在<a>元素使用較少,將在 CSS 章節再探討。
1.href 屬性
<a href="http://www.baidu.com">百度</a>
解釋:href 是必須屬性,否則<a>元素就變成空元素了。如果屬性值是 http://開頭的 URL,意味著點擊跳轉到指定的外部網站。
2.target 屬性
<a href="http://www.baidu.com" target="_blank">百度</a>
解釋:target 屬性告訴浏覽器希望將所鏈接的資源顯示在哪裡。
屬性名稱
說明
_blank
在新窗口或標簽頁中打開文檔
_parent
在父窗框組(frameset)中打開文檔
_self
在當前窗口打開文檔(默認)
_top
在頂層窗口打開文檔
這四種最常用的是_blank,新建一個窗口。而_self 是默認,當前窗口打開。_parent和_top 是基於框架頁面的,分別表示在父窗口打開和在整個窗口打開。而 HTML5 中,框架基本被廢棄,只能使用<iframe>元素,且以後大量結合 JavaScript 和 PHP 等語言配合,框架用的就很少了。
二.相對與絕對路徑
所謂相對路徑,就是相對於鏈接頁面而言的另一個頁面的路徑。而絕對路徑,就是直接從 file:///磁盤符開始的完整路徑。我們在同一個目錄下做上兩個頁面,其中一個頁面鏈接到另一個頁面。
1.絕對路徑
<a href="file:///D:/備課/HTML5 第一季/code/index2.html">index2</a>
解釋:首先是 file:///開頭,然後是磁盤符,然後是一個個的目錄層次,找到相應文件。這種方式最致命的問題是,當整個目錄轉移到另外的盤符或其他電腦時,目錄結構一旦出現任何變化,鏈接當即失效。
2.相對路徑
<a href="index2.html">index2</a>
解釋:相對路徑的條件是必須文件都在一個磁盤或目錄下,如果是在同一個目錄下,直接屬性值就是被鏈接的文件名.後綴名。如果在同一個主目錄下,有多個子目錄層次,那就需要使用目錄結構語法。
3.目錄語法
同一個目錄:index2.html 或./index2.html;
在子目錄:xxx/index2.html;
在孫子目錄:xxx/xxx/index2.html;
在父目錄:../index2.html;
在爺爺目錄:../../index2.html;
三.錨點設置
超鏈接也可用來將同一個文檔中的另一個元素移入視野。通過屬性 id 或 name 實現錨點定位。
//鏈接
<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>
//錨點 <a name="1"></a><a id="3"></a>