7.1 第一個 html 文件
來吧，我們來建立我們的第一個 html 文件（html 檔案）。通常，web 專案的主要 html 檔案稱為 index.html： 建議不要偏離這個光榮的傳統。為此，使用滑鼠右鍵點擊 web-storm-10 資料夾：
然後輸入檔案名稱：
WebStorm 將為你創建檔案並立即打開它：
事實上，這是一個空的 html 文件。你在這裡看到的所有內容都是技術性資訊。 所有的實際數據將位於 <body> 和 </body> 標籤之內。什麼是標籤你將在下一次講座中更詳細地了解。
讓我們在這些標籤內寫一些有趣且豪華的訊息。例如：
千里之行，始於足下！
你可以直接複製並貼上到第 8 行（在 <body> 標籤內）。 習慣性地複製文本，這樣可以減少錯誤和打字錯誤。現在我的文件看起來是這樣的：
如果我的文本版本對你來說不夠陰沉和豪華，那就選擇你自己的——畢竟這是你的第一個 Web 專案。 我再提供 3 個選擇供你參考：
- "黑暗面為我提供了光明所無法給予的：真正的自由。"
- "黑暗面是一條通往無限力量的道路。"
- "我選擇我的命運，它在黑暗中。"
7.2 啟動第一個專案
現在，讓我們「啟動」我們的專案，看看瀏覽器如何顯示我們的 html 文件。
要啟動專案，你需要按下靠近左側的綠色三角形。左側會顯示要執行的檔案名稱：
同樣，你可以按 Shift+F10 來執行你的檔案。
讓我們這樣做，你將看到瀏覽器如何顯示你的第一個 html 文件。這是我的顯示結果：
橙色顯示 host 在 url 中——我們專案的 web 服務器，由 WebStorm 啟動。
綠色顯示路徑在 url 中——從專案根目錄到 index.html 的路徑。
藍色顯示為 WebStorm 的技術性資訊。
紅色顯示文本是瀏覽器根據我們的 html 文件顯示的文本。
7.3 錯誤修正
如果我們犯了一個錯誤會怎麼樣？瀏覽器和 WebStorm 會如何反應？
我們來刪除第 9 行的第一個字符，看看 WebStorm 的反應。這是我得到的結果：
我們看到：
- 第 9 行的單詞不再是標籤，因此 WebStorm 現在將其顯示為灰色，而不是黃色。
- 第 10 行有一個閉合標籤
<html>，但在閉合<html>標籤之前應該有一個<body>標籤。因此，WebStorm 在此處看到了錯誤。 - 文件中的錯誤數量顯示在右上角——我們有一個。
- 錯誤位置也在右下角的捲軸上重複顯示。對於長文件非常方便。
現在我們來啟動這個檔案，看看瀏覽器對 錯誤 的反應：
瀏覽器也認為不完整的 <body> 標籤只是文本，所以它將其顯示為普通文本。
缺少閉合 <body> 標籤瀏覽器也不介意：標籤問題可能會更嚴重。總體而言，效果還不錯。
GO TO FULL VERSION