HTML 是現今網路的支柱。數百萬個網站共同構成了互聯網，而 HTML 正是所有這些網站的基石。二十年前，即使你只是個業餘部落客，也必須掌握一些網頁程式設計知識才能保護網站安全或為網站添加一些簡單的功能。但現在，市面上有這麼多的編輯器和插件，甚至連 HTML 的基礎知識都不再需要。
問題在於，如果你不了解一些基本知識，你的部落格很容易陷入真正的麻煩，甚至不得不聘請昂貴的開發人員來修復一些小問題。不僅如此，對部落格進行一些更改（例如添加自訂文字小工具）也需要一些知識。
如果您發現內容佈局不正確，HTML 知識可以幫助您回到正軌。
開始之前 – HTML 基礎知識
什麼是HTML？
HTML 是 Hyper T分機 MArkupe L語言。它是網頁瀏覽器標記內容的標準語言。
HTML 由「元素」表示。元素也稱為“標籤”。
為什麼需要 HTML？
Web 瀏覽器只能呈現使用其支援的語言編寫的網站。 HTML 是最常見的標記語言，且對 Web 瀏覽器的接受度最高。
這就是您需要 HTML 的原因。
HTML 區分大小寫嗎？
HTML 不區分大小寫。但最佳實踐是使用正確的大小寫來編寫 HTML。
建立第一個 HTML 檔案的步驟
你可以用電腦上的記事本來建立一個基本的HTML檔。但是寫很多行程式碼會比較麻煩。
你需要一個程式碼編輯器。一個好的程式碼編輯器可以讓你更輕鬆地編寫和組織大型程式碼。我推薦使用 Notepad++（免費開源）來編寫 Web 語言。你也可以使用其他編輯器，例如 Sublime Text、Atom 等。
這是你需要做的事情：
- 安裝程式碼編輯器
- 打開它
- 創建一個新文件
- 將其儲存為 .html 文件
1.你好，世界！
將以下程式碼複製並貼上到新的 HTML 檔案中並儲存。現在在您的 Web 瀏覽器上執行它。
HTML代碼
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
輸出：
恭喜！您已經建立了第一個 HTML 檔案。現在您無需理解它的含義。我們稍後會講解。
了解 HTML 結構
每個 HTML 檔案都有一個共同的裸結構。一切從這裡開始。每個大型頁面的程式碼經過精簡後都會回歸到這個結構。
那麼，讓我們嘗試從「Hello World！」程式碼來理解它。以下元素是每個 HTML 檔案的必要部分。
- = 它向瀏覽器聲明這是一個 HTML 檔案。您必須在標籤。
- = 這是 HTML 檔案的根元素。你寫的所有內容都在和。
- = 這是瀏覽器的元資訊部分。此標籤內的程式碼沒有視覺輸出。
- = 這是 Web 瀏覽器渲染的部分。您在網站上真正看到的是程式碼在和。
2. HTML標籤
HTML 是由數百個不同標籤組成的。你需要了解它們的工作原理，並確保你正確地使用了它們。
HTML 標籤通常包含一個開始標籤和一個結束標籤。開始標籤包含關鍵字，關鍵字被小於號 (<) 和大於號 (>) 包圍。結束標籤的所有內容相同，但在小於號 (<) 後多了一個正斜線 (/)。
頭部標籤
所有 head 標籤都位於和。它們包含網頁瀏覽器和搜尋引擎的元資訊。它們基本上沒有視覺輸出。
Title 標籤定義了網頁的標題，該標題在瀏覽器標籤頁中可見。此資訊供網路程式和搜尋引擎使用。每個 HTML 檔案最多只能有一個標題。
代碼：
<title>My first web page</title>
Link 標籤用於將你的 HTML 頁面與外部資源連結。它的主要用途是將 HTML 頁面與 CSS 樣式表連結起來。它是一個自閉合標籤，不需要結尾。這裡 rel 代表與文件的關係，src 代表來源。
代碼：
<link rel="stylesheet" type="text/css" src="style.css">Meta 是另一個自閉合標籤，它提供 HTML 檔案的元資訊。搜尋引擎和其他網路服務會使用這些資訊。如果您想針對搜尋引擎優化您的頁面，元標籤是必不可少的。
代碼：
<meta name="description" content="This is the short description that search engines show"script 標籤用於包含伺服器端腳本或連結到外部腳本檔案。它的起始標籤可以包含兩個屬性：type 和 source (src)。
代碼：
<script type="text/javascript" src="scripts.js"></script>Noscript 標籤在 Web 瀏覽器中停用腳本時起作用。它使頁面與 Web 瀏覽器中不允許腳本的使用者相容。
代碼：
<noscript><p>Alas! Scripts are disabled.</p></noscript>身體標籤
所有 body 標籤都位於和它們具有視覺輸出功能。大部分工作都在這裡完成。您必須使用這些標籤來建立主頁內容。
到
這些是標題標籤。最重要的標題標籤是最不重要的是。您應該在正確的層次結構中使用它們。
代碼：
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>輸出：
格式化標籤
HTML 檔案中的文字可以使用多種格式化標籤進行格式化。當您想要突出顯示內容中的某個單字或一行時，這些標籤就必不可少。
代碼：
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>輸出：
您可以使用註釋標籤來避免某些程式碼的渲染。這些程式碼會顯示在原始程式碼中，但不會被渲染。此標籤的主要用途是建立 HTML 文件的文檔，以供日後參考。
示例：
<!-- <p>You can comment out any code by surrounding them in this way</p> -->其他重要的 HTML 標籤
錨點是一個非常寶貴的標籤，幾乎無所不在。你在網路上看到的任何一個網頁，都至少需要一個錨點連結。
結構相同。它有開頭和結尾部分。您要錨定的文字位於和之間。
有一些屬性定義使用者點擊後去往何處以及如何去往。
- ahref=” “ = 定義目標連結。連結位於雙引號之間。
- 目標=” “ = 它定義了 URL 是在新瀏覽器標籤中開啟還是在同一個標籤中開啟。 target=”_blank” 表示在新選項卡中打開，target=”_self” 表示在同一個選項卡中打開。
- 相對=” “ = 定義目前頁面與連結頁面的關係。如果不信任連結頁面，可以定義 rel=”nofollow」。
代碼：
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>輸出：
圖像標籤是另一個重要的標籤，沒有它，您無法想像許多基於圖像的網站。
是一個自閉合標籤。它不需要像。在正確使用它之前，您需要了解一些屬性。
- 原始碼=” “ = 用於定義圖片的來源連結。請將連結放在雙引號內。
- alt=” “ = 代表替代文字。當您的圖片無法載入時，此文字會提示使用者圖片缺失。
- 寬度=” “ = 它以像素為單位定義影像的寬度。
- 高度=” “ = 它以像素為單位定義影像的高度。
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />輸出：
提示：想要插入可點擊的圖片？用標籤包裝圖片代碼。看看效果如何。
或者
清單標籤用於建立項目清單。代表有序列表（編號列表）和代表無序列表（項目符號）。
清單項或者帶有標籤. li 代表列表。你可以擁有任意數量的正如你在父母裡面所想的那樣或者標籤。
代碼：
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>輸出：
Table 標籤用於建立資料表。它包含一些內層標籤，用於定義表頭、行和列。
是外部父代碼。在此標籤中，代表表格行，代表表格列和代表表頭。
代碼：
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>輸出：
注意：第一個是標題。因此，我們使用對文字套用粗體文字效果。
表分組
您可以使用表格分組元素擴充表格的功能。有時您需要建立拆分為多個頁面的大型表格。
將表格資料分組為表頭、內文和表尾，即可允許獨立捲動。表頭和正文部分將列印到表格跨越的每一頁。
表格分組標籤為：
- = 用於包裝表格的標題。它會列印到表格的每個拆分頁上。
- = 用於包裝表格的主要資料。您可以擁有任意數量的根據需要。標籤表示一組單獨的資料。
- = 用於包裝表格的頁腳資訊。它會列印到表格的每個拆分頁上。
請注意，分組並非強制使用。您可以使用它來使更大的表格更具可讀性。然而，一些特殊的開發人員會將這些標籤用作 CSS 選擇器。
以下是我們如何將範例表分組為，和：
代碼：
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>輸出：
表單元素用於建立網頁的互動式表單。 HTML 表單包含多個連續的元素。例如： ， ETC。
form 中的 action 屬性非常重要，它指向一個服務端或第三方頁面來處理資訊。處理資訊需要先定義一個方法。
您可以使用 get 或 post 兩種方法中的任一種。 Get 以 URL 格式傳送所有訊息，而 Post 則在訊息正文中傳送訊息。
表單的輸入類型有很多種。最基本的輸入類型是文字。它的寫法如下：類型也可以是單選按鈕、複選框、電子郵件等等。底部應該有一個提交類型的輸入框，用於建立提交按鈕。
tag 用於建立標籤並將其與輸入框關聯。標籤與輸入框關聯的規則是，標籤的 for=” ” 屬性和輸入框的 id=” ” 屬性的值必須相同。
代碼：
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>輸出：
注意：我已將操作指向空值，因為它沒有連接到任何伺服器來處理資訊。
3. HTML 屬性
屬性是 HTML 標籤的修飾符，用於為 HTML 標籤新增新的配置。
屬性類似 attributename=” ”，位於 HTML 的開頭標籤。屬性值位於雙引號之間。
id=”” 和 class=””
id 和 class 是 HTML 標籤的識別碼。不同的 HTML 元素使用識別碼來指定不同的名稱。你可以將一個 class 標識符用於多個元素。但不能將一個 id 標識符用於多個元素。
代碼：
<h1 class="heading">This is the main title</h1>href=””
href 代表超文本引用。它們將用戶引導至引用連結。錨標籤使用 href 將使用者引導至目標 URL。
代碼：
<a href="https://www.google.com/">Google</a>源碼=”””
src 代表來源。它定義了 HTML 文件中使用的媒體或資源的來源。來源可以是本機 URL，也可以是第三方 URL。
代碼：
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt=””
alt 代表替代文本。它是 HTML 元素無法載入時使用的備用文字。
代碼：
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />樣式=””
style 屬性通常用於 HTML 標籤中。它在 HTML 標籤內完成 CSS 的功能。樣式屬性應放在雙引號之間。
代碼：
<h2 style="color:red">This is another title</h2>4. 程式碼顯示：區塊級 vs. 內聯
有些元素總是從新行開始，並佔據整個可用寬度。這些元素被稱為“塊”元素。
前任： ， ， - 、表格等
有些元素只佔用所需的空間，並且不另起一行。這些元素被稱為「內聯」元素。
前任： ， ， ，， ETC。
使用 CSS 樣式時，需要區分塊元素和內聯元素。在本 HTML 指南中，這並非必需。
代碼：
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>輸出：
5. HTML 中的雙引號與單引號
這個問題很明顯。在 HTML 中應該使用什麼？單引號還是雙引號？人們似乎都用，但哪一個才是正確的呢？
在 HTML 中，單引號和雙引號是一樣的。它們在輸出中沒有任何區別。
您可以使用任何您喜歡的程式碼。但是，在同一頁面中混合使用兩種程式碼是一種不好的做法。您應該使用其中一種代碼。
6. 語意 HTML 與非語意 HTML
語意HTML是HTML的最新版本，也稱為HTML5，是非語意HTML和XHTML的開發版本。
為什麼 HTML5 比較好？在先前的版本中，HTML 元素是透過 id/class 名稱來識別的。例如：被視為一篇文章。
在 HTML5 中，標籤表示自己是一篇文章，而不需要任何 id/class 識別碼。
由於採用HTML5，搜尋引擎和其他網路應用程式現在可以更好地理解網頁。語意網站已被證明對SEO更有利。
以下是一些流行的 HTML5 標籤的清單：
- = 這是為了包裝您想要向觀眾展示的主要內容。
- = 用於標記內容的標題部分，例如標題或作者元資料。
- = 它為您的檢視者指定使用者定義或獨立的內容。
- = 它可以將任何程式碼分組，例如頁首、頁尾或側邊欄。你可以說它是 div 的語意形式。
- = 這是您的頁腳內容、免責聲明或版權文字所屬的地方。
- = 它使您能夠插入音訊檔案而不會出現任何插件問題。
- = 喜歡，您可以使用此標籤插入視頻，而不會出現插件問題。
簡單的 HTML5 結構如下圖所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. HTML驗證
大多數 Web 專業人員在完成程式碼後都會進行驗證。為什麼程式碼運作正常後還需要驗證呢？
驗證程式碼可能有兩個原因：
- 它將幫助您使程式碼跨瀏覽器和跨平台相容。程式碼在您目前的瀏覽器中可能不會顯示任何錯誤，但在另一個瀏覽器中可能會顯示。程式碼驗證可以修復它。
- 如果您的網頁有錯誤，搜尋引擎和其他網路程式可能會停止抓取。您可以透過驗證來確認網頁是否有重大錯誤。
W3C Validator 是最受歡迎的程式碼驗證服務。它提供多種程式碼驗證方法。您可以上傳文件，也可以直接在驗證引擎中輸入代碼。
邁出下一步：從編寫 HTML 到建立和託管您的網站
現在您已經對 HTML 基礎知識有了紮實的理解，可以順利建立功能齊全、結構良好的網頁了。無論您是繼續手動編碼，還是更喜歡更精簡的方法，都有大量工具可以幫助您實現專案。
如果您希望在不深入程式碼的情況下建立網站，請考慮探索 我們的最佳無程式碼網站建立者列表。這些平台可讓您使用直覺的拖放介面輕鬆設計和啟動專業網站 - 非常適合在不犧牲靈活性的情況下快速將您的想法變為現實。
對於準備上線 HTML 專案的使用者來說，選擇合適的託管服務至關重要。看一些 本指南中最好的靜態網站託管提供商 找到可以完美補充您手工編碼的網站的經濟實惠的選項。
無論你選擇哪條路，將你的 HTML 技能與合適的工具和託管解決方案結合，就能為你的線上形象奠定堅實的基礎。祝你程式愉快！
