今天想整理記錄 <head> 裡可以放的標籤以及內容。
這是一份常見的 HTML 文件，
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<link rel=”stylesheet” href=”style.css”>
</head><body>
The content of the document……
</body></html>
<head> Tag
<head> 標籤是裝有 metadata 的容器，而 metadata 是表示這份 HTML 文件的相關訊息，且並不會顯示在頁面上。
Metadata 通常定義了這份文件的標題 (title)、字符集 (character set)、樣式 (styles)、腳本 (scripts)以及其他資訊。
以下是可以放在 <head> 裡的標籤：
- <title>
- <style>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
<title>
指這份文件的標題，會出現在瀏覽器的標題欄或是加入我的最愛時的名稱。
<title>編輯草稿 — iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天</title>
而且是必須在文件中定義的資訊，另外也對 SEO 很重要，會影響搜索引擎的搜尋結果。
<style>
可以在 <style> 內書寫 CSS 樣式，CSS 樣式會套用在 HTML 標籤。
<base>
為這份文件中設定所有連結類型標籤 (例如 <a> 的 href、<img> 的 src) 的預設根網址與預設連結目標。
<head>
<base href=”https://www.w3schools.com/" target=”_blank”>
</head><body>
<a href=”tags/tag_base.asp”>HTML base Tag</a>
<img src=”images/photo.jpg”>
</body>
點選 <a> 超連結，會另開視窗到 https://www.w3schools.com/tags/tag_base.asp。
而 <img> 會連到 https://www.w3schools.com/images/photo.jpg (假設)
以下屬性至少要有一個
- href：base URL
- target：_self (預設值，在當前框架開啟)、_blank (另開新視窗)、_parent (在父框架開啟)、_top (在整個視窗中開啟)
<link>
定義了這份文件與外部資源的關係，常用於引入外部 CSS 文件檔案。
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>屬性
- crossorigin：處理跨域請求
- href：引入文件的檔案位置，URL
- hreflang：引入文件的語言，例如 en、zh、ja
- media：，引入的文件會在哪個裝置顯示，media_query
- referrerpolicy：在獲取資源時使用哪個 referrer，預設值為 no-referrer-when-downgrade
- rel：required，這份文件與引入文件的關係，例如 stylesheet、icon
- sizes：指定連接資源的大小，限於 `rel=”icon”`，例如 16x16
- title：定義首選或備用的 stylesheet
- type：media_type，通常為 text/css
<meta>
表示 HTML 文件的 metadata，通常用於指定字符集 (character set)、網頁描述 (page description)、關鍵字 (keywords)、文件作者以及設定可視區 (viewport)等。
屬性
- charset：指定這份文件的編碼，UTF-8 (HTML5 文件建議使用)
- content：搭配 http-equiv 或 name
- http-equiv：為 content 的值提供 HTTP header，例如 default-style、refresh 等
- name：要設定 metadata 的名稱，例如 viewport、author、description、keywords 等
<meta charset=”UTF-8">
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta name=”author” content=”Ron”>
<!-- Refresh the page every 5 seconds -->
<meta http-equiv=”refresh” content=”5">
<!-- Redirect instantly to https://cssreference.io -->
<meta http-equiv=”refresh” content=”0; url=https://cssreference.io"><script>
可以在 <script> 內直接書寫 JavaScript 程式碼，或是通過 src 屬性載入外部 JavaScript 檔案。
屬性
- async：表示解析 HTML 時，發出載入 script 的請求，當取得 script 後，會先中斷 HTML 的解析，執行 script，執行完畢後，HTML 再恢復解析。限於外部 script 文件。
- crossorigin：處理跨域請求
- defer：表示在解析 HTML 時，發出載入 script 的請求。不同 async 的是，當取得 script 後，會先等 HTML 解析完畢，才執行 script。限於外部 script 文件。
- integrity：允許瀏覽器檢查獲取的 script，如果來源被操控，則不加載程式碼。
- nomodule：指定 script 是否能在支援 ES6 modules 的瀏覽器中執行，True/False
- referrerpolicy：指定在獲取 script 時要發送的 referrer。
- src：外部 script 文件的位置，URL
- type：scripttype，預設值為 application/javascript
<noscript>
為當瀏覽器不支援 JavaScript 或使用者手動關閉禁止 JavaScript 執行時，可以用來顯示給使用者的一些訊息。正常可支援 JavaScript 的瀏覽器會跳過 <noscript> 中的內容。
<noscript>
<p>此網頁需要支援 JavaScript 才能正確運行，請先至你的瀏覽器設定中開啟 JavaScript。</p>
</noscript>> 參考資料：
W3Schools — HTML head Tag
Fooish 程式技術 — HTML
> 文章同步更新於 2022 IT鐵人賽
