目前web開發進入HTML5的時代，開發者們常使用的起手式(boilerplate)往往是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>

或者是bootstrap提供的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

可以注意到的是第一句都是 <!DOCTYPE html> ，

這就是所謂的HTML文件類型(document type)宣告，這樣的宣告是讓瀏覽器知道這份html是依據HTML5的標準去開發的，

而瀏覽器也會根據這樣的標準去呈現畫面。

如果開發者忘了宣告doctype，那麼瀏覽器就會進入所謂的Quirks mode混合模式，

混合模式的成因是由於瀏覽器並不知道這份文件是依據什麼樣的標準去撰寫的，

當然它也不知道怎麼樣的呈現才是正確的。

常見的狀況是css選擇器(selector)的class以及id在混合模式下是case insensitive(大小寫無區別)，

而正常模式下是case sensitive(大小寫有區別)，進而造成顯示的css style錯誤並造成網頁跑版。

[ 其中容易發生的錯誤行為可參考MDN網站:

https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior ]

HTML5之前的文件宣告類型有分三種：