設置Eng | 中
網頁開發基本班
HTML 頁面
編著: Dexter Leung, 2017年05月06日

HTML 語法

<head>

在學習如何編寫 HTML 頁面的內容前，我們首先需要理解 HTML 的語法。如之前所述，語法就像是我們說話寫字的文法。在一種溝通語言中，我們有動詞、名詞等去定下詞語的詞性，亦會使用連接詞或佈局語句去把各字詞連繫成有語意內容的句字段落。

在 HTML 或其他的編程語言中，語法是比較直接明顯。因為電腦不是人類，他不能理解含糊不清或隱藏的意思，所以語法中往往有很多 關鍵字 (keywords) 或一種固定的字串排序，讓電腦清晰處理編碼。

超文件標示語言 (HTML Hyper Text Markup Language) 是由 W3C 定義的。這個機構會為 HTML 中有什麼類型的元素定義，表述開發人員用那些元素作什麼用途，而瀏覽器又需要怎樣提供這些元素給使用者。

在我們開始前，請寫出以下內容到你的 "index.html" 首頁：

範例 1
HTML
複製全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的網頁</title>
</head>
<body>
</body>
</html>

HTML 元素和標籤名稱

我們應該如何詮譯這些編碼呢？ HTML 實際上由元素構成，而每一個元素可以用大小於號 (<>) 來標記一個標籤。
一些元素是單一自身的，是一個空標籤，他們是沒有內容的。而另一種元素，是可以包含內容，且用一對標籤來前後包圍著元素內容。在大小於號中，我們可以寫下標籤名稱去記認這是什麼元素。例如 行 4 中的元素，meta就是那個元素的標籤名稱。

一對標籤是用在那種可以包含內容的元素。在開始和結束標籤都需要寫下標籤名稱，去表達他是哪一種元素。在結束標籤中，標籤名稱前需加上反斜線 "/" ，去記認元素的結束，如：<style></style>
在範例 1 ，<title>就是使用一對標籤的元素，而他的內容就是「我的網頁」。

單一標籤的元素就只需在內寫下一次標籤名稱，且在大於號前加上反斜線 "/"，如：<img />
在範例 1 ，<meta>正是一種元素使用單一標籤。

W3C 是有定義哪一種元素需要用一對標籤，哪一種需要用單一標籤。

屬性

HTML 元素是可以設有屬性去制訂該元素的特點。這就像我們在家居店購買一張桌子，桌子會有他的屬性如長度、闊度、原產地；而當我們在3C商品店購買一部筆電，會列明他的特點如解像度、硬盤規格、有沒有解控屏等。相類似地，HTML 元素都會有他們的屬性，而 W3C 已定義了每一種元素中可以有哪些屬性。

