doctype声明是触发浏览器标准模式的必要开关，必须为且位于文档首行无任何前置字符，否则将导致怪异模式或几乎标准模式，引发盒模型、脚本api等异常。
DOCTYPE声明决定浏览器用哪种渲染模式解析页面，不写或写错会导致整个页面样式和脚本行为异常——这不是可有可无的“装饰”，而是触发标准模式的开关。
为什么浏览器需要DOCTYPE才能正确渲染
早期浏览器（尤其是IE6/7）有两种渲染模式：怪异模式（Quirks Mode）和标准模式（Standards Mode）。没有，或写成过时格式（如<code>但缺少URI），IE会退回到怪异模式——此时<code>box-sizing按IE5盒模型计算、height对inline元素生效、document.body.clientWidth返回值异常，连getBoundingClientRect()都可能偏移。
现代浏览器虽默认更倾向标准模式，但依然会校验DOCTYPE：Chrome/Firefox遇到缺失或语法错误的DOCTYPE，仍会进入“几乎标准模式（Almost Standards Mode）”，影响表单控件垂直对齐、图片间隙等细节。
应该用哪个DOCTYPE？只用
HTML5规范明确要求且唯一推荐的声明就是这一行，大小写不敏感，但建议小写。它足够简洁，且被所有现代浏览器识别为标准模式触发器。
- 不要用HTML4或XHTML的长串声明——它们不仅冗余，还容易因URI拼写错误（比如漏掉
http://www.w3.org/TR/html4/strict.dtd）导致降级 - 不要加XML声明（
<?xml version="1.0" encoding="UTF-8"?>）在DOCTYPE前面——这会让IE直接进入怪异模式 - DOCTYPE必须是文档第一行，前面不能有任何字符（包括空格、BOM、注释）
验证DOCTYPE是否生效的两个方法
光看代码不够，得确认浏览器真按标准模式跑了：
- 打开开发者工具 → Elements面板 → 查看顶部是否显示
Document: html (Standards Mode)（Chrome）或Render mode: CSS1Compat（Firefox/Edge） - 在控制台运行
document.compatMode：返回"CSS1Compat"表示标准模式；"BackCompat"说明已掉进怪异模式 - 注意：某些构建工具（如Webpack + HtmlWebpackPlugin）可能自动注入DOCTYPE，但模板里若手动写了错误版本，会覆盖自动注入——得检查最终生成的HTML源码
最容易被忽略的是：服务端模板（如EJS、Jinja2）中条件判断块意外输出空格或换行到DOCTYPE之前，或者.gitattributes没配置* text eol=lf导致Windows换行符(CRLF)干扰解析——这些都会让失效。实际排查时，直接右键“查看网页源代码”，把光标移到第一列，逐字确认开头就是<code>/code>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
