App下載

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

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

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

?? 第一步：準備工具

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

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

    記事本

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

    Chrome、Edge瀏覽器圖標

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

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

    新建文本文檔

    新建文本文檔

  2. 重命名為.html文件

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

    重命名

    • 將文件名改為 index.html（關鍵步驟?。?

    將文件名改為 index.html

    ? 若看不到.txt擴展名：

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

    查看文件擴展名

?? 第三步：編寫HTML代碼

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

    用記事本方式打開html文件

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

    <!DOCTYPE html>
<html>
<head>
   <title>我的第一個網頁 | 編程獅（w3cschool.cn）</title>
</head>
<body>
   <h1>歡迎來到編程獅！</h1>
   <p>我正在編程獅學習HTML！????</p>
</body>
</html>

    將HTML代碼黏貼到記事本中

?? 第四步：保存文件

  1. 按下 Ctrl + S 保存。

  2. 確保保存類型正確：

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

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

    • 確認文件名結尾為 .html（如 index.html）

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

  1. 雙擊 index.html 文件，瀏覽器會自動打開。

  2. 效果應顯示大標題和段落文字，如下圖：

    在瀏覽器中查看HTML文件

?? 修改并更新網頁

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

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

    修改html文件

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

    用瀏覽器預覽html文件

? 常見問題解答

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

  2. 代碼沒效果？

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

    HTML文件擴展名

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

?? 進階推薦

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

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

    下載地址：trae.com.cn/

  • 在線編譯器：HTML在線編譯器（W3Cschool提供的免下載HTML在線免費編譯器）

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

下一步學習建議：學會基礎操作后，可嘗試添加圖片、鏈接等元素，逐步構建完整網頁！??

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

HTML 前端

1 人點贊