Loading...

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

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

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

如何有系統學習 HTML/CSS/JavaScript,下載全端開發學習地圖

網頁即是 HTML 文件

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

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


最基本的 HTML 網頁結構

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

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

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

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

宣告

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

<html></html>

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

<head></head>

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

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


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

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

<body></body>

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

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

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


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

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

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


HTML 標籤顯示出來的效果

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

這裡只說明了最基本的 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),標籤普遍需要有明確的開始和結束,才能把一段文字包圍起來:</head></html>

這裡你應該注意到了 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></h1>我要學會HTML!
<h2></h2>我要學會HTML!
<h3></h3>我要學會HTML!
<h4></h4>我要學會HTML!
<h5></h5>我要學會HTML!
<h6></h6>我要學會HTML!



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

段落 paragraphs

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


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

清單 list

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

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

<h2></h2>清單 Lists

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

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


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

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

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


請注意 <li> 元素必然被放在 <ul> 或 <ol> 的下一層,這是 </ol></ul></li>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></p>校長說:Coding 哪裡都可以學,真正重要的是你的 <em></em>Mindset!<p></p>
<p></p>再說一次:Coding 哪裡都可以學,真正重要的是你的 <strong></strong>Mindset!<p></p>
<p><em><strong></strong></em></p>You need to get it done!<p></p>


空元素 (Empty elements)

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

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

斷行 (break)

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

<h2></h2>空元素

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

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


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

水平線 (horizontal rules)

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

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


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

認識HTML、CSS 是什麼,快速了解網頁設計入門

回顧小結

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

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

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

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

----

更多技術學習資源
前端 JavaScript | HTML /CSS| Bootstrap | RWD | DOM | API | AJAX | Postman | jQuery
後端 HTTP / HTTPS | Node.js | MongoDB | Git | SQL / NoSQL | Docker
其他 VSCode | Web App | Leetcode