<!DOCTYPE>作用和前端页面乱码问题

DOCTYPE声明决定了HTML文档的解析模式,影响浏览器的渲染方式。不声明DOCTYPE会导致BackCompat的怪异模式,各浏览器解析样式可能不同,而声明为<!DOCTYPE html>则启用CSS1Compat的标准模式,确保更一致的跨浏览器显示。确保页面编码为UTF-8,并在meta标签中指定charset属性,以避免乱码问题。
摘要由CSDN通过智能技术生成

作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

document.compatMode:

BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

    这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat

    这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。

    如果你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式

乱码

  1. 确定开发工具的各种编码格式配置为 utf-8

  2. 确定前端页面的编码格式

在meta标签那里写上charset=UTF-8

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
package servlet; import java.awt.Color; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.IOException; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.swetake.util.Qrcode; @WebServlet("/qrcode") public class QRCodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; public QRCodeServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String code=request.getParameter("code"); Qrcode testQrcode=new Qrcode(); testQrcode.setQrcodeErrorCorrect('M'); testQrcode.setQrcodeEncodeMode('B'); testQrcode.setQrcodeVersion(7); byte[] d=code.getBytes("UTF-8"); BufferedImage image=new BufferedImage(100,100,BufferedImage.TYPE_BYTE_BINARY); Graphics2D g=image.createGraphics(); g.setBackground(Color.WHITE); g.clearRect(0, 0, 100, 100); g.setColor(Color.BLACK); if(d.length>0&&d.length<120){ boolean[][] s=testQrcode.calQrcode(d); for(int i=0;i<s.length;i++){ for(int j=0;j<s.length;j++){ if(s[j][i]){g.fillRect(j*2+3, i*2+3, 2, 2);} } } } g.dispose(); image.flush(); ImageIO.write(image,"jpg",response.getOutputStream()); } }<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <form action="qrcode" method="post" target="qrcodeframe"> 输入文本:<input type="text" name="code"/><input type="submit" value="转换"/> </form> <iframe name="qrcodeframe" frameborder="0" ></iframe> </body> </html>哪里出错了
最新发布
06-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鸡腿最好吃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值