Membuka Pautan dalam Tab Baharu dan Atribut Download
Gunakan atribut target dan download untuk mengawal tingkah laku pautan.
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
downloadhanyalah 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.openAtribut 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 navigasidownload="filename"— mencadangkan nama fail untuk muat turun
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
- Elemen anchor dan Atribut href
- URL Mutlak berbanding Relatif
- Membuka Pautan dalam Tab Baharu dan Atribut Download
- Memaut ke Seksyen dengan Pengecam Fragmen