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

news2025/7/8 19:42:05

原文:如何创建并保存HTML文件?零基础入门教程 | w3cschool笔记

本文将以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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2318014.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

React19源码系列之FiberRoot节点和Fiber节点

在上一篇文章&#xff0c;看了createRoot函数的大致流程。 createContainer函数创建并返回了FiberRoot 。FiberRoot是由createFiberRoot函数创建&#xff0c; createFiberRoot函数还将 FiberRoot和 根Fiber 通过current属性建立起了联系。将FiberRoot作为参数传给 ReactDOMRoo…

TCP协议的多线程应用、多线程下的网络编程

DAY13.2 Java核心基础 多线程下的网络编程 基于单点连接的方式&#xff0c;一个服务端对应一个客户端&#xff0c;实际运行环境中是一个服务端需要对应多个客户端 创建ServerSocketNable类&#xff0c;多线程接收socket对象 public class ServerSocketNable implements Run…

华为中小型企业项目案例

实验目的(1) 熟悉华为交换机和路由器的应用场景 (2) 掌握华为交换机和路由器的配置方法 实验拓扑实验拓扑如图所示。 华为中小型企业项目案例拓扑图 实验配置市场部和技术部的配置创建VLANLSW1的配置 [LSW1]vlan batch 10 20 [LSW1]q…

LabVIEW VI Scripting随机数波形图自动生成

通过LabVIEW VI Scripting 技术&#xff0c;实现从零开始编程化创建并运行一个随机数波形监测VI。核心功能包括自动化生成VI框架、添加控件与函数、配置数据流逻辑及界面布局优化&#xff0c;适用于批量生成测试工具、教学模板开发或复杂系统的模块化构建。通过脚本化操作&…

MATLAB 控制系统设计与仿真 - 26

状态空间控制系统概述 状态空间描述 现代控制理论是建立在状态空间基础上的控制系统分析和设计理论&#xff0c;它用状态变量来刻画系统的内部特征&#xff0c;用‘一节微分方程组’来描述系统的动态特性。系统的状态空间模型描述了系统输入/输出与内部状态之间的关系&#x…

Python----计算机视觉处理(Opencv:图像镜像旋转)

一、图像镜像旋转 图像的旋转是围绕一个特定点进行的&#xff0c;而图像的镜像旋转则是围绕坐标轴进行的。图像镜像旋转&#xff0c;也可 以叫做图像翻转&#xff0c;分为水平翻转、垂直翻转、水平垂直翻转三种。 通俗的理解为&#xff0c;当以图片的中垂线为x轴和y轴时&#x…

C++从入门到入土(八)——多态的原理

目录 前言 多态的原理 动态绑定与静态绑定 虚函数表 小结 前言 在前面的文章中&#xff0c;我们介绍了C三大特性之一的多态&#xff0c;我们主要介绍了多态的构成条件&#xff0c;但是对于多态的原理我们探讨的是不够深入的&#xff0c;下面这这一篇文章&#xff0c;我们将…

PyCharm安装redis,python安装redis,PyCharm使用失败问题

报错信息 Usage: D:\wb2\wbrj_pys\venv\Scripts\python.exe -m pip install [options] [package-index-options] … D:\wb2\wbrj_pys\venv\Scripts\python.exe -m pip install [options] -r [package-index-options] … D:\wb2\wbrj_pys\venv\Scripts\python.exe -m pip instal…

保姆级离线TiDB V8+解释

以前学习的时候还是3版本&#xff0c;如今已经是8版本了 https://cn.pingcap.com/product-community/?_gl1ujh2l9_gcl_auMTI3MTI3NTM3NC4xNzM5MjU3ODE2_gaMTYwNzE2NTI4OC4xNzMzOTA1MjUz_ga_3JVXJ41175MTc0MTk1NTc1OC4xMS4xLjE3NDE5NTU3NjIuNTYuMC41NDk4MTMxNTM._ga_CPG2VW1Y4…

PyTorch 深度学习实战(17):Asynchronous Advantage Actor-Critic (A3C) 算法与并行训练

在上一篇文章中&#xff0c;我们深入探讨了 Soft Actor-Critic (SAC) 算法及其在平衡探索与利用方面的优势。本文将介绍强化学习领域的重要里程碑——Asynchronous Advantage Actor-Critic (A3C) 算法&#xff0c;并展示如何利用 PyTorch 实现并行化训练来加速学习过程。 一、A…

