最直接的區別，很容易注意到，一個是file協議，另一個是http協議。

file協議更多的是將該請求視為一個本地資源訪問請求，和你使用資源管理器打開是一樣的，是純粹的請求本地文件。

http請求方式則是通過假架設一個web服務器，解析http協議的請求然后向瀏覽器返回資源信息。我們所開發的html文件最后必定是會以網頁的形式部署在服務器上，通過http協議訪問，所以我們開發中也盡可能模擬線上環境，架設本地服務器，來避免file協議與http協議實現過程中的某些差異，如某些API的差異、跨域請求的差異等。舉個最容易驗證的例子：在頁面引入一張絕對路徑的圖片，即’/image/example.png’，然后分別通過這兩種方式打開頁面，file協議會將資源請求到根路徑，而http協議雖然也會請求到根路徑，但是是相對本地架設的服務器的根路徑，一般也就是項目文件夾的路徑。

訪問服務器上的html文件是以http的協議方式去打開，有網絡交互。

直接打開html文件是以file協議的方式去打開，沒有網絡交互。

瀏覽器對兩種協議的處理有時會不同，譬如某些網頁中直接調用file協議來打開圖片，這樣的功能會被瀏覽器的安全設置阻擋。因為默認上，html是運行于客戶端的超文本語言，從安全性上來講，服務端不能對客戶端進行本地操作。即使有一些象cookie這類的本地操作，也是需要進行安全級別設置的。

參考文章：
https://blog.csdn.net/yingzi10101118/article/details/83622729
https://m.imooc.com/wenda/detail/382131
https://zhidao.baidu.com/question/319613212.html

開啟本地服務器實例：https://threejs.org/docs/index.html#manual/zh/introduction/How-to-run-things-locally

利用Nodejs開啟本地服務器，在項目文件夾下運行http-server . -p 8000,然后瀏覽器輸入localhost:8000就可以看見本地服務器下項目文件了。

總結

以上是生活随笔為你收集整理的HTML文件直接在浏览器打开和本地服务器localhost打开有什么区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。