pg欢乐嘉年华中大奖视频在线观看

書名： HTML5+CSS3+JavaScript從入門到精通（微課精編版）
作者名：前端科技
本章字數： 3175字
更新時間： 2019-08-15 16:37:57

5.2　定義超鏈接

在網頁中定義超鏈接需要兩個基本要素：設置為超鏈接的網頁對象，為超鏈接指向的目標地址URL。

5.2.1　超鏈接分類

1．根據鏈接目標

如果根據URL不同，網頁中的超鏈接一般可以分為3種類型：

　內部鏈接。

　錨點鏈接。

　外部鏈接。

內部鏈接所鏈接的目標一般位于同一個網站中，對于內部鏈接來說，可以使用相對路徑和絕對路徑。所謂相對路徑就是URL中沒有指定超鏈接的協議和互聯網位置，僅指定相對位置關系。

例如，如果a.html和b.html位于同一目錄下，則直接指定文件（b.html）即可，因為它們的相對位置關系是平等的。如果b.html位于本目錄的下一級目錄（sub）中，則可以使用“sub/b.html”相對路徑即可。如果b.html位于上一級目錄（father）中，則可以使用“../ b.html”相對路徑即可，其中“..”符號表示父級目錄。還可以使用“/”來定義站點根目錄，如“/ b.html”就表示鏈接到站點根目錄下的b.html文件。

外部鏈接所鏈接的目標一般為外部網站目標，當然也可以是網站內部目標。外部鏈接一般要指定鏈接所使用的協議和網站地址，例如，http://www.mysite.cn/web2_nav/index.html，其中http是傳輸協議，www.mysite.cn表示網站地址，后面跟隨字符是站點相對地址。

錨點鏈接是一種特殊的鏈接方式，實際上它是在內部鏈接或外部鏈接基礎上增加錨標記后綴（#標記名），例如，http://www.mysite.cn/web2_nav/index.html#anchor，就表示跳轉到index.htm頁面中標記為anchor的錨點位置。

2．根據鏈接對象

如果根據超鏈接包裹的對象的不同，網頁中的鏈接又可以分為文本超鏈接、圖像超鏈接、E-mail鏈接、錨點鏈接、多媒體文件鏈接、空鏈接等。

【補充】

URL（Uniform Resource Locator，統一資源定位器）主要用于指定網上資源的位置和方式。一個URL一般由下列3部分組成。

　第1部分：協議（或服務方式）。

　第2部分：存有該資源的主機IP地址（有時也包括端口號）。

　第3部分：主機資源的具體地址，如目錄和文件名等。

例如，protocol://machinename[:port]/directory/filename，其中protocol是訪問該資源所采用的協議，即訪問該資源的方法，簡單說明如下：

　http://：超文本傳輸協議，表示該資源是HTML文件。

　ftp://：文件傳輸協議，表示用FTP傳輸方式訪問該資源。

　mailto:：表示該資源是電子郵件（不需要兩條斜杠）。

　file://：表示本地文件。

machinename表示存放該資源的主機的IP地址，通常以字符形式出現，如www.china.com.port。其中port是服務器在該主機所使用的端口號，一般情況下不需要指定，只有當服務器所使用的不是默認的端口號時才指定。directory和filename是該資源的路徑和文件名。

5.2.2　使用<a>標簽

視頻講解

HTML5使用<a>標簽定義超鏈接，設計從一個頁面鏈接到另一個頁面。<a>最重要的屬性是href屬性，它指示鏈接的目標。用法如下：

    <a href="#">鏈接文本</a>

【示例1】下面代碼定義一個超鏈接文本，單擊該文本將跳轉到百度首頁。

    <a >百度一下</a>

<a>標簽包含眾多屬性，其中被HTML5支持的屬性如表5.4所示。

表5.4　<a>標簽屬性

　提示：如果不使用href屬性，則不可以使用如下屬性：download、hreflang、media、rel、target以及type屬性。

在默認狀態下，被鏈接頁面會顯示在當前瀏覽器窗口中，可以使用target屬性改變頁面顯示的窗口。

【示例2】下面代碼定義一個超鏈接文本，當單擊該文本時將在新的標簽頁中顯示百度首頁。

    <a  target="_blank">百度一下</a>

