1. 瀏覽器是怎么對 HTML5 的離線儲存資源進?管理和加載的呢

• 在線的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest ?件，如 果是第?次訪問 app ，那么瀏覽器就會根據manifest?件的內容下載相應的資源并且進? 離線存儲。如果已經訪問過 app 并且資源已經離線存儲了，那么瀏覽器就會使?離線的資 源加載??，然后瀏覽器會對?新的 manifest ?件與舊的 manifest ?件，如果?件沒 有發?改變，就不做任何操作，如果?件改變了，那么就會重新下載?件中的資源并進? 離線存儲。

• 離線的情況下，瀏覽器就直接使?離線存儲的資源。

12. 請描述?下 cookies ， sessionStorage 和 localStorage 的區別？

• cookie 是?站為了標示?戶身份?儲存在?戶本地終端（Client Side）上的數據（通常 經過加密） cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回 傳遞
• sessionStorage 和 localStorage 不會?動把數據發給服務器，僅在本地保存
• 存儲??：

(1) cookie 數據??不能超過4k

(2) sessionStorage 和 localStorage 雖然也有存儲??的限制，但? cookie ?得 多，可以達到5M或更?

• 有期時間：

(1) localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除?主動刪除數據

(2) sessionStorage 數據在當前瀏覽器窗?關閉后?動刪除

(3) cookie 設置的 cookie 過期時間之前?直有效，即使窗?或瀏覽器關閉

13. iframe有那些缺點？

• iframe 會阻塞主??的 Onload 事件
• 搜索引擎的檢索程序?法解讀這種??，不利于SEO
• iframe 和主??共享連接池，?瀏覽器對相同域的連接有限制，所以會影響??的并?加載
• 使? iframe 之前需要考慮這兩個缺點。如果需要使? iframe ，最好是通過javascript 動態給 iframe 添加 src 屬性值，這樣可以繞開以上兩個問題

14. WEB標準以及W3C標準是什么?

• 標簽閉合、標簽?寫、不亂嵌套、使?外鏈 css 和 js 、結構?為表現的分離

15. xhtml和html有什么區別?

• ?個是功能上的差別 主要是 XHTML 可兼容各?瀏覽器、?機以及 PDA ，并且瀏覽器也能快速正確地編譯??
• 另外是書寫習慣的差

、在頁面導入樣式時，<link rel="" />和@import有什么區別？

相同的地方：link與@impor都是外部引用CSS方式

區別：

• link是xhtml標簽，除了加載css外，還可以定義RSS等其他事務；而@import屬于CSS范疇，只能加載CSS
• link引用CSS時候，頁面載入時同時加載；@import需要在頁面完全加載以后加載，而且@import被引用的CSS會等到引用它的CSS文件被加載完才加載
• link是xhtml標簽，無兼容問題；@import是在css2.1提出來的，低版本的瀏覽器不支持
  link支持使用javascript控制去改變樣式，而@import不支持
• link方式的樣式的權重高于@import的權重
• import在html使用時候需要<style type="text/css">標簽

2、cookies，sessionStorage和localStorage的區別

相同的地方：三者都是保存在瀏覽器端，且是同源的。

區別：

• cookies是為了標識用戶身份而存儲在用戶本地終端上的數據；始終在同源（同源指在同一IP地址下）http請求中攜帶，即cookies在瀏覽器和服務器間來回傳遞；cookie保存的數據不能超過4k；cookie在設置的cookie過期時間之前一直有效，縱使窗口或者瀏覽器關閉。cookie在所有的同源（同源指在同一IP地址下）窗口都是共享；
• sessionstorage和localstorage不會自動把數據發給服務器，僅在本地保存；sessionstorage和localstorage保存的數據大，可達到5M；sessionstorage僅在瀏覽器窗口關閉之前有效；localstorage終身有效，數據存儲于電腦本地，除非設置刪除或手動刪除；sessionstorage使用不同的瀏覽器數據不能共享；localstorage不管使用任何瀏覽器，同源（同源指在同一IP地址下）窗口都是共享

3、iframe框架有哪些優缺點？

優點：

• iframe可以將嵌入的網頁按1比1比例展示出來。
• 多個網頁引用iframe，只需要修改iframe里的內容，可以實現調用的每一個頁面內容的更改。
• 網頁中統一風格，整個系統中某個模塊都是一樣的，可以寫成一個頁面，使用iframe來嵌套引用，既而增加代碼的復用性，比如頭部和底部版本模塊。
• 如果遇到加載緩慢的頁面內容，可以由iframe嵌套使用來解決。

