前端基礎 HTML 第七章建立超連結 ----暑假學習第四天

第七章建立超連結

超連結(hyperlink),每個網站都是由衆多網頁組成，網頁之間通常都是通過連結方式互相關聯。超連結有:外部連結，電子郵件連結，錨點連結，空連結，腳本連結。

7.1 超級連結的基本知識

每個網頁都有一個唯一的位址，稱為統一資源定位符(URL)。然而當在網頁中建立内部連結時，一般不會指定連結文檔的完整URL,而是指定一個相對目前文檔或站點根檔案夾的相對路徑。

7.1.1 絕對路徑

[1]

7.1.2 相對路徑

相對路徑就是指由這個檔案所在的路徑引起的跟其它檔案（或檔案夾）的路徑關系。使用相對路徑可以為我們帶來非常多的便利。HTML絕對路徑(absolute path)指帶域名的檔案的完整路徑。

如果連結指向的文檔沒有位于目前目錄的子級目錄中，則可以利用...符号來表示目前位置的父級目錄，利用多個...符号可以表示更高的父級目錄，進而建構出目錄的相對位置

插入圖像時盡量使用相對路徑

7.2内部連結

内部連結指連結的對象是在同一個網站中的資源。

文法: <a href="連結位址">......</a>

eg:

<html>
<head>
  <meta charset="UTF-8">
  <title>内部連結</title>
  
</head>
<body>
  腦筋急轉彎 
  <p>
  1.<a href="1">為什麼青蛙會飛？</a>
  <p>
  2.<a href="2">為什麼蛇會飛？</a>
  <p>
  3.<a href="3">為什麼老鷹會飛？</a>
  
</body>
</html>

運作結果:

目錄結構：

7.2.2 連結的目标視窗

預設情況下超連結在原來的浏覽器視窗中打開，可以使用target屬性來控制打開的目标視窗

文法：<a href="連結目标" target="目标視窗的打開方式">

說明:

目标視窗設定

屬性值	含義
_self	在目前頁面中打開連結(預設)
_blank	在一個全新的空白視窗中打開連結
_top	在頂層架構中打開連結，即在根架構中打開連結
_parent	在目前架構的上一層裡打開連結

eg:

<html>
<head>
  <meta charset="UTF-8">
  <title>内部連結</title>
  
</head>
<body>
  腦筋急轉彎
  <p>
  1.<a href="1" target="_self">為什麼青蛙會飛？</a>
  <p>
  2.<a href="2" target="_blank">為什麼蛇會飛？</a>
  <p>
  3.<a href="3" target="_top">為什麼老鷹會飛？</a>
  <p>
  4.<a href="3" target="_parent">為什麼老鷹會飛？</a>
  
</body>
</html>

運作結果：

點1.後目前頁面打開

點2後新頁面

點3後目前頁面

點4後目前頁面

7.3 錨點連結

網站中經常會有一些文檔頁面由于文本或者圖像内容過多，導緻頁面過長。通路者需要不停地拖動浏覽器上的滾動條來檢視文檔中的内容。為了友善使用者檢視文檔中的内容，在文檔中需要進行錨點連結。

7.3.1 建立錨點

錨點就是指在給定名稱的一個網頁中的某一位置，在建立錨點連結前首先要建立錨點。

文法：<a name="錨點的名稱"></a>

說明：利用錨點名稱可以連結到相應位置。這個名稱可以是數字，英文，最好區分大小寫。同一個網頁中可以有無數個錨點，但是不能有相同名稱的兩個錨點。

eg:

<html>
<head>
  <meta charset="UTF-8">
  <title>内部連結</title>
  
</head>
<body>
  <table width="500" border="0" align="center" cellpadding="5" cellspacing="1">
    <tr>
      <td>商品名稱</td>
      <td>産品特點:</td>
      <td>産品規格</td>
    </tr>
    <tr>
      <td colspan="3"> </td>
    </tr>
    <tr>
      <td colspan="3">
        <!--錨點1-->
        <p><a name="1"></a><font color="red">商品名稱:</font></p>
        <P>彩音盒</P>
        <!--錨點2-->
        <p><a name="2"></a><font color="red">産品特點:</font></p>
        <p>          65536色全彩色OLED顯示<br>
        容量 128MB/256MB/512/MB/1GB(内置)<br>
        <!--錨點3-->
        <p><a name="3"></a><font color="red">産品規格:</font></p>
        <p>
        Type-C高速資料端口、讀卡器<br>
        支援1G、2G、4G獨立顯示卡<br>
        支援動作回饋式VR（虛拟現實）應用（8G 獨顯）<br>        
        </p>
      </td>
    </tr>
  </table>
</body>
</html>

運作結果：故意把視窗拉小

