最简单可靠的网页开发方式是用记事本或VS Code创建小写无空格的index.html文件，确保包含UTF-8编码、viewport和title三行meta标签，并用相对路径引用资源，部署前需本地双击验证、检查控制台无报错、确认源码为最新内容。
直接用记事本或 VS Code 写一个 index.html 文件，放在文件夹里双击就能打开——这就是最简单、最可靠的方法，不需要安装任何服务器、不依赖网络、不调用外部服务。
为什么必须叫 index.html
浏览器和托管平台（如 GitHub Pages）默认查找这个文件名作为首页。如果命名为 home.html 或 myweb.html，本地双击能打开，但部署后可能 404；改名是最常见且最容易被忽略的上线失败原因。
- Windows 用户保存时注意关闭“自动添加 .txt”后缀，务必手动选“所有文件”，再输入
index.html - 文件名全部小写，避免大小写敏感问题（尤其部署到 Linux 服务器时）
- 不要用空格或中文命名，例如
我的首页.html或index new.html都可能在路径引用中出错
<head> 里这三行不能少
很多新手照抄代码却漏掉关键元信息，导致中文乱码、手机显示异常、标题不显示等问题。下面这三行是底线配置：
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网站</title>
-
charset="UTF-8"：没它，中文会变成方块或问号 -
viewport：没它，手机打开页面会缩成一团，文字小得看不清 -
<title>：不是可有可无的装饰，它出现在浏览器标签页上，也影响搜索引擎识别
图片和 CSS 路径写错的典型表现
本地双击能打开，但图片不显示、样式全失效——90% 是路径问题。假设你的目录长这样：
立即学习“前端免费学习笔记（深入）”；
my-site/
├── index.html
├── style.css
└── assets/
└── photo.jpg
- 在
index.html中引用 CSS：用<link rel="stylesheet" href="style.css">（同级目录，不用加./） - 引用图片：用
<img src="assets/photo.jpg">（相对路径，从 HTML 文件位置出发算） - 绝对路径（如
/assets/photo.jpg）在本地双击时会失效，因为浏览器按file://协议加载，不支持根路径解析
部署前必做的三件事
别急着上传，先在本地确认这三点是否通过：
- 双击
index.html在 Chrome/Firefox 中打开，检查文字、图片、链接是否都正常 - F12 打开开发者工具 → 切到
Console标签页，确保没有红色报错（比如Failed to load resource: net::ERR_FILE_NOT_FOUND） - 右键 → “查看网页源代码”，确认
<title>和<h1>里的内容是你改过的，不是模板残留
路径、编码、文件名这三个点看着琐碎，却是从本地到线上最常卡住的地方。很多人反复上传、刷新、查文档，最后发现只是把 index.htm 误存成了 index.html.txt。
