HTML - Head 元素
HTML <head> 元素是以下元素的容器： <title>、<style>、<meta>、<link>、<script> 和 <base>。
HTML <head> 元素
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML 元資料是關於 HTML 文件的資料。元資料不會顯示。
元資料通常定義文件標題、字元集、樣式、指令碼和其他元資訊。
HTML <title> 元素
<title> 元素定義文件的標題。標題必須是純文字，並且顯示在瀏覽器的標題欄或頁面的選項卡中。
HTML 文件需要 <title> 元素！
頁面標題的內容對搜尋引擎最佳化（SEO）非常重要！搜尋引擎演算法使用頁面標題來決定在搜尋結果中列出頁面的順序。
<title> 元素
- 定義瀏覽器工具欄中的標題
- 當頁面新增到收藏夾時提供頁面的標題
- 在搜尋引擎結果中為頁面顯示標題
因此，請儘量使標題儘可能準確和有意義！
一個簡單的 HTML 文件
示例
<!DOCTYPE html>
<html>
<head>
<title>一個有意義的頁面標題</title>
</head>
<body>
文件內容......
</body>
</html>
自己動手試一試 »
HTML <style> 元素
<style> 元素用於定義單個 HTML 頁面的樣式資訊。
HTML <link> 元素
<link> 元素定義當前文件與外部資源之間的關係。<link> 標籤通常用於連結到外部樣式表。
提示： 要了解所有關於 CSS 的知識，請訪問我們的 CSS 教程。
HTML <meta> 元素
<meta> 元素通常用於指定字元集、頁面描述、關鍵字、文件作者和視口設定。
元資料不會在頁面上顯示，但會被瀏覽器（如何顯示內容或重新載入頁面）、搜尋引擎（關鍵字）和其他 Web 服務使用。
示例
定義使用的字元集
<meta charset="UTF-8">
為搜尋引擎定義關鍵字
<meta name="keywords" content="HTML, CSS, JavaScript">
定義您的網頁的描述
<meta name="description" content="Free Web tutorials">
定義頁面的作者
<meta name="author" content="John Doe">
每 30 秒重新整理文件
<meta http-equiv="refresh" content="30">
設定視口，使您的網站在所有裝置上看起來都很好
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> 標籤示例
示例
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
自己動手試一試 »
設定視口
視口是使用者可見的網頁區域。它隨裝置而異 - 在手機上比在電腦螢幕上小。
您應該在所有網頁中包含以下 <meta> 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這會給瀏覽器指令，告知如何控制頁面的尺寸和縮放。
width=device-width 部分將頁面的寬度設定為與裝置的螢幕寬度一致（這將因裝置而異）。
initial-scale=1.0 部分設定了瀏覽器首次載入頁面時的初始縮放級別。
這是一個沒有視口 meta 標籤的網頁示例，以及同一個網頁有視口 meta 標籤的示例。
提示：如果您正在用手機或平板電腦瀏覽此頁面，可以點選下面的兩個連結來檢視差異。
HTML <script> 元素
<script> 元素用於定義客戶端 JavaScript。
以下 JavaScript 將“Hello JavaScript!”寫入 ID 為“demo”的 HTML 元素中。
示例
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
自己動手試一試 »
提示： 要了解所有關於 JavaScript 的知識，請訪問我們的 JavaScript 教程。
HTML <base> 元素
<base> 元素為頁面中的所有相對 URL 指定基本 URL 和/或目標。
<base> 標籤必須包含 href 或 target 屬性，或兩者都包含。
文件中只能有一個 <base> 元素！
示例
為頁面上的所有連結指定一個預設 URL 和預設目標
<head>
<base href="https://w3schools.tw/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base 標籤</a>
</body>
自己動手試一試 »
Chapter Summary
- The
<head>element is a container for metadata (data about data) - The
<head>element is placed between the<html>tag and the<body>tag - The
<title>element is required and it defines the title of the document - The
<style>element is used to define style information for a single document <link>標籤通常用於連結到外部樣式表。- The
<meta>element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings - The
<script>element is used to define client-side JavaScripts - The
<base>element specifies the base URL and/or target for all relative URLs in a page
HTML head 元素
| 標籤 | 描述 |
|---|---|
| <head> | 定義文件資訊 |
| <title> | 定義文件標題 |
| <base> | 定義頁面上所有連結的預設地址或預設目標 |
| <link> | 定義文件與外部資源之間的關係 |
| <meta> | 定義 HTML 文件的元資料 |
| <script> | 定義客戶端指令碼 |
| <style> | 為文件定義樣式資訊 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
影片：HTML Head
