什麼是HTML？初學者指南

你想建立自己夢寐以求的網站，但又不想讓它看起來像曲奇餅模版。任何精通網頁設計的人都會告訴你，你首先需要了解 HTML。但什麼是 HTML，又該如何學習呢？

你希望自己釋出的網站與眾不同，具有獨創性。你要有同行業無人使用的元素和設計。畢竟，你的網站是許多潛在客戶對你企業的第一印象。

但在此之前，您需要學習一種名為 HTML 的計算機語言。從本質上講，這種語言規定了當訪客訪問你的網站時，網路瀏覽器應該向他們顯示什麼內容。

在本文中，我們將解釋 HTML 是什麼、它是如何誕生的、它是如何使用的、它是如何工作的，併為你提供一些基本的 HTML 培訓以及如何學習更多知識的建議。

你準備好學習如何編寫網站程式碼，而又不會建立一個殘缺不全的頁面了嗎？讓我們馬上開始吧。

什麼是 HTML？

HTML 是 “超文字標記語言” 的縮寫，是一種用於建立網頁的相對簡單的語言。由於它不允許使用變數或函式，因此不被認為是一種 “程式語言”，而是一種 “標記語言”，一種使用標記來定義文件中元素的語言。

如果你向網頁設計領域的任何人詢問 HTML 是什麼，你很可能會得到一個冗長的解釋，讓你頭暈目眩，尤其是如果你和世界上大多數人一樣，對編碼和從頭開始建立網站一無所知的話。

定義 html 的四個要點（來源：Studypool）

那麼，”超文字標記語言” 是什麼意思呢？讓我們來分析一下。

超文字是按順序排列的文字，通常通過連結（也稱為超連結）將相關專案連線起來。標記語言向網路瀏覽器描述網頁的樣式和結構。

因此，HTML 可以確保文字和圖片顯示在正確的位置，使用者可以輕鬆瀏覽網站。網路瀏覽器從網路伺服器載入這些資訊，生成你每天看到的網站。

如果要檢視 HTML 的原始形式，你會看到很多符號和括號，似乎毫無意義。然而，這一切都有助於最終面向客戶的產品。

網站的結構就是通過 HTML 建立的。這種語言與 CSS（層疊樣式表）和 JavaScript 相互配合，為使用者建立出具有視覺吸引力和互動性的網站。

這裡的底線是，HTML 是良好網頁的基礎。沒有它，你就無法與網站訪問者共享文字，更不用說為你夢想中的網站新增個人特色了。

HTML 的歷史

蒂姆-伯納斯-李（Tim Berners-Lee）爵士於 1991 年底建立了 HTML，但這種編碼語言直到 1993 年才向大眾釋出。

那時，HTML1 首次問世。從一開始，它就是作為一種通過網路瀏覽器共享資料的手段。

由於當時建立網站的開發人員不多，HTML 的發展在釋出後不久就陷入了停滯。

1995 年，HTML2 釋出，並增加了新的功能，使其在 1997 年成為網頁設計的標記語言標準。

這時，戴夫-拉格特（Dave Raggett）開發出了 HTML3。它為網站管理員在設計網頁時提供了更強大的特性。不幸的是，HTML3 的出現超前了。HTML3 的功能實際上拖慢了瀏覽器的速度，因為它們還不具備應用這些功能的能力。

HTML4.01 於 1999 年開發，支援多媒體選項。這次升級還包括樣式表、列印功能和額外的指令碼語言。

HTML4 與 HTML5 結構上的區別（來源：JavatPoint）

HTML5 於 2015 年釋出。HTML5 的推出增加了更多媒體儲存支援和特定內容元素。此外，內聯型別、音訊和視訊嵌入也變得更加簡單。

2022 年，全世界都在使用 HTML5.2，它在我們最需要的時候改進了內容安全政策。

它還非常注重電子商務，增加了支付請求 API。這次升級還為殘疾人增加了無障礙的網際網路應用。

HTML 有何用途？

這個問題的簡單答案是：HTML 用於建立世界各地的個人和企業網站。

實際答案要比這詳細得多。

自 20 世紀 90 年代以來，HTML 一直是網路文件和網站的預設語言。它與瀏覽器配合使用，幫助瀏覽器理解網站的結構和相關樣式。

