必须用纯文本编辑器（如VS Code、Notepad++或macOS的TextEdit纯文本模式），保存为UTF-8编码（无BOM）、.html后缀文件；最小结构缺一不可：<!DOCTYPE html>、<html lang="zh-CN">、<head>（含<meta charset="UTF-8">和<title>）、<body>；图片等资源用相对路径，中文显示正常且页面可双击打开。
直接上手写一个能打开、能看、能改的自我介绍网页，不需要框架、不装依赖，用记事本就能完成。
用什么编辑器写 HTML 最不踩坑
别用 Word 或 WPS 写 HTML —— 它们会偷偷加格式字符，保存后打开是乱码或空白页。必须用纯文本编辑器：VS Code（免费）、Notepad++（Windows）、TextEdit（macOS 切到“纯文本”模式）。
- 保存时选编码为
UTF-8（不是 UTF-8 with BOM） - 文件名必须带
.html后缀，比如index.html或about.html - 写完双击打开，浏览器地址栏看到的是
file:///开头，说明没走服务器，完全 OK
最简 HTML 结构里哪些标签不能少
浏览器只认标准结构，缺了 <html>、<head>、<body> 会导致样式错乱或中文显示为方块。
下面这段就是最小可用模板，复制粘贴进去就能运行：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的自我介绍</title> </head> <body> <h1>张三</h1> <p>前端开发者，喜欢写干净的代码。</p> </body> </html>
-
<meta charset="UTF-8">必须有，否则中文会变问号 -
lang="zh-CN"告诉屏幕阅读器这是中文，也影响字体回退行为 -
<title>内容会显示在浏览器标签页上，不是页面正文
加照片和联系方式时容易出错的路径写法
本地测试阶段，所有图片、CSS 都得用相对路径。假设你的 index.html 和照片 avatar.jpg 在同一个文件夹，就直接写：
<img src="avatar.jpg" alt="我的头像">
如果照片放在 images/ 子目录下，路径就得写成：
<img src="images/avatar.jpg" alt="我的头像">
- 路径区分大小写：
Images/≠images/ - 不要写
C:\xxx\avatar.jpg或http://localhost/xxx—— 这些在双击打开时全失效 - 邮箱链接要写成
<a href="mailto:me@example.com">me@example.com</a>，不是mailto://也不是email:
加点样式让页面不那么“默认”
不用外部 CSS 文件，直接在 <head> 里加 <style> 就够用。比如居中标题、调大字号、加点留白：
<style>
body {
font-family: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB";
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
padding: 2rem;
}
h1 {
color: #333;
text-align: center;
}
img {
display: block;
margin: 1rem auto;
max-width: 100%;
height: auto;
}
</style>
- 中文字体链里放了系统默认字体，比硬写
"Microsoft YaHei"兼容性好 -
max-width: 600px是关键——长段落不换行、不缩进，人眼读起来累 - 别用
<font>标签，它早被废弃，现代浏览器可能忽略
真正卡住人的往往不是语法，而是路径写错、编码存错、浏览器缓存旧版本。改完记得强制刷新（Ctrl+Shift+R 或 Cmd+Shift+R），再检查控制台有没有 404 报错。
