HTML文档必须严格遵循标准骨架：<!DOCTYPE html>须为首行触发标准模式，<html lang="zh-CN">为唯一根元素，<head>内<meta charset="UTF-8">和<title>不可省略，<body>应优先使用语义化标签而非<div>。
HTML文档结构不是“随便写几行标签就行”，而是有明确的骨架约束，不按规范写，浏览器可能渲染异常、SEO失效、甚至部分JS无法正确获取document.body。
DOCTYPE 和 html 标签必须存在且位置固定
没有<!DOCTYPE html>，浏览器会进入怪异模式（Quirks Mode），导致盒模型、字体大小、表单控件行为全部不可预测；<html>必须是根元素，且只能有一个。常见错误包括：
- 把
<script>或<style>写在<html>外 - 误用
<html lang="zh-CN">但没配<meta charset="UTF-8">，中文乱码概率陡增 - 在
<head>里漏掉<title>——虽不报错，但影响浏览器标签页显示和无障碍读屏
head 里哪些标签不能少，哪些可以按需加
<meta charset="UTF-8">和<title>是底线；<meta name="viewport">在移动端几乎必加；其他如<link rel="icon">、<meta name="description">属于增强项。注意：
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">已无必要（IE 已停更） -
<link>加载 CSS 时，rel="stylesheet"不可省略，否则当普通资源处理，不触发样式解析 -
<script>放在<head>里默认阻塞渲染，除非加defer或async属性
body 中的语义化标签比 div 更值得优先选
用<header>、<nav>、<main>、<article>、<section>、<footer>不只是“看起来高级”，它们直接影响：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器的导航逻辑（比如跳过
<nav>） - 搜索引擎对内容主次的判断（
<main>内权重更高） - 浏览器原生样式继承（例如
<article>默认有 margin-bottom） - 某些框架（如 Next.js）依赖语义标签做 SSR 结构优化
空元素（void elements）不需要闭合标签，写了反而错
<img>、<input>、<br>、<hr>、<meta>、<link>等是 HTML5 明确定义的空元素，语法上不允许写<img></img>或<img />（XHTML 风格）。现代 HTML 解析器会把<img />当作<img>处理，但：
- 在 XML 模式或某些模板引擎（如 JSX）中，
<img />是合法的，<img>反而报错 - 团队协作时混用风格容易引发 lint 报错（如 ESLint 的
react/self-closing-comp） -
<textarea></textarea>这种非空元素，漏写结束标签会导致后续所有内容被吞进文本域
真正难的不是记住所有标签，而是判断某个场景下该用<div>还是<section>——前者是无语义容器，后者代表一个独立的内容主题，这个边界稍不注意就滑向“为语义而语义”。
