UTF-8编码引发的页面奇怪问题

本文探讨了在HTML页面和PHP文件中出现神秘空行的问题,并详细解析了该问题的成因——UTF-8编码文件头部的BOM标记。文中还介绍了如何使用编辑器检查并删除这些标记的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题表现:

1、双击打开html页面,显示正常,通过浏览器打开,表格顶部出现一个空行;
2、通过浏览器直接浏览Smarty编译后的php文件,显示正常,直接浏览含有display()的php页面,空行又出现
3、逐一排查各个问题,排除了HTML和CSS等其他原因

问题不大但很棘手,足足让我郁闷了一天。。。
究竟是什么带来的这个奇怪的空行呢?

问题分析:

会不会是之前修改了几个文件的编码导致的呢,之前那几个文件我用记事本直接从原来的ANSI编码转换成了UTF-8保存,而Smarty文件全部使用的ANSI编码,使用include包含文件时,就出现了空行。可这个空行究竟哪里来的呢?

到网上查了一下才知道,原来是因为UTF-8编码的文件头部被加入了BOM(万国码档案签名:Byte Order Mark, U+FEFF)标记。UTF-8编码方式对于BOM不是强制的,保存文件的时候会出现不同的处理方式。而大多数浏览器只会过滤掉一次BOM,当多次使用 include时,就会碰见这个问题。

问题解决:

用UE打开相应的php和html文件,切换到十六进制模式查看发现,果真在文件头部多了几个字符“EF BB BF”。都删掉之后再到浏览器浏览,空行终于消失了!

备注:

1) notepad(记事本) : 可以自动识别出没有带 bom 的 utf-8 编码格式文件,但不可以控制保存文件时是否添加 bom , 如果保存文件,那么会统一添加 bom 。
2)editplus(我经常用): 不能自动识别出没有 bom 的 utf-8 编码格式文件,保存文件为 utf-8 时会自动添加 bom
3) UltraEdit(UE,传说中最牛的十六位编辑器) : 对于字符编码的功能最为强大, 可以自动识别带 bom 和不带 bom 的 utf-8 文件 (可以配置); 保存的时候可以通过配置选择是否添加 bom.

<%@ page import="util.DbConnet" %> <%@ page import="java.sql.ResultSet" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% //功能:通过编号获取用户要编辑的具体数据 //1.接收传过来的编号 String id = request.getParameter("appliance_id"); //通过编号执行查询 String sql = "select * from `living_room_appliances` where `appliance_id`=?;"; Object[] params = new Object[]{ id }; ResultSet rs = DbConnet.select(sql, params);//真正执行查询,获得查询结果的数据集 //验证查询结果是否有数据(处理的是无数据情况) if(!rs.next()) response.sendRedirect("list.jsp"); %> <html> <head> <title>编辑用户</title> <link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/add.css"> </head> <body> <%--编辑: 1.点击编辑按钮,打开一个页面 2.新编辑页面需要包含: (1)表单 (2)输入框:账号、密码、确认密码、姓名 (3)按钮:保存(提交)、重置、返回 3.功能: 保存(提交):无刷新提交表单中的所有数据 重置:还原表单中的内容为初始状态 返回:重新打开列表页面(list.jsp) --%> <header> <div class="title">编辑用户</div> </header> <div class="main"> <form id="editForm"> <input type="hidden" name="appliance_id" value="<%=id%>"> <div class="form-item"> <label for="appliance_id">账号:</label> <%-- disabled:禁用元素(数据不传输) readonly:只读(不能编辑,可以传输) --%> <input disabled value="<%=rs.getString("appliance_id")%>" id="appliance_id" name="appliance_id" type="text"> </div> <div class="form-item"> <label for="appliance_type">密码:</label> <input value="<%=rs.getString("appliance_type")%>" id="appliance_type" name="appliance_type" type="text"> </div> <div class="form-item"> <label for="appliance_name">确认密码:</label> <input value="<%=rs.getString("appliance_name")%>" id="appliance_name" name="appliance_name" type="text"> </div> <div class="form-item"> <button class="primary" id="btnSubmit" type="button">保存</button> <button type="reset">重置</button> <button id="btnBack" type="button">返回</button> </div> </form> </div> <script src="../js/jquery-3.5.1.min.js"></script> <script src="../js/common.js"></script> <script> //绑定保存按钮的点击事件 $('#btnSubmit').on('click', function () { //1.验证不能为空:账号、密码、姓名 if(!checkInputIsNull('#appliance_type','账号')) return false; if(!checkInputIsNull('#password','密码')) return false; //比较两次输入的密码是否一致 let cmfPswObj = $('#cmfPsw'); if($('#password').val() !== cmfPswObj.val()){ alert("两次输入的密码不一致");//提示 cmfPswObj.val('').focus();//清空确认密码的内容,并设置确认密码输入框获得焦点 return false;//停止往下执行 } if(!checkInputIsNull('#appliance_name','姓名')) return false; //2.无刷新提交数据 postAction("/living/edit", $('#editForm').serialize(),function (res) { //1.弹出提示息 alert(res.msg); //2.成功后返回列表页面(list.jsp) if(res.result) window.location.href = res.url; }); }); //绑定返回按钮的点击事件 $('#btnBack').on('click', function () { if(confirm("确定要返回吗?")){ window.location.href='list.jsp'; } }); </script> </body> </html> 帮我修改这串代码中的错误
最新发布
07-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值