7.3.2 連結同一頁面中的錨點

建立了錨點以後，就可以建立到錨點的連結，需要用#号以及錨點名稱作為href屬性值

文法：<a href="#錨點名稱">...</a>

說明:href屬性值為頁面中建立的錨點的名稱，可以連結到頁面中的不同位置

eg:

<html>
<head>
  <meta charset="UTF-8">
  <title>内部連結</title>
  
</head>
<body>
  <table width="500" border="0" align="center" cellpadding="5" cellspacing="1">
    <tr>
      <td><a href="#1">商品名稱</a></td>
      <td><a href="#2">産品特點</a></td>
      <td><a href="#3">産品規格</a></td>
    </tr>
    <tr>
      <td colspan="3"> </td>
    </tr>
    <tr>
      <td colspan="3">
        <!--錨點1-->
        <p><a name="1"></a><font color="red">商品名稱:</font></p>
        <P>彩音盒</P>
        <!--錨點2-->
        <p><a name="2"></a><font color="red">産品特點:</font></p>
        <p>          65536色全彩色OLED顯示<br>
        容量 128MB/256MB/512/MB/1GB(内置)<br>
        <!--錨點3-->
        <p><a name="3"></a><font color="red">産品規格:</font></p>
        <p>
        Type-C高速資料端口、讀卡器<br>
        支援1G、2G、4G獨立顯示卡<br>
        支援動作回饋式VR（虛拟現實）應用（8G 獨顯）<br>        
        </p>
      </td>
    </tr>
  </table>
</body>
</html>

運作結果：

點産品規格後

效果就是導航窗格

7.3.3 連結到其他頁面中的錨點

文法： <a href="連結的檔案位址#錨點名稱">...</a>

說明：前面要加檔案所在位置，以連結到該檔案上的錨點

eg:

<html>
<head>
  <meta charset="UTF-8">
  <title>連結到不同頁面的錨點</title>
  
</head>
<body>
  <table width="500" border="0" align="center" cellpadding="5" cellspacing="1">
    <tr>
      <td><a href="錨點.html#1">商品名稱</a></td>
      <td><a href="錨點.html#2">産品特點</a></td>
      <td><a href="錨點.html#3">産品規格</a></td>
    </tr>
  </table>
</body>
</html>

<html>
<head>
  <meta charset="UTF-8">
  <title>錨點</title>
  
</head>
<body>
  <table width="500" border="0" align="center" cellpadding="5" cellspacing="1">
    <tr>
      <td colspan="3">
        <!--錨點1-->
        <p><a name="1"></a><font color="red">商品名稱:</font></p>
        <P>彩音盒</P>
        <!--錨點2-->
        <p><a name="2"></a><font color="red">産品特點:</font></p>
        <p>          65536色全彩色OLED顯示<br>
        容量 128MB/256MB/512/MB/1GB(内置)<br>
        <!--錨點3-->
        <p><a name="3"></a><font color="red">産品規格:</font></p>
        <p>
        Type-C高速資料端口、讀卡器<br>
        支援1G、2G、4G獨立顯示卡<br>
        支援動作回饋式VR（虛拟現實）應用（8G 獨顯）<br>        
        </p> 
      </td>
    </tr>
  </table>
</body>
</html>

運作結果:

點商品名稱後:

點産品規格後

7.4 外部連結

外部連結指跳轉到目前網站之外的資源中

7.4.1 連結到外部網站

網頁中最常用的利用HTTP協定進行外部連結是在設定友情連結時

文法：<a href="http://......">......</a>

eg：

<html>
<head>
  <meta charset="UTF-8">
  <title>連結到不同頁面的錨點</title>
  
</head>
<body>
  <p>友情連結</p>
  <p><a href="http://www.baidu.com">百度一下</a></p>
  <p><a href="http://www.sohu.com">搜狐</a></p>
  <p><a href="http://www.sina.com">新浪</a></p>
</body>
</html>

運作結果：

點新浪後

7.4.1 連結到E-mail

文法:<a href="mailto:郵件位址">......</a>

說明:mailto:後面輸入電子郵件位址

eg:

<html>
<head>
  <meta charset="UTF-8">
  <title>連結到不同頁面的錨點</title>
  
</head>
<body>
  <p>歡迎你浏覽我的部落格，如果你對我的博文有什麼好的建議，歡迎來信告訴我，祝您學的愉快!</p>
  <p><a href="mailto:[email protected]">聯系我</a></p>
</body>
</html>

運作結果：

點聯系我

7.4.3 連結到FTP

FTP代表檔案傳輸協定，一個FTP站點通常包含一些容易上傳和下載下傳檔案的檔案目錄。大部分FTP網站需要一個使用者名和密碼來進入網站。

