HTML 教學：掌握網頁設計的基礎關鍵

HTML（HyperText Markup Language，超文本標記語言）是一種用於建立網頁內容並將其呈現在網絡瀏覽器上的標準標記語言。這種語言讓我們能夠創建和格式化網頁上的各種內容，包括文本、圖像、視頻、以及超鏈接，這些鏈接可以引導你到其他網頁或者網站。

HTML簡介

HTML 文件是由一系列的標籤（tags）組成，這些標籤描述了網頁上各元素的意義和屬性。例如，<h1> 到 <h6> 的標籤用來標記六種大小的標題，<p> 標籤用來標記段落，<a> 標籤創建超鏈接，而 <img> 標籤則用來插入圖片。HTML 是建立網頁的基礎，瀏覽器讀取 HTML 文件，並將其渲染成可視或可聽的網頁。為了讓網頁更具吸引力，開發人員通常還會使用 CSS（Cascading Style Sheets，層疊樣式表）來添加風格和布局，以及使用 JavaScript 來添加互動性。

HTML語法能做什麼：

結構化內容：HTML 定義網頁的結構，將內容分為標題、段落、圖片等不同區塊。
支援多媒體：HTML 可以嵌入圖片、音頻、視頻等多媒體元素，提升網頁的互動性。
超連結：透過 <a> 標籤，HTML 允許在網頁間建立超連結，實現網頁之間的跳轉。
表單提交：HTML 提供 <form> 元素，讓使用者可以輸入資料並提交到伺服器進行處理。
表格展示：利用 <table> 標籤，HTML 能夠顯示數據表格，清楚呈現資料。
支援樣式與設計：HTML 支援透過 CSS 定義網頁的樣式和佈局，使頁面更具視覺吸引力。
與 JavaScript 互動：HTML 與 JavaScript 結合，能夠實現動態功能和用戶互動。
SEO 支援：HTML 標籤（如 <title> 和 <meta>）有助於搜索引擎優化（SEO），提升網站的可見度。
語義化標籤：HTML5 引入了語義化標籤（如 <header>、<article>），使網頁結構更清晰，便於維護。
跨平台支援：HTML 是網頁標準，支援各種設備和瀏覽器，保證內容一致呈現。

HTML 的主要標籤有哪些：

HTML (超文本標記語言) 是網頁設計的基礎，主要的功能如下：

HTML 主要標籤表

標籤	用途說明
<!DOCTYPE html>	宣告這個文件是 HTML5 文檔，告訴瀏覽器應該用 HTML5 標準解析。
<html>	HTML 頁面的根元素，所有的其他 HTML 標籤都要放在這個標籤內。
<head>	包含關於網頁的資訊，這部分不會在網頁上顯示。
<title>	設定網頁的標題，會顯示在瀏覽器的標籤上。
<meta>	用來設定關於網頁的元數據，例如編碼、描述、關鍵字等。
<link>	用來連結外部資源，例如 CSS 檔案。
<body>	顯示網頁的主要內容，瀏覽者在瀏覽器中看到的部分。
<h1> 到 <h6>	標題標籤，從 h1（最大）到 h6（最小）。
<p>	段落標籤，用於顯示段落文字。
<a>	連結標籤，用來建立超連結。
<img>	圖像標籤，用來插入圖片。
<ul> & <li>	無序列表標籤，<ul> 是列表的容器，<li> 是列表項目。
<ol> & <li>	有序列表標籤，<ol> 是列表的容器，<li> 是列表項目，會自動加上編號。
<div>	區塊元素，用於分隔頁面上的區域，通常用於布局。
<span>	行內元素，用於對文字或其他行內元素進行分組。
<table>	表格標籤，用於建立表格。
<tr> & <td>	表格的行（<tr>）和單元格（<td>）標籤。
<form>	表單標籤，用來收集使用者輸入資料，包含不同輸入類型。
<input>	輸入欄位標籤，常用於表單內，定義文字輸入、按鈕、選單等。
<button>	按鈕標籤，定義一個可以點擊的按鈕。
<select> & <option>	下拉選單標籤，<select> 用於創建下拉選單，<option> 定義選項。
<iframe>	內嵌框架標籤，用於在頁面中嵌入另一個 HTML 網頁。
<nav>	導航標籤，用於定義頁面中的導航區塊。
<header>	頁眉標籤，通常包含網站或頁面的標題、導航等。
<footer>	頁腳標籤，定義頁面的尾部內容。
<article>	文章標籤，表示一個自包含的獨立內容區塊。
<section>	區段標籤，用於將頁面內容分組為不同的邏輯區段。

