搜尋

使用 HTML 編輯器

所有可以編輯「純文字」的編輯器,都能作為 HTML 的編輯器使用,但有些比較優秀的編輯器,提供了「程式碼上色」、「除錯」、「快速產生程式碼」等功能,利用這些編輯器進行編輯 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 編輯器

除了本機環境的編輯器,如果只是要進行 HTML 的測試或範例展示,也可以使用一些免費的線上 HTML 編輯器,下方列出三個推薦的免費線上編輯器,三款編輯器都有內建主流的 js 函式庫或框架,直接勾選就可以套用。

編輯器 說明
JS Bin 老牌的「所見即所得」線上編輯器,可以編輯 HTML、CSS 和 JavaScript,許多課程或是範例分享,都會使用 JS BIN 作為展示。
JSFiddle 老牌的「所見即所得」線上編輯器,可以編輯 HTML、CSS 和 JavaScript,許多課程或是範例分享,也會使用 JSFiddle 作為展示。
CodePen 偏向「作品展示」的線上編輯器,除了可以編輯 HTML、CSS 和 JavaScript,更加入社群的功能,讓程式設計師可以在平台裡分享自己的程式作品。

HTML 教學 - 使用 HTML 編輯器

小結

不論是本機環境的編輯器還是線上編輯器,只要編輯 HTML 標記語言,就能產生出指定的網頁,不過由於 HTML 的容錯能力很高,就算 HTML 語法有錯誤,產生的網頁往往也能正常顯示 ( 但這樣是錯誤的觀念 ),透過編輯器的一些功能,除了可以加快開發速度,也更能提醒程式碼裡面哪裡有寫錯,總而言之,工欲善其事必先利其器,開發 HTML 之前,先挑選一個好用的編輯器來使用吧。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

彈出視窗

alert() 警告視窗 confirm() 確認視窗 prompt() 輸入視窗

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片 嵌入 Canva 簡報 嵌入 Scratch 創作