網站開發必學的 HTML 基礎知識，包括免費下載的文字編輯器、元素、代碼例子等。

HTML 簡介

HTML 是一種用來描述網頁文件的標記式語言（markup language）。

HTML 是甚麼？

HTML 是 Hyper Text Markup Language 的縮寫
標記式語言是由標記標籤（markup tags）組成
HTML 文件由 HTML 標籤（HTML tags）寫成
每個 HTML 標籤用來描述不同的文件內容

HTML 例子

以下是一個基本網頁的 HTML 標籤：

<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
</head>
<body>

<h1>標題1</h1>
<p>段落</p>

</body>
</html>

標籤解釋：

DOCTYPE 表明這是 HTML 文件
在 <html> 及 </html> 中的文字描述了一個 HTML 文件
在 <head> 及 </head> 中的文字提供了文件資訊
在 <title> 及 </title> 中的文字提供了文件標題
在 <body> 及 </body> 中的文字描述了網頁中顯示的內容
在 <h1> 及 </h1> 中的文字描述了標題
在 <p> 及 </p> 中的文字描述了段落

有了這些描述，網頁瀏覽器便能顯示一個有標題及段落的基本網頁。

HTML 標籤

HTML 標籤是被角括號（angle brackets）包圍的關鍵字（keywords）：

<標籤名稱>內容</標籤名稱>

HTML 標籤一般都是寫成一對的，如 <p> 及 </p>
每對標籤中的第一個標籤是開始標籤（start tag / opening tag），而第二個標籤則是結束標籤（end tag / closing tag）
結束標籤寫法好像開始標籤，但在標籤名稱前加上斜線

網頁瀏覽器

瀏覽器（如 Chrome、IE、Firefox、Safari）的用途是讀取並顯示 HTML 文件。

瀏覽器不會顯示 HTML 標籤，但會用此來決定如何顯示該文件。

HTML 的結構

以下是一個 HTML 網頁的結構，只有白色背景中（<body>...</body>）的內容會被展示：

<html>

<head>

</head>

<body>

<p>這是另一段落</p>

</body>

</html>

`<!DOCTYPE>`

<!DOCTYPE> 幫助瀏覽器正確顯示網頁。

網上有太多種文件類型，要正確顯示，瀏覽器必須知道文件類型及版本。

doctype 沒有大小寫敏感性（case sensitivity），大寫或小寫均被接受：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

常見文件版本

<!-- HTML 5 -->
<!DOCTYPE html>

<!-- HTML 4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 版本

版本	年份
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML 5	2014

HTML 純文字編輯器 (Plain Text Editors)

介紹常用之文字編輯器，如 Windows 內建的記事本（Notepad）或是 Mac 內建的 TextEdit。

以記事本或 TextEdit 編寫 HTML

常用的 HTML 編輯器有：

Notepad++（Windows）
TextWrangler（OS X）
Sublime Text（Windows, OS X, Linux）
Atom（Windows, OS X, Linux）
Adobe Brackets（Windows, OS X, Linux）
Visual Studio Code（Windows, OS X, Linux）

雲端文字編輯器：

codeanywhere（Chrome, iOS, Android）

但對於初學者，還是建議使用Windows內建的記事本（Notepad）或是Mac內建的TextEdit，這樣簡單的文字編輯器有利於學習HTML。

步驟1：開啟編輯器

Windows 10：

按工具列上的搜尋按鈕（左下角數起第2個），輸入「記事本」或「Notepad」。

Windows 8：

進入開始畫面（左下角圖示），輸入「記事本」或「Notepad」。

Windows 7 或之前的版本：

進入開始畫面（左下角圖示），選擇：所有程式 > 附屬應用程式 > 記事本。

Mac機：

開啟TextEdit。
請確保編輯器的設定是「純文字」：Preferences > New Document > Plain text。
同時確保在「Open and Save」中的「Display html file as html code」及「Display RTF file as RTF code」的選項都已選好。

步驟2：寫下第一個HTML檔案

在編輯器輸入或複製以下HTML：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個標題</h1>

<p>我的第一段段落。</p>

</body>
</html>

步驟3：儲存 HTML 網頁

把檔案儲存在電腦。

在記事本功能目錄中，選擇：檔案 > 另存新檔
在檔案名稱中，輸入「index.html」或其他名稱+ .html 或 .htm
在編碼中，選擇「UTF-8」，否則中文網頁會出現亂碼

步驟4：在瀏覽器打開網頁看

最簡單的網頁已完成了！

HTML 基本例子

簡介網頁基本元素，包括文件類型、標題、段落、連結及圖片。

HTML 文件

所有 HTML 文件必須由 <!DOCTYPE html> 定義文件類型，然後文件內容寫於 <html> 及 </html> 中，而可見的部分則寫於 <body> 及 </body>。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個標題</h1>

<p>我的第一段段落。</p>

</body>
</html>

HTML 標題

文字標題由 <h1> 至 <h6> 標籤定義。

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

標題1

標題2

標題3

標題4

標題5

標題6

HTML 段落

文字段落由 <p> 標籤定義。

<p>我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。<p>
<p>我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。<p>

我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。我是段落。

我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。我是另一段段落。

HTML 連結

網頁連結由 <a> 標籤定義。而連結網址由其中的 href 屬性定義。

<a href="https://blog.alyssachan.space/">這是連結</a>

這是連結

HTML 圖片

網頁圖片由 <img> 標籤定義。檔案來源、取代文字、大小（闊度及長度）則由 src、alt、width 及 height 屬性定義。

<img src="https://bit.ly/3bFwknY" alt="取代文字" width="200" height="auto">

HTML 元素

HTML 元素是在開始標籤和結束標籤之間的內容。

開始標籤	元素內容	結束標籤
`<h1>`	我是標題	`</h1>`
`<p>`	我是段落	`</p>`
`<br>`

有些元素沒有結束標籤，如 <br>、<hr>

嵌套的 HTML 元素

HTML 元素可被嵌套（nested），即一個元素中包含另一個/些元素。下例 4 個元素中，<html> 包含了 <body>，而 <body> 則包含了 <h1> 及 <p>。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個標題</h1>

<p>我的第一段段落。</p>

</body>
</html>

空的 HTML 元素

沒有內容的 HTML 元素，稱為空元素。

例如，定義斷行的 <br> 是一個空元素，是沒有結束標籤的，但可在開始標籤同時加上結束的意思：<br />。

HTML5 不要求空元素一定要加上「/」結束符號，但留意 XML 是需要所有 HTML 元素都有寫好結束符號「/」。

參考資料

https://www.w3schools.com/html/default.asp

目錄