HTML前端學習的第一步

一個好的編輯器能幫助我們輕鬆地進行學習程式撰寫

大部分剛接觸電腦程式的人，會對編輯器產生一些疑問，下面來帶大家一步步認識

什麼是編輯器？

電腦儲存文字的方式是透過文字編碼的方式，用位元來表示文字。而如果一個檔案是以文字編碼的形式儲存的，稱為文字檔。 

在我們的電腦裡面，檔案被分為兩大部分：

• 文字檔：以文字編碼的形式儲存
• 二進位檔：其他編碼形式儲存

而文字編輯器，顧名思義就是用來讓我們輸入文字可以進行編輯的應用程式，Word、記事本、Pages…等或是線上的 Google Docs 都可以算是文字編輯器。

為什麼要用編輯器？

Microsoft 的 Front Page 和 Adobe Dreamweaver 都是非常快速且容易入門的軟體，但是遇到複雜結構的HTML時，設計頁面往往都不是很正確的顯示，最重要的一點是這兩款都是付費的軟體，公司不見得都會提供使用。

我過去個人的經驗是使用 Dreamweaver 來製作 wireframe ，當時不算是做正式的網頁，只是快速的製作與RD溝通的介面來討論後台介面，而 Dreamweaver 在對應一些簡單的畫面時是蠻方便的，可以快速的選取以及修改，但當頁面越來越多層的時候畫面就開始不明原因的跑掉，後面都是直接開html使用瀏覽器來做確認，這樣的情況下軟體就沒什麼使用價值了。

而近年來的編輯器除了撰寫 HTML 以及 CSS 之外，也提供了非常多的插件供不同的語法使用，非常方便。

編輯器選擇

編輯器種類其實蠻多的，包括常見的 Visual Studio Code 、 Notepad++ 、 Brackets 、 Sublime  等等， Survery的過程中，我首先選澤了 Sublime 作為第一次學習接觸的工具，最後選擇 Sublime 的原因其實也蠻簡單的，就只是買的線上課程講師使用這個編輯器XD，不過當然也是想使用看看來做比較，後續應該也會嘗試著使用 Visual Studio Code 以 及 Brackets 來做比較。

Sublime 官網下載點

https://www.sublimetext.com/3

▲Sublime官網

另外其實也有蠻多線上編輯器可以選擇，我個人是推薦 codepen ，他可以快速地看到撰寫好的內容，算是蠻方便的一個線上編輯器。

Codepen網站

https://codepen.io/

▲Codepen介面

最後來談談 Sublime 的資源有哪些

Sublime 最讓人推崇的部分是開源豐富的插件

第一步 安裝 PackageControl

https://packagecontrol.io/

▲PackageControl官網

第二步 搜尋自己需要的插件

點擊 Popular 可以看到目前最常被使用的插件有哪些

▲插件列表

點入可以看到插件說明

那麼我們下一篇：Sublime編輯器環境安裝教學 再來談談安裝細節

其他編輯器分享：Brackets編輯器環境安裝教學