缺點：

• 瀏覽器搜索引擎的爬蟲程序不能解讀iframe嵌套頁面。
• 頁面模塊框架中會出現滾動條。
• 使用框架結構時，保證設置正確的導航鏈接。
• 過多iframe嵌套頁面會加重服務器的http請求

4、HTML的字符編碼問題？

在網頁中加上: <meta http-equiv="Content-Type" content="text/html;charset=utf8">

5、網頁中常用的圖像格式jpg、gif、png分別有什么不同？

• 當下瀏覽器支持的圖像格式有jpeg，gif，png，bmp等。bmp文件的存儲空間較大，而且傳輸較慢，在網頁中通常不提倡使用；
• jpeg圖像可以支持數百萬種顏色，即使在傳輸過程中有數據丟失現象，在質量上也不會有明顯的影響；
• png格式的圖像具有高保真性和透明性以及文件體積小等特點，被廣泛的應用于網頁設計中；

6、在表單中，method屬性有get和post種方式，有何區別？

• 使用get提交信息，表單中的信息會作為字符串自動附加在URL的后面，會在瀏覽器的地址欄中顯示出來。get方式傳輸的數據量限制在2KB左右，但執行效率比較高。如：

https://www.toutiao.com/c/user/token/MS4wLjABAAAADo7gk7N9eKht44frWckoqrE3skubKkaup9cdZf6INSmOAL3BAX6m0GNmbREBDA4h/?source=list&log_from=0cad628c11931_1676558929580

• post需要對輸入的信息進行包裝，存入單獨的文件中，不會附在URL后面，等待服務器取走，這種方式對信息量沒有限制。

7、什么是超鏈接？

在一個簡單的網址上提供應用程序（與必須先安裝的本地應用程序或其他東西相比）。幾乎任何網絡內容都可以轉換為鏈接，點擊（或激活）超鏈接將使網絡瀏覽器轉到另一個網址，通過將文本（或其它內容，見塊級鏈接) 包裹在 <a> 元素內，并給它一個 href 屬性（也稱為超文本引用或目標，它將包含一個網址）來創建一個基本鏈接。如

<a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAADo7gk7N9eKht44frWckoqrE3skubKkaup9cdZf6INSmOAL3BAX6m0GNmbREBDA4h/?source=list&log_from=0cad628c11931_1676558929580">

8、對于 WEB 標準以及 W3C 的理解與認識問題？

• web 標準簡單來說可以分為結構、表現和行為。結構主要是有 HTML 標簽組成。通俗點說，在頁面 body 里面我們寫入的標簽都是為了頁面的結構。表現即指 css 樣式表，通過 css 可以是頁面的結構標簽更具美感。行為是指頁面和用戶具有一定的交互，同時頁面結構或者表現發生變化，主要是有 js 組成。
• web 標準一般是將該三部分獨立分開，使其更具有模塊化。但一般產生行為時，就會有結構或者表現的變化，也使這三者的界限并不那么清晰。

9、網頁驗證碼是干嘛的？

• 區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水
• 有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試

10、WEB 標準以及 W3C 的理解與認識

• 標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈 css 和 js 腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性。

覽器兼容

瀏覽器

瀏覽器大戰

第一次瀏覽器大戰發生在上個世紀90年代，微軟發布了它的IE瀏覽器，和網景公司的Netscape Navigator瀏覽器大打出手。 ?

第二次瀏覽器大戰發生在20世紀。 ?

戰爭產物：Internet Explorer 9

13年市場比重

14年市場比重

15年市場比重

17年市場比重

19年市場比重

瀏覽器內核 ( 現代4大內核 )

Trident 代表作：IE

元老級內核之一，由微軟開發，并于1997年10月首次在ie 4.0中使用，憑借其windows壟斷優勢，Trident市場占有率一直很高。然而壟斷并非，沒有競爭就沒有進步，長期以往，Trident內核一度停滯不前，更新緩慢，甚至一度與W3C標準脫節。2011年，從ie 9開始，Trident開始支持HTML5和CSS 3，因此我們也經常會看到有些網站在瀏覽時會提示用戶（在Internet Explorer 9.0+以上瀏覽效果最佳）。前端程序員做瀏覽器兼容一般也不再會考慮ie 8之前的瀏覽器了。

Gecko 代表作：Mozilla

