Loading...

HTML 是 Hypertext Markup Language 的縮寫,也就是「超文本標記語言」(請注意他是標記語言,不是程式語言)。

  • HyperText:一種結構化的文字
  • Markup language:一種用來標記文字的系統語法

身為標記語言,HTML 有各式各樣的標籤去定義網頁的內容要如何呈現,例如元件是文字或圖片還是超連結、元件要放左邊還是放右邊,字體是斜的還是粗的⋯⋯本文帶你了解HTML是什麼,以及快速攻略 HTML標籤。

網頁即是 HTML 文件

所有的網頁都是 HTML 文件,說得更精確一點,所有的網頁內容,都必須透過 HTML 標記來定義。

任何一個副檔名為 .html 的檔案,你都可以用文字編輯器如 Sublime 打開來編輯,或者用瀏覽器點開來看網頁的實際樣子。


最基本的 HTML 網頁結構

打開你的 VSCode,新增一個名為「basic.html」的檔案。

請細讀以下的 HTML,這裡面包含了 HTML 的最基本結構。試著用你自己的觀察描述它,然後把它寫入你的 basic.html

若你是第一次學習 HTML 和 CSS,我們建議你一個字一個字的輸入你的文字編輯器中,而不是使用複製貼上的方式。

讓我們來解釋一下這段 HTML 所表達的意義。

宣告

第一行是一個「宣告」: <!DOCTYPE html> 告訴瀏覽器這份文件是一個 HTML5 的網頁,瀏覽器因而知道要怎麼用正確的方式來展示你的網頁。請注意宣告要寫在第一行,因為瀏覽器是一行一行讀取文件的,想愈早告訴他的資訊,請寫在愈上面。

<html>

<html>...</html> 包住了整個網頁,表示這是一份 HTML 文件。被 <html> 包圍的內容,我們稱為網頁「元素」(element)。一份完整的 HTML 文件,必然會在 <html> 裡包含 <head> <body> 兩個網頁元素。

<head>

<head></head> 包圍的資訊稱為「標頭」,<head> 裡宣告各種網頁資訊,這些資訊不會顯示給使用者看,因為它們的溝通對象是瀏覽器與其他的網路服務,如 Google 搜索引擎,Facebook 等。<head> 宣告的資訊包括網頁標題、外部連結、網頁樣式、JavaScript 腳本、meta tag⋯⋯等。我們在以後的章節會有更詳細的介紹。

現在,請你立刻在標頭裡加上以下內容:


加入上述< meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 在 <head>標籤內,表示要適應各種網路瀏覽器的編碼問題,如:IE瀏覽器預設文字編碼是BIG-5,我們在這邊先宣告統一使用utf-8編碼,解決使用不同瀏覽器會看到亂碼的問題。

接著用瀏覽器打開 basic.html,找找看 <title> 的資訊出現在哪裡?如果你的網頁被搜尋引擎找到,同樣的資訊也會顯示為搜尋結果的標題。

<body>

<body></body> 包圍的內容是會直接顯示給使用者看的內容,也是這個網頁的核心。需要 CSS 來定義樣式的內容,也都會放在 body 裡面,現在,請你立刻在 body 裡輸入以下內容:

<body>
 <h1>我要學會HTML!!!</h1>
</body>

接著刷新瀏覽器,看看網頁裡跑出了什麼?


註解 (Comment) <!-- -->

寫在「註解」(Comment) 裡的東西會被機器直接跳過,通常是工程師協作時交流的注意事項,或是自己的備忘。例如:

<!-- 在這裡我們會埋 Facebook 廣告的追蹤碼 Here we will put Facebook ad pixel -->


HTML 標籤顯示出來的效果

跟著以下影片的操作步驟,我們來實際看看 <title> 與 <body> 標籤,各自所寫入的文字會在哪邊出現效果。

這裡只說明了最基本的 HTML 架構,在下個單元會介紹更多 HTML 的標籤。

HTML 與 Markup

其實他是一個「標記」 (markup) 的概念。HTML 的繪寫是 "Hypertext Markup Language." 而 "markup" 的意思跟用螢光筆劃記的感覺很像,把文字標記起來,賦予某種特性。


請你試試在編輯器寫出以下的五段文字,再用瀏覽器去看看:

  • Results
  • <h1>Results</h1> are impressive!
  • <h4>Results</h4> are impressive!
  • <p>Results</p> are impressive!
  • <strong>Results</strong> are impressive!

有發現什麼嗎?

巢狀標籤與縮排

<html>、<head> 等被 < > 包圍的符號,是 HTML 這種 markup 語言的「標籤」(tag),標籤普遍需要有明確的開始和結束,才能把一段文字包圍起來:

這裡你應該注意到了 HTML 標籤都是成對的,而且是「巢狀」的結構。

瀏覽器需要正確與完整的標記才指定你想表達的意思,所以結構對 HTML 非常重要。只要巢狀的結構有錯,瀏覽器就無法正確呈現你設計的網頁,甚至不會再理會你的網頁內容。但你也別擔心,像 VSCode 這樣的瀏覽器都會自動幫你檢查。

更重要的是,你必須根據巢狀結構好好縮排你的程式碼!「格式碼的可讀性」是評估你是否為合格工程師的重要指標,而清楚的縮排是良好的第一印象,撰寫 HTML 時,請保持不同層級的標籤空 2 格 (如下圖)。

快速攻略 HTML 標籤 基本網頁元素

