HTML5中应写为<meta charset="utf-8">,必须置于<head>最前、自闭合、无多余空格或属性;HTML4不支持该语法,须用<meta http-equiv="Content-Type" content="text/html; charset=utf-8">。

HTML4 和 HTML5 的字符编码设置方式不同,<meta charset> 只在 HTML5 中合法且推荐;HTML4 必须用 <meta http-equiv="Content-Type"> 形式。
HTML5 怎么写 <meta charset>
HTML5 允许使用简短、语义明确的写法,浏览器解析更可靠,且必须放在 <head> 最前面(最好在第一个标签位置):
-
charset值不区分大小写,但惯例全小写,如utf-8 - 不能带分号或多余属性,
<meta charset="UTF-8" />是错误写法(XHTML 风格不适用) - 必须是自闭合标签,不写
</meta>,也不加引号以外的空格(如charset = "utf-8"有空格可能被部分旧解析器误判)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面标题</title> </head>
HTML4 为什么不能用 <meta charset>
HTML4 DTD 不定义 charset 属性,直接写会触发验证失败,且部分老浏览器(如 IE6–8)完全忽略该写法,导致乱码:
- HTML4 正确写法是
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> -
http-equiv模拟 HTTP 头,content值必须包含完整 MIME 类型和charset参数 - 如果漏掉
text/html;(只写charset=utf-8),IE 会退回到系统默认编码(如 GBK)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
实际开发中容易踩的坑
即使写了 <meta charset>,仍出现乱码,往往不是标签写错,而是其他环节断链:
立即学习“前端免费学习笔记(深入)”;
- 文件本身保存编码 ≠ meta 声明编码:用编辑器确认文件以
UTF-8 无 BOM格式保存(VS Code 默认可能带 BOM,Sublime 要关“Save with Encoding”里的 BOM 选项) - 服务器返回了冲突的 HTTP
Content-Type头:例如 Nginx 返回charset=gbk,会覆盖 HTML 中的meta设置 - HTML 文件被二次处理(如构建工具、CMS 输出、代理缓存)时意外插入了 BOM 或修改了
<head>结构,把<meta charset>推到了后面
真正起效的编码声明是「HTTP 响应头 > BOM > <meta charset>」三层优先级,只盯着 HTML 标签改,常白忙活。










