HTML Academy · Pelajaran

Membuka Pautan dalam Tab Baharu dan Atribut Download

Gunakan atribut target dan download untuk mengawal tingkah laku pautan.

Pelajaran 3 daripada 413 langkah

Membuka Pautan dalam Tab Baharu dan Atribut Download ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Membuka dalam Tab Baharu

Atribut target mengawal tempat dokumen terpaut dibuka:

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

Risiko Keselamatan _blank

target="_blank" tanpa langkah berjaga-jaga mewujudkan kerentanan keselamatan:

  • Halaman baharu boleh mengakses halaman pembuka melalui window.opener
  • Halaman berniat jahat boleh mengubah hala tab asal
  • Serangan ini dipanggil tabnapping songsang

rel=noopener noreferrer

Sentiasa tambah rel="noopener noreferrer" apabila menggunakan target="_blank":

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

Bila Membuka Tab Baharu

Panduan pengalaman pengguna untuk target="_blank":

  • Gunakannya untuk tapak luaran apabila pengguna tidak menjangka akan meninggalkan aplikasi anda
  • Gunakannya untuk dokumen rujukan seperti PDF dan panduan
  • Jangan gunakannya untuk navigasi halaman dalaman
  • Sentiasa beri amaran kepada pengguna — tambah ikon atau tajuk yang menyatakan "dibuka dalam tab baharu"

Memaklumkan Pengguna tentang Tab Baharu

Maklumkan pengguna bahawa pautan akan dibuka dalam tab baharu:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

Atribut download

Atribut download memberitahu pelayar supaya memuat turun fail terpaut dan bukannya menavigasi kepadanya:

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

Batasan Atribut download

Atribut download mempunyai beberapa batasan:

  • Hanya berfungsi untuk URL berasal sama
  • Muat turun silang asal memerlukan pelayan menghantar Content-Disposition: attachment
  • Nama fail dalam download hanyalah cadangan — pengepala pelayan boleh menggantikannya

Muat Turun URI Data

Anda boleh memuat turun kandungan yang dijana menggunakan URI data:

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript dan Sasaran Pautan

Apabila JavaScript mengendalikan navigasi, elakkan penyalahgunaan target="_blank":

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

Atribut ping

Atribut ping menghantar permintaan POST apabila pautan diklik, biasanya untuk analitis:

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

Atribut type pada Pautan

Atribut type memberikan petunjuk tentang jenis MIME sumber terpaut:

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

Semakan Pantas

Apakah atribut keselamatan yang patut sentiasa digunakan bersama target="_blank"?

Ringkasan: target dan Muat Turun

Atribut tingkah laku pautan:

  • target="_blank" — membuka dalam tab baharu
  • Sentiasa tambah rel="noopener noreferrer" bersama _blank
  • Beri amaran secara visual apabila pautan dibuka dalam tab baharu
  • download — mencetuskan muat turun fail dan bukannya navigasi
  • download="filename" — mencadangkan nama fail untuk muat turun
Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
40
Pelajaran
159

Soalan Lazim

Adakah pelajaran “Membuka Pautan dalam Tab Baharu dan Atribut Download” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Membuka Pautan dalam Tab Baharu dan Atribut Download”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Membuka Pautan dalam Tab Baharu dan Atribut Download”?

Gunakan atribut target dan download untuk mengawal tingkah laku pautan. Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Membuka Pautan dalam Tab Baharu dan Atribut Download” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Elemen anchor dan Atribut href
  2. URL Mutlak berbanding Relatif
  3. Membuka Pautan dalam Tab Baharu dan Atribut Download
  4. Memaut ke Seksyen dengan Pengecam Fragmen
← Kembali ke HTML Academy