1. 程式人生 > >HTML超連結和錨點

HTML超連結和錨點

一、超連結

< a>標籤代表html裡的連結

1.URL

講到超連結,URL就不得不提了,URL神通廣大,不過我這裡只是淺談一下URL,URL除了網頁,還有其他檔案(pdf,文字等),還可以是指向該html的某個位置,還可以是Email地址

什麼是URL

既然是淺談,其實我們就可以把URL簡單的看成一個網址或者地址,它在< a>標籤下的使用:< a href=”URL”>< /a>

定義URL

URL稱為統一資源定位符,在html很多標籤下都是需要URL這個定位符的,如圖片,表單,還有js中

URL的組成

協議:http
主機:baidu.com(這裡以百度為例)
埠:80(預設)(若是ftp伺服器,則是21埠)
資源:即路徑:aaa/html/w_linux.html
引數:?變數名=值&變數名=值……

URL絕對與相對路徑

1.相對路徑(周邊檔案):相對於你現在的位置,去找上一個路徑或下一個及多個路徑。例:
< a href=”w_linux.html”>找當前目錄下的w_linux.html
< a href=”./w_linux.html”>./是預設的 .代表當前路徑,與上面相同
< a href=”./aaa/bbb/w_linux.html”>在當前路徑下找下一級的html
< a href=”../aaa/w_linux.html”>..代表上一級目錄

2.絕對路徑(從根開始找)
http://www………..

二、a標籤常用屬性

1.href

代表一個URL的連結源(點選後連結到什麼地方)

2.target

1.target=_blank:點選連結的時候,是新的瀏覽器視窗開啟,而不是在本瀏覽器內開啟
2.target=_self:這是預設的,也就是在本瀏覽器中開啟
還有兩個屬性不常見,話不多說。

3.title

代表連結的附加提示訊息
< a href=”URL” title=”提示資訊”>連結名字< a>
例:這裡寫圖片描述
效果:這裡寫圖片描述

三、錨點(定位作用)

錨點:定位網頁內部的連結,簡單的說就是你在這個網頁裡點選一個連結,會跳到該網頁裡的某個位置

1.使用

1.< a name=”one”>< /a>放在定位的位置處,用name屬性是給該位置命名
< a name=”two”>< /a>
2.< a href=”#one”>連結名< /a>,”#”這個符號是區分是在本網頁找位置,否則伺服器會誤認為找某個檔案或其他網站
< a href=”#two”>連結名< /a>
3.< a href=”#”>< /a>或< a href=”“>< /a>都代表點選後回到頂部(但是,如果不寫#會很危險,所以只要用第一個有#的就好
4.其實也可以從另一個html中找這裡的位置,比如這裡的叫w_linux.html,另一個叫text.html,那就在text.html中寫< a href=”w_linux.html#one”>找到w_linux.html中的one位置< /a>

四、綜述程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿水的阿里</title>
</head>
<body link="#8a2be2" bgcolor="#f0f8ff" alink="#8a2be2" vlink="blue" text="#8a2be2">
    <h1><em><strong><u>阿水的阿里</u></strong></em></h1>
    <a href="http://my.csdn.net/w_linux" ><h2>目錄</h2></a>
    <br>
    <ol>
        <li>
            <a href="#one" title="這裡是第一篇"> 第一篇</a>
        </li>
        <li>
            <a href="#two" title="這裡是第二篇">第二篇</a>
        </li>
        <li>
            <a href="#three" title="這裡是第三篇" >第三篇</a>
        </li>
    </ol>
<hr>

    <a name="one"></a>
    <h3><strong><u>第一篇</u></strong></h3>
    這裡新增第一篇的內容資訊

    <a name="two"></a>
    <h3>第二篇</h3>
    這裡新增第二篇的內容資訊

    <a name="three"></a>
    <h3>第三篇</h3>
    這裡新增第三篇的內容資訊

   <hr>
    <a href="">返回</a>
</body>
</html>

五、效果圖

這裡寫圖片描述