HTML 鏈接
HTML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。
幾乎可以在所有的網(wǎng)頁中找到鏈接。點(diǎn)擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。
讓我們先看一個(gè)鏈接實(shí)例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <p><a href="/">PHP中文網(wǎng)</a> 是一個(gè)指向本網(wǎng)站中的一個(gè)頁面的鏈接。</p> <p><a href="http://www.baidu.com/">百度</a>這是一個(gè)指向百度的鏈接</p> </body> </html>
代碼運(yùn)行結(jié)果:
HTML 超鏈接(鏈接)
HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接。
超鏈接可以是一個(gè)字,一個(gè)詞,或者一組詞,也可以是一幅圖像,您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁中的某個(gè)鏈接上時(shí),箭頭會(huì)變?yōu)橐恢恍∈帧?/span>
在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址。
比如鏈接到php.cn站點(diǎn)首頁,就可以這樣表示:
<a href="http://miracleart.cn">PHP中文網(wǎng)</a>?
默認(rèn)情況下,鏈接將以以下形式出現(xiàn)在瀏覽器中:
一個(gè)未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點(diǎn)擊鏈接時(shí),鏈接顯示為紅色并帶有下劃線。
注意:如果為這些超鏈接設(shè)置了 CSS 樣式,展示樣式會(huì)根據(jù) CSS 的設(shè)定而顯示。
HTML 連接- id 屬性
id屬性可用于創(chuàng)建在一個(gè)HTML文檔書簽標(biāo)記。
提示:?書簽是不以任何特殊的方式顯示,在HTML文檔中是不顯示的,所以對(duì)于讀者來說是隱藏的。
在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文檔中創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips")":
<a href="#tips">訪問有用的提示部分</a>
或者,從另一個(gè)頁面創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips")":
<a href="http://miracleart.cn/html/html-links.html#tips">
訪問有用的提示部分</a>
基本的注意事項(xiàng)?
注釋:?請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書寫鏈接:href="http://miracleart.cn/html",就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址,然后創(chuàng)建一個(gè)新的請(qǐng)求,就像這樣:href="http://miracleart.cn/html/"。
實(shí)例
如何使用圖片鏈接。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>創(chuàng)建圖片鏈接: <a href="http://miracleart.cn/"> <img src="1.jpg" alt="HTML 教程" width="50" height="50"></a></p> <p>無邊框的圖片鏈接: <a href="http://miracleart.cn/html/"> <img border="0" src="1.jpg" alt="HTML 教程" width="50" height="50"></a></p> </body> </html>
圖片使用<img>標(biāo)簽,后面會(huì)講
代碼運(yùn)行結(jié)果:
點(diǎn)擊上面的圖片會(huì)跳轉(zhuǎn)到http://miracleart.cn/這個(gè)網(wǎng)址