HTML 連結

HTML 使用超級連結與網路上的另一個文件相連。

幾乎可以在所有的網頁中找到連結。點擊連結可以從一張頁面跳到另一張頁面。


讓我們先看一個連結實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<p><a href="/">PHP中文网</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.baidu.com/">百度</a>这是一个指向百度的链接</p>
</body>
</html>

程式碼運行結果:

1.png


# #HTML 超連結(連結)

HTML使用標籤<a>來設定超文本連結。

超連結可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳到新的文件或當前文件中的某個部分。

當您把滑鼠指標移到網頁中的某個連結時,箭頭會變成一隻小手。

在標籤<a> 中使用了href屬性來描述連結的位址。

例如連結到php.cn網站首頁,就可以這樣表示:

<a href="http://www.php.cn">PHP中文網</a> 


預設情況下,連結將以以下形式出現在瀏覽器中:

一個未造訪過的連結顯示為藍色字體並帶有底線。

造訪過的連結顯示為紫色並帶有底線。

點擊連結時,連結顯示為紅色並帶有底線。

注意:如果為這些超連結設定了 CSS 樣式,則展示樣式會根據 CSS 的設定而顯示。


HTML 連線- id 屬性

#id屬性可用來建立在一個HTML文件書籤標記。

提示: 書籤是不以任何特殊的方式顯示,在HTML文件中是不顯示的,所以對於讀者來說是隱藏的。

在HTML文件中插入ID:

<a id="tips">有用的提示部分</a>

#在HTML文件中建立一個連結到"有用的提示部分(id="tips")":

<a href="#tips"> ;存取有用的提示部分</a>

或者,從另一個頁面建立一個連結到"有用的提示部分(id="tips")":

<a href="http://www.php.cn/html/html-links.html#tips">
訪問有用的提示部分< /a>

基本的注意事項 

#註解: 請務必將正斜線新增至子資料夾。假如這樣書寫連結:href="http://www.php.cn/html",就會向伺服器產生兩個 HTTP 請求。這是因為伺服器會添加正斜線到這個位址,然後建立一個新的請求,就像這樣:href="http://www.php.cn/html/"。


實例

如何使用圖片連結。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>创建图片链接:
    <a href="http://www.php.cn/">
        <img src="1.jpg" alt="HTML 教程" width="50" height="50"></a></p>
<p>无边框的图片链接:
    <a href="http://www.php.cn/html/">
        <img border="0" src="1.jpg" alt="HTML 教程" width="50" height="50"></a></p>
</body>
</html>

圖片使用<img>標籤,後面會講

程式碼運行結果:

1.jpg

點擊上面的圖片會跳到http://www.php.cn/這個網址




繼續學習
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <p><a href="/">PHP中文网</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.baidu.com/">百度</a>这是一个指向百度的链接</p> </body> </html>