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)

1 人點贊