詳解HTML的a標籤(超連結標籤)

2022-09-02 04:57:13 字數 2584 閱讀 3808

1、什麼是標籤

2、標籤的幾個重要屬性

3、a標籤的執行機制

4、a標籤常用的協議

5、超連結標籤的樣式問題——a標籤的偽類選擇器的書寫順序

標籤定義超連結,用於從一張頁面鏈結到另一張頁面。

元素最重要的屬性是 href 屬性,它指示鏈結的目標。

規定鏈結指向的頁面的 url。

w3school

規定在何處開啟鏈結文件。

a:自定義開啟錨點

target的特殊值:有 4 個保留的目標名稱用作特殊的文件重定向操作:

_self:這個目標的值對所有沒有指定目標的 標籤是預設目標,它使得目標文件載入

並顯示在相同的框架或者視窗中作為源文件。這個目標是多餘且不必要的,除非和文件標題

標籤中的 target 屬性一起使用。

引用是在視窗或者在頂級框架中,那麼它與目標 _self 等效。

的框架並將文件載入整個瀏覽器視窗。

_blank:瀏覽器總在乙個新開啟、未命名的視窗中載入目標文件。

視窗或者目標都會被瀏覽器忽略,因此,不要將下劃線作為文件中定義的任何框架 name 或

id 的第乙個字元。

規定錨的名稱。(html5不支援)

本章講解的內容是 ... ...

media 屬性規定目標 url 是為什麼型別的媒介/裝置進行優化的。

該屬性用於規定目標 url 是為特殊裝置(比如 iphone)、語音或列印媒介設計的。

該屬性可接受多個值。

只能在 href 屬性存在時使用。

開啟用於列印的 media 屬性頁面

1、a標籤的href屬性值如果是以http開頭的,那麼瀏覽器會馬上啟動http直譯器去解釋

該**,首先會在本地機器去找乙個hosts檔案, 如果在hosts檔案上該網域名稱沒有對應的主機

,那麼瀏覽器就去到對應的dns伺服器去尋找該網域名稱對應的主機號。如果找到了對應的主機,

那麼該請求就會發給對應的主機。

2. 如果a標籤的href屬性值沒有以任何協議開頭,那麼瀏覽就會啟動file協議直譯器去解

釋該資源路徑。

3. 如果a標籤的href屬性值並不是以http開始,而且其他 的一些協議,那麼這時候瀏覽

器就回去到我們本地的登錄檔中去查詢是否有處理這種協議 的應用程式,如果有,那麼馬上啟

動該應用程式處理該協議。

1、file: 

file協議(檔案協議)這種協議主要是用於搜尋本地機器的資源檔案的。

格式:file:\\\f:\美女\1.jpg

2、郵件的協議: mailto

3、迅雷的協議: thunder

5.1、a標籤的多重狀態

對於元素,我們可以用「多重人格」來形容它。對於該標籤,它一共有五種狀態::link, :visited, :hover, :focus, :active.

「:link」可以用於宣告未訪問狀態鏈結的樣式;

「:visited」可以用於宣告已經訪問鏈結的樣式;

「:hover」可以用於宣告滑鼠懸停在鏈結上的樣式;

「:focus」可以用於宣告瀏覽器焦點懸停在鏈結上的樣式(通過鍵盤選擇鏈結);

「:active」可以用於宣告瀏覽器點選鏈結的樣式。

注意:冒號前後不要出現空格

一般a:hover和a:visited鏈結的狀態(顏色、下劃線等)應該是相同的。

link、visited、active分別對應body元素的link、vlink、alink這三個屬性。

四個「狀態」的先後過程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能設定有無下劃線(總是有的)。

5.2、鏈結(a標籤狀態)定義的順序

沒有規矩不成方圓,雖然鏈結定義寫好了,但它也是有規則的,如果這四項的書寫順序稍有差錯,鏈結的效果可能就沒有了,所以每次定義鏈結樣式時務必確認定義的順序,link--visited--hover-active,也就是我們常說到的love hate原則(大寫字母就是它們的首字母)。

老外總結了乙個便於記憶的「愛恨原則」(love/hate),即四種偽類的首字母:lvha。定義a鏈結樣式的正確的順序:a:link、a:visited、a:hover、a:active。若沒有按照這樣的順序的話,有的狀態的樣式會被放置在後面的樣式覆蓋而導致像沒有觸發一樣沒有效果,如:如果hover放在visited之後,則就算我放上去變色了,但是同時這個標籤也具有visited狀態以及其的效果,會覆蓋了hover的效果。

為了符合瀏覽器解釋css遵循的"就近原則"。我們在定義css中,宜將最一般的條件放在最上面,並依次向下,最下面放最特殊的。

在w3c規範中,也規定了鏈結的宣告順序:

在 css 定義中,a:hover 必須被置於 a:link 和 a:visited 之後,才是有效的。

在 css 定義中,a:active 必須被置於 a:hover 之後,才是有效的。

a:link、a:visited、a:hover、a:active

HTML基礎(超連結標籤 URL)

超連結標籤 返回 傳送郵件 定義定位標記 重新開啟網頁 開啟資源所在目錄 url 統一資源定位 uniform resource locator url組成 協議,主機名,埠號,資源名 例如 相對url a.html a.html a.html a.html 為url指定引數 引數1 引數值 引數2...

HTML基礎(超連結標籤 URL)

超連結標籤 返回 傳送郵件 定義定位標記 重新開啟網頁 開啟資源所在目錄 url 統一資源定位 uniform resource locator url組成 協議,主機名,埠號,資源名 例如 相對url a.html a.html a.html a.html 為url指定引數 引數1 引數值 引數2...

2 5超連結標籤

2.5.2超連結型別 2.5.3 超連結路徑 2.5.4 內部書籤 1.定義書籤 2.5.5 target屬性 要在網頁中建立超連結,可以使用標籤,其語法 鏈結標題 target屬性指定用於開啟鏈結的目標視窗,預設方式是原視窗。內部鏈結是指 內部檔案之間的鏈結,即在同 乙個站點下不同網頁頁面之間的鏈...