總的來說，HTML 是網頁設計的基礎，提供了網頁內容結構的描述和媒體內容的呈現，並且與 CSS 和 JavaScript 結合，可以建立出功能豐富的網頁和應用程式。

編寫基本的HTML

開始編寫 HTML 很簡單，你只需要一個簡單的文本編輯器（如 Notepad、Sublime Text、Visual Studio Code等）就可以開始。

線上即時 HTML 編輯器，修改原始碼立即查看效果變化：https://html.cafe/

以下是一個基本的 HTML 頁面的範例：

1<!DOCTYPE html>
2<html lang="zh-TW">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>我的網頁標題</title>
7</head>
8<body>
9    <h1>歡迎來到我的網頁</h1>
10    <p>這是網頁內容。</p>
11</body>
12</html>

這是一個非常基礎的 HTML 文件，它的結構如下：

<!DOCTYPE html>：這個宣告讓瀏覽器知道該文件是一個 HTML5 文檔。
<html>：這個標籤是 HTML 頁面的根元素，所有的其他 HTML 標籤都要放在這個標籤的內部。
<head>：這個區域包含了所有關於網頁的資訊，但不會在網頁上顯示出來。例如，你可以在這裡設定網頁的標題。
<body>：這個區域是瀏覽者在瀏覽器中看到的部分，包括文字、圖片、連結、表格、列表等等。
<h1>：這是一個主標題標籤，網頁可以有多個標題，從 <h1> 到 <h6>，其中 <h1> 最大，<h6> 最小。

HTML元素的基本組成部分：

起始標籤：每個HTML元素都是由一個起始標籤開始的。這個標籤是由小於符號 < 和大於符號 > 包圍的元素名稱，比如 <p>。這個標籤告訴瀏覽器，一個新的元素從這裡開始。
結束標籤：與起始標籤相對應，每個HTML元素都應該有一個結束標籤。這個標籤的格式與起始標籤類似，但在元素名稱前面加了一個斜線 /，比如 </p>。這個標籤告訴瀏覽器，該元素在這裡結束。當撰寫HTML時，不要忘記每個元素的結束標籤，否則可能會出現不可預期的結果。
內容：在起始標籤和結束標籤之間的部分就是元素的內容。對於上述的 <p> 元素來說，內容就是一段文字。
元素：所以，一個完整的HTML元素包括了起始標籤、內容和結束標籤。

此外，HTML元素還可以包含屬性。屬性提供了關於元素的額外信息，並且可以改變元素的行為或外觀。每個屬性都在起始標籤中定義，並由屬性名和屬性值組成。例如，<img src="myimage.jpg"> 中的 src 就是一個屬性，它指定了圖像的來源。

你可以將上述的代碼打入到你的文本編輯器中，然後保存為一個 .html 檔案。

在你的工作區域中，建立一個新的文件，並將其命名為 index.html。這是你網站的首頁。當你在瀏覽器中輸入你的網站地址，如果沒有指定特定的網頁，瀏覽器將自動尋找 index.html 這個文件作為首頁來顯示。

在 index.html 文件中，你可以開始寫入你的 HTML 碼。以上是一個最基本的 HTML 文件的結構：

這段 HTML 碼定義了一個非常基本的網頁，包含了一個標題和一段文字。你可以將這段 HTML 碼插入你的 index.html 文件中，然後在瀏覽器中打開這個文件來查看你的網頁。

如果你的 HTML 編輯器會自動插入這些基本的 HTML 結構，或者如果你正在使用一款所見即所得（WYSIWYG）的編輯器，則你可以跳過手動插入這段 HTML 碼的步驟。

HTML基礎程式碼教學大全

1. 基本網頁結構

完整的HTML文件範例
這是每個網頁都需要的基本結構。

1<!DOCTYPE html>
2<html lang="zh-TW">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>我的網頁標題</title>
7</head>
8<body>
9    <h1>歡迎來到我的網頁</h1>
10    <p>這是網頁內容。</p>
11</body>
12</html>

2. 標題與段落

各種標題大小和段落文字
HTML提供6個等級的標題，從h1到h6。

1<h1>最大標題</h1>
2<h2>第二級標題</h2>
3<h3>第三級標題</h3>
4<h4>第四級標題</h4>
5<h5>第五級標題</h5>
6<h6>最小標題</h6>
7
8<p>這是一個段落。段落標籤會自動在前後加上間距。</p>
9<p>這是另一個段落。你可以在段落中加入<br>換行<br>標籤來強制換行。</p>

3. 文字格式化

各種文字樣式標籤
用來改變文字的外觀和強調重點。

