HTML编码字符集charset定义的位置问题和编码冲突的解决方案

无意中发现一个问题,大部分网页的charset定义被放置在<title>标签之前。但是一部分网页的charset放在<title>标签之后。

这样的话,浏览器怎么知道<title>内容charset的编码呢?

所以,我之前写的一部分页面,如果<body>内容显示正常,可能会出现title显示乱码。此时强制修改浏览器的编码为title编码,则会出现<body>内容出现乱码。这引起我极大兴趣和疑惑。

这种问题,是由于浏览器显示title时用了错误编码,直到发现charset定义后,才使用了正确编码,或者是<title>和<body>内容所用编码不同造成的。

所以我终于明白:

<meta http-equiv=Content-Type content="text/html;charset=utf-8" />
<meta http-equiv=Content-Type content="text/html;charset=gb2312"/>

charset定义语句应当在<title>之前,甚至应当在一系列<meta>语句的最前面。

但是由此引出了3个问题,我下面对着3个有意思的问题予以解答。

1.如果一个页面连续重复定义charset为不同属性,浏览器采用哪个属性(Edge25.10586 EdgeHTML13.10586)?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>你好,世界</title>
</head>
<body>
这是一个测试页面,文件本身采用GB2312编码。
</body>
</html>

按照以上代码,浏览器显示正常。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>你好,世界</title>
</head>
<body>
这是一个测试页面,文件本身采用GB2312编码。
</body>
</html>

按照以上代码(注意加粗部分),浏览器显示乱码。

结论(采用Edge25.10586 EdgeHTML13.10586):浏览器采用最先定义的编码,后续编码不起作用。

2.页面<title>标题能否被后面的charset属性所定义?

<html>
<head>
<title>你好,世界</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
这是一个测试页面,文件本身采用GB2312编码。
</body>
</html>

页面<title>和<body>部分都显示乱码。

<html>
<head>
<title>你好,世界</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
这是一个测试页面,文件本身采用GB2312编码。
</body>
</html>

浏览器显示一切正常。

结论:<title>会被后续的charset属性所影响,但这个随浏览器和系统环境所变化,建议还是把charset定义在title之前。

3.不进行charset定义的后果及浏览器的默认采用编码

<html>
<head>
<title>你好,世界</title>
</head>
<body>
这是一个测试页面,文件本身采用GB2312编码。
</body>
</html>

按照以上代码,浏览器(Edge25.10586 EdgeHTML13.10586、chrome)显示正常。

<html>
<head>
<title>你好,世界</title>
</head>
<body>
这是一个测试页面,文件本身采用utf-8编码。
</body>
</html>

按照加粗部分,转换文件编码后,浏览器Edge25.10586-EdgeHTML13.10586显示繁体乱码。但是浏览器chrome显示正常。

结论:页面若不进行charset定义,浏览器采用的编码随浏览器类型、系统环境影响,具体到用户的显示结果无法预测。不排除浏览器自动识别的可能,但还是建议在<title>之前甚至在一系列<meta>语句的最前面对charset进行定义。

发表评论

电子邮件地址不会被公开。 必填项已用*标注