從本質上說，HTML 是一種藍圖，它告訴網路瀏覽器如何為訪問者組合網站。當使用者輸入您的 URL 時，瀏覽器會根據 HTML 程式碼中建立的構件來組合頁面。

HTML5 所有功能（來源：SCF）

這反過來又有助於使用者在瀏覽網頁時，通過 CSS 樣式表對 HTML 文件中的元素進行樣式化處理，使網頁看起來與預期效果一致。

當前版本的 HTML 還允許在網站上直接執行視訊、音訊、電子表格和其他應用程式。如果你曾經對網站上的這些元素驚歎不已，那就要感謝 HTML5 了。

這種標記語言還能通過超連結確保網站內部導航的流暢性。

網站設計人員還可以使用 HTML 建立線索生成表單，以收集電子郵件和姓名（前提是使用其他語言編碼的檔案為該操作提供動力）。

如果使用外部外掛，還可以使用 HTML 在網站內建立預訂系統或搜尋表單，從而方便預訂和導航。

HTML 是在網站上包含非動態內容的方式，也就是希望每位訪客都能以相同方式看到的內容。如果需要動態內容，還需要使用 JavaScript、PHP 或其他程式語言。

HTML 如何工作？

截至 2023 年 10 月，網際網路上有超過 45.9 億個網頁。其中許多網頁都是簡單的 HTML 檔案。(注意，這裡說的不是網站，而是網頁）。

傳統上，如果你的網站有 150 個頁面，那麼你就可能有 150 個獨立的 HTML 檔案。但如今，情況發生了變化。如果你使用的是內容管理系統（CMS），大多數人都會使用，情況就不會是這樣，因為它通常會根據資料庫中儲存的資料動態生成頁面。

網際網路頁面數量圖表

這些檔案也稱為 HTML 文件，是網站的組成部分。每個頁面都有各種頁面內和頁面外元素，這些元素都在 HTML 文件中佔有一席之地。這包括元標籤、標題標籤和 alt 標籤等後臺元素，也包括視訊、圖片、文字塊等物理元素以及其他面向使用者的功能。

HTML 文件由哪些部分組成？

所有 HTML 文件都以 .html 或 .htm 結尾。這些文件包含向網路瀏覽器提供靜態資訊的所有文字和標記。

HTML 文件是使用者網路瀏覽器用來構建網站的指導手冊。瀏覽器會讀取它所引用的所有檔案（CSS 樣式表、支援動態元素的 JavaScript 檔案等），然後相應地渲染頁面，讓瀏覽者看到預期的效果。渲染是實際的構建過程，每次有人瀏覽到網站上的特定頁面時都會進行渲染。

如果 HTML 文件或其中包含的任何檔案出現問題，網站就無法正確呈現。這就好比在組裝宜家辦公桌時，沒有一件重要的部件或工具。

現代網站包含各種由標記和屬性組成的 HTML 元素。這些元素構成了網頁的結構。與每個元素相關的標籤顯示了它們的開始和結束位置。如果沒有封閉元素的標籤，瀏覽器就會將所有後續內容放在該列或該行中，即使這並不是你想要的。

頁面中與每個元素相關的屬性說明了組成這些元素的各種特性。

所有 HTML 文件都以 <!DOCTYPE> 宣告開始。這種文件型別定義（也稱為 DTD）決定了 XML 文件的結構和元素。

<div> 曾經是建立內容塊的主要選擇，而在 HTML5 中，您還可以使用 <main> 等特定塊來向爬蟲表明塊中的內容型別，在本例中就是主要的部落格/文章內容。

HTML 基礎知識

如果你想成為一名網頁設計師，或者至少想參與建立自己公司的網站，就必須學習 HTML。就像世界上所有需要學習的東西一樣，你必須從基礎開始，這樣才能更好地理解更高階的元素。

當然，你也可以使用免費的 HTML 編輯器或 Sublime Text，但深入瞭解 HTML 的工作原理將有助於你提高所建網站的個性化程度。

我們將在下文中介紹一些 HTML 基礎知識，幫助你開始熟練使用 HTML。

HTML 元素

所有 HTML 元素，無論建立的是什麼，都有相同的三個組成部分。有開頭標籤、內容本身和結尾標籤。

HTML 元素的三個組成部分

開頭標籤向網頁瀏覽器顯示頁面元素的起始位置。例如，它可以顯示頁面上視訊播放器或文字段落的開始位置。所有的開頭標記都使用開頭和結尾的角括弧來標記自己。例如，開頭標籤 <em>  用於強調內容，如斜體。您可以將此標籤放在要強調的文字之前。

內容本身是使用者看到的實際資訊。它可以是書面文字，如部落格文章。也可以是圖片或視訊的嵌入程式碼。當放置在開頭標籤之後時，內容將從指定位置開始。

收尾標籤與開頭標籤相同，但會在元素名稱前新增一個正斜線。回到我們之前的強調標記示例，將該標籤 </em>  放在要強調的文字末尾。

例如，如果要斜體顯示 “exactly”一詞，可以這樣編碼：

<em>Exactly.</em>

在面向使用者的實際頁面上，它看起來是這樣的：

Exactly.

HTML 元素還包括屬性，屬性包含名稱和屬性值。屬性名顯示使用者要新增的內容，屬性值則提供附加資訊。

對於影象標籤，顯然需要指定要顯示的影象，因此看起來像這樣：

<img src=”img_girl.jpg”>

如果您想在使用 Arial 字型時將頁面上的某個段落變為紅色，可以使用樣式屬性：

<p style="color:red;font-family:arial">

在本例中，我們使用開頭標記 <p> 來表示一個新段落。附加這些屬性後，該段中的所有內容都將以 Arial 字型顯示為紅色，直到結尾標籤 </p> 結束。

但在現代網路開發中，標準的做法是不使用 HTML 樣式屬性來調整單個元素的設計，而是使用單獨的 CSS 樣式表來調整整個頁面的樣式。

HTML class 和 ID 是 HTML 元素的兩個屬性，它們可以 “為元素命名”，幫助你以後使用 CSS 或 JavaScript 來定位這些元素。這有助於提高開發效率。通過使用元素的 ID 或類，你可以在元素中插入樣式資訊，如背景顏色、邊框、字型顏色等。

例如，你可以這樣做，而不是將 HTML 文件中的文字樣式設定為紅色：

<p class=”redtext”>
And in the CSS stylesheet, target the class like this:
.redtext {
color:red;
font-family:arial;
}>/code>

最常用的 HTML 標記和 HTML 元素

有 142 種不同的 HTML 標籤可以建立元素。這些元素由塊級元素和內聯元素組成。

塊級元素跨越整個頁面的寬度，在文件中開始一行新的內容。

以下是一些常見的塊級標記，您可以在網站上使用：

• <head> 該標籤用於列出元資訊，如頁面標題。
• <html> 這是一個根元素。它出現在開頭並定義 HTML 文件。
• <body> body 標籤標識頁面內容。
• <h1> 到 <h6> 這六個不同的標記標識了您可以使用的各種標題。
• <p> 這是段落標籤，表示內容中新段落的開始。
• <ol> 該標記建立一個有序列表。
• <ul> ul 標籤建立了無序列表。
• <li> 這是列表項標籤。它被括在列表中每個專案的有序或無序列表標記中。
• <div> 這是一個塊元素標籤，可以建立一個 “部分”，讓你填充內容（之後再用 CSS 進行樣式調整）。大多數網站和模板在很大程度上都依賴它來組織內容。
• <header> 這是一個專門用於標題內容的塊元素標籤。
• <main> 這是一個專門用於部落格主要內容塊標籤。
• <footer> 此塊標籤用於顯示頁尾資訊，如版權、連結等。

內聯元素是塊級元素中的內容格式。這可以包括強調的內容，如粗體和斜體字型。內聯內容也可以是連結，既可以是內部連結，也可以是外部連結。

內聯連結可在不破壞任何內容流程的情況下格式化文字。

您可能會在網站上使用一些常見的內聯標記。以下是其中一些，排名不分先後：

• <strong> 您可以用它來建立粗體文字。
• <em> 我們在前面的例子中使用過 em 標記，它顯示斜體。
• <a> 這就是超連結標記。它還需要 href 屬性來顯示連結指向的位置（就像 img 標籤需要 src 屬性一樣）。

HTML、CSS 和 JavaScript

我們在本文前面簡要提到了 CSS 和 JavaScript。它們往往與 HTML 相輔相成，共同建立具有個性化特色的先進現代網站。但什麼是 CSS 和 JavaScript？它們與 HTML 有何不同？

HTML、CSS 和 Javascript 之間的區別（來源：Bryt Designs）

我們都知道，HTML 是用來建立結構和為網頁新增元素的。但是，大家也知道，這並不是網站設計的全部。這就是 CSS 和 JavaScript 發揮作用的地方。

CSS 是層疊樣式表的縮寫。它是現代網路開發人員用來設計網站背景、顏色、間距、佈局和動畫的語言和檔案。從本質上講，CSS 描述了 HTML 文件的表現形式，為網頁設計者提供了更大的靈活性和控制權。

通過 .css 檔案，它還能幫助你在多個網頁上應用相同的格式。這些樣式表可確保您不必為每個頁面重新設定格式。此外，.css 檔案還可以快取，從而降低共享相同格式的網頁之間的載入速度。

然後是 Javascript。Javascript 可以建立動態功能，包括圖片庫、彈出式視窗和滑塊。全球 97% 的網站都在使用這種流行的程式語言。所有主流網路瀏覽器都包含專門的 Javascript 引擎，使這些功能的實現更加簡單有效。

Javascript、CSS 和 HTML 相互配合，在桌面和移動平臺上建立出我們每天都能看到的完整、精心設計的互動式網頁。

如何學習 HTML

我們已經瞭解了什麼是 HTML 以及與之相關的一些基礎知識。現在，該談談實際學習使用 HTML 的過程，以及它如何幫助你實現未來和職業抱負。

HTML 不僅僅是一種流行的程式語言。它是網際網路的語言，這一點不會很快改變。它可以與 WordPress 等流行服務攜手合作，你可以使用 HTML 修改許多 WordPress 模板，將它們變成獨一無二的自己的東西。

那麼，讓我們先來了解一下為什麼有人要學習 WordPress。

為什麼要學習 HTML？

學習 HTML 對於任何希望從事網路開發工作的人來說都非常重要。無論是為公司工作還是獨立工作，有才能的網路開發人員總是很搶手，而學習 HTML 是掌握這些技能的基礎。

這一職位不僅需求量大，而且網路開發人員可以輕鬆賺取六位數的薪水。截止 2023 年 10 月，網路開發人員的平均工資為 87,739 美元。

截至 2023 年 10 月的網路開發人員薪資

熟練掌握 HTML 是招聘人員在招聘網路開發人員時所看重的一項基本技能。

如果您不是網路開發人員，但您想招聘一名網路開發人員，那麼在面試應聘者時，對 HTML、CSS 和 JS 的基本瞭解以及它們之間的相互作用將對您有所幫助。您將能夠知道該問哪些問題，並輕鬆剔除那些不知道自己在說什麼的人。

學習資源

對於那些希望進一步學習 HTML 的人來說，我們提供了一些免費的學習資源。我們將帶您瞭解目前最好的幾個資源。

Codecademy

Codecademy 是一項免費提供入門級課程的服務。它包括互動式教程，並採用分屏方式，在您學習的過程中顯示 HTML 編碼的結果。

你可以通過該程式訪問獨家內容，月費為 19.99 美元。

Coursera

Coursera 包含幾門深入學習 HTML 的課程，同時提供來自現實世界的例項。這項服務的月費為 49 美元，可免費試用一週。

W3Schools

W3Schools 是另一項教授 HTML 基礎知識的免費服務。它使用示例、練習和各種資源來實現這一目標。

HTML 語言示例（來源：W3Schools）

您還可以花 95 美元購買自定進度的官方課程，課程結束後會頒發證書。

General Assembly Dash

General Assembly Dash 是一種 HTML 教育資源，為希望涉足網頁設計的初學者提供專案。該課程採用基於目標的方法，幫助你瞭解所學知識在現實世界中的應用。你可以建立一個網站，而不僅僅是完成一個模組。

完成這些專案後，您可以參加線上指導課程，結業後可獲得證書。全額學費為 3,950 美元，但有靈活的融資方案和分期付款計劃。

小結

在可預見的未來，HTML 仍將是網頁設計的支柱。對這些概念的深刻理解甚至可以幫助你從 HTML 建立自己的 WordPress 網站。