<meta charset="utf-8"> vs <meta http-equiv="Content-Type">

vs

技术背景

在网页开发中，正确设置字符编码至关重要，它能确保网页上的文字被浏览器正确解析和显示。<meta charset="utf-8"> 和 <meta http-equiv="Content-Type"> 这两个标签都用于指定网页的字符编码，但它们在不同的 HTML 版本中有不同的应用。

实现步骤

1. 选择合适的编码声明

HTML5：推荐使用 <meta charset="utf-8">，它是 HTML5 引入的简化写法，更易记忆和输入。
HTML4 或 XHTML：使用 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">。对于一些旧的 DOM 解析器，如 PHP 5.3 中的 DOMDocument，也需要使用这种旧格式。
电子邮件签名：由于很多电子邮件阅读器不支持 HTML5，建议使用 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">。

2. 文件保存为 UTF - 8 无 BOM 编码

确保你的文件以 UTF - 8 编码保存，并且不包含字节顺序标记（BOM）。可以使用 Notepad++、TextWrangler（Mac 免费）或 BBEdit（Mac 付费）等编辑器来实现。

Notepad++：在菜单栏选择“Encoding > Encode in UTF - 8 without BOM”。
TextWrangler/BBEdit：在文档窗口底部的菜单中指定文档编码为“UTF - 8 no BOM”，还可以在“Preferences”中设置为新文档的默认编码。

3. 服务器配置

如果使用 Apache 服务器，默认情况下它以 ISO - 8859 - 1 编码提供文件。需要在 .htaccess 文件中添加以下行：

1	`AddDefaultCharset UTF-8`

也可以针对特定文件类型更改编码：

1	`AddType text/html;charset=utf-8 html`

如果要同时提供 UTF - 8 和 Latin - 1（ISO - 8859 - 1）文件，可以这样设置：

1 2	`AddType text/plain;charset=iso-8859-1 txt AddType text/plain;charset=utf-8 text`

核心代码

HTML5 编码声明

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

HTML4 或 XHTML 编码声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

最佳实践

一致性：在整个项目中保持编码声明的一致性，使用 <meta charset="utf-8"> 与其他标记中指定字符集的方式保持一致，例如 <script> 和 <a> 标签。
位置：将 <meta charset> 标签放在 <head> 标签之后的顶部，以便在解析页面其他部分之前指定编码，这样可以在标题中使用 UTF - 8 字符。
明确声明：始终明确声明编码，避免让浏览器猜测，以防止安全问题。