超鏈接,也叫做「連結」。超連結在我們瀏覽的網頁上可以說是無所不在,我們點擊網頁上某個連結地址,也就是連結到另一個網頁,這就是超連結在運作。
使用 標籤來定義超鏈接,語法:
顯示的文字或圖片
例子:
XML/HTML Code複製內容到剪貼簿
- a href="http://www. baidu.com/">連結至百度a>a>
🎜>
瀏覽器顯示效果:
連結至百度
當我們點擊上面 「連結至百度」 字樣時,瀏覽器就會轉向百度首頁。
超連結屬性
超連結屬性:
href 連結位址。可以是絕對網頁位址或相對地址。
target 連結目標。取值為 _blank 會在新視窗中開啟連結位址,缺省則使用目前視窗開啟連結位址。 name 錨鏈接,這個我們下面會單獨講到。
相對網頁連結網址:
XML/HTML Code
複製內容到剪貼簿
-
a href="/css" target="_blank">DIV;>DIV>
DIV;
a
>
這個例子使用了相對地址,而在上面連結至百度的例子,則使用了絕對地址。
增加了 target 屬性的例子:
-
XML/HTML Code複製內容到剪貼簿
a href="http://www. baidu.com/" target="_blank">
a
>
再次點擊該連結時,瀏覽器會啟用新頁面開啟連結位址,而原始頁面視窗得以保留。
提示
當一個連結地址與當前主題或流程並不十分緊密時,通常會啟用 target="_blank" 屬性,否則盡量不要啟用新窗口,以便給瀏覽者以友好的瀏覽體驗。
如果頁面是由幾個頁框框組成,那麼 target 屬性還可以有其他取值
郵件超連結郵件連結範例:
- XML/HTML Code複製內容到剪貼簿
a href=href=href=
href
>聯絡xyz站的站長a>a>a> 🎜>
點擊此鏈接,將啟用預設的郵件用戶端撰寫郵件。
錨鏈接
錨鏈接是指頁面內的鏈接,但現在很多人也把文字超鏈接叫做錨鏈接。
我們舉個例子解釋一下錨的作用:
例如我們有一篇文章寫得很好,有很多人都在文章後面作了評論,而發表評論的窗口一般都在評論結束最底下的位置。網站會在發表評論的地方設置一個錨鏈接,而在顯示評論的位置設計一個鏈接到錨鏈接,如:“發表評論”。如果有人不想查看別人留下的評論而想立刻跳到評論輸入窗口,那麼點擊「發表評論」即可在本業內快速跳到評論輸入窗口。這種設計無疑地提高了瀏覽者的使用者體驗。
使用錨連結的範例
建立錨點:
XML/HTML Code複製內容到剪貼簿
- p>a name="comment">aa 🎜>p>
建立連結至錨的超連結位址:
XML/HTML Code
複製內容到剪貼簿
-
p>a href="#comment">連結至comment錨aaaaaaaaaaa
a
>
p
>
從例子可以看出,造訪一個錨,就是在連結位址後面加上「#」號和錨的名字。上面這個例子由於是連結到本頁的錨,因此前面的連結位址被忽略(註:實際上是相對位址被忽略,在此不做展開討論)。
提示- 如果你要實驗這個錨標記的用法,那麼注意一點,將連結至錨的超連結和錨標記之間保持足夠的網頁空間,才能看出效果。可以用我們上面學到的換行標籤來創造足夠的上下空白空間來進行測試。 你也可以建立一個連結至其他頁面的錨標記,例如:
XML/HTML Code複製內容到剪貼簿
p>a href="http://www.abc.com/#test">連結至錨
a
>
p> 🎜>> 🎜>> 🎜>> 🎜>>
當然需要在 www.abc.com 這個頁面有這個 test 錨標記才行,否則只會連結至 www.abc.com 頁面而忽略這個錨標記。