HTML基礎------詳細瞭解a標籤

1.<a>標籤的作用

           <a> 標籤定義超鏈接,用於從一張頁面鏈接到另一張頁面。

2.<a>標籤的基本語法

   <a href="http://www.baidu.com" target="_blank" title="跳轉至百度查詢頁面">百度一下</a>

3.<a>標籤的幾個重要屬性

 3.1、href屬性

         標識跳轉的路徑地址,可以是本地路徑

<!-- 寫法一 -->
<a href="http://www.baidu.com" target="_blank" title="跳轉至百度查詢頁面">百度一下</a>

<!-- 寫法二 -->
<a href="測試.html" target="_blank" title="跳轉值測試頁面">百度一下</a>

 <a>標籤的運行機制

  3.1.1、a標籤的href屬性值如果是以http開頭的,那麼瀏覽器會馬上啓動http解釋器去解釋該網址,首先會在本地機器去找        一個 hosts文件, 如果在hosts文件上該域名沒有對應的主機,那麼瀏覽器就去到對應的dns服務器去尋找該域名對        應的主機號。如果找到了對應的主機,那麼該請求就會發給對應的主機。

  3.1.2. 如果a標籤的href屬性值沒有以任何協議開頭,那麼瀏覽就會啓動file協議解釋器去解釋該資源路徑。

  3.1.3. 如果a標籤的href屬性值並不是以http開始,而且其他 的一些協議,那麼這時候瀏覽器就回去到我們本地的註冊表         中去查找是否有處理這種協議 的應用程序,如果有,那麼馬上啓動該應用程序處理該協議。

3.2、target屬性

        表示以什麼形式打開窗口

         _blank:瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。

         _self:這個目標的值對所有沒有指定目標的 <a> 標籤是默認目標,它使得目標文檔載入

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

    _parent:這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個

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

    _top:這個目標使得文檔載入包含這個超鏈接的窗口,用 _top 目標將會清除所有被包含

       的框架並將文檔載入整個瀏覽器窗口。

3.3、title屬性

       表示懸停文本,鼠標放置文本上的文字提醒

3.4、name屬性

     用作於瞄點

<!-- 1.當前頁面瞄點使用 --> 
<p><a name="p1"></a>首頁</p>
<p><a href="#p1">跳轉至首頁</a></p>

<!-- 2.其他頁面瞄點跳轉 --> 
<p><a href="測試.html#p1">跳轉至首頁</a></p>

4.<a>標籤的僞類

     <style>

        /* 默認顏色 */
        a:link{
            color: red;
        }
        /* 訪問之後觸發的顏色 */
        a:visited{
            color: chartreuse;
        }
        /* 鼠標放上去的顏色 */
        a:hover{
            color: coral;
        }
        /* 鼠標按着不放觸發 */
        a:active{
            color: yellow;  
        }
    </style>

<a href="#" target="_blank" title="跳轉至百度查詢頁面">a標籤的僞類</a>

注意點:僞類選擇器是有順序的a:link →a:visited →a:hover →a:active,順序是有非常有講究的,沒有按照順序來效果就會無效,便於記憶 可以使用love hate ,英文翻譯過來是愛與恨,也被稱爲愛恨原則。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章