播面 <!DOCTYPE html> 的作用是什么？如果不写会发生什么？
<!DOCTYPE html> 是 HTML 文档中非常关键的一行代码，通常位于文档的第一行。
简单来说，它的作用是告诉浏览器当前页面使用的是 HTML5 标准，并要求浏览器按照“标准模式”来渲染页面。
以下是详细的解释：
1. <!DOCTYPE html> 的作用
- 声明文档类型： 它告诉浏览器这个文件是一个 HTML 文件，且使用的是 HTML5 版本。虽然它看起来像一个 HTML 标签，但它实际上是一个声明（Declaration）。
- 激活标准模式 (Standards Mode)： 这是它最重要的功能。它通知浏览器使用 W3C 的标准规范来解析和渲染页面，而不是使用为了兼容旧版本浏览器而存在的“怪异模式”。
2. 如果不写（或写错）会发生什么？
如果你不写 <!DOCTYPE html>，或者写了一个错误的 DOCTYPE，浏览器会进入怪异模式（Quirks Mode，也称混杂模式）。
在怪异模式下，浏览器为了兼容 90 年代的老旧网页（如 IE5 时代的网页），会模拟旧浏览器的行为。这会导致以下严重后果：
A. 盒模型（Box Model）计算不同（最主要的影响）
这是最著名的差异。
- 标准模式（写了 DOCTYPE）：
width= 内容宽度。padding和border会额外增加元素的总宽度。 - 怪异模式（没写 DOCTYPE）：
width= 内容宽度 +padding+border。- 后果： 你的布局会乱掉，元素的大小会比你预期的要小，或者挤在一起。
B. 布局和样式失效
- 居中失效： 在标准模式下，使用
margin: 0 auto;可以让块级元素水平居中。在怪异模式下，这可能失效，元素会靠左显示。 - 行内元素宽高： 在怪异模式下，你甚至可以给
<span>等行内元素设置宽高（这在标准模式下是不允许的），这会导致代码在不同浏览器中表现极其不一致。 - 字体继承： 表格内的字体样式可能无法从父元素继承。
C. JavaScript 兼容性问题
- 获取窗口大小或元素位置的 API（如
document.body.scrollTop与document.documentElement.scrollTop）在两种模式下的行为不同，可能导致 JS 报错或功能失效。
总结
- 写了
<!DOCTYPE html>： 浏览器说：“好的，这是现代网页，我会严格按照 HTML5 和 CSS3 的国际标准来显示它。”（标准模式） - 没写
<!DOCTYPE html>： 浏览器说：“这可能是一个 20 年前的老网页，我得用模拟 IE5 的方式来显示它，以免页面崩坏。”（怪异模式）
结论： 永远要在 HTML 文件的第一行加上 <!DOCTYPE html>，这是现代 Web 开发的基石。