什麼是 HTML ？｜程式設計初學者指南
更新日期： 2022 年 4 月 17 日
HTML 是一種程式語言，用來構成大多數的網頁與應用程式。
它是 Hypertext Markup Language 的縮寫，中文名稱為「超文本標記語言」。
我們可以將 「超文本標記語言」， 拆分成「 超文本 」與「 標記語言 」兩部分理解。
※ 超文本
「超文本」是一種文字，與一般文字的差異在於，此種文字包含了超連結。
當使用者點擊該文字，等同於點擊文字背後嵌入的連結，會讓使用者移動到另一個網頁、影片等等。
※ 標記語言
「標記語言」是一種電腦語言，它會幫檔案內各區塊貼上標籤，以此告訴電腦該檔案的呈現方式。
我們以「不要瞎掰好嗎」這句話為例。
若我們在該文字貼上「<h1>」標籤，則那句話就會變成文章大標題。
若我們是貼上「<p>」標籤，則那句話只是一般的文章內文。
換句話說，標記語言就是透過「貼標籤」的方式，去規定電腦檔案內的各區塊，該以怎樣的方式展現。
我們使用 HTML 的原因，包含以下常見目的：
- 網頁開發：網頁開發人員會使用 HTML 程式碼，設計網頁元素的呈現方式，例如文字、連結與影音檔案。
- 網站瀏覽：透過 HTML 讓文字嵌入連結，讓使用者可以輕鬆地瀏覽相關網頁。
- 網路檔案製作：我們可以使用 HTML 語法，製作並組織網路檔案，有點類似 Microsoft Word 軟體。
值得注視的一點， HTML 現在已經被視為官方正式標準語法。
「全球資訊網協會」會維護、制定技術規範，同時提供定期更新。
以下文章將會提供 HTML 基礎介紹，包含它如何用做、優缺點，以及它與 CSS 、JavaScript 的關聯性。
HTML 如何運作
平均每個網站都會擁有數個 HTML 頁面。
舉例來說，網站會包含「首頁」、「關於頁面」以及「聯絡頁面」等不同的 HTML 檔案。
所有的 HTML 頁面，都會由一個個 HTML 元素組成。
每個 HTML 元素，又是由標籤（tags ）與屬性（attributes）建構。
我們可以將 HTML 元素，想像成搭建網頁的磚頭。
標籤將會告訴瀏覽器，該元素開始與結束的地方，也就是每塊磚頭的大小。
屬性則會告訴瀏覽器，該元素具備怎樣的特徵，意同磚頭的造型與功能。
運作機制一：標籤
網頁中的每個元素，基本上都會具有三個部分。
- 起始標籤：用來表明該元素開始作用的地方。起始標籤是由「<>」符號包住。例如，我們可以使用<p>此起始標籤，新增一個文章段落。
- 內容：這是使用者會看的網頁內容
- 結束標籤：用來表示元素結尾，它由「</>」包圍。例如使用</p>，標示一個段落的結束。
將上述三部分組成合而成，會形成以下 HTML 元素。
<p>這是透過 HTML 語法，新增的文章段落</p>運作機制二：屬性
除了最基礎的 HTML 標籤，我們還會在 HTML 標籤內，增加一個額外語法：屬性。
屬性是由兩個部分構成 — 「屬性名稱」與「屬性值」。
「屬性名稱」用於表示該元素額外新增的資訊類別，「屬性值」則是進一步給出特定的規格。
例如，若我們想將一段文章段落的文字，顏色改成紫色，同時字體大小要改成 40 px，可以使用「style」屬性完成
在<p>標籤的基礎上，會新增黑體部分的屬性程式碼：
<p style="color:purple; font-size:40px;">這段文字，會被更改字體大小與顏色</p>屬性：class
除了「style」屬性，還有另一個 HTML 元素屬性，稱為：「class」屬性。
對於網站開發者來說， class 相較於 style 更有價值與影響力。
class 屬性與 style 屬性的作用相同，都能替網頁的元素新增額外資訊。
差別在於， class 屬性可以同時針對多個區塊，進行統一改變與新增，而不用像 style 屬性一個個段落去撰寫。
因為 class 屬性的運作機制，是先在網頁設定區域製作好一個「外觀樣式模板」。
當特定區塊想要改變外觀，可直接套用已製成的模板，就可以一次性大規模改變。
舉例來說，若我們想要網頁的「大標題標籤」<h1>與「段落標籤」<p>，有相同的樣式設定。
我們可以新增好一個 class 屬性，並替該屬性命名「samestyle」（我隨便取的），之後在下方直接套用模板，即可順利完成。
程式碼如下：
<html>
<head>
<style>
.samestyle {
background-color: blue;
color: white;
border: 2px solid black;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h1 class="samestyle">這是一個大標題。</h1>
<p class="samestyle">這是一個段落。</p>
</body>
</html>你如果對上面的程式碼有疑惑，先別著急。
我們可以先將重點放在畫底線的地方，了解 class 的用作機制即可。
屬性：img
多數元素，都擁有一個開頭標籤與結尾標籤。
但還是有些元素，不需要結尾標籤。我們稱此種元素為「置空元素」（empty elements）
這種元素由於不包含「內容」區塊，因此不需要結尾標籤。
例如網頁插入圖片時，會使用 img 元素標籤。
<img src="這裡放圖片連結" alt="這裡放圖片描述">img 標籤內，我們會使用兩個屬性：「src」屬性與「alt」屬性。
src 屬性會使用圖片的網址，用以呈現網頁的圖片；alt 屬性則是該圖片的描述，告訴電腦該圖片的內容。
運作機制三：宣告
最後一點，每一個 HTML 檔案，都必須以「宣告」語法開頭，用來告訴瀏覽器，此文件是一份 HTML 檔案。
在 HTML 最新的版本中，會以下方程式碼表示：
<!DOCTYPE html>HTML 的元素特性
在 HTML 語法中，一個元素可以由 142 種標籤撰寫而成。
就算現今瀏覽器，早已不支援其中某些標籤，但多多學習各種不同的標籤，對撰寫網頁仍有幫助。
接下來，我們將探討兩種不同的元素特性：「區塊元素」與「行內元素」，及其對應的 HTML 標籤。
特性一：區塊元素
區塊元素的特性，在於它會將一行的網頁空間全部佔滿，並在下一行開始另一個區塊元素。
舉例來說，網頁通常會先有一個大標籤，並且在標題的下方呈現說明文字。
此原理就是使用兩個區塊元素達成，第一行使用<h1>元素標籤，第二行使用<p>元素標籤。
通常撰寫一份 html 檔案，是由三個區塊元素建構而成。
- <html> 標籤：是 html 最根本的標籤，用來定義整份 html 檔案。
- <head> 標籤：用來設定網頁的基本設定，包含網頁的名稱與該網頁的補充說明等（作者、內容關鍵字）
- <body> 標籤：使用者實際會看到的網頁內容。
<html>
<head>
<!--不會呈現在網頁上，主要是寫給電腦看得-->
</head>
<body>
<!--會呈現在網頁上，主要是寫給使用者看得-->
</body>
</html>包含在<body>標籤內，還可以有以下區塊元素：
- 標題標籤：此標籤由大標題至小標題，分別為<h1>、<h2> 一路排序到<h6>。
- 段落標籤：網頁內文部分，通常會使用<p>段落標籤。
- 條列式標籤：條列式標籤有許多種變化，最常見為「點列式」與「數字排列」兩種方式。
點列式就是只有一個黑點，使用<ul>標籤表示。
數字排列則會有「1.」、「2.」等數字在左側，使用<ol>標籤呈現。
不論是<ul>或<ol>開頭的標籤，內文都統一使用<li>標籤呈現。
以下程式碼，為<body>結合上述內容的內容。
<html>
<head>
</head>
<body>
<h1>這是大標題</h1>
<p>這是一個文字段落</p>
<ul>
<li>第一點</li>
<li>第二點</li>
<li>第三點</li>
</ul>
<body>
</html>特性二：行內元素
「行內元素」表示此種元素的特性，呈現時會並排在同一行，直到該行並排不下，才會換至下一行。
由下圖所示，它的排序方式由左至右，由上至下。
行內元素最常使用的情境，是在不打斷原始內容呈現下，進行額外資訊的補充。
常見的標籤如以下：
- <strong>標籤：替文字加上黑色粗體
- <em>標籤：使文字變成斜體字
- <a>標籤：讓文字嵌入超連結。
此外，<a>標籤通常會搭配<href>屬性使用，示範嵌入程式碼如以下。
<a href="https://example.come">點擊我</a>HTML 5 與 HTML 差別是什麼？
HTML 最早的版本只有 18 個標籤。
從那時開始，隨著每個版本的更新，都會推出新的標籤與屬性。
一直到現在我們使用的 HTML 5 版本，是在 2014 年推出。
若要仔細查看 HTML 5 與其他版本的差異，在於它支援新型態的「表單控制」。
讓網頁設計者，能更夠方便的製作一份簡單的表單，讓使用者填寫並獲取聯絡資訊。
此外，HTML 5 也推出一些具備語意的標籤，用來描述網頁內容，例如<article>、<header>、<footer>
HTML 優點與缺點
如同其他的電腦語言，HTML 擁有它的優勢與劣勢。
優點
- 初學者友善：HTML 擁有一個簡潔、具有連貫性的標記語法，學習曲線相較低平容易上手。
- 廣泛支援：此語言被廣泛使用，有許多網路資源與大型社群能提供初學者幫助。
- 容易使用：它是一個可以任意取用的免費程式語言，在所有瀏覽器也都能運作。
- 具有彈性：HTML 非常容易與後端程式語言相容，例如 PHP 或 Node.js
缺點
- 各自獨立：使用者需要為每個頁面，重新撰寫一份 html 檔案，就算內容完全相同。
- 瀏覽器相容性：有些舊式瀏覽器，無法支援新推出的標籤。
- 靜態語言：此語言主要用於靜態網頁，內容寫好就不會再變動。 對電商平台來說，它無法滿足自動生成產品頁面的需求。可能需要 JavaScript 或後端語言 PHP 才能處理。
HTML 與 CSS、Jacascript 語言的關係
HTML 可以用於新增文字元素，並創造出一個網頁的主要架構。
但若只有這些內容，無法幫助你打造一個專業、響應式的網頁。
因此，HTML 需要 CSS 與 JavaScript 語言的幫助，用來補足網站其他部分的內容。
CSS 主要用於網頁樣式，例如背景、顏色、排版、留白與動畫。
另一方面，JavaScript 可以新增動態的功能，例如滑動、彈出與圖片集等動態元素。
網頁需要具備以上三種前端語言，才能打造出一個標準的網頁。
後記
以上簡單介紹了基礎的 HTML 框架。
最後我們整理了重點統整，幫助各位讀者再次複習。
HTML 是一種程式語言，用來構成大多數的網頁與應用程式。
我們可以將 「超文本標記語言」， 拆分成「 超文本 」與「 標記語言 」兩部分理解。
「超文本」是一種文字，與一般文字的差異在於，此種文字包含了超連結。
當使用者點擊該文字，等同於點擊文字背後嵌入的連結，會讓使用者移動到另一個網頁、影片等等。
「標記語言」則是一種電腦語言，它會幫檔案內各區塊貼上標籤，以此告訴電腦該檔案的呈現方式。
每個 HTML 元素，又是由標籤（tags ）與屬性（attributes）建構。
我們可以將 HTML 元素，想像成搭建網頁的磚頭。
標籤將會告訴瀏覽器，該元素開始與結束的地方，也就是每塊磚頭的大小。
屬性則會告訴瀏覽器，該元素具備怎樣的特徵，意同磚頭的造型與功能。
區塊元素的特性，在於它會將一行的網頁空間全部佔滿，並在下一行開始另一個區塊元素。
舉例來說，網頁通常會先有一個大標籤，並且在標題的下方呈現說明文字。
此原理就是使用兩個區塊元素達成，第一行使用元素標籤，第二行使用元素標籤。
「行內元素」表示此種元素的特性，呈現時會並排在同一行，直到該行並排不下，才會換至下一行。
由下圖所示，它的排序方式由左至右，由上至下。
如果還有不懂的地方，可以參考下面這部影片，作者針對初學者，提供了淺顯易懂的教學。