1. <!DOCTYPE html>
- 作用： 這是文件類型宣告 (Document Type Declaration，簡稱 DOCTYPE)。它告訴瀏覽器，這個網頁是使用 HTML5 標準編寫的。
- 重要性：
- 確保瀏覽器以標準模式 (Standards Mode) 渲染網頁，避免使用過時的、不一致的怪異模式 (Quirks Mode)。
- 是 HTML5 驗證的必要條件。
- 位置：
<!DOCTYPE html>必須放在 HTML 文件的最開頭，位於<html>標籤之前。 - HTML vs HTML5： 在舊版的 HTML（例如 HTML 4.01），DOCTYPE 宣告非常冗長且複雜。HTML5 大幅簡化了 DOCTYPE，只需要
<!DOCTYPE html>。
2. <html>
- 作用： 這是 HTML 文件的根元素 (Root Element)。所有其他的 HTML 元素都必須是
<html>元素的後代（也就是說，必須包含在<html>和</html>標籤之間）。 - 屬性 (通常會加)：
lang：指定網頁的語言。例如：<html lang="en">(英文)<html lang="zh-Hant">(繁體中文)<html lang="ja">(日文)
3. <head>
- 作用：
<head>元素包含網頁的元數據 (Metadata)。元數據是關於網頁的資訊，但不會直接顯示在網頁內容中。 -
常見的子元素：(這些元素通常放在 <head> 裡面)
<title>: 定義網頁標題（顯示在瀏覽器標籤頁或視窗標題列）。-
<meta>: 提供各種元數據，例如：charset: 指定字符編碼（通常是UTF-8）。name="description": 網頁的描述（用於搜尋引擎結果）。name="keywords": 網頁的關鍵字（用於搜尋引擎優化）。name="author": 網頁的作者。name="viewport": 控制網頁在不同裝置上的顯示方式（對響應式設計很重要）。
<link>: 連結到外部資源，例如 CSS 樣式表。<style>: 包含內嵌的 CSS 樣式（通常不建議，最好將 CSS 放在外部檔案）。<script>: 包含或引用 JavaScript 程式碼（通常放在</body>之前，以提高頁面載入速度）。<base>: 指定頁面中所有相對 URL 的基本 URL。
4. <body>
-
作用：
<body>元素包含網頁的可見內容。所有您希望在瀏覽器中顯示的內容（文字、圖片、連結、表格、影片等）都應該放在<body>標籤中。 -
範例:
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <img src="myimage.jpg" alt="My Image"> </body>
完整 HTML 範例
以下是一個 *完整* 的 HTML5 文件範例，包含了所有必要的元素：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的網頁</title>
<meta name="description" content="這是一個簡單的 HTML5 網頁範例">
<meta name="keywords" content="HTML5, 範例, 教學">
<meta name="author" content="您的名字">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一個段落。</p>
<script src="script.js"></script>
</body>
</html>
重要觀念:
-
這四個標籤,
<!DOCTYPE html>,<html>,<head>,<body>構成了 HTML 文件的基本骨架。<head>裡面放 metadata,<body>裡面放實際內容. - 正確的 HTML 結構對於網頁的正常顯示、SEO 和無障礙訪問都非常重要。
