HTML 語法大全：寫給網頁新手的超實用語法手冊！
HTML 是進入網頁開發世界的第一步，在科技日新月異的時代，無論你是網頁開發者、設計師、數位行銷還是內容創作者，若能具備 HTML 基本知識，都能提升自我價值，獲得更好的機會！以下帶大家認識 HTML基本概念、HTML 語法與元素架構，幫助你快速建立 HTML 基礎認知！
HTML 是什麼？
HTML（HyperText Markup Language，超文字標記語言）是一種用來建立網頁的標記語言，常與 CSS、JavaScript 一起被用來設計網頁介面，可以說是網頁開發的基石。網頁瀏覽器像是常見的 Chrome、Safari 會讀取 HTML 檔案中的標籤（tag）來辨識網頁長什麼樣子，並顯示給使用者看。
對於網頁前端工程師來說，學會基本的 HTML 語法，是必備的職場技能。
HTML 基本語法架構
HTML 文件的本質就是一份純文字檔，像是：
<!DOCTYPE html>
<html>
<head>
<title>我的第一個網頁</title>
<!-- 其他元訊息 -->
</head>
<body>
<!-- 實際網頁內容 -->
</body>
</html>
以下分別說明這段文檔中包含的 HTML 基本架構：
- <!DOCTYPE html>
DOCTYPE 是 Document Type 的縮寫，用來定義 HTML 文檔的類型和版本。在過去的 HTML 版本中 DOCTYPE 聲明可能會比較複雜，但自從 HTML5 推出以來，DOCTYPE 聲明變得非常簡單，只要在文件第一行加上<!DOCTYPE html> ，就能指示瀏覽器使用 HTML5 標準來解析文件。
- <html>
<html> 是 HTML 文檔的根元素，它標記了整個文檔的開始，所有的 HTML 內容都應該被包含在這個標籤內。
- <head>和<body>
<head> 元素包含了文檔的元訊息和其他配置，這些設定不會直接顯示在網頁上。例如：使用標題（<title>）標籤來定義網頁顯示在瀏覽器標籤上的標題、使用 <meta> 標籤來設定字元集、使用連結（<link>） 標籤來連結到外部 CSS 樣式表，用於定義網頁的外觀。
<body> 元素則包含實際要跑給使用者看的網頁內容，常見的元素有標題（<h1>）、段落（<p>）、連結（<a>）、圖片（<img>）等。
HTML 元素架構
HTML 文檔中的元素（Element）是由起始標籤、內容和結束標籤所組成，像是：
<element>Content</element>
- 起始標籤（<element>）
用來定義元素的開始，它由「< >」包圍的元素名稱構成，例如 <p> 表示這是一個段落元素。
- 結束標籤（</element>）
用來定義元素的結束，將元素的範圍劃分出來。結束標籤與起始標籤的名稱相同，但結束標籤會在名稱前加上一個「/」。
- 內容（Content）
起始標籤和結束標籤之間的部分，是元素包含的實際內容，例如文字、圖片、連結等。
- 屬性（Attribute）
用來提供更多的元素資訊，通常出現在起始標籤中，包含一個名稱和一個值，值通常被「" "」括起來。常見的屬性包括 class、id、src、href 等。
<p class="highlight">這是一個帶有樣式的段落。</p>
HTML 語法：標題
以下分別說明幾種常見的 HTML 語法。首先是用來設定標題的 <h>。<h1> 代表主標題、<h2> 代表次標題，依此類推。以下為範例：
<h1>這是 H1 標題</h1>
<h2>這是 H2 標題</h2>
<h3>這是 H3 標題</h3>
<h4>這是 H4 標題</h4>
<h5>這是 H5 標題</h5>
<h6>這是 H6 標題</h6>
HTML 語法：文字樣式
HTML 也可以用來設定各種文字樣式，像是粗體（<strong>）、斜體（<em>）、底線（<u>）、刪除線標籤（<s> 或 <del>）等等。以下為範例：
<p>這是 <strong>粗體</strong> 文字樣式</p>
<p>這是 <em>斜體</em> 文字樣式</p>
<p>這是 <u>底線</u> 文字樣式</p>
<p>這是 <s>刪除線</s> 文字樣式</p>
<p>這是 <del>刪除線</del> 文字樣式</p>
HTML 語法：連結
用 <a> 來建立超連結，可以連結到其他網頁、文件，或是在同一頁面進行跳轉。以下為範例：
<a href="https://www.pcschool.com.tw/webdesign">巨匠電腦網頁設計課程</a>
HTML 語法：清單
用來建立項目清單（<ul>）或編號清單（<ol>），清單項目則使用 <li>。以下為範例：
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ol>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
</ol>
HTML 語法：圖片
<img> 可以用來嵌入圖片，src（source）這個屬性提供了連到圖片檔案的路徑，alt（alternative）則是在圖片無法正確顯示時，會對瀏覽者呈現的說明文字。以下為範例：
<img src="example.jpg" alt="巨匠電腦">
HTML 語法：表單
也可以用 HTML 語法來建立表單，收集用戶輸入的資訊。在以下的範例中：
- <form> 元素包含了所有的表單元素。
- <label> 元素是用來定義表單元素的標籤，例如下方範例的「用戶名」與「密碼」。
- <input> 元素是用來接收用戶輸入的資訊；它有不同的 type 屬性，例如 text 用於輸入文字，password 用於輸入密碼。 <input> 元素的 id 屬性通常與 <label> 中的 for 屬性相匹配；name 屬性則用於指定在提交表單時傳遞到伺服器的參數名稱。
- <br> 元素是換行元素。
- <button> 元素是用於創建按鈕，例如這裡的 type="submit" 屬性指的是當用戶點擊時會提交表單。
<form>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">提交</button>
</form>
了解 HTML 基礎知識後，想學習如何實際架設網站嗎？巨匠電腦為零基礎但想朝網頁設計發展的新手量身打造「
RWD 響應式網頁設計課程」，帶你深入 CSS 及 HTML 語法、了解如何使用 Javascript 與 Bootstrap，並學會製作 RWD 網頁。在網路行銷已成為基本技能的現在，透過這堂RWD 響應式網頁設計課，為自己爭取更多機會、創造更多元的斜槓收入！
免費學習資源不漏接
