2024-09-02|閱讀時間 ‧ 約 23 分鐘

HTML入門-Day3：環境建置

HTML

使用Visual Studio Code

開發工具選擇：介紹常用的HTML編輯器（如VS Code、Sublime Text）。
基本設置：如何安裝和配置編輯器，建立一個HTML文件。
本地預覽：如何在瀏覽器中打開HTML文件進行預覽。

開發工具選擇

介紹常用的HTML編輯器：
- Visual Studio Code：功能強大，支持眾多擴展，如Live Server可實時預覽網頁。
- Sublime Text：輕量快速，用戶界面簡潔，具有廣泛的插件生態。
- Atom：由GitHub開發，易於自定義和擴展，但執行速度略慢。
- Brackets：專為Web設計師和前端開發者設計，具有實時預覽功能。

基本設置

安裝VS Code：
- 訪問Visual Studio 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文件的修改將實時更新到瀏覽器中。

分享至

成為作者繼續創作的動力吧！

討論區

追蹤

HTML入門-Day3：環境建置

使用Visual Studio Code

開發工具選擇

基本設置

建立一個HTML文件

本地預覽

作者的相關文章

Michael楊的其他內容

你可能也想看

發表回應

HTML入門-Day3：環境建置

使用Visual Studio Code

開發工具選擇

基本設置

建立一個HTML文件

本地預覽

作者的相關文章

Michael楊 的其他內容

你可能也想看

發表回應

Michael楊的其他內容