×

注意!页面内容来自https://www.w3cschool.cn/article/32906041.html,本站不储存任何内容,为了更好的阅读体验进行在线解析,若有广告出现,请及时反馈。若您觉得侵犯了您的利益,请通知我们进行删除,然后访问 原网页

< type="text/css"> .header-mobile-item { position: -webkit-sticky; position: sticky; top: 0; left: 0; height: 2.5rem; z-index: 9; } .header-mobile { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; height: 2.5rem; padding: 0 .6rem; background-color: #fff; } .header-mobile .header-logo { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; width: auto; height: 1.4rem; padding-right: .5rem; } .header-mobile .header-logo a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: .75rem; color: #333; padding-right: 0.5rem; } .header-mobile .header-logo .mobile-logo { display: inline-block; /* width: 1.8rem; */ width: 6.8rem; height: 1.8rem; /* background: url("https://7nsts.w3cschool.cn/images/w3c/app-logo.png?t=20190306") no-repeat center center/contain; */ background: url("//7nsts.w3cschool.cn/images/logonew2.png") no-repeat center center/contain; margin-right: 0.5rem; } .header-mobile .header-logo .mobile-intro { font-size: 0.75rem; font-weight: 600; } .header-mobile .header-navbar { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .header-mobile .header-btn { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; width: auto; height: 1.4rem; /* padding: 0 .5rem; */ padding: 0 1rem; background-color: rgba(237,124,48,0.1); font-size: .65rem; color: #fe6a00; border-radius: 1.0rem; } .header-mobile .header-btn a { color: #fe6a00; font-weight: 700; } .header-mobile .header-btn .spacing { padding: 0 0.25rem; } .header-mobile .header-avator { width: 1.4rem; height: 1.4rem; margin-left: 0.5rem; } .header-mobile .header-avator img { width: 100%; height: 100%; border-radius: 50%; } .vip-sicon { display: inline-block; width: 24px; height: 24px; margin-left: 0.25rem; vertical-align: middle; background-size: 24px 24px; } .vip-sicon { background-image: url("//7nsts.w3cschool.cn/images/w3c/vip-sicon0.png"); } .vip-sicon1 { background-image: url("//7nsts.w3cschool.cn/images/w3c/vip-sicon1.png"); } .vip-sicon2 { background-image: url("//7nsts.w3cschool.cn/images/w3c/vip-sicon2.png"); } .vip-sicon3 { background-image: url("//7nsts.w3cschool.cn/images/vip/all-situations-vip.png"); height: 30px; background-size: 24px; } @media (max-width: 800px) { /*.header-mobile .header-logo .mobile-logo { width: 7.8rem; } .header-mobile .header-logo .mobile-intro { font-size: 1rem; } .header-mobile .header-btn a { font-size: 14px; }*/ }

如何创建并保存HTML文件?零基础入门教程

编程狮(w3cschool.cn) 2025-03-17 15:12:16 浏览数 (22537)
反馈

本文将以Windows系统为例,教你用最简单的记事本创建并保存第一个HTML网页。

📝 第一步:准备工具

  1. 文本编辑器:使用系统自带的记事本(无需下载)。

    • 按下 Win + S,输入“记事本”并打开。

    记事本

  2. 浏览器:Chrome、Edge等均可。

    Chrome、Edge浏览器图标

🛠️ 第二步:创建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。

🚀 进阶推荐

  • 专业编辑器:VS Code(来自微软的免费且高亮代码编辑器)
    下载地址:code.visualstudio.com/
  • AI 编辑器:Trea(字节跳动推出的免费AI IDE,专为中国开发者打造)

    下载地址:trae.com.cn/

  • 在线编译器:HTML在线编译器(W3Cschool提供的免下载HTML在线免费编译器)

    在线地址:www.w3cschool.cn/tryrun/runcode?lang=html

下一步学习建议:学会基础操作后,可尝试添加图片、链接等元素,逐步构建完整网页!🐾

👉课程推荐:《HTML入门课程》、《HTML + CSS 基础实战

2 人点赞

查看完整版笔记
App下载
App下载

扫描二维码

下载编程狮App

关注有礼
微信公众号

扫码关注 领资料包

返回顶部