HTML問題彙總

1. !DOCTYPE是html5標準⽹⻚聲明，且必須聲明在HTML⽂檔的第⼀⾏，來告知瀏覽器的解析器⽤什麼⽂檔標準解析這個⽂檔，不同的渲染模式會影響到瀏覽器對於 CSS 代碼甚⾄ JavaScript 腳本的解析。
2. 新特新 https://blog.csdn.net/weixin_42734488/article/details/81367690
3. 常見的meta標籤，由name和content兩個屬性來定義，來描述⼀個HTML⽹⻚⽂檔的屬性，例如作者、⽇期和時間、⽹⻚描述、關鍵詞、⻚⾯刷新等

<!-- 移動端視口 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"/>
<!-- 優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

名稱	功能
charset	⽤於描述HTML⽂檔的編碼形式
viewport	以控制視⼝的⼤⼩和⽐例
–	–
–	–

4. data-屬性，訪問在 HTML或 DOM中的元素上設置的所有自定義數據屬性(data-*)集

而現在，不鼓勵使用data-屬性。原因之一是，用戶可以通過在瀏覽器中利用檢查元素，輕鬆地修改屬性值，藉此修改數據。數據模型最好存儲在 JavaScript 本身中，並利用框架提供的數據綁定，使之與 DOM 保持更新。

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'

// el.dataset.dateOfBirth === ''
el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

5. 語義化⽤恰當語義的html標籤，讓⻚⾯具有良好的結構與含義，⽐如<p>標籤就代表段落， <article> 代表正⽂內容等等。

開發者友好：能夠清晰地看出⽹⻚的結構，也更爲便於團隊的開發和維護；
機器友好：帶有語義的⽂字表現⼒豐富，更適合搜索引擎的爬⾍爬取有效信息

6. 前端存儲
   

• 網頁之間的交互是通過HTTP協議傳輸數據的，而Http協議是無狀態的協議 (數據提交後，瀏覽器和服務器的鏈接就會關閉，再此交互的時候 需要重新建立新的連接)

• 都是會話技術，會話是指瀏覽器和服務器之間的多次請求和響應，也就是說，從瀏覽器訪問服務器開始，到訪問服務器結束，瀏覽器關閉爲止的這段時間內容產生的多次請求和響應，合起來叫做瀏覽器和服務器之間的一次會話。

• 超市積分卡，cookie可以跟蹤會話，彌補HTTP無狀態協議的不足。

• 實際上大多數的應用都是用 Cookie來實現Session跟蹤的，第一次創建Session的時候，服務端會在HTTP協議中告訴客戶端，需要在 Cookie 裏面記錄一個Session ID，以後每次請求把這個會話ID發送到服務器，我就知道你是誰了。即：session 的運行依賴 session id，而 session id 是存在 cookie中的。
• https://juejin.im/post/59c907d46fb9a00a4746e2db
  https://juejin.im/post/5ad5b9116fb9a028e014fb19
  https://juejin.im/post/5d73bbf3e51d4561e721df68

7. script標籤中defer和async的區別？
   
8. src和href的區別：
   src，當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，知道將該資源加載、編譯、執⾏完畢，所以⼀般js腳本會放在底部⽽不是頭部。
   href，是指向⽹絡資源所在位置（的超鏈接），⽤來建⽴和當前元素或⽂檔之間的連接，當瀏覽器識別到它他指向的⽂件時，就會並⾏下載資源，不會停⽌對當前⽂檔的處理。
9. 瀏覽器渲染流程：https://pandapm.github.io/2017/10/24/Browser-rendering-process/#more