About the garbled problem caused by HTML encoding

About the garbled problem caused by HTML encoding

Today a junior student asked a question. The HTML code he wrote displayed garbled characters when opened.

Then they sent me the code.

insert image description here

It’s just an HTML file and a folder. When you open it, you can see very simple code.

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Introduction</title>
</head>
<body>
    <h6>Introduce yourself</h6><br>
    <h4>Name</h4><br>
    It's better to say that your name is mine<br>
    <h4>Good job</h4><br>
    Traveling is fun<br>
    The game is good<br>
    <h4>Birthplace Introduction</h4><br>
    I'm from Sichuan. Sichuan has many mountains and Sichuan people are friendly and hospitable. Sichuan people are very fond of spicy food. <hr>
    <h4>Dream of the Future</h4><br>
    It's like an excellent programmer. <hr>
    <a href="hobby/myhobby.html">It's just like having your own hobbies. </a>
</body>
</html>

Since I am a student majoring in Sino-Japanese Studies, many of the content is in Japanese. When I open it with a browser, it looks like this:

insert image description here

In short, it's just garbled code and I can't understand anything.

The garbled characters must be a problem with the encoding method, but the code has indicated that UTF-8 encoding is used, so why is there still garbled characters?

insert image description here

Please note that it can be displayed normally when I open it with Notepad, but it is garbled when opened through the browser. This is because the encoding method of Notepad is ANSI, not UTF-8, which is different from what we wrote in the code.

So we need to unify the encoding method.

That is: <meta charset="UTF-8">
It should be changed to: <meta charset="ANSI">

Then reopen it and it will display normally.

insert image description here

This is the end of this article about the garbled code problem caused by HTML encoding problems. For more related html garbled code problem content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  MySQL character types are case sensitive

>>:  Detailed explanation of the Docker container lifecycle architecture and the differences between it and VM

Recommend

How to strike a balance between ease of use and security in the login interface

Whether you are a web designer or a UI designer, ...

Tips on HTML formatting and long files for web design

<br />Related articles: 9 practical suggesti...

About the location of the H1 tag in XHTML

There has been a lot of discussion about H1 recent...

mysql join query (left join, right join, inner join)

1. Common connections for mysql INNER JOIN (inner...

The process of deploying and running countly-server in docker in win10

I have just come into contact with and become fam...

Forever+nginx deployment method example of Node site

I recently bought the cheapest Tencent cloud serv...

Nginx server adds Systemd custom service process analysis

1. Take nginx as an example Nginx installed using...

Navicat for MySQL scheduled database backup and data recovery details

Database modification or deletion operations may ...

Example of how to modify styles via CSS variables

question How to modify CSS pseudo-class style wit...

Implementation code of using select to select elements in Vue+Openlayer

Effect picture: Implementation code: <template...

Implementing a random roll caller based on JavaScript

This article shares the specific code of JavaScri...

Detailed explanation of object literals in JS

Table of contents Preface 1. Set the prototype on...

Complete code for implementing the vue backtop component

Effect: Code: <template> <div class=&quo...