元老級內核之一，由Netscape公司Mozilla組織開發。1998年，Netscape在于IE瀏覽器競爭失利之后，成立了非正式組織Mozilla，由其開發新一代內核，后命名為“Gecko”。FireFox也是這班人開發出來了，因此這也就是Mozilla一直使用的內核。 Gecko的特點是代碼完全公開，因此其開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。

WebKit : 蘋果 & 谷歌舊版本

這是蘋果公司開發的內核，也是其旗下產品Ssfari瀏覽器使用的內核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分別是從KDE的KHTML和KJS衍生而來，它們都是自由軟件，在GPL條約下授權，同時支持BSD系統開發。 Chrome、360極速瀏覽器以及搜狗高速瀏覽器也使用Webkit作為內核（在腳本理解方面，Chorome使用自己研發的V8引擎）。

Blink : 代表作：谷歌 & 歐鵬

這是由Google和Opera Software開發的瀏覽器排版引擎，Google計算將這個渲染引擎作為Chromium計劃的一部分，并且在2013年4月公布了這一消息。這一渲染引擎是開源引擎Webkit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用

Presto ( Opera前內核 已經廢棄 )

為什么會出現瀏覽器兼容問題？

由于各大主流瀏覽器由不同的廠家開發，所用的核心架構和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯誤）提供了溫床。再加上各大廠商出于自身利益考慮而設置的種種技術壁壘，都讓CSS應用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的。

CSS Bug、CSS Hack和Filter

• CSS Bug: CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.
• CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因為它們都屬于個人對CSS代碼的非官方的修改，或非官方的補丁。有些人更喜歡使用patch(補丁)來描述這種行為。
• Filter:表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。本質上講，Filter是一種用來過濾不同瀏覽器的Hack類型。

常見的BUG

IE低版本常見CSS解析Bug及hack

1)圖片有邊框BUG

當圖片加<a href=“#”></a>在IE上會出現邊框

Hack:給圖片加border:0;或者border:0 none;

2)圖片間隙

div中的圖片間隙BUG

描述：在div中插入圖片時，圖片會將div下方撐大大約三像素。

hack1:將</div>與<img>寫在一行上；

hack2:將<img>轉為塊狀元素，給<img>添加聲明：display:block;

3) 雙倍浮向（雙倍邊距）（只有IE6出現）

描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界（margin）加倍顯示。

hack:給浮動元素添加聲明：display:inline;

4)默認高度（IE6、IE7）

描述：在IE6及以下版本中，部分塊元素擁有默認高度（在16px左右；）

hack1:給元素添加聲明：font-size:0;

hack2：給元素添加聲明：overflow:hidden;

非IE BUG

5)表單元素對齊不一致

描述：表單元素行高對齊方式不一致

hack:給表單元素添加聲明：float:left;

6)按鈕元素默認大小不一

描述：各瀏覽器中按鈕元素大小不一致

hack1： 統一大小/（用a標記模擬）

hack2:input外邊套一個標簽，在這個標簽里寫按鈕的樣式，把input的邊框去掉。

hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可。

7)鼠標指針bug

描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內核瀏覽器都識別該聲明。

hack: 如統一某元素鼠標指針形狀為手型，

應添加聲明：cursor:pointer cursor: ;

auto默認

crosshair加號

text文本

wait等待

help幫助

progress過程

inherit繼承

move移動

ne-resize向上或向右移動

pointer手形

8)透明屬性

兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1; 例：opacity:0.5;)

IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100(整數)

過濾器

1.下劃線屬性過濾器

當在一個屬性前面增加了一個下劃線后，由于符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個聲明，但是在IE6及更低版本瀏覽器中會繼續解析這個規則。

語法：選擇符{_屬性：屬性值；}

2. !important

關鍵字過濾器 它表示所附加的聲明具有最高優先級的意思。但由于IE6及更低版本不能識別它， 我們可以利用IE6的這個Bug作為過濾器來兼容ＩＥ６和其它標準瀏覽器。

語法：選擇符{屬性：屬性值!important;}

3. *屬性過濾器

當在一個屬性前面增加了*后，該屬性只能被IE7瀏覽器識別，其它瀏覽器混略該屬 性的作用。

語法：選擇符{*屬性：屬性值；}

4. ：IE版本識別；其它瀏覽器都不識別

語法：選擇符{屬性：屬性值;}

5. >5. \0 : IE8 及以上版本識別；其它瀏覽器都不識別