sublime text不能直接運行網頁代碼，需用瀏覽器預覽。1. 在sublime中編寫html、css和JavaScript代碼并保存為.html文件；2. 雙擊該文件用默認瀏覽器打開以查看網頁內容；3. 可安裝livereload或browsersync插件實現自動刷新；4. 調試javascript時使用瀏覽器開發者工具設置斷點或輸出console.log；5. 利用sublime的代碼片段功能提升html編寫效率，通過新建.snippet文件定義常用代碼塊并快速插入。
sublime text本身不是一個網頁瀏覽器，所以它不能直接“執行”網頁代碼，而是需要借助瀏覽器來預覽和運行。簡單來說，你需要先用Sublime寫好HTML、css和JavaScript代碼，然后保存成文件，最后用瀏覽器打開這些文件。
解決方案
-
編寫代碼： 在Sublime Text中編寫HTML、CSS和JavaScript代碼。例如，創建一個名為index.html的文件，輸入基本的HTML結構。
立即學習“前端免費學習筆記（深入）”；
-
保存文件： 將文件保存為.html格式。確保文件擴展名正確，這會告訴你的操作系統這是一個HTML文件。
-
瀏覽器預覽： 找到你保存的.html文件，雙擊它。你的默認瀏覽器會自動打開這個文件，并顯示網頁內容。
-
實時預覽（可選）： 如果你想在修改代碼后立即看到效果，可以安裝Sublime Text的插件，例如LiveReload或BrowserSync。這些插件可以監測文件變化，并在你保存文件時自動刷新瀏覽器。
Sublime Text運行HTML代碼的常見問題及解決方法
初學者經常遇到的問題是，直接在Sublime Text里按Ctrl+B（或者Cmd+B在Mac上）嘗試運行HTML代碼。這通常只會顯示HTML源代碼，而不是渲染后的網頁。這是因為Sublime Text默認的構建系統是用來運行腳本語言的，比如python或者JavaScript，而不是用來渲染HTML的。
解決方法很簡單，就是不要試圖在Sublime Text內部“運行”HTML。Sublime Text的作用是編輯代碼，瀏覽器的作用是顯示網頁。
如何使用Sublime Text插件實現HTML實時預覽
實時預覽可以極大地提高開發效率。LiveReload是一個流行的Sublime Text插件，可以實現這個功能。
-
安裝Package Control： 如果你還沒有安裝Package Control，先安裝它。這是Sublime Text的包管理器，可以方便地安裝、更新和卸載插件。
-
安裝LiveReload： 打開Package Control（Ctrl+Shift+P或Cmd+Shift+P），輸入Install Package，然后搜索LiveReload并安裝。
-
安裝瀏覽器擴展： LiveReload還需要一個瀏覽器擴展。在chrome網上應用店或者firefox附加組件商店搜索LiveReload并安裝。
-
啟用LiveReload： 在Sublime Text中打開你的HTML文件，按下Ctrl+Shift+P（或Cmd+Shift+P），輸入LiveReload: Enable/Disable Plug-ins，選擇Enable – Simple Reloads。
-
開始實時預覽： 在瀏覽器中打開你的HTML文件，點擊LiveReload擴展的圖標，啟用LiveReload。現在，當你修改并保存HTML文件時，瀏覽器會自動刷新，顯示最新的效果。
Sublime Text如何調試JavaScript代碼
雖然Sublime Text不能直接運行HTML，但它可以很好地支持JavaScript調試。你可以使用瀏覽器的開發者工具來調試JavaScript代碼。
-
打開開發者工具： 在Chrome中，按下F12或者右鍵點擊頁面，選擇“檢查”。在Firefox中，按下F12或者右鍵點擊頁面，選擇“檢查元素”。
-
設置斷點： 在開發者工具的“Sources”面板中，找到你的JavaScript文件，點擊行號設置斷點。當代碼執行到斷點時，會暫停執行，你可以查看變量的值，單步執行代碼，等等。
-
使用console.log： 在JavaScript代碼中使用console.log()語句，將信息輸出到開發者工具的“Console”面板。這是一種簡單有效的調試方法。
Sublime Text配置代碼片段（Snippets）提高HTML編寫效率
Sublime Text的代碼片段功能可以讓你快速插入常用的代碼塊，極大地提高編寫HTML代碼的效率。
-
創建代碼片段： 選擇Tools -> Developer -> New Snippet…。
-
編寫代碼片段： 在新的文件中，輸入你的代碼片段。例如，創建一個基本的HTML結構的代碼片段：
<snippet> <content><![CDATA[ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>${1:Document}</title> </head> <body> ${2} </body> </html> ]]></content> <tabTrigger>html5</tabTrigger> <description>HTML5 Boilerplate</description> </snippet>
-
保存代碼片段： 將文件保存為.sublime-snippet格式，例如html5.sublime-snippet。
-
使用代碼片段： 在Sublime Text中輸入html5，然后按下Tab鍵，就可以插入HTML5的骨架代碼。${1:Document}和${2}是占位符，你可以按下Tab鍵在它們之間切換，并輸入你想要的內容。
