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:

10.png

. 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 URL alamat mutlak
  • (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="//m.sbmmt.com/" >php.cn</a>
        <hr>
        <a href="http://www.taobao.com/" target="_blank">淘宝网</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="//m.sbmmt.com/" >php.cn</a>
        <hr>
        <a href="http://www.taobao.com/" target="_blank">淘宝网</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)


(1) Fail semasa dan fail sasaran berada dalam hubungan tahap yang sama, dan alamat pautan terus menulis nama fail sasaran.

<!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">有问题的话,请给我们发邮件</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>


Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="//m.sbmmt.com/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘宝网</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus