在關卡一中，我們將寫出一個自介履歷網頁。不過我們先來介紹一下開發環境：codesandbox，並用此開發環境複習一下 Hello World 範例。明天才正式開始寫自介履歷的部份。
之前寫 Hello World 時，為了降低初學者配置開發環境的門檻，使用了 Codepen 這個線上開發環境服務。實際上，在業界的網頁工程師，幾乎都是在電腦上的文字編輯器 or IDE 做開發。
在自己電腦上的文字編輯器上寫程式有很多好處，像是打字體驗比較好、有很多的插件可以使用、文字編輯器的樣式可以挑選自己喜歡的。但一樣，為了降低學習的門檻、減少開發環境的配置時間，我們採用了一個線上服務：codesandbox。
之所以採用 codesandbox 是有些原因的：
因此在 codesandbox 寫網頁，體驗會很像是在電腦的文字編輯器上寫網頁。請依照教學或自行 Google，嘗試建立一個 static 的 sandbox：codesandbox 提供的一個模版有 static，就是裡面會有基本的 HTML、CSS、JavaScript 檔案的意思。
延伸教學資源
請點擊以下兩個連結，體驗一下 codesandbox 與 codpen 兩者的差別
在 codepen 中，因為它是要給使用者快速 demo 網頁用，所以整個界面只有三個區塊 (HTML、CSS、JavaScript) 可以寫程式。但 codesandbox 就像是在電腦上的文字編輯器一樣，可以載入一個資料夾底下的全部檔案，並且可以新增、修改與刪除檔案。例如這個 hello world 的 codesandbox 頁面，就有 html, css 與 js 的檔案。
至於 package.json 與 sandbox.config.json 兩個檔案，請先忽略他們。package.json 是 JavaScript 專案的產物，可以用來記錄專案的額外資訊。sandbox.config.json 是 CodeSandBox 線上服務的設定檔。在這次的系列文中不需要去理解他們。
在 codepen 中，我們 HTML 語法只有短短的兩行
<div>Hello World!</div>
<button>Click Me</button>
但在 codesandbox 中，卻有十五行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
<link href="./main.css" rel="stylesheet"></link>
<script src="./main.js" defer></script>
</head>
<body>
<div>Hello World!</div>
<button>Click Me</button>
</body>
</html>
這是因為 CodePen 為了方便快速開發與 Demo 網頁，省略了很多東西。CodeSandBox 的 HTML 語法才是比較完整的。接下來將介紹 CodeSandBox 裡面多出來的 HTML 語法在幹麻。
在完整的 HTML 結構中，至少會有以下的標籤：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 指的是，這份檔案的文件類型是 html (HTML5)。在很久之前，HTML 是有分版本的，例如 XHTML 1.1、HTML 4.01。但就像秦始皇的書同文、車同軌政策，現在的 HTML 也統一了規定，只要在 DOCTYPE 直接九天玄女唯一指定 html 就好，不用再指定其他版本號了。
<html lang="en"></html> 是這個 HTML 檔案的根元素。我們可以把一個 HTML 檔案，把裡面的標籤元素都抓出來，最後會形成一個到過來的樹。而 <html></html> 這個元素則是最上層的根節點。
+-------+
| html |
+---+---+
|
+--------+------+
| |
+--+---+ +---+--+
| head | | body |
+--+---+ +---+--+
| |
+---+---+ +----+----+
| title | | |
+-------+ +---+--+ +--+--+
| h1 | | p |
+---+--+ +--+--+
| |
text text
<head></head> 顧名思義，是這個 HTML 文件的頭部。無關內容顯示的一些額外資訊，會放到 <head></head> 這個標籤裡面。另外，CodeSandBox 需要手動引入 CSS 與 JS 語法到 HTML 檔案裡面，分別會使用到 <link></link> 與 <script></script> 標籤。
<head>
<meta charset="UTF-8"> // 網頁文件使用的編碼類型
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // 行動裝置的顯示方式，initial-scale=1.0 代表不縮放
<meta http-equiv="X-UA-Compatible" content="ie=edge"> // 給 IE 的兼容模式，但應該不需要惹
<title>Hello World</title> // 網頁標題，會出現在瀏覽器 tab 上
<link href="./main.css" rel="stylesheet"></link> // 引入 CSS 檔案
<script src="./main.js" defer></script> // 引入 JS 檔案
</head>
<body></body> 這裡面主要就是放網頁上會顯示出來的內容了。基本上會跟 CodePen 上 HTML 區塊中的語法一模一樣。
<body>
<div>Hello World!</div>
<button>Click Me</button>
</body>
今天的文章提到了這些事情
明天將開始寫出一份自介履歷囉
iThome鐵人賽
看影片追技術