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)

1 人點(diǎn)贊