Docker换源加速(更换镜像源)详细教程(2025.3最新可用镜像,全网最详细)

文章目录 前言可用镜像源汇总换源方法1-临时换源换源方法2-永久换源&#xff08;推荐&#xff09;常见问题及对应解决方案1.换源后&#xff0c;可以成功pull&#xff0c;但是search会出错 补充1.如何测试镜像源是否可用2.Docker内的Linux换源教程 换源速通版&#xff08;可以直…

SpringData Redis:RedisTemplate配置与数据操作

文章目录 引言一、Redis概述与环境准备二、RedisTemplate基础配置三、连接属性配置四、操作String类型数据五、操作Hash类型数据六、操作List类型数据七、操作Set类型数据八、操作ZSet类型数据九、事务与管道操作总结 引言 Redis作为高性能的NoSQL数据库&#xff0c;在分布式系…

Qt按钮控件常用的API

1.创建按钮 QPushButton *btnnew QPushButton; 以顶层方式弹出窗口控件 代码&#xff1a; #include "widget.h" #include "ui_widget.h" #include"QPushButton"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui-&…

如何检查CMS建站系统的插件是否安全?

检查好CMS建站系统的插件安全是确保网站安全的重要环节&#xff0c;对于常见的安全检查&#xff0c;大家可以利用以下几种有效的方法和工具&#xff0c;来帮你评估插件的安全性。 1. 检查插件来源和开发者信誉 选择可信来源&#xff1a;仅从官方插件库或可信的第三方开发者处…

【Matlab GUI】封装matlab GUI为exe文件

注&#xff1a;封装后的exe还是需要有matlab环境才能运行 &#xff08;1&#xff09;安装MCRinstaller.exe文件&#xff0c;在matlab安装目录下的toolbox/compiler/deploy/win64文件夹里 &#xff08;2&#xff09;安装完MCRinstaller.exe&#xff0c;字命令窗口输入&#x…

【eNSP实战】(续)一个AC多个VAP的实现—将隧道转发改成直接转发

在 一个AC多个VAP的实现—CAPWAP隧道转发 此篇文章配置的基础上&#xff0c;将隧道转发改成直接转发 一、改成直接转发需要改动的配置 &#xff08;一&#xff09;将连接AP的接口改成trunk口&#xff0c;并允许vlan100、101、102通过 [AC1]interface GigabitEthernet 0/0/8 …

机器人ROS学习:Ubuntu22.04安装ROS2和Moveit2实现运动规划

通过本篇文章学习&#xff0c;你可以收获以下内容&#xff1a; 学会在 Ubuntu22.04 上安装 Moveit2学会下载编译运行 Moveit2 样例程序学会使用样例程序进行运动规划等 版本平台 系统版本&#xff1a;ubuntu22.04ROS2 版本&#xff1a;humbleMoveit 版本&#xff1a;moveit2…

生成式AI红队测试:如何有效评估大语言模型

OWASP最新指南为组建生成式AI红队或调整现有红队以适应新技术提供了详细的指导。 红队测试是一种经过时间检验的网络安全系统测试和加固方法&#xff0c;但它需要不断适应技术的演变。近年来&#xff0c;生成式AI和大语言模型&#xff08;LLM&#xff09;的爆发&#xff0c;是…

技术路线图ppt模板_流程图ppt图表_PPT架构图

技术路线图ppt模板 / 学术ppt模板 - 院士增选、国家科技奖、杰青、长江学者特聘教授、校企联聘教授、重点研发、优青、青长、青拔.. / 学术ppt案例 WordinPPT / 持续为双一流高校、科研院所、企业等提供PPT制作系统服务。 - 科学技术奖ppt&#xff1a;自然科学奖 | 技术…

Leetcode-131.Palindrome Partitioning [C++][Java]

目录 一、题目描述 二、解题思路 【C】 【Java】 Leetcode-131.Palindrome Partitioninghttps://leetcode.com/problems/palindrome-partitioning/description/131. 分割回文串 - 力扣&#xff08;LeetCode&#xff09;131. 分割回文串 - 给你一个字符串 s&#xff0c;请你…