JSBIN 是一款HTML在線編輯器，以幫助那些要學前端或者正在學習前端的同學。
菜鳥教程也推出了一款HTML在線編輯器，訪問地址：
以下我們來看下這款工作的使用說明：
快速上手使用
打開頁面后看到如下畫面，網址列就是而已，底下則出現HTML與的編輯器窗格，可以讓你輸入內容：
只要你輸入任意字元在任意編輯器窗格里，你會立刻發現「網址列」發生了變化，如下圖所示，編號1的地方就是你的BinID，編號2的地方則是這個Bin的版本編號(預設會從1開始)，編號3的地方則是目前的顯示模式，edit則代表「編輯」模式。預設的情況下，你輸入的HTML / CSS / 都會立刻反映到最右邊的窗格。
注:在JS Bin里面，每一個前端網頁組合( HTML + CSS + )都被稱為一個Bin！
當然，只要你把這個Bin設定完成后，便可直接把你當下的JS Bin網址分享出去，非常方便！
導覽列介紹
如下圖是JS Bin進入后的主要版面，非常簡潔，最上方就是個導覽列而已，接下來會依圖編號解說：
導覽列1.JS Bin主選單
你可以在任意時刻重新建立一個Bin，點擊New選項即可。
如果你有注冊會員的話，就會看到Open功能，因為只要是你編輯過的Bin全部都會自動被儲存起來，隨時可以重新開啟曾經寫過的Bins。如下圖示，如果你不想再看到特定Bins，還可以設定封存，預設就不會在這邊被看到，且日后還是可以重新找出來。
如下圖示，點選 view即可救回曾經封存的Bins
主選單的Add 功能，只是幫你在HTML中新增這個meta tag而已
主選單的 功能，只是告訴JS Bin說：「我已經完成了一個Bin的里程碑，請幫我把目前這個版本固定下來。」因此，點擊這個功能后，JS Bin網址上的「版本編號」就會自動+1
主選單的Save as 功能，則是將你目前的Bin儲存成一個范本，讓你日后新增Bin時，預設的HTML / CSS / 就會有你目前設定的Bin內容。
主選單的Clone功能，跟剛剛的 功能只有一點小差異，那就是，他并不是換一個版本編號，而是換一個全新的BinID，如下圖示：
主選單的功能則是把Bin下載html編輯器設置為記事本，他會把HTML / CSS / 合并成一個HTML檔案。
導覽列2.Add 插入函式庫
這個按鈕可以方便地替你的HTML 插入一些常用的外部資源，例如、 UI、 、、YUI、、Kendo UI、、、……等等，算是個方便的小工具。
導覽列3.各式編輯器、主控臺與即時預覽窗格(Panel)HTML 編輯器窗格
這個編輯器窗格對語法有高量顯示html編輯器設置為記事本，比較可惜的是還沒有或自動完成功能，不過卻有支援Emmet(Zen )編寫方法，非常厲害！不知道Zen 的人，可以參考我之前錄制的一則教學影片【活用擴充套件-使用快速產生HTML語法(Web 2012)】，上面有示范如何利用特殊的Zen 語法快速撰寫HTML內容！
除此之外，你還可以切換不同的撰寫語法，最后點選 to HTML即可自動轉換成HTML格式。
CSS 編輯器窗格
這跟HTML編輯器很像，也支援Zen 語法喔！你也可以用更高效的LESS或語法撰寫CSS樣式，最后一樣點選 to CSS即可自動轉換成標準的CSS格式。
注：你甚至可以直接拿JS Bin當成LESS或的學習工具！
編輯器窗格
這跟HTML / CSS 編輯器也很像，也支援多種協助高效撰寫 的語法，還支援 喔！
主控臺窗格
這窗格與各瀏覽器開發人員工具里的 窗格是一樣的，我不知道為什么他們還要多弄一個網頁版，我覺得沒有比瀏覽器內建的好用，所以大多沒用他。
輸出窗格
這個窗格主要用途是輸出最終HTML / CSS / 組合后的執行成果，預設的情況下，Auto-run JS選項是被勾選的，代表你在編輯器打字的時候，他會不斷地重新整理窗格中的網頁，有時候這個選項會導致瀏覽器當掉，如果你有遇到瀏覽器不穩定的情況，建議取消勾選此項目。勾選之后，如果要執行修改后的JS，你就必須按下Run with JS按鈕才會真正執行新版的程式。
最右邊的Live 箭頭，則是把網頁開啟到一個全新視窗，這時你會發現網址稍微有點不太一樣，也就是edit這部分不見了，也代表你可以拿這個網址分享給其他人，讓對方看看網頁執行的結果，或直接跟網頁上設定的互動功能進行比較完整的互動，不受到JS Bin編輯窗格的影響。如下比較圖：
導覽列4.登入、注冊、更新會員帳號密碼(無任何個人資料)
JS Bin 只要輸入Email 與 就可以注冊成功，也不用驗證身分，如果打錯帳號、密碼也沒關系，重新注冊一組新的就是了！登入后的畫面，Email 與 隨時你想更新就更新，非常開放！
導覽列5.Help幫助文件
這里的每個連結你都看完，就會知道你被JS Bin 簡潔的外觀給騙了，其實內涵非常豐富的！