前端知識點系列一：HTML

weixin_34292287發表於2017-03-05
前端HTML

持續更新......

1. Doctype作用

  • <!DOCTYPE>宣告位於位於HTML文件中的第一行，處於 <html>標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。
  • DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。

Doctype有三種型別：

| 型別 | 說明 | 程式碼 |
| :--- | :--- |
| Strict | 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）;不允許框架集（Framesets） | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
| Transitional | 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）;不允許框架集（Framesets） | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">|
| Frameset | 等同於 HTML 4.01 Transitional，但允許框架集內容 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">|

注意：

HTML5不需要制定Doctype型別，因為：

HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。

2. cookies，sessionStorage 和 localStorage 的區別

  • cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。
  • cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
  • sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
儲存大小
  • cookie資料大小不能超過4k。
  • sessionStorage和localStorage 可以達到5M或更大。
有期時間
  • localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
  • sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除。
  • cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

注意：不同瀏覽器tab之間（同一個url），不共享sessionStorage，但是，會共享localStorage和cookie。

3. iframe有那些缺點?

  • iframe會阻塞主頁面的Onload事件；
  • 搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;
  • iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。

通過javascript 動態給iframe新增src屬性值，可以避免這兩個問題。

3. 如何實現瀏覽器內多個標籤頁之間的通訊

  • WebSocket
  • 呼叫localstorge、cookies等本地儲存方式

localstorge另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件， 通過監聽事件，控制它的值來進行頁面資訊通訊

4. ASCII，Unicode和UTF-8區別

  • ASCII：將英文字元對映為二進位制的字元編碼
  • Unicode：包含全世界所有字元的集合。它只規定了字元的二進位制程式碼，卻沒有規定如何儲存這個二進位制程式碼（一個字元可能需要多個位元組，一個位元組是8位二進位制）
  • UTF-8：實現Unicode的一種編碼方式。它是一種變長的編碼方式，用1~4個位元組表示一個符號，根據不同符號而變化位元組長度。

相關文章