WEB编程入门经典 HTML/CSS 第一章1

最新推荐文章于 2022-08-17 17:56:53 发布

xiaocainiao320

最新推荐文章于 2022-08-17 17:56:53 发布

阅读量401

点赞数

分类专栏： HTML/PHP/MySQL

本文链接：https://blog.youkuaiyun.com/xiaocainiao320/article/details/42012799

版权

HTML/PHP/MySQL 专栏收录该内容

12 篇文章

订阅专栏

本章自创小练习，从解决一个中文乱码问题入手，掌握一些基本概念

(1)新建一个HTML文件，文件格式为UTF-8 无BOM，内容如下：

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -->
	<title>White Space Collapsing and Line Wrapping</title>
</head>

<body>
中文是否有乱码
<p>It also demonstrates how the browser will treat multiple carriage returns (new lines) as a single space, too.</p>
</body>
</html>

运行发现中文为乱码

解决办法1：是打开上述代码中<meta>元素的注释，其中包括的charset=UTF-8告知了浏览器正确的解析方式。

总结：文档格式为UTF-8 无BOM格式时，浏览器并不能获得编码方式，需要通过meta告之，meta的位置应该位于head元素的最前面，以保证title中的中文能被解析。

解决办法2：将文件保存为UTF-8格式（此时会加入BOM），浏览器会根据BOM来获得格式信息。这种办法不推荐使用，因为不是所有浏览器都支持。

扩展知识：

通过UE观察UTF-8 无BOM格式和BOM格式，发现BOM格式时前面加入了三个字节：EF BB BF，这个就是格式说明吧。百度了下这三个字节还真有查到一篇博文中有介绍“微软在自己的UTF-8格式的文本文件之前加上了EF BB BF三个字节, windows上面的notepad等程序就是根据这三个字节来确定一个文本文件是ASCII的还是UTF-8的, 然而这个只是微软暗自作的标记, 其它平台上并没有对UTF-8文本文件做个这样的标记。不带BOM可能出现上述乱码问题，但是带 BOM，对于php的include文件要小心，会在php字节流前面多出EF BB BF，提前输出到显示器有可能会带来程序错误。”引用自：http://blog.163.com/result_2205/blog/static/13981945020102954023564/

为了验证下上面提到的对PHP的影响，写一个简单的测试：

<?php
header("Content-Type: text/html;charset=utf-8");
echo "hello world!";
?>

该PHP文件保存为UTF-8 无BOM时，是正常的，但保存为UTF-8 BOM时，则会给出警告：

Warning: Cannot modify header information - headers already sent by (output started at E:\wamp\www\g06.php:1) in E:\wamp\www\g06.php on line 2
hello world!

意思是已经输出HTML 头的情况下，仍然试图修改头内容。这个正是因为BOM的那三个字节提前输出从而引发HTML 头的发送。后续再调用header试图修改HTML头时告警。

这里我顺便查了下header的用途，如下：

header() 函数向客户端发送原始的 HTTP 报头。

认识到一点很重要，即必须在任何实际的输出被发送之前调用 header() 函数（在 PHP 4 以及更高的版本中，您可以使用输出缓存来解决此问题）：

高版本PHP中，HTML头在服务器上是有缓存的，上述情况下并未实际发送HTML头。除非使用header函数插入的内容超过服务器缓存大小。header的功能很强大后续再慢慢研究。