1<p>這是<strong>粗體文字</strong>的範例。</p>
2<p>這是<em>斜體文字</em>的範例。</p>
3<p>這是<u>底線文字</u>的範例。</p>
4<p>這是<mark>螢光標記</mark>的範例。</p>
5<p>這是<small>小字</small>和<del>刪除線</del>的範例。</p>
6<p>數學公式：H<sub>2</sub>O 和 E=mc<sup>2</sup></p>

4. 清單

有序清單和無序清單
用來組織和顯示項目列表。

1<h3>無序清單 (項目符號)</h3>
2<ul>
3    <li>第一項</li>
4    <li>第二項</li>
5    <li>第三項</li>
6</ul>

1<h3>有序清單 (數字)</h3>
2<ol>
3    <li>步驟一</li>
4    <li>步驟二</li>
5    <li>步驟三</li>
6</ol>

5. 連結與圖片

超連結和圖片顯示
網頁最重要的兩個元素：連結到其他頁面和顯示圖片。

1<!-- 基本連結 -->
2<a href="https://www.google.com">前往Google</a>
3
4<!-- 在新視窗開啟連結 -->
5<a href="https://www.youtube.com" target="_blank">在新視窗開啟YouTube</a>
6
7<!-- 電子郵件連結 -->
8<a href="mailto:someone@example.com">發送郵件</a>
9
10<!-- 圖片 -->
11<img src="image.jpg" alt="圖片描述" width="300">
12
13<!-- 圖片連結 -->
14<a href="https://www.example.com">
15    <img src="logo.png" alt="公司標誌">
16</a>

6. 表格

表格結構
用來顯示表格式資料，包含標題行和資料行。

1<table border="1">
2    <thead>
3        <tr>
4            <th>姓名</th>
5            <th>年齡</th>
6            <th>城市</th>
7        </tr>
8    </thead>
9    <tbody>
10        <tr>
11            <td>小王</td>
12            <td>25</td>
13            <td>台北</td>
14        </tr>
15        <tr>
16            <td>小李</td>
17            <td>30</td>
18            <td>台中</td>
19        </tr>
20    </tbody>
21</table>

7. 表單

使用者輸入表單
收集使用者輸入資料，包含各種輸入欄位和按鈕。

1<form action="/submit" method="post">
2    <label for="name">姓名：</label>
3    <input type="text" id="name" name="name" required>
4    
5    <label for="email">電子郵件：</label>
6    <input type="email" id="email" name="email">
7    
8    <label for="age">年齡：</label>
9    <input type="number" id="age" name="age" min="1" max="120">
10    
11    <label for="gender">性別：</label>
12    <select id="gender" name="gender">
13        <option value="male">男性</option>
14        <option value="female">女性</option>
15    </select>
16    
17    <label for="message">留言：</label>
18    <textarea id="message" name="message" rows="4"></textarea>
19    
20    <input type="checkbox" id="agree" name="agree">
21    <label for="agree">我同意服務條款</label>
22    
23    <button type="submit">提交</button>
24    <button type="reset">重置</button>
25</form>

8. 區塊和佈局

HTML5語意標籤
用來組織網頁的結構和佈局，讓網頁更有語意。

1<header>
2    <h1>網站標題</h1>
3    <nav>
4        <ul>
5            <li><a href="#home">首頁</a></li>
6            <li><a href="#about">關於我們</a></li>
7            <li><a href="#contact">聯絡我們</a></li>
8        </ul>
9    </nav>
10</header>
11
12<main>
13    <section id="home">
14        <h2>歡迎來到我們的網站</h2>
15        <p>這是主要內容區域。</p>
16    </section>
17    
18    <article>
19        <h3>文章標題</h3>
20        <p>文章內容...</p>
21    </article>
22</main>
23
24<aside>
25    <h3>側邊欄</h3>
26    <p>相關連結或廣告</p>
27</aside>
28
29<footer>
30    <p>© 2025 我的網站。保留所有權利。</p>
31</footer>

學習建議：
1. 從基本結構開始，逐步學習每個標籤
2. 複製代碼到文字編輯器中練習
3. 保存為 .html 文件用瀏覽器開啟查看效果
4. 嘗試修改內容和屬性，觀察變化
5. 結合CSS樣式讓網頁更美觀

把圖片放入網頁

現在您已經有一個基本的網站，您可以通過添加圖片的方式來增加網站的美觀度和氣氛。顯示圖片在您的網頁上有兩種方式。第一種方式是通過下方的編碼連結到另個網站的圖片。

1    <p><img src="https://www.domain.com/圖片名稱"></p>

