HTML入門-Day3：環境建置
閱讀時間約 1 分鐘
使用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文件的修改將實時更新到瀏覽器中。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
在網頁設計中，圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片，包括基本語法、屬性設定等，幫助你更好的在網頁中使用圖片。
HTML 表單扮演著收集用戶資訊的重要角色。無論是登入頁面、註冊表、問卷調查，或是任何需要用戶輸入的場景，都離不開 HTML 表單。本文將帶你快速了解 HTML 表單的基礎知識，包括表單的結構、元素及其驗證方式。
在網頁開發中，HTML 表格是展示資料的一種重要方式。本文將介紹HTML表格的基本結構和合併單元格，並通過實際範例幫助你理解。
無論是跳轉到另一個網頁，還是在同一頁面內導航，HTML 連結都扮演著關鍵角色。本文將簡單的介紹 HTML 連結的基礎語法和使用方法。
在網頁設計中，列表是基本且重要的元素之一。透過 HTML 列表，我們能夠提高網頁內容的可讀性。本文將帶你了解 HTML 中的列表類型，以及它們的使用方式。
本文將介紹 HTML 中的標題、段落、文本格式化、引用和註釋，這些文本標籤有助於建立一個結構良好的網站。
HTML，或稱為超文字標記語言，是網頁設計的基石，它扮演著連接我們到數位世界的橋樑。無論您是一位開發人員、網頁設計師，或者只是一個上網冒險的用戶，瞭解HTML的基本原理和運作方式都將使您更深入地瞭解我們日常生活中不可或缺的網頁技術。
HTML的定義 HTML代表的是“HyperText Mar
網頁第二個輸入欄位內容由第一個輸入欄位(radio button)的不同而出現不同的選項之 javascript
例子。請參考範例
網頁輸入欄位動態改變範例
Html Dynamic DropDown Example
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
在網頁設計中，圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片，包括基本語法、屬性設定等，幫助你更好的在網頁中使用圖片。
HTML 表單扮演著收集用戶資訊的重要角色。無論是登入頁面、註冊表、問卷調查，或是任何需要用戶輸入的場景，都離不開 HTML 表單。本文將帶你快速了解 HTML 表單的基礎知識，包括表單的結構、元素及其驗證方式。
在網頁開發中，HTML 表格是展示資料的一種重要方式。本文將介紹HTML表格的基本結構和合併單元格，並通過實際範例幫助你理解。
無論是跳轉到另一個網頁，還是在同一頁面內導航，HTML 連結都扮演著關鍵角色。本文將簡單的介紹 HTML 連結的基礎語法和使用方法。
在網頁設計中，列表是基本且重要的元素之一。透過 HTML 列表，我們能夠提高網頁內容的可讀性。本文將帶你了解 HTML 中的列表類型，以及它們的使用方式。
本文將介紹 HTML 中的標題、段落、文本格式化、引用和註釋，這些文本標籤有助於建立一個結構良好的網站。
HTML，或稱為超文字標記語言，是網頁設計的基石，它扮演著連接我們到數位世界的橋樑。無論您是一位開發人員、網頁設計師，或者只是一個上網冒險的用戶，瞭解HTML的基本原理和運作方式都將使您更深入地瞭解我們日常生活中不可或缺的網頁技術。
HTML的定義 HTML代表的是“HyperText Mar
網頁第二個輸入欄位內容由第一個輸入欄位(radio button)的不同而出現不同的選項之 javascript
例子。請參考範例
網頁輸入欄位動態改變範例
Html Dynamic DropDown Example