本文將以Windows系統為例,教你用最簡單的記事本創(chuàng)建并保存第一個HTML網頁。
?? 第一步:準備工具
-
文本編輯器:使用系統自帶的記事本(無需下載)。
- 按下
Win + S
,輸入“記事本”并打開。
- 按下
-
瀏覽器:Chrome、Edge等均可。
??? 第二步:創(chuàng)建HTML文件
-
新建文本文檔
右鍵桌面或文件夾 → 選擇“新建” → “文本文檔”。 -
重命名為
.html
文件- 右鍵新建的文檔 → 選擇“重命名”。
- 將文件名改為
index.html
(關鍵步驟?。?
? 若看不到
.txt
擴展名:打開文件夾頂部菜單【查看】→ 勾選【文件擴展名】。
?? 第三步:編寫HTML代碼
-
右鍵
index.html
→ 選擇“打開方式” → “記事本”。 -
輸入以下代碼(復制粘貼即可):
<!DOCTYPE html> <html> <head> <title>我的第一個網頁 | 編程獅(w3cschool.cn)</title> </head> <body> <h1>歡迎來到編程獅!</h1> <p>我正在編程獅學習HTML!????</p> </body> </html>
?? 第四步:保存文件
- 按下
Ctrl + S
保存。 -
確保保存類型正確:
- 點擊“保存類型”下拉框 → 選擇【所有文件 (.)】
- 確認文件名結尾為
.html
(如index.html
)
?? 第五步:在瀏覽器中查看
- 雙擊
index.html
文件,瀏覽器會自動打開。 -
效果應顯示大標題和段落文字,如下圖:
?? 修改并更新網頁
- 右鍵文件 → 用記事本重新打開。
-
修改文字(如將“編程獅”改為“W3Cschool”)→ 保存。
-
返回瀏覽器 → 按下
F5
刷新頁面,立即查看變化!
? 常見問題解答
- 文件打開方式錯誤?
- 右鍵.html文件 → “屬性” → 將打開方式設置為瀏覽器。
-
代碼沒效果?
- 檢查標簽是否閉合(如
</h1>
)。 - 確保文件擴展名是
.html
而非.txt
。
- 檢查標簽是否閉合(如
- 中文顯示亂碼?
- 保存時選擇編碼為 UTF-8:文件 → 另存為 → 底部編碼選擇UTF-8。
?? 進階推薦
- 專業(yè)編輯器:VS Code(來自微軟的免費且高亮代碼編輯器)
下載地址:code.visualstudio.com/ -
AI 編輯器:Trea(字節(jié)跳動推出的免費AI IDE,專為中國開發(fā)者打造)
下載地址:trae.com.cn/
-
在線編譯器:HTML在線編譯器(W3Cschool提供的免下載HTML在線免費編譯器)
下一步學習建議:學會基礎操作后,可嘗試添加圖片、鏈接等元素,逐步構建完整網頁!??
??課程推薦:《HTML入門課程》、《HTML + CSS 基礎實戰(zhàn)》