藉由使用上面的HTML標籤，您可以顯示位於其他網站上的圖片，這也稱作是熱連結（直接連結）。然而，我們建議您不要使用這種類型的連結，因為它會導致您的網頁載入速度變慢。若放置圖片的網站刪除了圖片，您的網頁也就無法正常顯示圖片。下方的編碼為建議與替代的方式：

1    <p><img src="圖片名稱"></p>

或著若您有個名為"圖片（images）" 的文件夾：

1    <p><img src="images/圖片名稱"></p>

您把mypic.gif文件存在那裡，圖片則將顯示在你的網站上。添加圖片是美化網站的最好方式。然而，若增加過多圖片（尤其是動態圖片），這將使網頁過於俗不可耐且增加了網頁載入所需的時間。請記住，瀏覽者平均瀏覽網站的時間是10秒，所以您必須讓您的網頁載入速度越快越好。

最後，永遠不要在首頁放置檔案太大的圖片。大檔案的圖片會大大的降低網頁的載入速度而導致於瀏覽者離開您的網站。若您想在網站上放檔案大的圖片，我們建議您建立一個小一點的縮圖（thumbnail）。若瀏覽者真的想看大檔案的圖片，就可以透過點擊縮圖來觀看原圖。

了解檔案路徑

當在包含圖片與HTML文件的電腦建立其它目錄（文件夾）時，了解路徑的結構是非常重要的。很多時候，使用者誤建一個錯誤的連結，讓頁面只能離線工作，而並不能在網絡或其他電腦上顯示。

1    images/圖片名稱

請注意，在上面的路徑中，是先指定目錄，然後再指定該文件。

接著，若您想回到上一層目錄的圖檔mypic.gif，則可以使用下面的例子：

1    ../圖片名稱

在這個例子裡，請注意有兩個點（..），而這是告訴瀏覽器說您想要回到上一層目錄。但若您想回到上一層，然後再到名為 "other" 的同層目錄內的圖檔，您可以先輸入../，再輸入想去的那個目錄和文件名，下面為例子：

1    ../other/圖片名稱

這個規則可以使用多次。假如若您想到3層外的目錄內的圖片，那您可以使用下面的例子：

1    ../../../image/圖片名稱

PC (Windows)用戶常見的錯誤是HTML 網頁編輯器（HTML editor）可能會指定把文件儲存在電腦硬碟，如C:\mywebpageimagemypic.gif。這樣的本地路徑在自己的電腦硬碟可以顯示正常，然而當上傳到網絡後，卻無法正常顯示文件。

最後，請記住，指定路徑時，需使用 "/" 而不是 "＼" 。

大小寫區隔性

然而，對於網址（URL）來說，路徑和文件名是區分大小寫的。也就是說，https://www.example.com/Page 和 https://www.example.com/page 可能會導向到不同的頁面，這取決於網站的伺服器。某些伺服器可能會將所有的URL都轉換為小寫，但並不是所有的伺服器都會這樣做。

比如在Linux和Unix等作業系統中，檔案名稱是區分大小寫的。也就是說，"Mypage.htm" 和 "mypage.htm" 會被視為兩個完全不同的檔案。因此，當你在這些系統上運行的伺服器上建立網頁時，必須確保你的超連結的大小寫與目標檔案的大小寫完全一致。

不過，即使在不區分大小寫的作業系統上，將所有的檔案名稱和網頁元素都使用小寫也是一種良好的習慣。這不僅可以避免潛在的大小寫問題，還可以使你的網頁代碼更易於閱讀和維護。同時，這也是網頁開發者遵循的一種通用的最佳實踐。

因此，雖然HTML元素名稱的大小寫並不重要，但在命名網頁文件並創建超連結時，你應該始終保持一致的大小寫。一般的最佳實踐是使用小寫，因為這樣可以避免一些可能的問題，例如在區分大小寫的文件系統中，Page.html 和 page.html 會被視為兩個不同的文件。

結語

創建並設計一個網頁可能比我們在這裡介紹的基礎知識更為複雜。當你掌握了HTML這兩種基本技術之後，你可以進一步學習CSS，以便更好地設計和調整你的網頁版面。如果你希望你的網站有更進階的功能，例如討論區、網頁計數器或電子郵件表單，那麼你可能需要更深入學習程式語言例如 PHP ASP ..等。

如果以上的內容對你來說感到困難，那麼你可以選擇使用網路上的CMS服務，例如WordPress和部落格服務，這些都可以讓創建網頁的流程變得簡單許多。但是，需要注意的是，這些服務通常都提供一些預設的版型和插件，可能對網頁的自定義性有所限制。如果你希望擁有一個完全自己定制的網站，那麼你還是需要學習一些基本的網頁設計知識。

8800超值方案

模組購物車方案

半客製形象網站方案

客製化網站專案