好久不見

• Doctype作用？標準模式與相容模式各有什麼區別?
  
  1. Doctype用於向瀏覽器申明使用標準模式來解析文件
  2. 標準模式是以瀏覽器最高級別來解析文件，而相容模式是以向後相容的方式來解析文件
• HTML5 為什麼只需要寫 ？
  
  1. 因為HTML5不是SGML的子集，所以不需要DTD引用，但是需要DOCTYPE來規範行為。
  2. 而HTML4.01是基於SGML，所以需要DTD引用，來告訴瀏覽器文件所使用的文件型別。
• 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
  在CSS規範中，每個元素都有display屬性。display屬性值為block的是塊級元素，display屬性值為inline的是行內元素
  
  1. 行內元素有：span input a b strong i em small 等等
  2. 塊級元素有：div section main footer header p ul li ol 等等
  3. 空元素有(自閉合標籤)：img input hr br meta link。還有一些少見的空元素：embed base command keygen param track wbr col area source等等
• 頁面匯入樣式時，使用link和@import有什麼區別？
  
  1. Link 在瀏覽器頁面的時候並行載入，而@import需要等頁面載入完成後才會載入
  2. Link 是 XHML標籤不存在相容問題，而@import是css2.1提出的，IE5以上才支援
  3. Link 還可以載入RSS和使用rel屬性，而@import只能載入CSS
  4. Link 載入的樣式可以通過JS更改，而@import載入的樣式不可以被JS更改
• 介紹一下你對瀏覽器核心的理解？
  
  1. 瀏覽器核心一般被分為兩個部分：渲染引擎和JS引擎
     
     • 渲染引擎：負責取得網頁的內容(HTML,XML,影象等等)，整理訊息(引入CSS等)，通過計算來顯示出網頁(這個過程也稱為迴流)，然後輸出至顯示卡，最後渲染為網頁(這個過程稱為重繪)
     • JS引擎：獲取網頁的JS部分用來解析和執行以實現網頁的動態效果
  2. 最開始渲染引擎和JS引擎沒有太大的區別，但是隨著JS的發展並獨立，核心就只指渲染引擎了
• 常見的瀏覽器核心有哪些？
  
  1. Trident：IE 360瀏覽器等
  2. Gecko：Firefox等
  3. Presto：Opera7及以上，現為blink核心
  4. Webkit：Chrome，safari(現Chrome使用blink核心)
  5. blink：Chrome , opera(blink核心由谷歌和opera公司共同研發，是Webkit分支)
• html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
  
  • 新特性
    
    1. HTML5已經不是SGML的子集
    2. 新增關於影象，地理位置，快取，多工等多個功能
    3. 用於媒體回放的Video和Audio
    4. 語義化更好的標籤，利於SEO優化
    5. 新的表單控制元件
• • 移除的元素
    
    1. 純表現的元素 basefont font big s strike tt u
    2. 影響頁面的元素 frame frameset noframe
• • 如何處理HTML5新標籤的瀏覽器相容問題
    
    1. 對於瀏覽器不支援的標籤可以使用document.createElement方法產生標籤，但是需要自己填寫預設樣式
    2. 使用成熟的技術框架比如html5shim
       
• • 如何區分html和HTML5？
    
    1. 根據文件DOCTYPE申明
    2. 檢視有無新增元素
• 簡述一下你對HTML語義化的理解？
  
  1. 正確的標籤做正確的事情
  2. 爬蟲可以根據文件結構來確定上下文，有利於SEO優化
  3. 在無網路情況下不至於排版過於混亂
  4. 結構化程式碼便於開發人員的開發和維護
• 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
  
  1. 線上的情況下：首先判斷是否是第一次訪問網頁，如果是就快取。如果不是就比對新的manifest檔案看看是不是發生過更改，發生則替換
  2. 離線的情況下讀取manifest檔案使用離線資源
• 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
  
  1. Cookie 有大小限制，一般來說是4k。隨著http請求一起傳送至伺服器端，可以設定過期時間，不設定的情況下在瀏覽器關閉的時候會清空
  2. SessionStorage可以儲存較多資料，在瀏覽器關閉的時候會被清空，同時瀏覽主域名下不同子域名內容不會共享
  3. LocalStorage可可以儲存較多資料，可以永久儲存資料除非使用者主動刪除或清除快取
• iframe有那些缺點？
  
  1. 在iframe裡的域名的資源也會同時並行下載，影響瀏覽器載入速度
  2. iframe裡面的內容搜尋引擎搜尋不到，不利於SEO優化
  3. 會阻塞頁面的Onload事件
     如果需要使用iframe，可以使用js動態生成，給予Src屬性。可以解決1，3問題
• Label的作用是什麼？是怎麼用的？
  
  1. label標籤用來定義表單控制間的關係，當用戶點選label標籤時候，瀏覽器焦點會自動跳轉到對應的表單控制元件上
  2. 給label的for屬性設定表單控制元件的id屬性即可
• HTML5的form如何關閉自動完成功能？
  
  1. 給form新增autocomplete=off屬性
• 如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
  
  1. 使用LocalStorage，cookies等儲存方式
  2. WebSocket、SharedWorker；
     LocalStorage另一個瀏覽上下文裡被新增、修改或刪除時，都會觸發一個事件，通過監聽該事件來進行頁面之間的通訊
     注意，在safari瀏覽器無痕模式使用LocalStorage會出現QuotaExceededError 異常
• webSocket如何相容低瀏覽器？(阿里)
  
  1. Adobe Flash Socket
  2. ActiveX HTMLFile(IE)
  3. 基於Multipart編碼傳送XHR
  4. 基於長輪詢的XHR
• 頁面可見性（Page Visibility API） 可以有哪些用途？
  
  1. 通過visibilityState 的值檢測頁面當前是否可見，以及開啟頁面的時間等
  2. 在頁面被切換到後臺的時候，自動暫停音樂或者視訊
• 如何在頁面上實現一個圓形的可點選區域？
  
  1. SVG或Canvas
  2. border-radius屬性
• 實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
  
• 網頁驗證碼是幹嘛的，是為了解決什麼安全問題。
  
  1. 用於區分使用者是人還是機器人，可以防止論壇灌水，惡意破解密碼，刷票等
  2. 防止暴力破解使用者帳號密碼
• title與h1的區別、b與strong的區別、i與em的區別？
  
  1. title表示網頁標題，h1表示段落標題
  2. b表示文字加粗沒有強調效果，strong表示文字加粗有強調效果
  3. i表示文字斜體沒有強調效果，em表示文字斜體有強調效果