在Mac系统中编辑或打开HTML文件时，经常会出现中文内容显示为乱码的情况，核心原因是文件的实际编码格式和浏览器解析时使用的编码不一致。要解决这个问题，需要从文件编码设置、HTML代码声明、浏览器解析配置三个层面入手处理。
乱码产生的常见原因
Mac系统自带的文本编辑工具默认保存文件时可能使用Mac特有的编码格式，而浏览器默认会按照UTF-8编码解析HTML内容，两者不匹配就会出现乱码。另外如果HTML代码中没有明确声明编码格式，浏览器会按照自身的默认编码解析，也容易引发显示异常。
不同编辑器中设置HTML文件编码
使用Mac自带文本编辑设置编码
打开文本编辑后，先点击顶部菜单栏的「文本编辑」-「偏好设置」，在弹出的窗口中选择「打开与存储」选项卡，将「存储时默认编码」设置为「Unicode (UTF-8)」，之后保存HTML文件时就会默认使用UTF-8编码。
如果是已经保存的乱码文件，打开文件时点击顶部菜单栏的「文件」-「打开」，在弹出的窗口底部编码选择栏中选择「Unicode (UTF-8)」，再打开文件后重新保存即可修正编码。
使用VS Code设置编码
在VS Code中打开HTML文件后，点击右下角的编码显示区域，在弹出的菜单中选择「通过编码保存」，然后选择「UTF-8」选项，即可将文件编码修改为UTF-8。如果右下角显示的是其他编码，也可以直接点击选择「重新用UTF-8打开」来修正解析编码。
<!-- 用VS Code修改编码后保存的HTML示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>
<p>这是中文测试内容</p>
</body>
</html>
HTML代码中声明编码的正确方式
除了保证文件本身的编码是UTF-8，还需要在HTML代码的<head>标签内添加<meta>标签声明编码，这样浏览器解析时会优先按照声明的编码读取内容，避免乱码。
标准的编码声明写法如下，需要将<meta>标签放在<head>的最前面，确保浏览器最先读取到编码信息：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 必须放在head标签的最前面 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编码声明示例</title>
</head>
<body>
<p>中文内容正常显示</p>
</body>
</html>
浏览器端编码调整方法
如果文件编码和代码声明都正确还是出现乱码，可以手动调整浏览器的编码解析设置。以Chrome浏览器为例，打开乱码的HTML页面后，点击地址栏右侧的三个点，选择「更多工具」-「编码」，然后选择「UTF-8」即可强制浏览器用UTF-8编码解析当前页面。
常见问题排查
- 检查文件实际编码：可以用VS Code打开文件，查看右下角显示的编码是否为UTF-8，如果不是就重新保存为UTF-8编码。
- 检查<meta charset>标签是否写错：比如写成
charset="utf8"或者charset="UTF8"都是不规范的，标准写法是charset="UTF-8"。 - 避免混合编码内容：如果HTML文件中引入了其他编码的JS或者CSS文件，也可能导致部分内容乱码，需要确保所有关联文件的编码都是UTF-8。
HTML编码UTF-8Mac文本编辑meta_charset文件编码设置修改时间：2026-07-04 23:24:12