今天想整理記錄 <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鐵人賽