　提示：在HTML4中，<a>標簽可以定義超鏈接，或者定義錨點。但是在HTML5中，<a>標簽只能定義超鏈接，如果未設置href屬性，則只是超鏈接的占位符，而不再是一個錨點。

用來定義超鏈接的對象，可以是一段文本，或者是一個圖片，甚至是頁面任何對象。當瀏覽者單擊已經鏈接的文字或圖片后，被鏈接的目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

【示例3】下面示例為圖像綁定一個超鏈接，這樣當用戶單擊圖像時，會跳轉到指定的網址，效果如圖5.13所示。

    <a  target="_blank">
       <img src="images/logo.png" width="300" />
    </a>

圖5.13　為圖像定義超鏈接效果

5.2.3　定義錨點鏈接

視頻講解

錨點鏈接是指定向同一頁面或者其他頁面中的特定位置的鏈接。例如，在一個很長的頁面，在頁面的底部設置一個錨點，單擊后可以跳轉到頁面頂部，這樣避免了上下滾動的麻煩。

例如，在頁面內容的標題上設置錨點，然后在頁面頂部設置錨點的鏈接，這樣就可以通過鏈接快速地瀏覽具體內容。

創建錨點鏈接的步驟如下：

第1步，創建用于鏈接的錨點。任何被定義了ID值的元素都可以作為錨點標記，就可以定義指向該位置點的錨點鏈接了。注意，給頁面標簽的ID錨點命名時不要含有空格，同時不要置于絕對定位元素內。

第2步，在當前頁面或者其他頁面不同位置定義超鏈接，為<a>標簽設置href屬性，屬性值為“#+錨點名稱”，如輸入“#p4”。如果鏈接到不同的頁面，如test.html，則輸入“test.html#p4”，可以使用絕對路徑，也可以使用相對路徑。注意，錨點名稱是區分大小寫的。

【示例】下面示例定義一個錨鏈接，鏈接到同一個頁面的不同位置，效果如圖5.14所示。當單擊網頁頂部的文本鏈接后，會跳轉到頁面底部的圖片4所在的位置。

    <!doctype html>
    <body>
    <p><a href="#p4">查看圖片4</a> </p>
    <h2>圖片1</h2>
    <p><img src="images/1.jpg" /></p>
    <h2>圖片2</h2>
    <p><img src="images/2.jpg" /></p>
    <h2>圖片3</h2>
    <p><img src="images/3.jpg" /></p>
    <h2 id="p4">圖片4</h2>
    <p><img src="images/4.jpg" /></p>
    <h2>圖片5</h2>
    <p><img src="images/5.jpg" /></p>
    <h2>圖片6</h2>
    <p><img src="images/6.jpg" /></p>
    </body>

圖5.14　定義錨鏈接

5.2.4　定義目標鏈接

視頻講解

超鏈接指向的目標對象可以是不同的網頁，也可以是相同網頁內的不同位置，還可以是一張圖片、一個電子郵件地址、一個文件、FTP服務器，甚至是一個應用程序，也可以是一段JavaScript腳本。

【示例1】<a>標簽的href屬性指向鏈接的目標可以是各種類型的文件。如果是瀏覽器能夠識別的類型，會直接在瀏覽器中顯示；如果是瀏覽器不能識別的類型，會彈出“文件下載”對話框，允許用戶下載到本地，演示效果如圖5.15所示。

    <p><a href="images/1.jpg">鏈接到圖片</a> </p>
    <p><a href="demo.html">鏈接到網頁</a> </p>
    <p><a href="demo.docx">鏈接到Word文檔</a> </p>

圖5.15　下載Word文檔

定義超鏈接地址為郵箱地址即為E-mail鏈接。通過E-mail鏈接可以為用戶提供方便的反饋與交流機會。當瀏覽者單擊郵件鏈接時，會自動打開客戶端瀏覽器默認的電子郵件處理程序（如Outlook Express），收件人郵件地址被電子郵件鏈接中指定的地址自動更新，瀏覽者不用手工輸入。

創建E-mail鏈接方法：為<a>標簽設置href屬性，屬性值為“mailto:+電子郵件地址＋?＋subject=+郵件主題”，其中subject表示郵件主題，為可選項目，例如，mailto:namee@mysite.cn?subject=意見和建議。

