发布于 2026-01-06 1 阅读
0

为什么 `<meta charset="utf-8">`​​ 很重要?`<meta charset="utf-8">`​​ 是什么?为什么要用 'utf-8' 编码?如果我忘记在 HTML 文件中添加 `<meta charset="utf-8">`​​ 会怎么样?

为什么 < meta charset="utf-8" > 很重要?

这是什么<meta charset="utf-8">

为什么是“utf-8”?

<meta charset="utf-8">如果我忘记在HTML文件中包含它怎么办?

我目前正在参加#100DaysOfCode 挑战,并在Twitter上记录我的学习历程。到目前为止,我一直在复习 Web 开发的三大核心技术:HTML、CSS 和 JavaScript。在第四天,我分享了我复习的内容之一是<meta charset="utf-8">HTML 文件中包含元素的重要性。

我收到一条回复,要求我解释原因。在回复的过程中,我发现想说的话太多,一条推文根本写不完,写一篇博客文章可能更容易些。

这是什么<meta charset="utf-8">

让我们来分析这句话<meta charset="utf-8">,找出它的含义:

  • <meta>是一个 HTML 标签,其中包含有关网页的元数据,更具体地说,是描述符,用于告诉搜索引擎网页包含哪些类型的隐藏内容。
  • charset是一个 HTML 属性,用于定义浏览器在显示网站内容时使用的字符编码。
  • utf-8是一种特定的字符编码。

换句话说,它告诉浏览器在将机器代码转换为人类可读文本以及将机器代码转换为人类可读文本以在浏览器中显示时<meta charset="utf-8">使用字符编码。utf-8

为什么是“utf-8”?

如今,超过 90%的网站都使用 UTF-8 编码。在 UTF-8 成为标准之前,人们使用的是 ASCII 编码。但遗憾的是,ASCII 编码只能编码英文字符,因此如果您使用其他语言(其字母表不包含英文字符),文本将无法在屏幕上正确显示。

例如,假设我想在屏幕上显示一些阿拉伯语文本“Hello World!”,可以使用以下代码片段,并将设置charset值设为ascii


 html
<!DOCTYPE html>
<html>
<head>
  <meta charset="ascii"> <!-- char encoding is set equal to ASCII -->
</head>
<body>
  <h1>!مرحبا بالعالم</h1>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

现在,如果你打开浏览器,你会发现文本显示为乱码🥴:

但是,如果我们把 改成charsetutf-8代码如下:


 html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> <!-- char encoding is set equal to UTF-8 -->
</head>
<body>
  <h1>!مرحبا بالعالم</h1>
</body>
</html>


Enter fullscreen mode Exit fullscreen mode

文字现在显示正常了🥳:

因此,UTF-8 的诞生是为了弥补 ASCII 的不足,它几乎可以翻译世界上所有语言。正因如此,加上它向后兼容 ASCII,几乎所有浏览器都支持 UTF-8。

<meta charset="utf-8">如果我忘记在HTML文件中包含它怎么办?

别担心——HTML5来拯救你!🦸

HTML5 默认使用的字符编码是 UTF-8。这意味着,如果您<!DOCTYPE html>在 HTML 文件顶部包含 `<html>` 标签(声明这是一个 HTML5 文件),它将自动使用 UTF-8 编码,除非另有指定。

此外,大多数浏览器默认使用UTF-8编码(如果没有指定字符编码)。但由于这并非绝对,最好<meta>在HTML文件中使用`<code>`标签来指定字符编码。

就是这样!🎉 欢迎在下方留言或分享您的想法。如果您想关注我的 #100DaysOfCode 挑战之旅,请在 Twitter 上关注我@maggiecodes_。祝您编程愉快!

文章来源:https://dev.to/maggiecodes_/why-is-lt-meta-charset-utf-8-gt-important-59hl