在正式開始撰寫網頁應用程式前，我們先來說明一些基本的知識。
要管理檔案，在 Mac 中是使用 Finder 這個程式。(Windows 中是使用「檔案總管」)
為了能夠更好的管理我們開發的程式，厲害的軟體開發者通常會有一個集中存放開發中程式的資料夾。這個資料夾的名稱可以取名為 projects, 或是 codes。
而每一個開發的程式(更厲害的講法叫專案)，會各建立一個子資料夾來放相關的程式碼。
[補：空的 projects 圖]
打開終端機，我們會看到最前面有個 [~] 符號，代表我們正在使用者的「家目錄」裡。(「目錄」跟「資料夾」是同一個意思。)
要切換到其它目錄，要使用「cd 」加上「要去的目錄」指令，像是「cd projects」，並按下「enter」
這樣就會切換到這個目錄下了。
在資料夾中，我們可以輸入mkdir 檔案夾名稱，例如 mkdir my_dir 就會新建一個稱為 "my_dir" 的資料夾。
[TODO: 補圖]
在資料夾中，我們可以打「ls」來列出這個資料夾下的檔案及檔案夾。
在單檔案網頁應用程式中，會將程式寫在一張 HTML 檔案中，通常取名叫「index.html」，要操作這個程式，就是用滑鼠點兩下這個檔案，瀏覽器就會開啟這個檔案，這樣就可以操作這個程式了。在這本書裡，我們會用 Google Chrome 這個瀏覽器來示範。
在某些情況下，我們會需要在操作網頁應用程式的過程中，用程式輸出一些資訊來幫助我們寫程式，這個使用可以使用瀏覽器中的「開發人員工具 devtool」來幫忙除錯，在 Google Chrome 中開啟開發人員工具的方式是按下「Cmd」+「Shift」+「i」
而如果你想要看這個 HTML 檔案的程式碼，那麼就在這個檔案上按下滑鼠右鍵，並選擇「Visual Studio Code」，這樣就會用編輯器開啟這個檔案，這樣就能看到程式碼了。
在單檔案網頁應用程式的情況下，檔案通常包含三個區塊。最上方的 <head> 裡面的 <style> 標籤中，是用來處理畫面上的東西的顏色與位置的 CSS 樣式語言的。
而中間被 <body> 包住的就是這個網頁的內容。不過在某些情況下，裡面可能會只有一個 <div> 區塊，真正的內容是用程式生成的。
在最下方 </body> 結束標籤的上面，會有 <script> 區塊，我們的 JavaScript 程式就會寫在這個區塊裡面。
~: 使用者的家目錄cd: 切換資料夾ls: 列出資料夾內容<style> 標籤裡<body> 標籤裡<script> 標籤裡
iThome鐵人賽
看影片追技術