HTML詞法和語法
阿新 • • 發佈：2019-02-21
一個 ken 元素 src start 意義 cool 解析 字符
1. 詞 token
專業不是計算機的博主比較尷尬，一直以為token就是驗證身份用的標識
token —— 表示 “最小有意義的單元”
以這個簡單的p標簽為例，我們分析哪些是token：
<p class="a">text text text</p>
按最小有意義單元的定義來看，第一個詞（token）是什麽呢？顯然，作為一個詞（token），整個 p 標簽肯定是過大了（它甚至可以嵌套）。
正確來說，應該拆分成這樣：
- <p “標簽開始”的開始
- class=“a” 屬性
- > “標簽開始”的結束
- text text text 文本
- </p> 標簽結束
2. 詞法解析 —— 獲取token
瀏覽器的詞法是怎麽解析的呢？
眾所周知，瀏覽器獲取的是一個一個的字節。
因此，瀏覽器每獲得一個字符就會走一次分析邏輯，直到獲取一個完整的token
最常見的實現就是 狀態機 （簡單來說就是每獲取一個字符，就根據上一次狀態和輸入的字符，來轉換一次狀態，直到獲得一個token）
3. 語法解析 —— 用toke來構建DOM樹(實際是一個棧)
其實構建DOM樹也是一個狀態機，需要根據上一次狀態和輸入的token來獲取新的棧的狀態
以一個簡單的HTML為例：
<html maaa=a > <head> <title>cool</title> </head> <body> <img src="a" /> </body> </html>
- 創建一個棧（js用數組代替）
- 棧頂元素就是當前節點；
- 遇到屬性，就添加到當前節點；
- 遇到文本節點，如果當前節點是文本節點，則跟文本節點合並，否則入棧成為當前節點的子節點；
- 遇到註釋節點，作為當前節點的子節點；
- 遇到 tag start 就入棧一個節點，當前節點就是這個節點的父節點；
- 遇到 tag end 就出棧一個節點（還可以檢查是否匹配）。
HTML詞法和語法