Hiperpautan tutorial asas HTML
Hiperpautan boleh dilihat di mana-mana di tapak web Buka Berita Baidu dan klik pada mana-mana perenggan untuk membuka halaman butiran berita Ini semua adalah hiperpautan:
. Seterusnya, mari kita perkenalkan pengetahuan terperinci tentang hiperpautan
Hiperpautan
Format sintaks:
<a attribute = "value">...</a>
Nota: <a> tidak boleh mengandungi teg <a> URL fail sasaran URL boleh menjadi alamat relatif atau alamat mutlak.
sasaran: Tetingkap paparan fail sasaran.
_blank: Buka fail sasaran dalam tetingkap baharu.
_self: Buka fail sasaran dalam tetingkap semasa (buka secara lalai), bersamaan dengan operasi "ganti".
- _parent: Buka fail sasaran dalam tetingkap induk.
- _atas: Buka fail sasaran dalam tetingkap peringkat atas.
- Antara halaman web bingkai yang biasa digunakan _parent dan _top, kami akan memperkenalkannya kemudian
- nama: Tentukan nama pautan sauh .
- (1) Alamat mutlak jauh
Untuk mengakses fail jauh, sentiasa mulakan dengan "<a href="http://"nama domain dan nama hos.">http://"nama domain dan nama hos.</a>"
Contoh: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>歡迎加入php.cn</h1>
<a href="http://ipnx.cn/" >php.cn</a>
<hr>
<a href="http://www.taobao.com/" target="_blank">淘寶網(wǎng)</a>
<hr>
<a href="http://www.baidu.com/" target="_blank">百度</a>
</body>
</html>
(2) Alamat mutlak tempatan (jarang digunakan)
Yang mutlak alamat untuk mengakses kawasan setempat ialah alamat mutlak bermula dengan <a href="http://file:///.">file:///. </a>
Tambah berdasarkan contoh sebelumnya:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="http://ipnx.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘寶網(wǎng)</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> <a href="file:///D:/image.html" target="_blank">點擊查看圖片</a> </body> </html>
Nota: Sila uji secara setempat
2. URL alamat relatif (laluan dalam projek biasanya merupakan laluan relatif, sila uji secara setempat)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="1.jpg">圖片</a> </body> </html>(2) Fail semasa dan folder tempat fail sasaran berada dalam hubungan adik-beradik, mula-mula cari "nama folder" dan kemudian "nama fail".
Iaitu, fail sasaran terletak di peringkat seterusnya.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="image/1.jpg">圖片</a> </body> </html>
(3) Fail sasaran terletak di direktori atas, cari direktori yang sepadan, dan kemudian cari fail dalam direktori.
Cari dan gunakan simbol "../".
"../" mewakili direktori peringkat atas
"../../" mewakili dua peringkat di atas
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="../image/1.jpg">圖片</a> </body> </html>
3 Pautan istimewa
(1), pautan muat turun
Apakah jenis fail yang akan mempunyai gesaan muat turun?
Sebaliknya, fail dan halaman web yang manakah boleh dilaksanakan secara langsung? Seperti: .jpg, .png, .gif, .html, .htm, .txt, dsb.
Kebanyakan fail tidak boleh dilaksanakan secara langsung oleh penyemak imbas. Seperti: .doc, .xls, .ppt, .rar, .psd... Jika
tidak dapat dilaksanakan secara langsung, kotak muat turun akan muncul
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="image/1.rar">下載</a> </body> </html>
(2), pautan e-mel
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="mailto:php@php.cn">有問題的話，請給我們發(fā)郵件</a> </body> </html>
(3), pautan kosong biasa (#)
Langkah untuk melaksanakan mana-mana pautan lompat:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>歡迎加入php.cn</h1> <a href="#">這是一個空鏈接</a> </body> </html>
