雖然本系列文的主題是用 LIFF 做 LINE 整人工具，乍看之下只會用到 LINE API (也就是JavaScript)
但其實 JavaScript 是應用在 HTML 文件上的動態程式語言，完全不懂 HTML 的話光是學 JavaScript 也沒用，所以今天要來介紹 HTML～　
先來個示意圖（JavaScript當然不只有像圖上的這些功能）：

HTML是甚麼?

HTML是撰寫網頁原始碼用的格式，又稱超文本標記語言（HyperText Markup Language），HTML文件是由一系列的標籤（tags）組成，每個標籤都代表不同的功能，這些標籤是網頁的基本運作單位。
下圖是一個基本的HTML頁面的範例：

由上圖可知，網頁是由一堆<>的標籤組成的，且都是一個起始標籤（例： <h1>）對應一個結束標籤（例如：</h1>）。每個標籤名稱都有特殊意義，常見標籤說明如下表：

將上述那段 HTML 原始碼存檔成「index.html」，再用 Chrome 打開會呈現這樣的效果：

雖然這短短的幾行文字就可以組成一個網頁，但真實的網站絕對不會這麼簡單！只要在任意網頁中按F12按鍵，就可以看到網頁的 HTML 原始碼，不過這個整人工具不會用到太複雜的 HTML 語法，因此只要知道幾個基本概念就好～

HTML中的按鈕

HTML 按鈕(button)除了可以用來做為表單的送出之外，還可以用來做特效讓使用者互動，像是結合 JavaScript 的事件觸發指定的功能，這個整人工具會用到 HTML button 連結 LIFF API 的功能，實現 LINE Login、Logout和傳送圖文訊息(shareTargetPicker)的功能。最簡單的按鈕寫法：

<button>這是按鈕</button>

也可以這樣寫，這是表單按鈕的寫法

<input type="button" value="我是按鈕">

兩種方式都會建立外觀相同的按鈕，但實際上的應用不一樣。像是使用<button>才能做出圖片式按鈕的特效，不過這個也不在本整人工具的範圍內，有概念就好~

HTML中的<style>標籤

<style>是用來設定 HTML 文件的樣式，在 <style> 裡面可以編寫 CSS 語法來排版瀏覽器的頁面(就是美化上色的概念，CSS 的部分明天再講)。

HTML中的<script>標籤

<script>可以用來嵌入或引用要執行的程式碼。最常見的用途是嵌入 JavaScript 程式碼。<script> 也能執行其他語言，像是 WebGL (en-US) 的 GLSL shader 程式語言。這些之後會詳細介紹。