整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
天給大家推薦幾個可以在線編程的網(wǎng)站。對于大部分開發(fā)者可能會不屑使用在線的網(wǎng)站，認為在自己電腦安裝環(huán)境不是很簡單的事情么。但是你很有可能臨時需要一臺電腦去測試一段簡單的代碼，也有可能想要分享一段代碼給別人，也有可能你想要學習很多語言，又不想一一安裝編程環(huán)境。那么今天推薦的網(wǎng)站肯定能滿足你的需求。
網(wǎng)址：https://ideone.com/SExhrM
這個網(wǎng)站不錯，支持Java，但是頁面有廣告。除了支持Java語言，還支持其他語言。
https://dabblet.com/
這個網(wǎng)站適合前端測試使用，該網(wǎng)站可以用來測試Html，Css，Js等功能。
網(wǎng)址：http://www.fenby.com/
這個網(wǎng)站不只支持后端語言編碼，也支持前端編碼，使用體驗很不錯。支持的語言也很豐富。
前端的支持也很OK。
https://www.w3school.com.cn/tiy/t.asp?f=js_use
當然對于想系統(tǒng)學習前端知識的童鞋可以使用W3School，這個網(wǎng)站很適合，不僅有大量的案列，還有可以實戰(zhàn)編碼。
https://www.bccn.net/run/
該網(wǎng)站支持的語言也挺多，比較推薦。
今天的介紹就到這里了，如果你打算系統(tǒng)學習編程，那我還是建議你老老實實的安裝編譯環(huán)境，安裝編輯器。
一個好的編輯器我們可以方便的開發(fā)項目，編寫代碼，配置和管理我們的項目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。
基于html項目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費的，也有收費的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。
使用記事本編寫html的步驟是首先新建一個文本文檔，按照html的語法規(guī)則編寫相關(guān)的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運行結(jié)果。
雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業(yè)的編輯器來開發(fā)項目，編寫代碼和管理項目。
常用html代碼編寫的免費軟件有HBuilderX，vs code，Sublime Text 等等。
HBuilderX官網(wǎng)下載地址：
https://www.dcloud.io/hbuilderx.htmlvs code的官網(wǎng)下載地址：
https://code.visualstudio.com/Sublime Text官網(wǎng)下載地址：
http://www.sublimetext.com/我們以后的教程都使用HBuilderX，所以下面為了同學們的學習方便，對HBuilderX的下載和安裝做詳細的教程。
一，下載
首先訪問HBuilderX的官網(wǎng)網(wǎng)址：
https://www.dcloud.io/hbuilderx.html打開上面的HBuilderX下載網(wǎng)址后點擊頁面上download，在彈出的對話框里選擇適合自己電腦的HBuilderX版本下載。
在Windows10環(huán)境下下載后的文件是一個壓縮的.zip文件。
二，安裝
鼠標右擊下載下來的壓縮文件進行解壓。
解壓完成后是一個名為HBuilderX的文件夾。
解壓完成后鼠標雙擊HBuilderX文件夾：
雙擊運行名為HBuilderX.exe的應用程序文件即可啟動HBuilderX編輯器：
因為HBuilderX是一個綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。
小百科：
綠色軟件指一類小型軟件，多數(shù)為免費軟件，最大特點是軟件無需安裝便可使用，可存放于閃存中，移除后也不會將任何記錄留在本機計算機上。通俗點講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會在注冊表中留下注冊表鍵值，所以相對一般的軟件來說，綠色軟件對系統(tǒng)的影響幾乎沒有，所以是很好的一種軟件類型。
三，新建項目
HBuilderX編輯器初次啟動時的默認界面是下圖所示：
按照下圖所示可以創(chuàng)建一個新的名為demo1空白項目：
名為demo1的空白項目創(chuàng)建成功后的界面如下圖所示：
接下來在剛我們新建的demo1項目下創(chuàng)建名為helloworld的html文件
鼠標右擊創(chuàng)建的demo1項目選擇新建在選擇.html文件：
在彈出的對話框里填入html文件的名稱：
編寫一段代碼：
運行：
在瀏覽器上觀察效果：
好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。
下面再給大家教一下怎樣修改HBuilderX的主題風格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。
按照一下步驟可以修改HBuilderX的主題，默認主題是綠柔，我們可以改成雅黑，雅藍或者自定義主題：
雅黑主題：
雅藍主題：
好了本節(jié)全部內(nèi)容全部結(jié)束了，希望我準備的內(nèi)容對你有所幫助
你的支持是我的最大動力，若覺得我的教程還可以對你有幫助為我點贊加關(guān)注！謝謝！
多人可能都用過Web編輯器，比如Ckedit等，除了Word等本地編輯器外Web編輯器也是最常用最方便Web內(nèi)容來源。這些在線編輯器的一個短板限制很多，不能實時反饋在線效果。本文蟲蟲給大家介紹一種很簡單的無限制在線Html編輯器，實現(xiàn)所寫即所得UI和樣式實時刷新，JS代碼也能進行熱加載執(zhí)行重新渲染，而且這些實現(xiàn)都非常簡單，只用到了很少的html和css代碼。
要使Html可以編輯實際上很簡單只要一個body標簽就足矣。contenteditable這個body屬性可能鮮為人知，實際上它的功能就是實現(xiàn)Html文檔可編輯。我們新建一個Html文檔（Cc.html），然后將如下代碼復制粘貼到文檔中：
<body contenteditable="true"></body>
通過瀏覽器打開這個文檔，怎么樣，神奇的事情發(fā)生了把？
你可以在這個頁面任意輸入文本甚至還可以粘貼圖片。（兼容基本上所有的瀏覽器，IE也可以）。還可以支持Ctr+Z撤銷和重做。
我們知道<div>…</div>和<p>…</p>標簽內(nèi)的文字都會在頁面顯示，而<script>…</script>和<style>…</style>中的都是引用的前端腳本的代碼（JS）等需要通過瀏覽器引擎執(zhí)行渲染顯示出來的，那么這些代碼是不是可以在顯示出來呢？實際上在大多數(shù)瀏覽器只是通過CSS樣式隱藏起來的，我們通過重寫在div>…</div>中增加script, style { display: block; }即可：
<body>
<style>
script, style { display: block; }
</style>
<script>
console.log("Hello Chongchong!");
</script>
</body>
通過將其粘貼到html文件并在瀏覽器中打開它，顯示如下：
而且，我們也可以將這個頁面也設置為contenteditable，并且<style></ style>增加樣式顯示，比如我們修改字體的大小為20pt，顏色為綠色：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt;color: green}
</style>
<script>
console.log("Hello ChongChong!");
</script>
</body>
現(xiàn)在我們可以，通過在線編輯style{}的內(nèi)容，讓頁面的呈現(xiàn)實時變化，比如字體再增加10pt，顏色變成藍色。
注意，輸入時候內(nèi)容會實時變化的，比如你修改20pt為30pt途中，你字體會變成2，很小很小，繼續(xù)刪除2就會恢復成默認正常默認，你不用理會繼續(xù)輸入30字體就會變成30pt，其他參數(shù)也類似。
該方法可以實時刷新樣式顯示<style></ style>標簽，對于JS代碼，由于其只會在頁面加載時候執(zhí)行一次，你可以修改<script>…</script>內(nèi)容，但是不能實時執(zhí)行生效。
上面我也說，JS代碼的修改需要重新加載才能執(zhí)行。為了實現(xiàn)重新加載，我們首先使用簡單的按鍵（Shift+enter）觸發(fā)重新加載的方法：
<body contenteditable="true">
<style>
script, style { display: block;font-size: 20pt; color: green}
</style>
<script>
//alert("Hello ChongChong!");
document.onkeydown = function(e) {
var key = window.event ? event : e;
if (key.shiftKey && key.keyCode == 13) {
eval(window.getSelection().focusNode.parentNode.innerHTML);
}
};
</script>
</body>
通過瀏覽器打開，并且編輯去掉//alert("Hello ChongChong!")前面的//注釋,然后按鍵shift時按Enter鍵。
結(jié)果如上圖就可以彈出一個消息窗口。
通過上面的方法我們實現(xiàn)了一個可編輯上面在線編輯器。在前面代碼的基礎上，我們提供一個基礎的模版供大家使用，完整代碼如下：
<body contenteditable="true" spellcheck="false">
<title>editor</title>
<style>script,
style {
display: block;
white-space: pre-wrap;
background-color: #eeeeee;
border: solid;
border-radius: 10px;
padding: 20px;
}
body {
font-family: Menlo, Monaco, monospace;
font-size: 12pt;
tab-size: 4;
}
script.success {
background-color: #ccffcc;
border: solid, #00cc00;
}
script.error {
background-color: #ffcccc;
border: solid, #ff1111;
}
</style>
<script type="text/javascript" class="success">
//alert("Hello Chongchong!");
document.onkeydown = function(e) {
var key = window.event ? event : e;
var node = window.getSelection().focusNode;
if (key.shiftKey) {
if (key.keyCode == 13) {
node.parentNode.classList.remove("error");
node.parentNode.classList.remove("success");
try {
eval(node.parentNode.innerHTML);
node.parentNode.classList.add("success");
} catch (e) {
node.parentNode.classList.add("error");
}
return false;
}
} else {
if (key.keyCode == 13) {
document.execCommand("insertHTML", false, "\n");
return false;
}
if (key.keyCode == 9) {
document.execCommand("insertHTML", false, "\t");
return false;
}
}
}
</script>
</body>
將上面代碼保存為html，然后用瀏覽器打開就實現(xiàn)了一個簡單的在線html編輯器。
該在線編輯器模版還非常簡陋，如果能增加語法高亮和自動完成等一些功能可能很好，但是這是很大工作量，有興趣的可以嘗試著做下。也可以通過引入一些第三方的庫來做下，比如使用微軟的language-server-protocol 庫來實現(xiàn)自動完成功能。
至于語法高亮，一般做法是將所有內(nèi)容填充到標簽中并對其進行著色（大多數(shù)其他基于html的編輯器都這樣做），但是這樣會破壞自動刷新和熱加載功能的簡單性。
你可能還希望處理實際內(nèi)容，而不僅僅是編輯本身。這個簡單，只需在contenteditable body中添加另一個元素，該操作可以通過JS腳本實現(xiàn)該操作。還可以添加更多元素，例如一個按鈕或者只是通過修改快速HTML框來實現(xiàn)。這些都可以在提供的模版的基礎上按需增加修改。
本文我們在contenteditable屬性的基礎上實現(xiàn)了，在線Html的編輯器實現(xiàn)內(nèi)容和樣式的實時更新、實現(xiàn)了JS代碼的熱加載。雖然此在線編輯器還非常簡陋，但是以此作為一個想法和基礎"拋磚引玉"，希望大家可以實現(xiàn)一個功能完善，更加實用的在線編輯器。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