【示例2】下面示例使用<a>標簽創建電子郵件鏈接。

    <a href="mailto:namee@mysite.cn">namee@mysite.cn</a>

　注意：如果為href屬性設置“#”，則表示一個空鏈接，單擊空鏈接，頁面不會發生變化。

5.2.5　定義下載鏈接

視頻講解

當被鏈接的文件不被瀏覽器解析時，如二進制文件、壓縮文件等，便被瀏覽器直接下載到本地計算機中，這種鏈接形式就是下載鏈接。

對于能夠被瀏覽器解析的目標對象，用戶可以使用HTML5新增屬性download強制瀏覽器執行下載操作。

【示例】下面示例比較了超鏈接使用download和不使用download的區別。

    <p><a href="images/1.jpg" download >下載圖片</a></p>
    <p><a href="images/1.jpg" >瀏覽圖片</a></p>

　提示：目前，只有Firefox和Chrome瀏覽器支持download屬性。

5.2.6　定義圖像熱點

圖像熱點就是為圖像的局部區域定義超鏈接，當單擊該熱點區域時會觸發超鏈接，并跳轉到其他網頁或網頁的某個位置。

圖像熱點是一種特殊的超鏈接形式，常用來在圖像中設置導航。在一幅圖上定義多個熱點區域，以實現單擊不同的熱區鏈接到不同頁面。

定義圖像熱點，需要<map>和<area>標簽配合使用。具體說明如下：

　<map>：定義熱點區域。包含必需的id屬性，定義熱點區域的ID，或者定義可選的name屬性，也可以作為一個句柄，與熱點圖像進行綁定。

　<img>中的usemap屬性可引用<map>中的id或name屬性（根據瀏覽器），所以應同時向<map>添加id和name屬性，且設置相同的值。

　<area>：定義圖像映射中的區域，area元素必須嵌套在<map>標簽中。該標簽包含一個必須設置的屬性alt，定義熱點區域的替換文本。該標簽還包含多個可選屬性，說明如表5.5所示。

表5.5　<area>標簽屬性

【示例】下面示例具體演示了如何為一幅圖片定義多個熱點區域，演示效果如圖5.16所示。

　提示：定義圖像熱點，建議用戶借助Dreamweaver可視化設計視圖快速實現，因為設置坐標是一件費力不討好的煩瑣工作，可視化操作如圖5.17所示。

圖5.16　定義熱點區域

圖5.17　借助Dreamweaver快速定義熱點區域

5.2.7　定義框架鏈接

視頻講解

HTML5已經不支持frameset框架，但是它仍然支持iframe浮動框架的使用。浮動框架可以自由控制窗口大小，可以配合網頁布局在任何位置插入窗口，實際上就是在窗口中再創建一個窗口。

使用iframe創建浮動框架的用法如下：

    <iframe src="URL">

src表示浮動框架中顯示網頁的路徑，可以是絕對路徑，也可以是相對路徑。

【示例】下面示例是在浮動框架中鏈接到百度首頁，顯示效果如圖5.18所示。

    <iframe src="http://www.baidu.com"></iframe>

圖5.18　使用浮動框架

從圖5.18可以看到，浮動框架在頁面中又創建了一個窗口。在默認情況下，浮動框架的寬度和高度為220×120。如果需要調整浮動框架的尺寸，應該使用CSS樣式。

表5.6　<iframe>標簽屬性

官术网_书友最值得收藏!

HTML5+CSS3+JavaScript從入門到精通（微課精編版）

5.2 定義超鏈接

5.2.1 超鏈接分類

5.2.2 使用<a>標簽

5.2.3 定義錨點鏈接

5.2.4 定義目標鏈接

5.2.5 定義下載鏈接

5.2.6 定義圖像熱點

5.2.7 定義框架鏈接

5.2　定義超鏈接

5.2.1　超鏈接分類

5.2.2　使用<a>標簽

5.2.3　定義錨點鏈接

5.2.4　定義目標鏈接

5.2.5　定義下載鏈接

5.2.6　定義圖像熱點

5.2.7　定義框架鏈接