使用 HTML 編輯器
所有可以編輯「純文字」的編輯器,都能作為 HTML 的編輯器使用,但有些比較優秀的編輯器,提供了「程式碼上色」、「除錯」、「快速產生程式碼」等功能,利用這些編輯器進行編輯 HTML,就能大幅加快開發速度,這篇文章會介紹一些主流的 HTML 編輯器,以及一些好用的線上 HTML 編輯器。
本機環境 HTML 編輯器
只要將文字檔案儲存為「.html」格式,就是一份 HTML 網頁檔案,由於 HTML 是「純文字」檔案,可以單純透過本機環境例如 Windows 內建的 Notepad,Mac 內建的 TextEdit 或 Linux 的 Vim 都可以用來編輯 HTML,但相對來說使用內建的文字編輯器,在程式碼上色或除錯的部分,就稍嫌薄弱。
如果要擁有 HTML 開發的進階功能,就需要安裝一些「程式碼」專用的編輯器,下方列出三個常用的免費編輯器,都可以作為 HTML 的編輯器使用。
編輯器 | 說明 |
---|---|
VS Code | VS Code 是微軟所推出的編輯器,支援語法突顯、程式碼自動補全、程式碼重構...等功能,並且內建了命令列工具和 Git 版本控制系統,是目前主流的編輯器。 |
Atom | Atom 是 GitHub 所推出的編輯器,強調開放原始碼、跨平台、內建 git 及套件系統...等,是目前主流的編輯器。 |
Sublime Text | 由 Google 工程師所開發的軟體,除了開放原始碼以及輕便快速,也具有非常強大的擴充能力,但由於 VS Code 和 Atom 的推出,造成 Sublime Text 變成不是主流的編輯器。 |
線上 HTML 編輯器
除了本機環境的編輯器,如果只是要進行 HTML 的測試或範例展示,也可以使用一些免費的線上 HTML 編輯器,下方列出三個推薦的免費線上編輯器,三款編輯器都有內建主流的 js 函式庫或框架,直接勾選就可以套用。
編輯器 | 說明 |
---|---|
JS Bin | 老牌的「所見即所得」線上編輯器,可以編輯 HTML、CSS 和 JavaScript,許多課程或是範例分享,都會使用 JS BIN 作為展示。 |
JSFiddle | 老牌的「所見即所得」線上編輯器,可以編輯 HTML、CSS 和 JavaScript,許多課程或是範例分享,也會使用 JSFiddle 作為展示。 |
CodePen | 偏向「作品展示」的線上編輯器,除了可以編輯 HTML、CSS 和 JavaScript,更加入社群的功能,讓程式設計師可以在平台裡分享自己的程式作品。 |
小結
不論是本機環境的編輯器還是線上編輯器,只要編輯 HTML 標記語言,就能產生出指定的網頁,不過由於 HTML 的容錯能力很高,就算 HTML 語法有錯誤,產生的網頁往往也能正常顯示 ( 但這樣是錯誤的觀念 ),透過編輯器的一些功能,除了可以加快開發速度,也更能提醒程式碼裡面哪裡有寫錯,總而言之,工欲善其事必先利其器,開發 HTML 之前,先挑選一個好用的編輯器來使用吧。
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~