HTML中的 <head> 元素

# HTML中的 <head> 元素 ## 什麼是`<head>`元素 `<head>`元素是用來放一些描述網頁的資料，元素除裡的內容(除了title以外)不會顯示網頁上。 ## head元素內含的子元素 - **title元素**：網頁文件的標題，會出現在瀏覽器視窗左上方的標題區域，在head元素裡只能有一個title元素。 - **meta元素**： #### 描述HTML文件的相關資訊，資訊內容由name與content屬性來決定 - **name屬性**： - 用來表示文件的中介資料項目名稱 - 可使用的屬性值有：author(作者),description(網頁內容描述),keywords(關鍵字)...等 - **content屬性**：用來表示中介資料項目的內容 - **charset屬性**：定義網頁的字元編碼方式，建議指定的值為UTF-8 - **http-equiv屬性**： - 透過預先定義的關鍵字表示某些特定狀態的意義 - 可使用的屬性值有：refresh(刷新時間) - **viewport屬性**： - **Width(寬度)**：因手機尺寸相當多，所以很難設定成固定的寬度，所以只要設定成`width=device-width`就可以自動抓取手機畫面得寬度。 - **inital-scale(預設縮放倍率)**：網頁在手機上載入時預設的縮放倍率，若沒有特殊需求通常設定為 1，也就是100%原始大小。 - **maximum-scale(最大縮放倍率)**：使用者可以手動縮放的最大倍率。 - **user-scaleable(使用者是否可以手動縮放)**：如果不希望使用者自己去做縮放的話，可以設定成 no 或者 0 ，反之則是 yes 或者 1 - style元素：CSS樣式撰寫 - script元素：JS程式碼撰寫 :::spoiler 備註 - 在 `<head>` 部分使用 `<script>` 用於引入外部的 JavaScript 文件或其他類型的腳本。 - 建議使用 defer 或 async 屬性來控制腳本的執行時間，以避免阻塞頁面加載。 ::: #### Facebook 社群相關 <meta og:Tag> OG:Tag 是 Open Graph Tag 的簡稱，一開始是 Facebook 提出的規範，後來許多社群網站跟進，描述希望被抓取的資訊 - og:url - 網頁的標準網址 - og:type - 內容的媒體類型 - 此標籤會影響內容在動態消息中的顯示方式 - 未指定類型，將預設為 website - og:title - 網站的標題 - 如果沒有設此標籤，則爬蟲會抓取則爬蟲會抓取 title 標籤的內容 - og:image - 網站預覽圖 url - 檔案大小：< 8MB - 檔案尺寸：建議尺寸 1200x630 - og:image:alt - 網站預覽圖的alt屬性 - og:description - 描述或摘要 - 如果沒有設此標籤，則爬蟲會抓取 <meta content="description"> 標籤中屬性 content 的內容 :::spoiler `<head>`元素範例 ```HTML= <head>  <meta charset="UTF-8"> <meta name="author" content="作者"> <meta name="keywords" content="關鍵字1,關鍵字2"> <meta name="date" content="日期"> <meta name="description" content="網頁內容描述"> <meta name="generator" content="開發工具"> <meta http-equiv="refresh" content="刷新時間(秒);url=路徑"> <meta property="og:url" content="網頁的標準網址" /> <meta property="og:type" content="article" /> <meta property="og:title" content="網頁標題" /> <meta property="og:image" content="網站預覽圖" /> <meta property="og:image:alt" content="網站預覽圖的alt" /> <meta property="og:description" content="網站描述或摘要" />  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>網站的標題</title>  <script src="script.js" defer></script> <style>CSS樣式宣告</style> </head> ``` ::: ------------------------------------------------------------ <div style="font-size: 12px;"> <b style="font-size: 16px;">備註：</b> <p style="font-size: 14px;">Google 已於 2009年決定網站排名時不會參考 meta keywords <a href="https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag?hl=zh-tw" target="_blank">相關資訊</a></small> </div> ###### 以上為自學中的筆記如有錯誤，懇請留言指正，感謝！

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.