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