Bagaimana anda membuat hiperpautan dalam html menggunakan & lt; a & gt; Tag?

Bagaimana anda membuat hiperpautan dalam html menggunakan tag ?

Untuk membuat hiperpautan dalam HTML menggunakan tag <a></a> , anda perlu menggunakan atribut href untuk menentukan URL yang mana pautan harus menunjukkan. Berikut adalah contoh asas bagaimana untuk menyusun tag <a></a> :

 <code class="html"><a href="https://www.example.com">Example Link</a></code>

Dalam contoh ini, "Pautan Contoh" adalah teks yang akan dipaparkan di laman web, dan apabila pengguna mengklik padanya, mereka akan diarahkan ke "https://www.example.com". Teks antara tag pembukaan dan penutup <a></a> dipanggil teks utama, dan ia boleh menjadi teks atau bahkan imej yang anda ingin berkhidmat sebagai bahagian yang boleh diklik dari hiperpautan.

Apakah atribut penting yang diperlukan untuk tag untuk membuat hiperpautan berfungsi?

Atribut penting untuk mewujudkan hiperpautan berfungsi dengan tag <a></a> adalah atribut href . Atribut ini menentukan URL atau destinasi pautan. Tanpa atribut href , tag <a></a> tidak akan membuat hiperpautan kerja.

Berikut adalah butiran mengenai atribut href :

• HREF : Atribut ini mengandungi URL atau pautan anchor. Nilai boleh menjadi URL mutlak (misalnya, "https://www.example.com") atau URL relatif (misalnya, "/bout.html") jika pautan menunjuk ke halaman lain dalam laman web yang sama.

Contohnya:

 <code class="html"><a href="https://www.example.com">Example Link</a></code>

Dalam sesetengah kes, anda mungkin melihat atribut tambahan yang digunakan dengan tag <a></a> untuk meningkatkan fungsi, seperti target untuk menentukan di mana untuk membuka dokumen yang dipautkan, tetapi atribut href adalah satu -satunya yang diperlukan untuk membuat hiperpautan asas.

Bagaimanakah anda dapat memastikan bahawa hiperpautan dibuka dalam tab atau tetingkap baru?

Untuk memastikan bahawa hiperpautan dibuka dalam tab atau tetingkap baru, anda perlu menggunakan atribut target dalam tag <a></a> . Khususnya, anda harus menetapkan atribut target ke _blank . Inilah cara melakukannya:

 <code class="html"><a href="https://www.example.com" target="_blank">Example Link</a></code>

Dalam contoh ini, apabila pengguna mengklik pada "Pautan Contoh," laman web "https://www.example.com" akan dibuka dalam tab atau tetingkap baru, bergantung pada tetapan penyemak imbas pengguna.

Atribut target juga boleh mempunyai nilai lain, tetapi _blank adalah yang digunakan khusus untuk membuka pautan dalam tab atau tetingkap baru:

• _self : Membuka pautan dalam bingkai yang sama seperti yang diklik (ini adalah tingkah laku lalai jika target tidak ditentukan).
• _parent : Membuka dokumen yang dipautkan dalam bingkai induk.
• _top : Membuka dokumen yang dipautkan dalam badan penuh tetingkap.
• framename : Membuka dokumen yang dipautkan dalam bingkai yang dinamakan.

Bolehkah anda gaya penampilan hiperpautan menggunakan CSS, dan jika ya, bagaimana?

Ya, anda boleh gaya penampilan hiperpautan menggunakan CSS. Hyperlink mempunyai keadaan yang berbeza (pautan, dikunjungi, hover, aktif) yang boleh disasarkan untuk gaya. Berikut adalah cara anda boleh menggunakan CSS untuk mengubah rupa hiperpautan:

1. Gaya Asas : Anda boleh menukar warna, fon, dan sifat -sifat lain hiperpautan menggunakan pemilih a

 <code class="css">a { color: blue; text-decoration: none; font-weight: bold; }</code>

2. Pautan Negeri : Anda boleh gaya keadaan yang berbeza dari hiperpautan.

• Pautan yang tidak divisit ( :link ): Pautan gaya yang belum dikunjungi.

 <code class="css">a:link { color: blue; }</code>

• Pautan yang Dikunjungi ( :visited ): Pautan gaya yang telah dikunjungi.

 <code class="css">a:visited { color: purple; }</code>

• Hover State ( :hover ): Styles pautan apabila pengguna melayang di atasnya.

 <code class="css">a:hover { color: red; text-decoration: underline; }</code>

• Keadaan aktif ( :active ): Gaya pautan apabila ia diaktifkan (diklik).

 <code class="css">a:active { color: green; }</code>

3. Gaya Lanjutan : Anda juga boleh menggunakan unsur-unsur pseudo seperti ::before dan ::after menambah kandungan atau hiasan sebelum atau selepas hiperpautan.

 <code class="css">a::before { content: "→ "; }</code>

Ini akan menambah anak panah (→) sebelum teks hiperpautan.

4. Reka bentuk responsif : Anda juga boleh menggunakan pertanyaan media untuk menyesuaikan gaya berdasarkan saiz skrin peranti.

 <code class="css">@media (max-width: 600px) { a { font-size: 14px; } }</code>

Ini akan mengubah saiz fon hiperpautan kepada 14 piksel pada skrin dengan lebar maksimum 600 piksel.

Dengan menggunakan teknik CSS ini, anda boleh menyesuaikan penampilan hiperpautan secara meluas untuk memenuhi keperluan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimana anda membuat hiperpautan dalam html menggunakan & lt; a & gt; Tag?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!