<!DOCTYPE html>必须放在第一行，它是HTML5文档类型声明，告诉浏览器按标准模式解析页面；若缺失、错位或前置空格/注释，将触发怪异模式，导致CSS失效、盒模型错乱、语义标签降级。
HTML不是编程语言，它是网页信息逻辑表现的结构标准——所有内容必须按语义层级组织，否则浏览器无法正确解析，搜索引擎也读不懂。
为什么<!DOCTYPE html>必须放在第一行
这是告诉浏览器：“请用HTML5标准来解析接下来的所有代码”。如果漏掉、写错位置（比如缩进或前面有空格），浏览器会退回到“怪异模式”，导致CSS失效、盒模型错乱、<section>等语义标签被当成普通<div>处理。
- 常见错误：
<!-- 注释 --><!DOCTYPE html>（注释在前）或换行后才写<!DOCTYPE html> - 实际影响：同一段CSS在Chrome里正常，在IE或旧版Edge里布局塌陷
- 验证方式：打开开发者工具 → Elements 标签页，看顶部是否显示
<html lang="zh-CN">而非<html>（无lang属性说明解析已出问题）
<head>里哪些配置项不能省
<head>不显示内容，但决定页面能否被正确加载和识别。以下三项缺一不可：
-
<meta charset="UTF-8">：没有它，中文、emoji、特殊符号全变成乱码（） -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：没有它，手机访问时页面会默认缩放成PC尺寸，文字小到无法阅读 -
<title>：没有它，浏览器标签页显示为空白或“未命名”，SEO直接归零
其他如<link rel="stylesheet">或<script>可选，但前三项是硬性基础设施。
立即学习“前端免费学习笔记（深入）”；
语义化标签不是“锦上添花”，而是DOM解析的前提
浏览器和辅助设备（如读屏软件）依赖标签名判断内容角色。用一堆<div>堆出导航栏，和用<nav>包裹，对视觉用户没区别，但对搜索引擎、自动化测试、无障碍访问系统来说，完全是两个世界。
- 典型误用：
<div class="header">应该换成<header>；<div class="main-content">应该换成<main> - 后果：Google Search Console 可能标记“结构化数据缺失”，视障用户无法通过语义跳转到主要内容区
- 兼容性注意：
<main>、<aside>在 IE11 及更早版本不被识别（需加 polyfill 或降级为<div role="main">）
<body>里最容易被忽略的嵌套规则
HTML不是“怎么写都行”的自由文本。某些标签有强制嵌套要求，违反会导致浏览器自动修正（即“纠错模式”），但修正结果不可控。
-
<p>内不能直接放<div>、<h1>、<ul>等块级元素（会自动闭合<p>） -
<li>必须直接放在<ul>或<ol>里，不能套一层<div> - 自闭合标签如
<img>、<input>后面加/（如<img />）在HTML5中合法但不必要，反而可能干扰某些构建工具
真正关键的是：浏览器解析时会重排DOM树，你写的结构 ≠ 最终生效的结构。用开发者工具检查Elements，才能确认真实嵌套关系。