屬性是可以在該元素的開始標籤中編寫，大部分元素都需要一個值，而值是用隻引號 (") 前後包圍著。個別 W3C 指定的屬性是不需要值的，我們會在日後討論。
在範例 1 ，<meta charset="utf-8" /> 代表meta元素中加入了一個屬性charset，而這個屬性的值是utf-8。

另一方面，我們可以加入自訂屬性和相關值，這些自訂屬性不是 W3C 所定義的，我們會稱之為資料屬性 (data attributes)。這些屬性的名稱起始必定是"data-"，所以 data-taste="bad"代表一個自訂屬性 taste，而其值為bad。

來個小總結吧，我們可以這樣去加入一個元素:
單一標籤元素: <標籤名稱 屬性="值" />
一對標籤元素: <標籤名稱 屬性="值">內容</標籤名稱>

HTML 架構

<html> <head> <body> - 頁面資訊 - 樣式表 - 主要內容和頁面架構 - JavaScript 編碼

HTML 文件需要有一個<html> 元素，而其內容需要有<head> 和<body>兩個元素。

<head>: head包括了一些頁面資訊，內有多種元素去註明頁面的特性，這些資訊對瀏覽器或搜索引擎是很重要的。
另外，樣式表也是會加在這裡，去規範接下來的<body>元素中的內容舖設和視覺效果。這一部分的內容會在本篇章稍後詳述。

<body>: body包括了網頁的主要內容和架構，所有網頁需要向使用者表達的資訊將會包含在這裡。
JavaScript 編碼也是會放在這裡，以達成一些與用戶之間的互動，如點選按鍵的動作等。這一部分會在稍後的篇章詳述。

在範例 1 第 1 行，<!DOCTYPE html> 這是一個現代網頁中的必要元素。因為 HTML 標準已有多年歷史，加入這元素可特別註明網頁是符入最新的 HTML5 基準。

HTML 元素是一層一層的架構起來，我們通常會稱之為 文件物件模型 [DOM (Document Object Model) Tree]。每一個可以包含內容的元素，內裡可以包含純文字或其他元素。若果元素 A 的內容包括了元素 B ，我們可以指出元素 B 是元素 A 的子元素 (child element) ，而相反地，元素 A 是元素 B 的母元素 (parent element)。
我們會再在之後的章節討論更多相關架構上的技術用語。

<head> 簡介

下列會介紹一個網頁中<head> 包含的主要元素：

<title>

Title 元素的內容正是一個網頁的標題。在範例 1 <title>My Webpage</title> 中，內容是「我的網頁」。這個標題會顯示在瀏覽器的索引標籤上，同時如果搜索引擎中的結果有你的網頁，這個標題就會是結果的標題文字。
標題應該簡潔而具表達性的，盡量簡短、獨特，和避免少用的符號如 ~，*，% 等。

<meta>

Meta 元素相對來說比較複雜和會在很多不同的情況使用，你可以到 MDN 加以參考。下列是 3 個常用的 meta 元素：

  1. <meta charset="utf-8" />
    這註明了這份 HTML 文件的字元集。因為現代的網頁通常不僅有英文字母或數字，往往包括更多的字元如東亞文字、Emoji 表情符號等，我們通常會註明「utf-8」能讓瀏覽器正確顯示字元。
  2. <meta name="keywords" content="網頁編程, 網頁開發, HTML, 開發人員" />
    這好讓搜索引擎如 Bing 或 Google 透過你列出的關鍵字去搜到你的網站。你需要在 content 屬性中以逗號 (,) 列出你所有希望被搜尋的關鍵字。
  3. <meta name="description" content="你想學習編寫網頁嗎？在這裡，閱讀 15 篇章，學習最新的網頁技術。" />
    這也是讓搜索引擎在列出你的網頁時寫出的網頁內容描述。你可以在 content屬性中寫出這些描述，讓搜索引擎使用者明白你的網站是關於什麼的。

不同的搜索引擎和社交網站會需要需取網頁的資料作分享或排列顯示，所以你需要為你的網站準備好，得到妥善的縮圖等顯示方式，吸引別人。例如： Facebook 開放社交關係圖標記 定義了更多的 meta 標籤，讓你跟隨加入相關的頁面資訊後，在 Facebook 分享時能有完整的顯示，如在連結上附上一幅符合規格的圖片，吸引目光。

<link>

Link 元素是主要用作連接其他檔案的 (除了 JavaScript 檔案)。下列 2 款常用的 link 元素：

  1. <link rel="icon" href="/favicon.png" type="image/png" />
    當rel屬性指定為「icon」值時，這代表你會連接一幅圖片用作網站標示圖。而網站標示圖就是那幅放在瀏覽器索引標籤上的小小圖示。
    而href屬性的值是需要你的那個圖示檔案的URI。還記得嗎？當 URI 由「/」開始時，這個代表位址由起始資料夾開始。
  2. <link rel="stylesheet" href="/stylesheet.css" type="text/css" />
    當rel屬性的值註明為「stylesheet」時，這代表你要引進一份CSS 樣式表，同樣地， href的值是樣式表的 URI。在第一章曾經提及，CSS 檔案也是一份純文字檔案，但這功用是設計網頁的視覺效果。