文法：<a href="ftp://ftp位址">......</a>

說明：ftp://表明這是一個關于ftp協定的外部連結，在其後輸入網站的網址即可

eg:

<html>
<head>
  <meta charset="UTF-8">
  <title>連結到FTP位址</title>
  
</head>
<body>
  <a href="ftp://ftp.tsinghua.edu.cn ">進入清華大學FTP網站</a>
</body>
</html>

運作結果：

點選一直在加載，暫時進不去

7.4.4 連結到Telnet

Telnet 常常用來登陸一些BBS網站，也是一種遠端登陸方式

文法： <a href="telnet://位址">......</a>

說明：這種連結方式與其他兩種類似，不同的就是它登入的是Telnet站點

7.4.5 下載下傳檔案

如果要在網站中下載下傳資料，就需要為檔案提供下載下傳連結，在某些網站中隻需要單擊一個連結就可以自動下載下傳檔案。

文法：<a href="檔案位址" download="下載下傳後的檔案名">...</a>

說明：檔案位址可以使絕對位址，也可以是相對位址。超連結指向的不是一個網頁檔案，而是zip,mp3,exe等檔案。download屬性對下載下傳的檔案命名，download屬性不可少

eg:

<html>
<head>
  <meta charset="UTF-8">
  <title>下載下傳檔案</title>
  
</head>
<body>
  <a href="audio/jda.ogg" download="music.ogg">點我下載下傳</a>
</body>
</html>

運作結果：

第七章總結

7.2 内部連結

<a href="本網站所在伺服器上另一個檔案的路徑" target="新頁面打開的方式"></a>

7.3錨點連結(導航窗格)

<!!--建立錨點-->
<p><a name="錨點名稱1">XXX1</a>
<p><a name="錨點名稱2">XXX2</a>
<p><a name="錨點名稱3">XXX3</a>

<!--建立錨點連結-->
<p><a href="#錨點名稱1">XXX1</a><br>
内容1<br>
内容2<br>
内容3<br>
<p><a href="#錨點名稱2">XXX1</a>
内容1<br>
内容2<br>
内容3<br>
<p><a href="#錨點名稱3">XXX1</a>
内容1<br>
内容2<br>
内容3<br>

<!--連結到其他頁面中的錨點-->
<p><a href="其他頁面.html#錨點名稱1">XXX1</a><br>
内容1<br>
内容2<br>
内容3<br>
<p><a href="其他頁面.html#錨點名稱2">XXX1</a>
内容1<br>
内容2<br>
内容3<br>
<p><a href="其他頁面.html#錨點名稱3">XXX1</a>
内容1<br>
内容2<br>
内容3<br>

7.4外部連結

<a href="http://網站位址">...</a>
<a href="mailto:郵箱位址">...</a>
<a href="ftp://ftp網站位址">...</a>
<a href="telnet://BBS網站位址">...</a>
<a href="檔案路徑" download="檔案重命名">...</a>    <!--下載下傳檔案-->

前端基礎 HTML 第七章建立超連結 ----暑假學習第四天

第七章建立超連結

7.1 超級連結的基本知識

7.1.1 絕對路徑

7.1.2 相對路徑

7.2内部連結

7.2.2 連結的目标視窗

7.3 錨點連結

7.3.1 建立錨點

7.3.2 連結同一頁面中的錨點

7.3.3 連結到其他頁面中的錨點

7.4 外部連結

7.4.1 連結到外部網站

7.4.1 連結到E-mail

7.4.3 連結到FTP

7.4.4 連結到Telnet

7.4.5 下載下傳檔案

第七章總結

7.2 内部連結

7.3錨點連結(導航窗格)

7.4外部連結

繼續閱讀

Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動

HTML addEventListener() 方法和attachEvent()差別分析

web前端布局練手項目

Django之驗證碼（十七）驗證碼

Vue項目 - 單檔案元件和Vue中的路由

龍珠訓練營task04

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

前端基礎 HTML 第七章 建立超連結 ----暑假學習第四天

第七章 建立超連結

7.1 超級連結的基本知識

7.1.1 絕對路徑

7.1.2 相對路徑

7.2内部連結

7.2.2 連結的目标視窗

7.3 錨點連結

7.3.1 建立錨點

7.3.2 連結同一頁面中的錨點

7.3.3 連結到其他頁面中的錨點

7.4 外部連結

7.4.1 連結到外部網站

7.4.1 連結到E-mail

7.4.3 連結到FTP

7.4.4 連結到Telnet

7.4.5 下載下傳檔案

第七章總結

7.2 内部連結

7.3錨點連結(導航窗格)

7.4外部連結

繼續閱讀

前端基礎 HTML 第七章建立超連結 ----暑假學習第四天

第七章建立超連結