下面會先介紹最基本的標籤,隨著學習HTML的進展,你會陸續認識新的標籤:

  • 標題:h1, h2, h3, h4, h5, h6
  • 文字段落:p
  • 清單:ul, ol, li
  • 強調語氣:em, strong
  • 換行:br
  • 水平線:hr
  • 超連結:a
  • 圖片:img
  • 區域:div, span
  • 表格:table, tr, th, td
  • 表單:form, label, input

除了 img 標籤外,header、nav、main 和 section 是語義元素 (semantic element),也就是「有意義的元素」,能讓搜尋引擎辨識出正確的網頁內容。

語義元素出自於 HTML5,你可以前往 W3School 瞭解更多資訊。

若你偶爾會使用 Word 等文書處理器,你會對等下介紹的元素非常熟悉,唯一要學的,是用 HTML 標籤來定義這些元素。

常見的 HTML elements


其實一張圖就說完了,現在來動手實作,請你打開剛才建立的 basic.html,跟著介紹來更新你的文件,並隨時刷新瀏覽器裡,看看網頁的樣子。

上一單元我們已經介紹過 title,接下來我們從標題開始,以下介紹的內容,請你一律輸入在 <body></body> 裡面。

標題 headings

<h1>我要學會HTML!</h1>
<h2>我要學會HTML!</h2>
<h3>我要學會HTML!</h3>
<h4>我要學會HTML!</h4>
<h5>我要學會HTML!</h5>
<h6>我要學會HTML!</h6>



可以使用的標題有 6 層,這些標題組合成你的網頁內容大綱,當搜尋引擎找到你的網頁時,會依照標題來認識你的內容,因而判斷相關性。

段落 paragraphs

<h1>我要學會HTML!</h1>
<p>動手做是最好的學習方法。</p>


<p> 把你的內容標記成段落,這是一個很常用的標籤。

清單 list

「清單」有兩種,項目符號的清單,或有數字順序的清單。

無順序的項目符號清單 <ul>(unordered list)

<h2>清單 Lists</h2>

<p>這是沒有順序的項目符號清單</p>

<ul><!-- unordered list -->
<li>這是沒有順序的清單</li>
<li>以 ul 元來定義清單的範圍</li>
<li>用 li 標示各別項目</li>
</ul>


有順序的清單 <ol>(ordered list)

<p>這是有數字順序的清單</p>

<ol><!-- ordered list -->
<li>這是有順序的清單</li>
<li>以 ol 元來定義清單的範圍</li>
<li>一樣用 li 標示各別項目</li>
</ol>


請注意 <li> 元素必然被放在 <ul> 或 <ol> 的下一層,這是 Mozilla Developer Network (MDN) 制定的標準。

清單的巢狀特性,讓他們特別適合被改造成網站的導覽選單 (navigation),學會 CSS 以後,你將會知道怎麼做。

兩種強調: 斜體 (emphasis) v.s. 粗體 (strong)

在 HTML 我們一般會用兩種方法來強調需要強調的內容

  • Emphasis (斜體): <em></em>
  • Strong (粗體): <strong></strong>

在介紹他們如何使用之前,不知道你有沒有發現,目前為止介紹的元素,都是一次佔滿一行?

這種一次佔一行的叫「區塊元素」(block elements),接下來我們舉「行內元素」(inline elements) 的例子,在後面的 CSS 章節你會深入認識兩者的區分。

<h2>行內元素</h2>

<p>校長說:Coding 哪裡都可以學,真正重要的是你的 <em>Mindset</em></p>
<p>再說一次:Coding 哪裡都可以學,真正重要的是你的 <strong>Mindset</strong></p>
<p><em><strong>You need to get it done!</strong></em></p>


空元素 (Empty elements)

上一節我們談到絕大多數的 HTML 標籤都是成對出現,具有開始與結束,以巢狀結構包圍內容,定義出一個區塊。

但某些元素無法包圍任何內容,因此他們被稱為「空元素」(empty element)。最常見的空元素是斷行以及水平線。

斷行 (break)

在 HTML 文件裡,你必須特意定義斷行,例如這樣:

<h2>空元素</h2>

<p>祝你在大航道學習愉快!<br/>
   ALPHA Camp</p>

如果你把 <br /> 拿掉,在網頁裡就只會留下一個空白 (請注意仍然有一個空白)。


此時你應該有注意到我們寫的是 <br /> 而不是 <br>。其實兩種都有效,但寫 <br /> 比較順應長遠的趨勢,斜線代表了標籤的結束,因此當我們寫 <br /> 時,表示你對瀏覽器更明確地定義了這個標籤「結束在開始的位置」。

水平線 (horizontal rules)

讓我們在網頁最下方加上水平線:

<hr/>
<p>恭喜你學完了 HTML 基本元素,就是這麼簡單!</p>


同樣,寫 <hr> 或 <hr /> 都可以。水平線預設的長相就是一條橫線,開始使用 CSS 後,你可以加上更多外觀的改造。

回顧小結

目前為止,你學到了怎麼使用基本的 HTML 元素,除此之外,透過本文的展示,希望你能有所體會,HTML 的功能就是定義你的網頁內容。

清楚佈局你的 HTML 標籤,好處一是能大幅提升之後修改網頁內容與用 CSS 來調整網頁樣式的效率,好處二是對像 Google 這種搜尋引擎來說,他們更容易搞懂你的網頁內容,因而把你放到比較好的搜尋位置。

基於這個理由,雖然有很多「所見即所得」的軟體 (如 Dreamweaver) 能幫你像畫圖一樣打造網頁,但一個好的開發者總是用文字編輯器來撰寫 HTML。

三分鐘小測驗,找到你開始自學網頁開發的入口

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者