必须写，它强制浏览器启用html5标准模式，避免怪异模式导致flex/grid失效、中文标点错乱等问题；确保正确渲染中文排版与字体回退；须置于最前，防止标题乱码。
直接给你能跑起来、不报错、中文显示正常的最小可用结构——不是“教学模板”，是真正打开就能看到效果的生产级骨架。
为什么必须写
它不是可有可无的注释，而是告诉浏览器：“用 HTML5 标准解析，别用怪异模式”。漏掉它，flex、grid、甚至 margin 在老 IE 或某些移动端 WebView 里会出怪问题。很多新手复制代码时删了这行，结果样式全乱，还以为是 CSS 写错了。
常见错误现象：display: flex 不生效、input 框高度异常、中文标点显示成方块
- 必须写在第一行，前面不能有任何空格或换行
- 大小写不敏感，但推荐全小写
或标准写法 <code> - 不要写成
..>——那是 XHTML 时代的旧写法，现代项目里纯属添乱
它影响的不只是 SEO，更是浏览器对字体回退、标点渲染、数字排版的判断。比如不设 lang，某些安卓 WebView 渲染中文引号（“”）会变成英文直角引号（""），Mac 上拼音输入法候选框位置也可能偏移。
使用场景：所有面向中文用户的页面，包括后台管理页、内部工具页
-
lang="zh-CN"表示简体中文；lang="zh-TW"是繁体（台湾）；lang="en"是英文 - 如果页面混用中英，可在局部覆盖，比如
<p lang="en">Hello</p> - 千万别写成
lang="ch"或lang="cn"—— 这些不是合法 BCP 47 语言标签，部分屏幕阅读器会忽略
<meta charset="UTF-8"> 必须放在
它的作用不是“设置编码”，而是让浏览器在解析到这一行时，立刻切换解码器。如果它被 <title></title> 或其他标签挡在后面，前面几个字（比如 <title>我的</title>）可能已经被按系统默认编码（如 GBK）错解，导致标题栏显示乱码，且无法挽回。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑：
- 把它写在
<title></title>后面 → 标题乱码，但正文正常 - 写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">→ 兼容性差，部分旧版 Safari 不认 - 用记事本保存时选了“ANSI”编码 → 文件本身已损坏，再怎么写 meta 都没用（VS Code 默认 UTF-8，更安全）
为什么
初学者常把 JS 初始化代码、统计脚本、甚至 <script></script> 标签直接塞进 开头，结果页面一闪白屏，或者 document.getElementById 找不到元素。这是因为浏览器是自上而下解析的，<script></script> 遇到就执行，此时 DOM 还没构建完。
正确做法：
- JS 逻辑统一放在
前（即页面底部） - 或者加
defer属性：<script src="app.js" defer></script> -
内只保留语义化内容标签：<header></header>、<main></main>、<p></p>、<img>等
复杂点在于：很多人以为“能运行就行”，但一旦加了第三方 SDK 或需要服务端渲染（SSR），DOM 加载时机和标签嵌套规则立刻变成硬门槛。别等报错才回头补结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
