HTML 編輯器

TML編輯器是一種用于創建、編輯和預覽HTML（超文本標記語言）代碼的工具或應用程序。它提供了一個直觀的界面，使用戶能夠輕松地編寫和設計網頁內容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。

參考文檔：https://www.cjavapy.com/article/3299/

1、Visual Studio Code（VS Code ）

Visual Studio Code（簡稱VS Code）是一款由微軟開發的跨平臺源代碼編輯器，支持Windows、macOS和Linux等多種操作系統。它被廣泛用于Web開發，包括編輯HTML、CSS、JavaScript等前端技術。VS Code是一款輕量級的代碼編輯器，啟動迅速，占用資源少。VS Code提供了豐富的擴展和插件，可以根據需求安裝插件來增強編輯器功能。

1）安裝和配置

官網地址：Visual Studio Code - Code Editing. Redefined

根據操作系統下載并安裝相應版本的VS Code。打開VS Code后，可以根據自己的喜好配置編輯器設置，如主題、字體等。

2）新建HTML文件

在 VS Code 安裝完成后，選擇" 文件(F)->新建文件(N) "，在新建的文件中輸入以下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個標題</h1>
 
<p>我的第一個段落。</p>
 
</body>
</html>

3）編輯HTML文件

在VS Code中，點擊左上角的"文件"菜單，選擇"打開文件"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。

在編輯器中可以直接修改HTML文件的內容。VS Code會自動識別HTML標記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。

4）插件推薦

HTML CSS Support：提供對HTML和CSS的支持，包括代碼片段、自動補全等功能。

Live Server：啟動一個本地開發服務器，實時預覽HTML頁面的效果。

Prettier：格式化HTML代碼，使代碼結構更整潔。

Auto Close Tag：自動閉合HTML標簽，提高編碼效率。

Bracket Pair Colorizer：對成對的括號進行著色，方便識別代碼塊。

2、Sublime Text

Sublime Text是一款流行的跨平臺源代碼編輯器，支持Windows、macOS和Linux等多種操作系統。它被廣泛用于Web開發，包括編輯HTML、CSS、JavaScript等前端技術。

Sublime Text的界面非常簡潔，沒有多余的菜單和工具欄，更便于專注于代碼編輯。Sublime Text支持多種編程語言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強大的插件系統，用戶可以根據需要安裝插件來擴展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等，以滿足個性化需求。Sublime Text啟動迅速，響應快速，適合于快速編輯代碼。

1）安裝和配置

官網地址：Sublime Text - Text Editing, Done Right

根據操作系統下載并安裝相應版本的Sublime Text。打開Sublime Text后，可以根據自己的喜好進行編輯器設置，如字體、主題等。

2）新建HTML文件

在Sublime Text 安裝完成后，選擇" File->New File "，在新建的文件中輸入以下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個標題</h1>
 
<p>我的第一個段落。</p>
 
</body>
</html>

3）編輯HTML文件

在Sublime Text中，點擊左上角的"File"菜單，選擇"Open File"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。在編輯器中可以直接修改HTML文件的內容。Sublime Text會自動識別HTML標記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。

4）插件推薦

Emmet：提供HTML/CSS快速編寫和自動完成功能，可以大大提高編碼效率。

Sublime Linter：對代碼進行實時語法檢查，幫助發現潛在的錯誤和警告。

Color Highlighter：對CSS中的顏色進行高亮顯示，方便調試和修改樣式。

SideBarEnhancements：增強側邊欄功能，提供更多文件操作選項。

3、Dreamweaver

Dreamweaver是由Adobe公司開發的一款全球知名的網頁設計和開發工具。它為開發人員和設計師提供了一個可視化的界面，可以直觀地創建和編輯網頁內容，同時也支持手動編輯代碼。Dreamweaver提供可視化界面，可以直觀地拖拽和編輯網頁元素，無需手動編寫代碼。除了可視化界面，Dreamweaver也支持手動編輯代碼，適合于開發人員和設計師。Dreamweaver可在Windows和macOS等多個平臺上運行。Dreamweaver集成了代碼編輯器、預覽窗口、文件管理器等功能，提供全面的開發環境。

1）安裝和配置

官網地址：Website design software | Adobe Dreamweaver

根據操作系統下載并安裝相應版本的Dreamweaver。打開Dreamweaver后，，根據需要進行編輯器設置，如界面語言、字體、代碼顏色等。

2）編輯HTML文件

在Dreamweaver中，點擊左上角的"File"菜單，選擇"New"，然后選擇"HTML"，即可新建一個空白的HTML文件。內容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個標題</h1>
 
<p>我的第一個段落。</p>
 
</body>
</html>

使用可視化界面，可以直接拖拽頁面元素、調整布局、插入圖片等。若需要手動編輯HTML代碼，可以在下方的代碼編輯器中進行修改。Dreamweaver會自動提供代碼補全和語法高亮功能。在Dreamweaver中，可以實時預覽網頁效果，點擊右上角的"Live View"按鈕即可。

3）CSS和JavaScript支持

Dreamweaver也支持CSS和JavaScript的編輯和預覽，可以幫助創建更豐富的網頁效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼，并實時查看效果。

4）網頁上傳和發布

Dreamweaver集成了FTP功能，可以直接將編輯好的網頁上傳到服務器。點擊"Site"菜單，選擇"Manage Sites"，配置好站點設置，即可進行上傳和發布。

5）Dreamweaver模板和庫

Dreamweaver提供模板和庫功能，可以保存和復用常用的網頁元素和樣式，提高開發效率。

參考文檔：https://www.cjavapy.com/article/3299/

?大家好，我是為廣大程序員兄弟操碎了心的小編，每天推薦一個小工具/源碼，裝滿你的收藏夾，每天分享一個小技巧，讓你輕松節省開發效率，實現不加班不熬夜不掉頭發，是我的目標！

??今天小編推薦一款高擴展的在線網頁制作平臺，可以在線生成 H5 頁面并提供頁面管理和頁面編輯的平臺，用于快速制作 H5 頁面。用戶無需掌握復雜的編程技術，通過簡單拖拽、少量配置即可制作精美的頁面，可用于營銷場景下的頁面制作。同時，也為開發者提供了完備的編程接入能力，通過腳本和組件的形式獲得強大的組件行為和交互控制能力。

開源協議

??使用 MIT 開源許可協議

鏈接地址

特性

頁面管理方便：按團隊、項目的維度管理項目頁面，方便團隊協作。每個項目都可以有自己的權限，也非常適合多人管理一組項目
編輯操作高效：拖拽挪移，隨心所欲。靈活組合，提高提高效率，保存模板，快速創建。
組件接入簡單：提供方便的腳手架創建組件，你可以把一個小功能，一個頁面，一個項目做成一個組件，暴露參數給其他同學在編輯器里面填寫
靈活豐富的擴展：可以對組件添加各種腳本，擴展該組件的功能，并友好地提供給使用者配置參數

誰可以使用？

程序員：程序員可以在平臺按業務需要創建自己的組件，并暴露相應參數提供給產品或者設計師方便使用。也可以開發一些腳本擴展已有組件的功能。

設計師：設計師可以制作動畫效果比較好的模板提供給更多的人使用

營銷者：營銷團隊可以創建配置非常靈活的頁面，配合獲取到的訪問等數據，可以直觀地看到營銷效果。

支持功能

編輯器 面向不同角色切換工作臺，并可以自行拖拽組件，以及組合組件實時預覽的動畫編輯實時預覽，并可按幀拖動預覽的動畫編輯腳本功能，靈活的擴展編輯器面板的屬性（非常容易給組件額外添加自定義的屬性和方法，完全自己代碼控制）樣式編輯，基礎模式，代碼模式。方便開發和運營不同角色使用在線預覽二維碼預覽可導入psd支持pc端和移動端
組件商城 25+組件,也歡迎開發者貢獻自己的組件可上傳，下載自己或別人的組件可出售自己開發的組件可購買別人的組件
后臺管理與數據 可按團隊管理頁面類似gitlab管理項目。合理的權限管理表單數據收集，并有數據同居支持頁面的pv uv以及自定義埋點信息方便的資源和組件管理

截圖預覽

導航

組件

組件操作

組件樣式

結尾

??本期就分享到這里，我是小編南風吹，專注分享好玩有趣、新奇、實用的開源項目及開發者工具、學習資源！希望能與大家共同學習交流。

大家整理了 25 個前端相關的學習網站和一些靠譜的小工具，包括一些小游戲、教程、社區網站和博客，以及一些資源網站，希望可以幫助到大家！

CSS 相關

1、CSS Battle - 在線比拼 CSS

https://cssbattle.dev

在線比拼 CSS ，一個挺有趣的競爭性游戲，一共有12個級別，需要你用 HTML和 CSS 100%還原它給出的頁面，然后再盡量減少代碼，你也可以查看全球的排行榜，看解決方案。

2、Learn CSS layout - 學習 CSS 布局

http://learnlayout.com

在線CSS布局學習，它會一步一步引導初學者學習 CSS 基礎知識，在實踐中幫助初學者掌握好 CSS 的布局知識，改善初學者對 CSS 的編寫習慣和正確方法。

3、 Flexbox Froggy - 學習 Flex 布局的小游戲

http://flexboxfroggy.com

一個引導式的學習 Flex 布局的游戲，用 flex 布局讓青蛙跳到荷葉上就算完成，游戲里面幾乎包含了所有常用的屬性，這樣學習起來很有趣嘞，形象好記憶，誰要是 Flex 布局還不熟的話，在這多練練。

4、EnjoyCSS-在線CSS代碼可視化工具

https://enjoycss.com

在線版的 CSS3 代碼生成工具，基于可視化操作，能快速無編碼的環境下調整網頁效果和圖形樣式。就像是在本地使用 PS 或 AI 軟件一樣。

5、CSS-Tricks - CSS 技巧

https://css-tricks.com

這個網站不斷的在更新一些關于 CSS 的技巧優秀的教程和技巧，每天都會更新文章。

6、Neumorphism-實現新擬態效果

https://neumorphism.io

可以輕松實現新擬態效果，不僅可以修改顏色或填寫色值，也可以修改尺寸、半徑、距離、強度、模糊效果以及形狀等參數，同時提供了CSS代碼可以直接Copy。

7、uiGradients - 分享漸變色

https://uigradients.com

提供漸變色效果的站點，里面接近上百種漸變配色方案，可根據自己風格來選擇搭配，能直接獲得對應漸變配色的 CSS 代碼。

JS 相關

8、JavaScript 秘密花園

https://bonsaiden.github.io/JavaScript-Garden/zh/

一個一直更新的JavaScript 的語法文檔，主要會寫如何去避免一些常見的錯誤，以及找到很難發現的 bug ，比較深入 JavaScript 的語言特性。

9、JS Tips - JS 技巧

https://www.jstips.co

每天一個 Javascript 小知識。

10、JSweekly - 技術周刊

https://javascriptweekly.com

專門講解 Javascript 的技術周刊。

11、CDNJS - JavaScript 資料庫

https://cdnjs.com/libraries

CDNJS 為開發者提供最新的前端 Web 開發資源，免費使用，無使用限制。你可以直接在自己的網頁上引用這些 JS 文件。進入 CDNJS 網站后，搜索你想要的資源庫，找到后點擊項目后方的[ Copy Script Tag] ，然后貼上就可以用了。目前 CDNJS 在 Web 前端的 CDN 服務中排名第二（第一名是 Google），性能出色。

12、Beautiful Open - 開源 JS 庫集合

https://beautifulopen.com

收集各類卓越設計的開源項目，大到CMS內容管理系統，小到常用的Javascript庫，適合網站開發的用戶使用。

13、JavaScript Fun - 代碼庫集合

https://www.javascript.fun

一個集合當下最流行的 JavaScript 代碼庫，顯示流行排行，開發者可以輕松的找到想要最新的代碼插件、工具和博客。

社區和博客

14、Stack Overflow - 編程人員問答網

https://stackoverflow.com

全球IT界最受歡迎的技術問答網站之一，一個解決 bug 的社區，稱為“ 編程界的十萬個為什么 ”。

15、掘金 - 高質量技術社區

https://juejin.im

掘金技術社區是質量很高的技術分享社區，技術大牛和極客們共同編輯篩選的優質干貨，這些技術文章包括Android、iOS、前端、后端資源。

16、Codrops - 網頁設計開發博客

https://tympanus.net

發表技術文章和網頁教程，提供經驗，少踩坑，資源豐富很豐富，很多優秀的技術都是從這里來的。

在線 IDE

17、CodePen

https://codepen.io

一個網站前端設計開發平臺，針對網站前端代碼的一個工具，上面有各種效果的案例特效（炫技），可以在他們的 demo 基礎上開發自己的前端設計。

18、CodeSandBox

https://codesandbox.io

站如其名，CodeSandBox 網站提供一個在線開發環境的“沙盒”，主流的框架如 React、Vue、Angular 等，都可即開即用、實時編譯預覽，非常方便。

19、JS Bin

https://jsbin.com

另一個輕量級在線編輯器網站，界面簡潔干凈，臨時想調試簡單的 HTML 或 JS 代碼可以考慮去這里試一試。

資源類

20、ICONSVG - 在線自定義設計SVG圖標素材

https://iconsvg.xyz

是一個在線可自定義設計SVG圖標素材的網站，幫助前端設計師找到想要的圖標素材，這些圖標素材都是常用圖標，可以點擊官方提供的素材進行二次設計，同時也可以把設計好的圖標導出。

21、OpenMoji - 免費表情符號庫

https://www.openmoji.org

提供源代碼的表情符號庫，可免費下載使用。

22、Share Icon - 免費矢量素材圖庫

https://www.shareicon.net

提供超過25萬種ICON矢量圖片素材的站點，120多種分類，所有的素材都提供PNG、SVG格式，素材有多種尺寸尺寸包括 512*512、256*256、128*128、64*64、32*32、16*16等，非常適合前端設計師收藏備用。

23、tableconvert - 在線表格編輯器

https://tableconvert.com

一個功能強大的在線表格編輯器，支持Excel、Markdown、JSON、CSV、HTML等格式的相互轉換。當需要轉換表格，又不能讓它變形，不妨試試這款工具。

24、Feathericons - 極簡 ICON 圖標集

https://feathericons.com

一個免費開源的簡單而美麗的ICON圖標集合，主要設計的使用范疇為應用系統、媒體控制、位置、天氣、箭頭、徽標等，可在移動端應用開發的時候使用，圖標格式為SVG。

25、HTML5 + CSS 3 免費模版

https://html5up.net/

提供大量的HTML5模版，用戶可以自己分享和修改模版。

多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

本文推薦的網站匯總：