Standards 模式（標準模式）和 Quirks 模式（怪異模式）是瀏覽器渲染網頁的兩種不同模式，它們主要影響 HTML 和 CSS 的解釋方式。選擇哪種模式取決於網頁的 DOCTYPE 宣告。這兩種模式的存在是為了相容舊的網頁，因為早期的瀏覽器對標準的支援並不一致。
主要區別：
-
盒模型: 這是最顯著的區別之一。在 Standards 模式下，盒模型的寬度計算方式是
content width。這意味著元素的width屬性只包含內容的寬度，不包括 padding 和 border。而在 Quirks 模式下，盒模型的寬度計算方式是content width + padding + border。這意味著元素的width屬性包含了內容、padding 和 border 的寬度。 -
圖片尺寸: 在 Quirks 模式下，一些圖片的尺寸計算方式可能與 Standards 模式不同，尤其是在沒有明確指定尺寸的情況下。
-
行高: Quirks 模式和 Standards 模式下，行高的計算也可能存在差異，尤其是在使用百分比值時。
-
表格單元格的垂直對齊: Quirks 模式下，表格單元格的內容預設垂直居中對齊。而在 Standards 模式下，預設是基線對齊。
-
字型: Quirks 模式下，字型處理可能與 Standards 模式不同，尤其是在繼承方面。
-
font-size繼承: 在 Quirks 模式中，<font>元素的font-size屬性值會以畫素為單位繼承。而在 Standards 模式中，繼承的是計算值（computed value），這可能導致不同的顯示效果。 -
CSS 解析: 瀏覽器在 Quirks 模式下會模擬舊版瀏覽器的 CSS 解析行為，以相容舊的網頁。
DOCTYPE 的影響:
-
Standards 模式: 透過宣告正確的 DOCTYPE，例如
<!DOCTYPE html>，瀏覽器會切換到 Standards 模式。這是推薦的做法，因為它確保網頁按照最新的 HTML 和 CSS 標準進行渲染。 -
Quirks 模式: 如果沒有 DOCTYPE 宣告，或者使用了過時的 DOCTYPE，例如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，瀏覽器會切換到 Quirks 模式。 -
Almost Standards 模式: 這是一種介於 Standards 模式和 Quirks 模式之間的模式。它觸發的方式是使用一些過渡型的 DOCTYPE，例如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。它與 Standards 模式非常相似，但仍保留一些 Quirks 模式的行為，例如圖片尺寸的計算。
總結:
為了確保網頁的跨瀏覽器相容性和一致性，強烈建議使用 <!DOCTYPE html> 來啟用 Standards 模式。避免使用 Quirks 模式，除非是為了維護非常古老的網頁。瞭解這兩種模式的區別可以幫助開發者更好地理解網頁的渲染行為，並避免潛在的相容性問題。