html5 charset能用吗?

前一段某项目中页面在ie6突然出现了乱码,当时做了各种排查,最终推测是使用了html5的doctype和charset以及中文注释的问题,于是临时采用旧的charset方法来修复了下,后面乱码再没出现。

其实一直不太确定HTML5的Charset能否被IE6识别,于是做了一些测试。

先说下两种Charset声明方法,其实大家应该都很熟悉的:

后面我们简称第一种方法为HTML5方法,第二种方法为HTML4方法。

测试环境:

Windows XP Sp2,中文版+英文版两个版本的IE6,及Windows 7 下IE9及其各种兼容模式和Chrome、Firefox等的当前Stable版本;

立即学习“前端免费学习笔记(深入)”;

因为我们用到的HTML文件都是UTF8编码的,所以这里测试用例的HTML文件也都是UTF8(无BOM)格式,项目用gbk或者gb2312编码的类似。

测试用了两种方法:

meta方法:包括HTML5和HTML4两种方法及其混搭

服务器端方法:服务器端设置charset,这里使用nginx,charset=utf-8

测试用例——Meta方法:

UTF8

UTF8 HTML4方法

UTF8-GB2312

UTF8+中文注释在meta前

UTF8+中文注释在HTML和HEAD之间

GB2312

GB2312 HTML4方法

GB2312-UTF8

GB2312+中文注释在meta前

GB2312+中文注释在HTML和HEAD之间

测试用例——服务器方法:

服务器设置编码

meta编码和服务器编码不一致

上面各用例均可直接访问

测试结果:

测试个用例在各浏览器中表现一致;

UTF-8的方案中,全部正常显示;

charset声明为gb2312,由于和文档的UTF-8编码不符,所以全部乱码;

1,6用HTML5 charset分别定义了UTF8和gb2312,1正常显示没有乱码,6乱码——在中文版IE6和英文版IE6均如此,说明IE6能识别HTML5的charset;

1,2用例和6,7用例,分别用单独用HTML5和HTML4方法定义charset,效果一样;

值得注意的是,第三个用例先用HTML5的方法设定UTF-8编码,再用HTML4的编码设定为gb2312,但页面显示正常,而第八个用例反之,结果页面显示乱码,所以可以推测,第二个meta标签并没有生效;

4、5用例并没有乱码,说明单纯的HTML注释并不一定会导致乱码,这里没有测试这两个位置加载不同编码的js等外部文件时可能发生的情况;

服务器方法中,用例1并没有用meta设置charset,页面显示正常,而用例2中用meta设置charset=gb2312,与服务器版本不同,但依然没有乱码,说明服务器端返回的charset优先级更高;

结论:

其实关于charset的规范,Google的开发文档中也有解释:

要在HEAD标签中;

在任何其它内容之前,也就是要在HEAD中的最前面;

包括空格和DOCTYPE声明在内,要在前512个字节之内;

HTML5和HTML4两种写法效果一样,用其中之一即可;

上面的测试也证明,第4条是正确的,两种写法均可。

另外,服务器端设置charset也是很不错的做法,charset声明直接在HTTP response中获得,效率更高,而且更方便。Google目前在用这种方法。

所以只要页面写的规范,并不会出现乱码的问题。所以可以大胆的使用HTML5的DOCTYPE和Charset声明。但是请尽量按照上面说的Google文档中的规范来,头部不要放太多东西,js等外部资源更要放到后面去。

测试中难免会有遗漏,如果有不正确的地方,欢迎指正并一起讨论~~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3087276.html

(0)
上一篇 2025年3月28日 08:25:10
下一篇 2025年3月7日 09:54:04

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • html5的这些api你知道吗?

    以下是之前学习的一些html5 api的总结,在html5中有许多功能和接口很值得我们去了解和学习。 页面可见性API–page Visbility 全屏API –full Screen 获取MediaAPI&#82…

    编程技术 2025年3月28日
    100
  • html5 Canvas 图像动画的实现

    nbsp;html>        PHP100 HTML5视频教程-canvas-吹气球效果                   var canvas = document.getElementById('php100&#…

    编程技术 2025年3月28日
    100
  • H5中meta标签及作用

    本文主要和大家分享h5中meta标签及作用,希望能帮助到大家。 H5标准声明,使用 HTML5 doctype,不区分大小写 // 标准的 lang 属性写法 // 声明文档使用的字符编码 // 优先使用 IE 最新版本和 Chrome /…

    编程技术 2025年3月28日
    100
  • HTML5中form表单标签用法详解

    本文主要和大家分享HTML5中form表单标签用法详解,会以代码实例来和大家分享form的用法,希望能帮助到大家。 语法: 结束,表单都必须放在其之间。   2.method 传送方式,  get/post  是后端程序员考虑的问题   3…

    编程技术 2025年3月28日
    100
  • 企业开发中使用H5有哪些注意事项

    这次给大家带来企业开发中使用h5有哪些注意事项,企业开发中使用h5的注意事项有哪些,下面就是实战案例,一起来看一下。 3在企业开发中,想让多个盒子的顶部对齐,我们可以让多个盒子同时浮动;或者通过定位微调,使他们顶部对齐;2.去掉控件系统自带…

    编程技术 2025年3月28日
    100
  • H5中的定位

    这次给大家带来h5中的定位,h5中定位的注意事项有哪些,下面就是实战案例,一起来看一下。 一.定位流分类 1.1相对定位1.2注意事项1.3固定定位1.4静态定位 二.什么是相对定位? 相对定位就是相对于自己以前在标准流中的位置来移动pos…

    编程技术 2025年3月28日
    100
  • html5 viewport总结讲述

    本篇文章是关于HTML5中的HTML5的一个讲述,对于HTML5中viewport不太熟悉的同学,我们可以一起看看本篇文章!来详细的了解一下html5中的viewport 总结下来无非围绕三个问题: 1、为什么要设置虚拟窗口 起初是为了使得…

    编程技术 2025年3月28日
    100
  • 讲讲HTML5中被废弃的标签

    本篇文章讲述了HTML5中被废弃的标签,大家对HTML5中被废弃的标签不了解的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧!切记废弃的html标签最好不要使用哦! 在笔试或者面试中常常会遇到html5新标准的问题,下面是总结的…

    编程技术 2025年3月28日
    100
  • 了解一下HTML5中新增加的标签

     本篇文章讲述了HTML5中新增加的标签,大家对HTML5中新增加的标签不了解的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧! 在笔试或者面试中常常会遇到html5新标准的问题,如新增了哪些新标签,api,或者干脆问新增了哪些…

    编程技术 2025年3月28日
    100
  • 详解HTML5 表单属性

    今天本文主要和大家详细介绍HTML5的表单属性,需要的朋友可以参考下,希望能帮助到大家。 表单事件: oninput:当用户输入的时候触发。oninvalid:当验证未通过时触发。 demo.html: nbsp;html>Docum…

    编程技术 2025年3月28日
    100

发表回复

登录后才能评论