HTML代码写完了，保存这个动作看似简单，里面却藏着不少容易踩的坑。有人保存后发现页面打开全是乱码，有人发现文件双击后浏览器把它当纯文本显示，还有人把文件传到服务器上就出现莫名其妙的空白行。这些问题几乎都可以追溯到两个环节：文件扩展名是否正确，以及文件编码设置是否合理。这篇文章就把HTML文档保存的细节一次性讲清楚。
一、保存HTML文件时扩展名和格式怎么选
首先要明确的是，HTML文档本质上就是一个纯文本文件，它不需要任何特殊的二进制格式。保存时只需要保证两件事：扩展名为.html或.htm，保存类型选择所有文件或纯文本格式即可。
.html和.htm这两种扩展名在功能上完全等价，浏览器对它们的处理没有任何区别。.htm是早期Windows系统只支持三位扩展名时代留下的产物，现在新建文件时推荐统一使用.html，更符合现代习惯。需要注意的是，如果你用记事本保存，一定要在保存对话框中将保存类型设置为所有文件，否则文件会被存成xxx.html.txt，双击后打开的是记事本而不是浏览器。
另外一种常见错误是用Word或写字板来编辑和保存HTML。Word保存出来的HTML会携带大量私有的XML标签和样式信息，文件体积臃肿，代码可读性极差。编写HTML请使用专业的代码编辑器，如VS Code、Notepad++、Sublime Text等，它们不仅能保证文件以纯文本形式保存，还提供编码转换、语法高亮等实用功能。
二、编码设置详解：UTF-8为什么是首选
编码决定了文本中的字符以什么方式存储成二进制数据。HTML文档中如果包含中文，编码设置不对就必然出现乱码。目前常见的编码有UTF-8和GBK两种，两者的核心区别在于：UTF-8是全球通用的变长编码，一个字符占1到4个字节，能表示世界上几乎所有文字；GBK是中国大陆地区的编码标准，中英文混排时一个汉字固定占2个字节。
对网页开发而言，UTF-8是毋庸置疑的首选。原因很简单：网页可能被任何地区的浏览器访问，UTF-8能同时兼容中英文及各国字符，而GBK在遇到生僻字、 emoji或者少数民族文字时就会变成问号或方块。保存HTML文档时，请在编辑器中将编码明确设置为UTF-8，而不是依赖系统默认编码。Windows记事本在旧版本系统中默认保存为ANSI编码（在中文系统上就是GBK），这是很多初学者乱码问题的根源。
保存为UTF-8之后，还要在HTML文档的head部分声明编码，让浏览器知道该用什么编码来解析文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>编码声明示例</title>
</head>
<body>
<p>这是一段中文内容</p>
</body>
</html><meta charset="UTF-8">这条声明必须放在head的最前面，最好紧跟在<head>标签之后，因为浏览器是边下载边解析的，编码声明出现之前的内容可能已经被错误解码。如果文件保存的编码和meta声明的编码不一致，浏览器以meta声明为准时就可能出现乱码，所以保存编码与声明编码必须严格统一。
三、常见编辑器中设置编码的具体操作
不同编辑器设置编码的方式各有差异，下面介绍几款主流工具的操作方法。
VS Code：点击右下角状态栏的编码标识（默认显示UTF-8），会弹出两个选项：Reopen with Encoding表示用新编码重新打开当前文件，适合查看已经是乱码的文件；Save with Encoding表示用指定编码重新保存，适合转换编码。日常开发保持默认的UTF-8即可，也可以通过设置项files.encoding强制指定默认编码。
Notepad++：在菜单栏的格式（Encoding）菜单中可以选择以UTF-8编码、转为UTF-8编码等选项。注意区分ANSI和UTF-8，如果你的文件包含中文且显示正常，说明当前编码是ANSI即GBK，需要通过转为UTF-8编码命令转换后再保存。Notepad++还提供UTF-8-BOM选项，一般情况下不要选它。
记事本：在另存为对话框的下方有编码下拉框，选择UTF-8即可。Windows 10之后的记事本默认就是UTF-8，但如果要打开老项目中的GBK文件，可以在打开时选择编码，避免乱码。
四、BOM头带来的隐患与处理办法
UTF-8编码有一个变体叫UTF-8 with BOM。BOM即字节顺序标记，保存时会在文件开头写入三个不可见字节（EF BB BF）。BOM本来是UTF-16等编码用来标记字节顺序的，对UTF-8来说意义不大，反而会带来麻烦。
BOM头的典型危害有两个：一是PHP等后端语言在输出前若文件带BOM，会把这三个字节提前发送出去，导致页面顶部出现一个删不掉的空行，甚至影响header函数的使用；二是某些浏览器或工具解析HTML时会误把BOM当成正文内容，造成页面顶部出现异常空白。所以在保存HTML及相关脚本文件时，一律使用无BOM的UTF-8。检查文件是否带BOM，可以用十六进制查看工具看文件开头是否为EF BB BF，或在支持编码转换的编辑器中重新以UTF-8无BOM格式保存一遍。
总结一下要点：扩展名用.html，编码用无BOM的UTF-8，head中第一行加上<meta charset="UTF-8">声明，三者保持一致，HTML文档就能在任何环境下稳定保存和正确显示。把这些习惯固定下来，乱码问题基本就与你无缘了。