Tag digunakan dalam bahagian kepala

Artikel ini menerangkan tag yang digunakan dalam bahagian kepala.

Ia menerangkan tag yang digunakan dalam bahagian kepala, seperti <link>, <script>, <style>.

YouTube Video

Tag digunakan dalam bahagian kepala

Tag <title>

1<title>Document Title</title>

• Tag <title> menentukan tajuk dokumen. Tajuk ini dipaparkan dalam tab penyemak imbas dan digunakan dalam penanda halaman dan hasil carian.

Tag <link>

• Tag <link> digunakan untuk menghubungkan sumber luaran ke dokumen semasa. Ia biasanya digunakan untuk menghubungkan fail CSS luaran tetapi juga boleh digunakan untuk ikon dan sumber luaran lain.

Atribut rel bagi Tag <link>

Atribut rel digunakan untuk menentukan hubungan antara sumber yang dihubungkan dan dokumen semasa dalam tag <link>. Terdapat banyak jenis nilai untuk atribut rel, tetapi di sini kami akan menerangkan yang sangat penting dan kerap digunakan.

stylesheet

1<link rel="stylesheet" href="styles.css">

• stylesheet digunakan untuk menghubungkan helaian gaya luaran.

icon

1<link rel="icon" href="favicon.ico" type="image/x-icon">

• rel="icon" menentukan ikon yang dipaparkan dalam tab penyemak imbas atau penanda halaman. Dengan menyatakan favicon yang betul, penjenamaan dan pengiktirafan visual laman web dipertingkatkan.

preload

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• preload digunakan untuk memuat sumber terlebih dahulu sebelum rendering halaman bermula. Ia sangat berguna untuk sumber di mana masa adalah penting, seperti fon atau imej besar. Ini meningkatkan prestasi dan meningkatkan pengalaman pengguna.

canonical

1<link rel="canonical" href="https://example.com/page.html">

• canonical digunakan untuk memaklumkan mesin carian tentang versi kanonik halaman. Dalam kes kandungan duplikasi, menunjukkan URL kanonik membantu menyatukan ranking mesin carian dari perspektif SEO dan memastikan kandungan diindeks dengan betul.

alternate

1<link rel="alternate" hreflang="en" href="https://example.com/en/">

• alternate digunakan untuk menunjukkan halaman bahasa atau format yang berbeza kepada mesin carian dan penyemak imbas. Dalam tapak berbilang bahasa, anda boleh menentukan URL untuk setiap versi bahasa dalam kombinasi dengan atribut hreflang untuk menyediakan pengguna dengan halaman dalam bahasa yang sesuai.

manifest

1<link rel="manifest" href="/manifest.json">

• manifest menyediakan penyemak imbas dengan fail manifes yang mengandungi maklumat konfigurasi untuk PWA (Progressive Web App). Fail ini mengandungi maklumat seperti ikon aplikasi, warna tema, dan mod paparan, yang membantu dalam pemasangan dan operasi PWA pada peranti mudah alih.

dns-prefetch

1<link rel="dns-prefetch" href="//example.com">

• Apabila merujuk kepada sumber luaran, resolusi DNS domain yang dilakukan lebih awal dapat meningkatkan kelajuan pemuatan halaman. Ini amat berkesan untuk halaman dengan banyak sumber luaran atau di mana pengalaman pengguna yang pantas diperlukan.

Tag <style>

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>

• Tag <style> digunakan untuk menentukan helaian gaya dalaman. Ia digunakan untuk menerapkan gaya CSS pada elemen di halaman, membolehkan anda menulis CSS tanpa menggunakan fail luaran.

Tag <script>

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>

• Tag <script> digunakan untuk memasukkan kod JavaScript dalam dokumen HTML. Anda juga boleh pautkan fail JavaScript luaran, mengawal tingkah laku dinamik halaman. Gunakan atribut src untuk menentukan fail skrip.

Atribut async dan defer

Tag <script> menyokong dua atribut, async dan defer, yang mempengaruhi masa pemuatan dan pelaksanaan skrip. Biasanya, skrip diproses secara berurutan oleh penyemak imbas, tetapi penggunaan atribut ini dapat meningkatkan prestasi halaman dan pengalaman pemuatan.

