HTML文档必须以<!DOCTYPE html>开头且严格位于第一行，<head>中必需<title>和<meta charset="utf-8">（第二行），<body>内用语义化标签替代<div>，<footer>表归属而非位置。
HTML文档必须以 <!DOCTYPE html> 开头，否则浏览器可能进入怪异模式
很多初学者复制代码时漏掉这一行，或写成 <!doctype html>（小写）甚至加空格、注释，结果页面样式错乱、Flexbox不生效、rem 计算异常——这不是 CSS 问题，是渲染模式切换导致的。
这个声明必须严格位于第一行、无任何前置字符（包括 BOM 或空行），且大小写敏感。HTML5 不再需要 DTD 引用，<!DOCTYPE html> 就是唯一推荐写法。旧式如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 已淘汰，会触发怪异模式。
<head> 里不能放用户可见内容，但 <title> 和 <meta charset> 缺一不可
<head> 是纯元数据容器，所有标签都不渲染到页面上。但其中两项直接影响功能：一是 <title> 决定浏览器标签页文字和 SEO 标题；二是 <meta charset="utf-8"> 必须在 <head> 最早位置（最好第二行），否则中文、emoji、特殊符号会乱码，且后续 <style> 或 <script> 中的注释也可能解析失败。
常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 把
<h1>或<div>误塞进<head>—— 浏览器会自动将其“修复”到<body>开头，但可能破坏 DOM 顺序 - 用
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">替代<meta charset="utf-8">—— 兼容性差，部分老版 Safari 识别不稳定 - 把
<link rel="stylesheet">放在<meta charset>之后太晚 —— 导致样式表加载时已开始解析 HTML，出现 FOUC（Flash of Unstyled Content）
<body> 是唯一承载可视内容的容器，结构化语义标签应优先于 <div>
所有用户能看到的文字、图片、按钮、表单都必须放在 <body> 内。但直接堆砌 <div class="header"> <div class="main"> <div class="footer"> 是过时做法。HTML5 提供了原生语义化标签：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>。
它们不只是“换个名字”，而是影响：
- 屏幕阅读器的导航逻辑（比如按
Ctrl+Alt+Insert跳转到<main>） - 搜索引擎对内容主次的判断（
<main>内容权重更高） - CSS 选择器可读性（
main h2比.content h2更明确）
注意：<main> 在整个文档中只能出现一次，且不应嵌套在 <article> 或 <section> 内；<header> 和 <footer> 可多次使用（如每篇 <article> 都可自带 <header>）。
尾部 <footer> 不等于页面最底部，它代表内容归属而非视觉位置
新手常把 <footer> 当作“固定在页面最下方”的布局工具，于是强行用 position: fixed 或大量 <br> 推下去。这是误解。<footer> 的语义是“包含作者信息、版权、相关链接等归属类内容”，它属于其最近的节（sectioning content）父元素。
例如：
<article> <header><h2>一篇博客</h2></header> <p>正文…</p> <footer><p>作者：张三，发布于 2026-05-01</p></footer> </article>
这种写法完全合法，且比全站共用一个 <footer> 更利于内容结构化。真正控制视觉位置的是 CSS（如 Flexbox 的 margin-top: auto 或 Grid 的 grid-template-rows），不是标签名。
最容易被忽略的一点：<footer> 里的链接如果指向外部网站，务必加上 rel="noopener noreferrer"，否则存在安全风险；而版权年份建议用 JavaScript 动态生成，避免每年手动更新。
