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