使用Visual Studio Code
- 開發工具選擇：介紹常用的HTML編輯器（如VS Code、Sublime Text）。
- 基本設置：如何安裝和配置編輯器，建立一個HTML文件。
- 本地預覽：如何在瀏覽器中打開HTML文件進行預覽。
開發工具選擇
- 介紹常用的HTML編輯器：
- Visual Studio Code：功能強大，支持眾多擴展，如Live Server可實時預覽網頁。
- Sublime Text：輕量快速，用戶界面簡潔，具有廣泛的插件生態。
- Atom：由GitHub開發，易於自定義和擴展，但執行速度略慢。
- Brackets：專為Web設計師和前端開發者設計，具有實時預覽功能。
基本設置
- 安裝VS Code：
- 配置VS Code：
- 安裝擴展，如
Live Server來實現HTML文件的實時預覽。 - 調整設置，例如設置文件默認編碼為UTF-8，開啟自動保存等。
建立一個HTML文件
- 創建工作目錄：使用
mkdir命令創建一個新目錄，如MyWebProject。 - 在VS Code中打開該目錄：啟動VS Code，使用
File > Open Folder選擇並打開剛創建的目錄。 - 創建HTML文件：在VS Code中，右鍵單擊資料夾空白區域選擇
New File，命名為index.html。 - 編寫Hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
本地預覽
- 使用Live Server預覽：
- 確保已安裝Live Server延伸模組。
- 右鍵點擊
index.html文件並選擇Open with Live Server，這將在默認網頁瀏覽器中打開該HTML文件。 - 任何對HTML文件的修改將實時更新到瀏覽器中。
