结论：<!DOCTYPE html>、<html>、<head>、<body> 四部分缺一不可；缺 <!DOCTYPE html> 会触发怪异模式导致渲染异常，<head> 与 <body> 位置颠倒会使 <title> 失效且 SEO 丢失，<meta charset="UTF-8"> 缺失或错位引发中文乱码，标签不闭合则破坏 DOM 结构。
直接说结论：一个能稳定运行的 HTML 页面，<!DOCTYPE html>、<html>、<head>、<body> 四部分缺一不可，漏掉任意一个都可能让页面“看起来不对”甚至完全空白。
为什么 <!DOCTYPE html> 不能省？
它不是可有可无的注释，而是告诉浏览器：“请用 HTML5 标准解析这个页面”。没有它，浏览器会进入“怪异模式（Quirks Mode）”，比如 <h1> 的默认 margin 可能变大、盒模型计算方式异常，连居中都可能失效。
- 错误现象：
<h1 align="center">看似生效，但换其他样式就失效；或者整个页面字体突然变小 - 真实场景：Educoder 或某些在线评测平台会严格校验 DOCTYPE，缺失直接判错
- 注意：
<!doctype html>（全小写）也合法，但建议统一用大写<!DOCTYPE html>，避免和旧版混淆
<head> 和 <body> 位置写反了会怎样？
HTML 是树状结构，<head> 必须在 <body> 之前。如果把 <title> 写进 <body>，浏览器不会报错，但标签页标题为空，SEO 信息丢失，部分辅助技术也无法读取。
- 常见错误：
<title>我的页面</title>被误放在<body>里，导致浏览器标签显示“无标题” - 参数差异：
<meta charset="UTF-8">如果漏写或位置错（比如放在<body>里），中文就会变成乱码（） - 性能影响：浏览器解析到
<body>才开始渲染，<head>里的<link rel="stylesheet">若延迟加载，会导致 FOUC（闪白）
标签不闭合，到底影响多大？
HTML5 对部分标签（如 <p>、<li>）允许省略闭合，但 <h1>、<div>、<span> 这类必须显式闭合。漏闭合不是“少打两个字符”的小事，它会让浏览器自动补全，结果往往出人意料。
立即学习“前端免费学习笔记（深入）”；
- 错误现象：一个没闭合的
<div>会让后面所有内容被包裹进去，CSS 样式全部错位 - 使用场景：VS Code 的 Emmet 自动补全（输入
h1+ Tab）能生成<h1></h1>，比手动敲更可靠 - 容易踩的坑：复制粘贴代码时，有时会漏掉末尾的
</body>或</html>，整个页面结构就塌了
真正麻烦的不是写错一行，而是浏览器默默容错、自动修复——你看到页面“好像能用”，但实际 DOM 结构已经歪了，后续加 JS 或改样式时才暴露问题。所以每次保存前，快速扫一眼四层嵌套是否完整，比事后调试省半小时。
