大家好我是落塵，一名新進晉級的菜鳥小編，也是一名前端開發攻城獅，從今天起帶大家重新理解前端，重新學習前端，讓大家有新的理解，每天都會更新些前端知識，如果小主們覺得還可以那就關注一下吧！
我們平時寫 HTML 語言，都習慣把關注點放到各種標籤上，很少去深究它的語法。我想你應該會有模糊的感覺，HTML 這樣的語言，跟 JavaScript 這樣的語言會有一些本質的不同。
實際上，JavaScript 語言我們把它稱為「程式語言」，它最大的特點是圖靈完備的，我們大致可以理解為「包含了表達一切邏輯的能力」。像 HTML 這樣的語言，我們稱為「標記語言（mark up language）」，它是純文本的一種升級，「標記」一詞的概念來自：編輯審稿時使用不同顏色筆所做的「標記」。
在上世紀 80 年代，「富文本」的概念在計算機領域的熱門，猶如如今的「AI」和「區塊鏈」，而 Tim Berners-Lee 當時去設計 HTML，也並非是憑空造出來，他使用了當時已有的一種語言：SGML。
SGML 是一種古老的標記語言，可以追溯到 1969 年 IBM 公司所使用的技術，SGML 十分複雜，嚴格來說，HTML 是 SGML 中規定的一種格式，但是實際的瀏覽器沒有任何一個是通過 SGML 引擎來解析 HTML 的。
今天的 HTML 仍然有 SGML 的不少影子，那麼接下來我們就從 SGML 的一些特性來學習一下 HTML。這裡我最想講的是 SGML 留給 HTML 的重要的遺產：基本語法和 DTD。
基本語法首先，HTML 作為 SGML 的子集，它遵循 SGML 的基本語法：包括標籤、轉義等。
SGML 還規定了一些特殊的節點類型，在我們之前的 DOM 課程中已經講過幾種節點類型，它們都有與之對應的 HTML 語法，我們這裡複習一下：
這裡我們從語法的角度，再逐個具體了解一下。
標籤語法標籤語法產生元素，我們從語法的角度講，就用「標籤」這個術語，我們從運行時的角度講，就用「元素」這個術語。
HTML 中，用於描述一個元素的標籤分為開始標籤、結束標籤和自閉合標籤。開始標籤和自閉合標籤中，又可以有屬性。
開始標籤：<tagname>
結束標籤：</tagname>
自閉合標籤：<tagname />
HTML 中開始標籤的標籤名稱只能使用英文字母。
這裡需要重點講一講屬性語法，屬性可以使用單引號、雙引號或者完全不用引號，這三種情況下，需要轉義的部分都不太一樣。
屬性中可以使用文本實體（後文會介紹）來做轉義，屬性中，一定需要轉義的有：
一般來說，靈活運用屬性的形式，是不太用到文本實體轉義的。
文本語法在 HTML 中，規定了兩種文本語法，一種是普通的文本節點，另一種是 CDATA 文本節點。
文本節點看似是普通的文本，但是，其中有兩種字符是必須做轉義的：< 和 &。
如果我們從某處拷貝了一段文本，裡面包含了大量的 < 和 &，那麼我們就有麻煩了，這時候，就輪到我們的 CDATA 節點出場了。
CDATA 也是一種文本，它存在的意義是語法上的意義：在 CDATA 節點內，不需要考慮多數的轉義情況。
CDATA 內，只有字符組合]]>需要處理，這裡不能使用轉義，只能拆成兩個 CDATA 節點。
注釋語法HTML 注釋語法以<!--開頭，以-->結尾，注釋的內容非常自由，除了-->都沒有問題。
如果注釋的內容一定要出現 -->，我們可以拆成多個注釋節點。
SGML 的 DTD 語法十分複雜，但是對 HTML 來說，其實 DTD 的選項是有限的，瀏覽器在解析 DTD 時，把它當做幾種字符串之一，關於 DTD，我在本篇文章的後面會詳細講解。
ProcessingInstruction 語法（處理信息）ProcessingInstruction 多數情況下，是給機器看的。HTML 中規定了可以有 ProcessingInstruction，但是並沒有規定它的具體內容，所以可以把它視為一種保留的擴展機制。對瀏覽器而言，ProcessingInstruction 的作用類似於注釋。
ProcessingInstruction 包含兩個部分，緊挨著第一個問號後，空格前的部分被稱為「目標」，這個目標一般表示處理 ProcessingInstruction 的程序名。
剩餘部分是它的文本信息，沒有任何格式上的約定，完全由文檔編寫者和處理程序的編寫者約定。
DTD現在我們來講一下 DTD，DTD 的全稱是 Document Type Defination，也就是文檔類型定義。SGML 用 DTD 來定義每一種文檔類型，HTML 屬於 SGML，在 HTML5 出現之前，HTML 都是使用符合 SGML 規定的 DTD。
如果你是一個上個時代走過來的前端，一定還記得 HTML4.01 有三種 DTD。分別是嚴格模式、過渡模式和 frameset 模式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
複製代碼
嚴格模式的 DTD 規定了 HTML4.01 中需要的標籤。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
複製代碼
過渡模式的 DTD 除了 html4.01，還包含了一些被貶斥的標籤，這些標籤已經不再推薦使用了，但是過渡模式中仍保留了它們。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
複製代碼
frameset 結構的網頁如今已經很少見到了，它使用 frameset 標籤把幾個網頁組合到一起。
眾所周知，HTML 中允許一些標籤不閉合的用法，實際上這些都是符合 SGML 規定的，並且在 DTD 中規定好了的。但是，一些程式設計師喜歡嚴格遵守 XML 語法，保證標籤閉合性，所以，HTML4.01 又規定了 XHTML 語法，同樣有三個版本：
版本一
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
複製代碼
版本二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
複製代碼
版本三
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
複製代碼
其實你看看就知道，這些複雜的 DTD 寫法並沒有什麼實際作用（瀏覽器根本不會用 SGML 引擎解析它們），因此，到了 HTML5，乾脆放棄了 SGML 子集這項堅持，規定了一個簡單的，大家都能記住的 DTD：
複製代碼
但是，HTML5 仍然保留了 HTML 語法和 XHTML 語法。
文本實體不知道你注意到沒有，HTML4.01 的 DTD 裡包含了一個長得很像是 URL 的東西，其實它是真的可以訪問的——但是 W3C 警告說，禁止任何瀏覽器在解析網頁的時候訪問這個 URL，不然 W3C 的伺服器會被壓垮。我相信很多好奇的前端工程師都把它下載下來打開過。
這是符合 SGML 規範的 DTD，我們前面講過，SGML 的規範十分複雜，所以這裡我並不打算講 SGML（其實我也不會），但是這不妨礙我們了解一下 DTD 的內容。這個 DTD 規定了 HTML 包含了哪些標籤、屬性和文本實體。其中文本實體分布在三個文件中：HTMLsymbol.ent HTMLspecial.ent 和 HTMLlat1.ent。
所謂文本實體定義就是類似以下的代碼：
複製代碼
每一個文本實體由&開頭，由;結束，這屬於基本語法的規定，文本實體可以用#後跟一個十進位數字，表示字符 Unicode 值。除此之外這兩個符號之間的內容，則由 DTD 決定。
我這裡數了一下，HTML4.01 的 DTD 中，共規定了 255 個文本實體，找出這些實體和它們對應的 Unicode 編碼，就作為本次課程的課後小問題吧。
總結今天的分享中我們講了 HTML 的語法，HTML 語法源自 SGML，我們首先介紹了基本語法，包含了五種節點：標籤（元素）、文本、注釋、文檔類型定義（DTD）和處理信息（ProcessingInstruction）。
之後我們又重點介紹了兩部分內容：DTD 和文本實體。
DTD 在 HTML4.01 和之前都非常的複雜，到了 HTML5，拋棄了 SGML 兼容，變成簡單的<!DOCTYPE html>。
文本實體是 HTML 轉義的重要手段，我們講解了基本用法，HTML4.01 中規定的部分，就留給大家作為課後問題了。
大家好我是落塵，希望我分享的文章大家能夠喜歡，也希望大家多多支持，多多轉發；小主們若是喜歡，就掃碼關注一下我，每天都會給大家分享好的文章；