Atribut async

1<script src="script.js" async></script>

• Penggunaan atribut async membolehkan skrip dimuat secara tidak segerak. Penyemak imbas memuat skrip secara selari dengan sumber lain dan melaksanakannya sebaik sahaja pemuatan selesai.
• async terutamanya sesuai untuk skrip yang berdiri sendiri dan digunakan apabila skrip tidak bergantung pada pemuatan skrip lain atau DOM.

Atribut defer

1<script src="script.js" defer></script>

• Penggunaan atribut defer membolehkan skrip dimuat secara tidak segerak tetapi dilaksanakan selepas penafsiran HTML selesai. Pelaksanaan skrip tidak menyekat paparan halaman, sekali gus meningkatkan pengalaman pengguna.
• defer berkesan apabila skrip perlu dilaksanakan selepas DOM dimuat sepenuhnya. Sebagai contoh, ia sesuai apabila anda mahu skrip dijalankan selepas susun atur dan elemen halaman dimuat sepenuhnya.

Dasar CORS dan Atribut crossorigin

Apabila memuat skrip luaran, sekatan keselamatan boleh dikenakan berdasarkan Dasar Asal Sama. Dalam kes sedemikian, atribut crossorigin boleh digunakan untuk membenarkan perkongsian sumber.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Atribut crossorigin boleh ditetapkan dengan dua nilai berikut:.

• anonymous: Menghantar permintaan tanpa menyertakan kelayakan.
• use-credentials: Menghantar permintaan termasuk kelayakan.

atribut type

Tag <script> boleh menggunakan atribut type untuk menentukan jenis skrip. Secara lalai, JavaScript digunakan, tetapi anda juga boleh menentukan jenis skrip tertentu (contohnya, JavaScript jenis modul atau bahasa templat).

Modul JavaScript

1<script type="module" src="module.js"></script>

• Sejak ECMAScript 2015 (ES6), modul JavaScript telah diperkenalkan, membolehkan kod dibahagikan kepada modul-modul, meningkatkan kebergunaan semula. Dengan menentukan type="module", anda boleh menganggap skrip sebagai modul.

• Modul boleh dibahagikan kepada modul-modul lain menggunakan import dan export.

Skrip Bukan JavaScript

1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>

• Skrip selain JavaScript juga boleh ditentukan dalam tag <script>. Sebagai contoh, gunakan type="application/ld+json" apabila menerangkan data berstruktur seperti JSON-LD. Di sini, JSON-LD ialah format yang menyusun data pada halaman web, membolehkan enjin gelintar dan aplikasi lain memahami data secara lebih mendalam.

Nota Mengenai Penggunaan Tag <script>

• Urutan Skrip: Pustaka yang skrip bergantung kepada mesti dimuatkan sebelum skrip yang bergantung. Sebagai contoh, skrip yang menggunakan jQuery mesti dimuatkan selepas jQuery itu sendiri.
• Pengoptimuman Prestasi: Untuk mengelakkan menjejaskan kelajuan pemuatan halaman, hanya muatkan skrip apabila perlu dan elakkan menjalankan skrip yang tidak perlu.
• Langkah Keselamatan: Apabila menggunakan skrip luaran, pastikan ia dimuatkan dari sumber yang dipercayai untuk mencegah penggabungan skrip berbahaya.

tag <base>

1<base href="https://example.com/">

• Tag <base> menetapkan URL asas untuk semua URL relatif dalam dokumen. URL yang ditentukan dalam atribut href menjadi asas untuk laluan relatif dalam pautan dan imej. Ia biasanya digunakan hanya sekali setiap halaman.

tag <noscript>

1<noscript>Your browser does not support JavaScript!</noscript>

• Tag <noscript> menentukan kandungan yang dipaparkan apabila JavaScript dinyahdayakan dalam pelayar. Ia digunakan untuk menyediakan kandungan alternatif untuk persekitaran di mana JavaScript tidak disokong.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video