App下載

如何創(chuàng)建并保存HTML文件？零基礎(chǔ)入門教程

編程獅（w3cschool.cn） 2025-03-17 15:12:16 瀏覽數(shù) (154)
反饋

本文將以Windows系統(tǒng)為例，教你用最簡(jiǎn)單的記事本創(chuàng)建并保存第一個(gè)HTML網(wǎng)頁。

?? 第一步：準(zhǔn)備工具

  1. 文本編輯器：使用系統(tǒng)自帶的記事本（無需下載）。

    • 按下 Win + S，輸入“記事本”并打開。

    記事本

  2. 瀏覽器：Chrome、Edge等均可。

    Chrome、Edge瀏覽器圖標(biāo)

??? 第二步：創(chuàng)建HTML文件

  1. 新建文本文檔
    右鍵桌面或文件夾 → 選擇“新建” → “文本文檔”。

    新建文本文檔

    新建文本文檔

  2. 重命名為.html文件

    • 右鍵新建的文檔 → 選擇“重命名”。

    重命名

    • 將文件名改為 index.html（關(guān)鍵步驟！）

    將文件名改為 index.html

    ? 若看不到.txt擴(kuò)展名：

    打開文件夾頂部菜單【查看】→ 勾選【文件擴(kuò)展名】。

    查看文件擴(kuò)展名

?? 第三步：編寫HTML代碼

  1. 右鍵 index.html → 選擇“打開方式” → “記事本”。

    用記事本方式打開html文件

  2. 輸入以下代碼（復(fù)制粘貼即可）：

    <!DOCTYPE html>
<html>
<head>
   <title>我的第一個(gè)網(wǎng)頁 | 編程獅（w3cschool.cn）</title>
</head>
<body>
   <h1>歡迎來到編程獅！</h1>
   <p>我正在編程獅學(xué)習(xí)HTML！????</p>
</body>
</html>

    將HTML代碼黏貼到記事本中

?? 第四步：保存文件

  1. 按下 Ctrl + S 保存。

  2. 確保保存類型正確：

    • 點(diǎn)擊“保存類型”下拉框 → 選擇【所有文件 (.)】

    點(diǎn)擊“保存類型”下拉框 → 選擇【所有文件 (*.*)】

    • 確認(rèn)文件名結(jié)尾為 .html（如 index.html）

?? 第五步：在瀏覽器中查看

  1. 雙擊 index.html 文件，瀏覽器會(huì)自動(dòng)打開。

  2. 效果應(yīng)顯示大標(biāo)題和段落文字，如下圖：

    在瀏覽器中查看HTML文件

?? 修改并更新網(wǎng)頁

  1. 右鍵文件 → 用記事本重新打開。

  2. 修改文字（如將“編程獅”改為“W3Cschool”）→ 保存。

    修改html文件

  3. 返回瀏覽器 → 按下 F5 刷新頁面，立即查看變化！

    用瀏覽器預(yù)覽html文件

? 常見問題解答

  1. 文件打開方式錯(cuò)誤？
    • 右鍵.html文件 → “屬性” → 將打開方式設(shè)置為瀏覽器。

  2. 代碼沒效果？

    • 檢查標(biāo)簽是否閉合（如</h1>）。
    • 確保文件擴(kuò)展名是.html而非.txt。

    HTML文件擴(kuò)展名

  3. 中文顯示亂碼？
    • 保存時(shí)選擇編碼為 UTF-8：文件 → 另存為 → 底部編碼選擇UTF-8。

?? 進(jìn)階推薦

  • 專業(yè)編輯器：VS Code（來自微軟的免費(fèi)且高亮代碼編輯器）
    下載地址：code.visualstudio.com/

  • AI 編輯器：Trea（字節(jié)跳動(dòng)退出的免費(fèi)AI IDE，專為中國開發(fā)者打造）

    下載地址：trae.com.cn/

  • 在線編譯器：HTML在線編譯器（W3Cschool提供的免下載HTML在線免費(fèi)編譯器）

    在線地址：m.o2fo.com/tryrun/runcode?lang=html

下一步學(xué)習(xí)建議：學(xué)會(huì)基礎(chǔ)操作后，可嘗試添加圖片、鏈接等元素，逐步構(gòu)建完整網(wǎng)頁！??

??課程推薦：《HTML入門課程》、《HTML + CSS 基礎(chǔ)實(shí)戰(zhàn)》

HTML 前端

1 人點(diǎn)贊