HTML 網頁開發基礎知識

2016-04-24

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

網站開發必學的 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>

<title>網頁標題</title>

</head>

<body>

<h1>標題1</h1>

<p>這是段落</p>

<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 編輯器有:

雲端文字編輯器:

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

步驟1:開啟編輯器

Windows 10:

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

Windows 8:

進入開始畫面(左下角圖示),輸入「記事本」或「Notepad」。

Windows 7 或之前的版本:

進入開始畫面(左下角圖示),選擇:所有程式 > 附屬應用程式 > 記事本。

Mac機:
  1. 開啟TextEdit。
  2. 請確保編輯器的設定是「純文字」:Preferences > New Document > Plain text。
  3. 同時確保在「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 網頁

把檔案儲存在電腦。

  1. 在記事本功能目錄中,選擇:檔案 > 另存新檔
  2. 在檔案名稱中,輸入「index.html」或其他名稱+ .html 或 .htm
  3. 在編碼中,選擇「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> 標籤定義。檔案來源、取代文字、大小(闊度及長度)則由 srcaltwidthheight 屬性定義。

<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 元素都有寫好結束符號「/」。

參考資料

免費按讚支持創作

喜歡我的文章,請在下面按讚 5 下,助我得到 LikeCoin 獎賞,支持我繼續創作免費內容。

行有餘力,可以成為我的讚賞公民,每月送我一杯咖啡,從此每份贊助,都會化成實質支持。

作者簡介

香港斜槓族,喜歡學習的宅女。打工時期做過行銷、教育及IT行業。自學技能包括:網站開發、網路行銷、影片製作、平面設計等。

希望透過內在自我認知及外在技能培養的分享,幫助網路創業者實現理想生活,共建和諧美好的世界。

提交評論

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

本網站受 reCAPTCHA 保護,並適用 Google 隱私政策服務條款