HTML (HyperText Markup Language) 教學

HTML (HyperText Markup Language, 超文字標示語言) 是用來編寫網頁 (web pages) 的基本語言，通常 HTML 會和 CSS 及 JavaScript 一起使用來開發網頁應用程式。

HTML 是一種「標示語言」而非程式語言，而網頁瀏覽器 (web browser) 像是常見的 Chrome, IE, Safari, Firefox 懂得知道如何讀取 HTML 檔案，並將 HTML 中所描述的內容呈現在頁面上。

所以呢，為什麼要學 HTML？因為 HTML 是三個網頁開發的基礎語言的其中一個：

  • HTML: 用來描述網頁的內容和語意結構
  • CSS: 用來描述網頁的樣式和畫面如何被呈現
  • JavaScript: 用來描述網頁的行為，讓網頁可以跟使用者和 server 做互動

對於網頁前端 (frontend) 的開發者而言，HTML 可是一定要學會的吃飯技能！

那，我們可以用 HTML 來描述什麼內容呢？舉例來說，我們可以用 HTML 語法來描述網頁的標題、一個段落、一張表格、在網頁中嵌入圖片、影片或建立互動式表單等。

一份 HTML 檔案文件 (HTML document) 看起來會像是由一堆標籤 (tags) 結構所組成，所謂的標籤是一個個使用尖括弧 <tagname> ... </tagname> 包圍的 HTML 元素 (HTML elements)，不同的標籤包圍著表示不同內容的區塊，瀏覽器會解讀 HTML 標籤來呈現網頁內容，但不會將標籤本身顯示在頁面上，標籤只是用來標示及區分不同的語意內容。

HTML 文件本質上只是單純的純文字檔，舉個例子，一份 HTML 文件會長得像這樣子：

<!DOCTYPE html>
<html>
  <head>
    <title>網頁標題</title>
  </head>
  <body>
    <h1>這是一級標題</h1>
    <p>這是一個段落</p>
  </body>
</html>

每一個 HTML 標籤包圍的內容中，可以再包含其他的 HTML 標籤，所以說 HTML 文件的結構是屬於一種階層樹狀 (巢狀) 的結構：

         +-------+
         | html  |
         +---+---+
             |
    +--------+------+
    |               |
 +--+---+        +---+--+
 | head |        | body |
 +--+---+        +---+--+
    |                |    
+---+---+       +----+----+
| title |       |         |
+-------+   +---+--+   +--+--+
            |  h1  |   |  p  |
            +---+--+   +--+--+
                |         |
              text      text

簡單解釋說明一下上方的 HTML 文件，其中：

  • <!DOCTYPE html> 標籤用來聲明這是一份採用 HTML5 語法標準的文件
  • <html> 標籤是 HTML 文件的根元素
  • <head> 標籤中的包含著不會被顯示在頁面上的內容，用來說明關於該網頁的元資訊 (metadata)
  • <title> 標籤用來指定該網頁的標題，通常會顯示在瀏覽器的頁籤上
  • <body> 標籤中包含著會被顯示在頁面上的內容
  • <h1> 標籤用來指定一級/最重要的標題
  • <p> 標籤用來包含一段文字段落

那怎麼看編輯完的 HTML 網頁實際會長什麼樣子呢？答案很簡單，就是用瀏覽器打開啊，將 HTML 檔案拖曳到瀏覽器直接打開，或在 HTML 檔案上按右鍵選擇用瀏覽器打開檔案看看！