標頭區段中使用的標籤
本文將解釋頭部區域中使用的標籤。
它說明了在head部分中使用的標籤，例如 <link>、<script>、<style>。
YouTube Video
標頭區段中使用的標籤
<title> 標籤
1<title>Document Title</title><title>標籤定義文檔的標題。此標題顯示在瀏覽器的標籤頁中，用於書籤和搜索結果。
<link> 標籤
<link>標籤用於將外部資源鏈接到當前文檔。其常用於鏈接外部 CSS 文件，但也可用於圖標和其他外部資源。
<link> 標籤的 rel 屬性
rel 屬性用於指定在 <link> 標籤中被鏈接資源與當前文檔之間的關係。rel 屬性有多種類型的值，但在這裡我們將解釋特別重要和經常使用的那些。
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheet用於鏈接外部樣式表。
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"定義顯示在瀏覽器標籤或書籤中的圖標。通過指定正確的 favicon，增強網站的品牌和視覺識別。
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preload用於在頁面渲染開始之前提前加載資源。這對於時間很重要的資源特別有用，例如字體或大圖像。這改善了性能並增強了用戶體驗。
canonical
1<link rel="canonical" href="https://example.com/page.html">canonical用於告訴搜索引擎頁面的規範版本。在內容重複的情況下，指明規範 URL 有助於從 SEO 角度鞏固搜索引擎排名，並確保內容被正確索引。
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternate用於向搜索引擎和瀏覽器指示不同語言或格式的頁面。在多語種網站中，您可以結合hreflang屬性為每個語言版本指定 URL，為用戶提供適當語言的頁面。
manifest
1<link rel="manifest" href="/manifest.json">manifest向瀏覽器提供一個包含 PWA（漸進式 Web 應用程序）配置信息的清單文件。此文件包含應用程式圖示、主題顏色和顯示模式等資訊，有助於在行動裝置上安裝和運行PWA。
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- 引用外部資源時，提前執行該域名的DNS解析可以提高頁面載入速度。這對於有許多外部資源或需要快速用戶體驗的頁面特別有效。
<style> 標籤
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style><style>標籤用於定義內部樣式表。它用於將 CSS 樣式應用於頁面上的元素，使您可以不用外部文件寫入 CSS。
<script> 標籤
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script><script>標籤用於將 JavaScript 代碼嵌入到 HTML 文件中。您還可以鏈接外部 JavaScript 文件，控制頁面的動態行為。使用src屬性來指定腳本檔案。
async和defer屬性
<script> 標籤支援兩個屬性：async 和 defer，它們影響腳本加載和執行的時機。通常，腳本由瀏覽器按順序處理，但使用這些屬性可以改善頁面效能和加載體驗。
async屬性
1<script src="script.js" async></script>- 使用
async屬性允許腳本異步加載。瀏覽器與其他資源同時加載腳本，並在加載完成後立即執行。 async主要適用於獨立腳本，當腳本不依賴於其他腳本或DOM加載時使用。
defer屬性
1<script src="script.js" defer></script>- 使用
defer屬性可以讓腳本異步加載，但在HTML解析完成後執行。腳本的執行不會阻塞頁面顯示，因此增強了用戶體驗。 defer在腳本需要在DOM完全加載後執行時非常有效。例如，當您希望腳本在頁面整個佈局和元素加載完成後執行時適用。
CORS策略和crossorigin屬性
加載外部腳本時，可能會根據同源政策施加安全限制。在此情況下，可以使用 crossorigin 屬性來允許資源共享。
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>crossorigin 屬性可以設定為以下兩個值：。
anonymous：發送請求時不包含憑證。use-credentials：發送請求時包含憑證。
type屬性
<script> 標籤可以使用 type 屬性來指定腳本類型。默認情況下使用JavaScript，但您也可以指定某些類型的腳本（例如，模組類型的JavaScript或模板語言）。
JavaScript 模塊
1<script type="module" src="module.js"></script>-
自從ECMAScript 2015（ES6）以來，引入了JavaScript模組，允許將代碼分割到多個模組中，從而增強了重用性。通過指定
type="module"，您可以將腳本視為模組。 -
可以使用
import和export將模組分割為其他模組。
非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>- 除了 JavaScript 之外的腳本也可以在
<script>標籤中指定。例如，在描述 JSON-LD 等結構化數據時，使用type="application/ld+json"。這裡，JSON-LD 是一種在網頁上結構化數據的格式，使搜索引擎和其他應用程序能夠更深入地理解數據。
使用<script>標籤的注意事項
- 腳本的順序：腳本所依賴的庫必須在依賴腳本之前加載。例如，使用 jQuery 的腳本必須在 jQuery 本身之後加載。
- 性能優化：為了避免影響頁面加載速度，應僅在必要時加載腳本，避免運行不必要的腳本。
- 安全措施：當使用外部腳本時，確保從可信來源加載，以防止嵌入惡意腳本。
<base> 標籤
1<base href="https://example.com/"><base>標籤設置文檔中所有相對 URL 的基本 URL。在href屬性中指定的 URL 成為鏈接和圖片中相對路徑的基礎。通常每個頁面只使用一次。
<noscript> 標籤
1<noscript>Your browser does not support JavaScript!</noscript><noscript>標籤定義了在瀏覽器中禁用 JavaScript 時顯示的內容。它被用於在不支持 JavaScript 的環境中提供替代內容。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。