DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 第 4 章 超鏈接和路徑
第 4 章 超鏈接和路徑
編輯:HTML5教程     

學習要點:

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>

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved