HTML 編輯器

TML編輯器是一種用于創(chuàng)建、編輯和預(yù)覽HTML（超文本標(biāo)記語言）代碼的工具或應(yīng)用程序。它提供了一個直觀的界面，使用戶能夠輕松地編寫和設(shè)計網(wǎng)頁內(nèi)容。本文主要介紹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）是一款由微軟開發(fā)的跨平臺源代碼編輯器，支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā)，包括編輯HTML、CSS、JavaScript等前端技術(shù)。VS Code是一款輕量級的代碼編輯器，啟動迅速，占用資源少。VS Code提供了豐富的擴展和插件，可以根據(jù)需求安裝插件來增強編輯器功能。

1）安裝和配置

官網(wǎng)地址：Visual Studio Code - Code Editing. Redefined

根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的VS Code。打開VS Code后，可以根據(jù)自己的喜好配置編輯器設(shè)置，如主題、字體等。

2）新建HTML文件

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

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

3）編輯HTML文件

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

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

4）插件推薦

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

Live Server：啟動一個本地開發(fā)服務(wù)器，實時預(yù)覽HTML頁面的效果。

Prettier：格式化HTML代碼，使代碼結(jié)構(gòu)更整潔。

Auto Close Tag：自動閉合HTML標(biāo)簽，提高編碼效率。

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

2、Sublime Text

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

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

1）安裝和配置

官網(wǎng)地址：Sublime Text - Text Editing, Done Right

根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Sublime Text。打開Sublime Text后，可以根據(jù)自己的喜好進行編輯器設(shè)置，如字體、主題等。

2）新建HTML文件

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

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

3）編輯HTML文件

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

4）插件推薦

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

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

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

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

3、Dreamweaver

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

1）安裝和配置

官網(wǎng)地址：Website design software | Adobe Dreamweaver

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

2）編輯HTML文件

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

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

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

3）CSS和JavaScript支持

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

4）網(wǎng)頁上傳和發(fā)布

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

5）Dreamweaver模板和庫

Dreamweaver提供模板和庫功能，可以保存和復(fù)用常用的網(wǎng)頁元素和樣式，提高開發(fā)效率。

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

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

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

開源協(xié)議

??使用 MIT 開源許可協(xié)議

鏈接地址

特性

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

誰可以使用？

程序員：程序員可以在平臺按業(yè)務(wù)需要創(chuàng)建自己的組件，并暴露相應(yīng)參數(shù)提供給產(chǎn)品或者設(shè)計師方便使用。也可以開發(fā)一些腳本擴展已有組件的功能。

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

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

支持功能

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

截圖預(yù)覽

導(dǎo)航

組件

組件操作

組件樣式

結(jié)尾

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

大家整理了 25 個前端相關(guān)的學(xué)習(xí)網(wǎng)站和一些靠譜的小工具，包括一些小游戲、教程、社區(qū)網(wǎng)站和博客，以及一些資源網(wǎng)站，希望可以幫助到大家！

CSS 相關(guān)

1、CSS Battle - 在線比拼 CSS

https://cssbattle.dev

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

2、Learn CSS layout - 學(xué)習(xí) CSS 布局

http://learnlayout.com

在線CSS布局學(xué)習(xí)，它會一步一步引導(dǎo)初學(xué)者學(xué)習(xí) CSS 基礎(chǔ)知識，在實踐中幫助初學(xué)者掌握好 CSS 的布局知識，改善初學(xué)者對 CSS 的編寫習(xí)慣和正確方法。

3、 Flexbox Froggy - 學(xué)習(xí) Flex 布局的小游戲

http://flexboxfroggy.com

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

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

https://enjoycss.com

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

5、CSS-Tricks - CSS 技巧

https://css-tricks.com

這個網(wǎng)站不斷的在更新一些關(guān)于 CSS 的技巧優(yōu)秀的教程和技巧，每天都會更新文章。

6、Neumorphism-實現(xiàn)新擬態(tài)效果

https://neumorphism.io

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

7、uiGradients - 分享漸變色

https://uigradients.com

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

JS 相關(guān)

8、JavaScript 秘密花園

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

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

9、JS Tips - JS 技巧

https://www.jstips.co

每天一個 Javascript 小知識。

10、JSweekly - 技術(shù)周刊

https://javascriptweekly.com

專門講解 Javascript 的技術(shù)周刊。

11、CDNJS - JavaScript 資料庫

https://cdnjs.com/libraries

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

12、Beautiful Open - 開源 JS 庫集合

https://beautifulopen.com

收集各類卓越設(shè)計的開源項目，大到CMS內(nèi)容管理系統(tǒng)，小到常用的Javascript庫，適合網(wǎng)站開發(fā)的用戶使用。

13、JavaScript Fun - 代碼庫集合

https://www.javascript.fun

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

社區(qū)和博客

14、Stack Overflow - 編程人員問答網(wǎng)

https://stackoverflow.com

全球IT界最受歡迎的技術(shù)問答網(wǎng)站之一，一個解決 bug 的社區(qū)，稱為“ 編程界的十萬個為什么 ”。

15、掘金 - 高質(zhì)量技術(shù)社區(qū)

https://juejin.im

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

16、Codrops - 網(wǎng)頁設(shè)計開發(fā)博客

https://tympanus.net

發(fā)表技術(shù)文章和網(wǎng)頁教程，提供經(jīng)驗，少踩坑，資源豐富很豐富，很多優(yōu)秀的技術(shù)都是從這里來的。

在線 IDE

17、CodePen

https://codepen.io

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

18、CodeSandBox

https://codesandbox.io

站如其名，CodeSandBox 網(wǎng)站提供一個在線開發(fā)環(huán)境的“沙盒”，主流的框架如 React、Vue、Angular 等，都可即開即用、實時編譯預(yù)覽，非常方便。

19、JS Bin

https://jsbin.com

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

資源類

20、ICONSVG - 在線自定義設(shè)計SVG圖標(biāo)素材

https://iconsvg.xyz

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

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等，非常適合前端設(shè)計師收藏備用。

23、tableconvert - 在線表格編輯器

https://tableconvert.com

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

24、Feathericons - 極簡 ICON 圖標(biāo)集

https://feathericons.com

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

25、HTML5 + CSS 3 免費模版

https://html5up.net/

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

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

本文推薦的網(wǎng)站匯總：