【H5 前端开发笔记】第 03 期：HTML的历史、书写规范与文档类型声明 详解
（2026 最新版 · 适合做学习笔记）
一、HTML 的发展历史（了解即可，面试常问）
| 版本 | 发布年份 | 主要特点 | 备注 |
|---|---|---|---|
| HTML 1.0 | 1993 | 最早的版本，极其简单 | 非正式标准 |
| HTML 2.0 | 1995 | 第一个正式的 HTML 标准 | 引入表单 |
| HTML 3.2 | 1997 | 支持表格、图片等 | 浏览器大战时期 |
| HTML 4.01 | 1999 | 严格模式与过渡模式，引入 CSS 分离 | 使用最久的版本 |
| XHTML 1.0 | 2000 | 基于 XML 的严格语法（必须闭合、区分大小写） | 过于严格，逐渐被放弃 |
| HTML5 | 2008（草案） 2014（正式推荐） | 语义化标签、音视频、本地存储、Canvas、拖拽等 | 当前主流标准 |
| HTML Living Standard | 持续更新 | WHATWG 维护的“活标准”，不再有版本号 | 2026 年实际使用的就是这个 |
结论（2026 年）：
- 我们现在学习和使用的都是 HTML5（或称为 HTML Living Standard）。
- XHTML 已经基本退出历史舞台，不再推荐使用。
- HTML5 的核心思想：语义化 + 更少的插件 + 更强的本地能力。
二、HTML 书写规范（强烈推荐严格遵守）
好的书写规范能让代码更清晰、可维护性更高，也更容易被团队和其他开发者阅读。
1. 基本规范（必须做到）
- 标签名一律小写（历史遗留问题，大写也能解析，但不推荐）
- 属性名小写，属性值使用双引号包裹
- 所有标签必须正确闭合（HTML5 允许部分自闭合，但推荐显式闭合）
- 合理缩进（推荐 2 个或 4 个空格，保持统一）
- 一个元素一行（重要内容不要堆在一起）
2. 推荐的现代书写风格（2026 规范）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题 - 网站名称</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>文章主标题</h1>
<p>这是正文段落内容...</p>
</article>
</main>
<footer>
<p>版权所有 © 2026</p>
</footer>
</body>
</html>
不良写法示例（不要这样写）：
<HTML><HEAD><TITLE>标题</TITLE></HEAD><BODY><H1>标题</H1></BODY></HTML>
三、文档类型声明 <!DOCTYPE> 详解（重点）
1. 什么是 <!DOCTYPE>？
<!DOCTYPE> 不是 HTML 标签，而是一个文档类型声明（Document Type Declaration），简称 DTD。
它的作用是：
- 告诉浏览器当前文档使用的是哪种 HTML 规范
- 让浏览器以正确的模式渲染页面
- 避免浏览器进入“怪异模式”（Quirks Mode）
2. HTML5 中的写法（必须记住）
<!DOCTYPE html>
- 这是 HTML5 唯一推荐的写法
- 必须放在 HTML 文档的第一行
- 不区分大小写（但推荐全小写）
- 后面不能有任何字符（包括空格、注释）
3. 历史对比（了解即可）
- HTML 4.01 Strict：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - XHTML 1.0 Strict：很长一串
- HTML5：简化为
<!DOCTYPE html>（极大简化）
4. 不同渲染模式对比
| 声明方式 | 渲染模式 | 盒模型 | 默认样式差异 | 推荐使用 |
|---|---|---|---|---|
<!DOCTYPE html> | 标准模式（Standards Mode） | W3C 标准盒模型 | 符合现代标准 | 必须使用 |
| 没有 DOCTYPE 或写错 | 怪异模式（Quirks Mode） | IE 旧盒模型 | 很多样式表现异常 | 坚决禁止 |
怪异模式下常见问题：
width和height包含 padding 和 border- 部分 CSS 属性表现不一致
- 图片垂直对齐异常等
四、本期总结（建议抄写或高亮）
- HTML5 是当前及未来主流标准，不再区分版本号（Living Standard）
- 书写规范：小写标签 + 双引号属性值 + 合理缩进 + 正确闭合
<!DOCTYPE html>必须写在文档第一行，作用是触发标准模式- 没有 DOCTYPE 或写错会导致浏览器进入怪异模式，样式表现异常
- 现代前端开发统一使用 HTML5 简洁的
<!DOCTYPE html>
五、课后练习（立即动手）
- 新建一个
03-doctype.html文件，完整写出标准 HTML5 结构 - 故意去掉
<!DOCTYPE html>，观察页面在浏览器中的表现差异 - 把历史上的 HTML 4.01 Strict DOCTYPE 写进去，看看页面是否正常
- 按照本期规范重构你第 01 期写的个人介绍页面
第 04 期预告：《HTML 语义化标签详解（上）—— 结构类语义化标签（header、nav、main、section、article、aside、footer）》
需要我立即补充以下任意内容，请直接告诉我：
- 本期完整可运行示例代码（带中英双语注释）
- HTML 历史时间轴思维导图（文字版）
- 怪异模式 vs 标准模式 的视觉对比 Demo
- 把第 01~03 期笔记合并成一份完整的前端基础笔记（Markdown）
- 本期练习的标准答案与解析
继续你的 H5 前端系统学习！
第 03 期笔记到此结束，保持这个节奏，你的基础会非常扎实！✨
