網站開發必學的 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>
)的內容會被展示:
<!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 元素都有寫好結束符號「/」。