HTML5页面要正确显示中文，核心在于两件事：声明正确的字符编码，以及设置合适的语言属性。charset声明决定了浏览器如何解析字节流，lang属性则告诉浏览器和搜索引擎页面使用的是什么语言。这两项配置都很简单，但一旦配置错误，出现的往往是中文乱码、方块字或者SEO识别异常这类让人头疼的问题。本文将从编码原理、具体写法和常见误区三个层面，详细讲解HTML5中中文支持的完整方案。
一、HTML5中声明UTF-8字符编码的正确写法
在HTML5之前，HTML4.01声明编码需要写一长串：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
而HTML5对其做了极简化处理，只需要一行：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>中文页面示例</title> </head> <body> <p>你好，世界！</p> </body> </html>
<meta charset="UTF-8">这一行就是HTML5声明字符编码的标准方式。它必须放在<head>标签内的最前面，且要位于任何包含非ASCII字符的内容之前。原因是浏览器解析文档时是流式的，如果先遇到了中文字符才看到编码声明，浏览器可能已经用错误的默认编码（比如ISO-8859-1）解析了前面的内容，导致乱码。规范建议charset声明出现在文档的前1024个字节以内。
需要注意<meta charset>只能出现一次，如果写了多个，浏览器只会采用第一个。另外声明的编码必须与文件实际保存的编码一致。比如你在meta里声明了UTF-8，但编辑器保存文件时用的是GBK编码，页面依然会乱码。以Visual Studio Code为例，右下角可以查看和切换文件的保存编码，务必确认显示为UTF-8再保存。
二、UTF-8还是GBK？编码选择与乱码排查
中文网页常见的编码有UTF-8和GBK两种。GBK是中文专门编码，每个汉字占2个字节；UTF-8是国际化编码，常用汉字占3个字节。单从存储体积看GBK似乎更省空间，但UTF-8的优势非常明显：它能表示世界上几乎所有字符，中英文混排、emoji表情、少数民族文字都能统一处理，且是Web领域的绝对主流标准。新建项目无脑选UTF-8即可。
如果页面出现乱码，可以按照以下顺序排查：
- 检查
<meta charset>声明是否存在且为UTF-8，位置是否在head最前面 - 检查文件的实际保存编码，用编辑器确认是UTF-8而不是GBK或ANSI
- 如果页面由服务端动态输出，检查HTTP响应头中的Content-Type字段，例如
Content-Type: text/html; charset=utf-8，HTTP头的优先级高于meta标签 - 从数据库读取的内容乱码，需检查数据库连接编码，例如MySQL中执行
SET NAMES utf8mb4
一个容易忽略的场景是PHP等服务端语言输出页面时，如果在header已经发送后才输出meta标签，编码控制可能失效。因此推荐在服务端脚本最开头就显式设置响应头：
<?php
// 在任何输出之前设置编码，优先级高于meta标签
header('Content-Type: text/html; charset=utf-8');
echo '<!DOCTYPE html><html lang="zh-CN">';三、lang语言属性的设置规范与实际作用
编码解决的是"字符能不能正常显示"，lang属性解决的是"这些字符是什么语言"。标准写法是在<html>标签上设置：
<html lang="zh-CN">
关于中文的语言代码，常见的写法有几种，含义各不相同：zh表示中文（不区分地区），zh-CN表示简体中文（中国大陆地区），zh-TW表示繁体中文（台湾地区），zh-Hans表示简体中文（按文字体系划分），zh-Hant表示繁体中文。对于面向大陆用户的简体页面，推荐使用zh-CN，这是目前最通用、识别度最高的写法。
lang属性并非可有可无的装饰，它有多方面实际作用。对搜索引擎而言，lang是判断页面语言的重要信号，配合hreflang标签可用于多语言站点的SEO优化。对浏览器而言，lang影响字体选择、换行规则和翻译提示行为，比如Chrome检测到页面lang与浏览器界面语言不一致时会弹出翻译建议。对屏幕阅读器等辅助工具而言，lang决定了语音合成使用的发音引擎，设置了lang="zh-CN"的页面，读屏软件会用中文普通话朗读，这对无障碍访问非常重要。
lang还可以用在页面的局部元素上，处理中英混排的情况：
<p>这项技术被称为<span lang="en">Responsive Design</span>，即响应式设计。</p>
这样标记后，浏览器在渲染英文片段时会选用英文排版规则，屏幕阅读器也会切换到英文发音，细节体验明显更好。
四、常见误区与最佳实践总结
第一个误区是只设置编码不设置lang。很多页面charset写对了，中文显示正常，但html标签上没有lang属性，这对SEO和无障碍都是损失。第二个误区是lang写成lang="chinese"或lang="中文"，语言代码必须遵循BCP 47规范，中文只能用zh及其子标签表示。第三个误区是以为设置了lang就能解决乱码，lang只标识语言信息，与字符编码无关，乱码问题必须靠charset和文件保存编码来解决。
总结一套中文HTML5页面的标准模板：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> </head> <body> <h1>这是一个标准的中文HTML5页面</h1> </body> </html>
只要保证文件以UTF-8编码保存、charset声明位于head最前面、html标签设置lang="zh-CN"这三点，你的HTML5页面就能稳定地支持中文显示，同时在搜索引擎优化和无障碍体验上也做到位。养成这个习惯，能避免绝大多数与中文显示相关的坑。