超鏈接語(yǔ)法介紹、路徑&部分應(yīng)用（萌新必看）

發(fā)表時(shí)間：2020-10-17

發(fā)布人：葵宇科技

瀏覽次數(shù)：62

《個(gè)人學(xué)筆記六》

超鏈接的語(yǔ)法

超鏈接，即超級(jí)鏈接，就是指按內(nèi)容鏈接。超級(jí)鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。各個(gè)網(wǎng)頁(yè)鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。在超文本文檔中，超鏈接用標(biāo)記語(yǔ)言的標(biāo)簽指出。

超鏈接是Web頁(yè)面區(qū)別于其他媒體的重要特征之一，網(wǎng)頁(yè)瀏覽者只要單擊網(wǎng)頁(yè)中的超鏈接就可以自動(dòng)跳轉(zhuǎn)到超鏈接的目標(biāo)對(duì)象，且超鏈接的數(shù)量是不受限制的。文本超鏈接是分配目標(biāo)URL的字或短語(yǔ)，圖片超鏈接是為整個(gè)圖片分配默認(rèn)超鏈接，也可以為圖片分配一個(gè)或多個(gè)熱點(diǎn)。（借鑒于百度知道）
1.語(yǔ)法說(shuō)明
超鏈接a標(biāo)記以< a><開(kāi)頭< /a>結(jié)尾.期間內(nèi)容位超鏈接標(biāo)題。超鏈接由目的地址、鏈接標(biāo)題、打開(kāi)位置三部分組成。
2.屬性說(shuō)明

href：超鏈接指向的目標(biāo)文件。
name：規(guī)定錨（anchor）的名稱。
title：指向鏈接的提示信息。
target：指定打開(kāi)的目標(biāo)文件，如表所示：

屬性值說(shuō)明_self帶當(dāng)前框架中打開(kāi)鏈接_blank在一個(gè)全新的空白窗口中打開(kāi)鏈接_top在頂層框架中打開(kāi)鏈接，也可以理解為在根跟框架中打開(kāi)鏈接_parent在當(dāng)前框架的上一層打開(kāi)鏈接_framename在指定的框架或浮動(dòng)的框架中打開(kāi)鏈接，框架名稱可以自定義

練習(xí)參考代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超鏈接演示</title>
</head>

<body>
    <h3>超鏈接演示</h3>
    <a href="http://www.baidu.com" title="BaiDu">百度一下</a><br>
    <a href="http://www.edu.cn" target="_blank" title="CERNET">教育課與科研計(jì)算機(jī)網(wǎng)</a><br>
    <a href="http://www.sina.com.cn" target="_self" title="Sina">新浪</a>
</body>

</html>

瀏覽器顯示結(jié)果
在這里插入圖片描述
注釋：剛啟動(dòng)瀏覽器是，超鏈接的標(biāo)題默認(rèn)是紅色的，只要一點(diǎn)進(jìn)去標(biāo)題會(huì)變紫色，如現(xiàn)圖所示。

路徑介紹

當(dāng)我們需要跳轉(zhuǎn)一個(gè)服務(wù)器內(nèi)部頁(yè)面時(shí)，一般我們會(huì)使用相對(duì)路徑
相對(duì)路徑都會(huì)使用.或. .開(kāi)頭
./
. ./(兩點(diǎn)之間沒(méi)空格)
./可以省略不寫(xiě)。如果不寫(xiě)./也不寫(xiě)…/則就相當(dāng)于寫(xiě)了./
./表示當(dāng)前文件所在的目
. ./當(dāng)前文件所在目錄的上一級(jí)目錄

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="./restudy6.html">點(diǎn)擊此進(jìn)入另一個(gè)文件</a><br>
    <a href="restudy6.html">點(diǎn)擊此進(jìn)入另一個(gè)文件</a><br>
    <a href="../CSS/css1.html">進(jìn)入上一級(jí)CSS文件中的css1.html</a>
</body>

</html>

瀏覽器顯示結(jié)果：

在這里插入圖片描述
點(diǎn)擊第一個(gè)鏈接或第二個(gè)鏈接進(jìn)入

點(diǎn)擊第三個(gè)鏈接進(jìn)入

部分應(yīng)用

可以直接將超鏈接的href屬性設(shè)置為#，這樣點(diǎn)擊超鏈接后頁(yè)面不會(huì)發(fā)生跳轉(zhuǎn)，而是轉(zhuǎn)到當(dāng)前頁(yè)面的頂部位置
可以跳轉(zhuǎn)到頁(yè)面的指定位置，只需要將href屬性設(shè)置 #目標(biāo)元素的id屬性值

id屬性（唯一不重復(fù)的）
每一個(gè)標(biāo)簽都可以增添一個(gè)id屬性
id屬性就是元素的唯一標(biāo)識(shí)，同一個(gè)頁(yè)面不能出現(xiàn)出現(xiàn)重復(fù)的id屬性

在開(kāi)發(fā)中可以將#作為超鏈接的展位符使用
也可以使用 javascript: ；來(lái)作為超鏈接的占位符

本人學(xué)習(xí)圖片：
在這里插入圖片描述