資訊專欄INFORMATION COLUMN
摘要：發生在很久以前的及更老的瀏覽器向過渡時期。數據始終在同源的請求中攜帶即使不需要，會在瀏覽器和服務器間來回傳遞。存儲大小數據大小不能超過。與上面問題相連，比也是明智的選擇。表現與結構相分離。兩種設計思想是有不同的考慮。
前言：
“吾生也有涯,而知也無涯，以有涯隨無涯，殆己”————莊子
閱讀本文前請做好以下心理準備：
本系列文章將不定期更新。
本系列文章不是很嚴謹。
你真的了解瀏覽器么？
HTML中的Doctype是什么鬼？
多了個X的XHTML與HTML有什么不一樣？
不常見的Quirks!
標簽語義化是神馬
Part B：標簽與屬性系列行內元素與塊級元素都有啥？
img的alt與title有何異同？b與strong的區別、i與em的區別？
cookies,sessionStorage和localStirage區別？
link和import的區別？
src與href的區別？
Part C：前端設計與優化系列div+css的布局較table布局有什么優點？
漸進增強還是優雅降級？
為什么利用多個域名來存儲網站資源會更有效？
在css/js代碼上線之后開發人員經常會優化性能，從用戶刷新網頁開始，一次js請求一般情況下有哪些地方會有緩存處理？
一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。
Part D: HTML5系列HTML5 為什么只需要寫 ？
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
HTML5的form如何關閉自動完成功能？
答案如下 Part A：常識系列1. 你真的了解瀏覽器么？
答：該題考察常見瀏覽器和內核。
IE：Trident內核
Firefox：Gecko內核
Safari：Webkit內核
Chrome：Blink內核（Webkit的一個分支吧）
Opera：Presto（7版本至12版本）；Blink（從14版本以后）
國產大雙核瀏覽器系列：就是Trident加Webkit
2. HTML中的Doctype是什么鬼？
答：簡單說，這個聲明位于文檔最前面，用于告訴瀏覽器的解析器，以什么文檔類型規范解析當前文檔。
3. 多了個X的XHTML與HTML有什么不一樣？
答：簡單說，XHTML 是以 XML 格式編寫的 HTML，要求更加嚴格。詳細的區別比如
元素語法：
XHTML 元素必須正確嵌套
XHTML 元素必須始終關閉
XHTML 元素必須小寫
XHTML 文檔必須有一個根元素
屬性語法：
XHTML 屬性必須使用小寫
XHTML 屬性值必須用引號包圍
XHTML 屬性最小化也是禁止的
更詳細的區別在[這里][1]
4. 不常見的Quirks!
答：Quirks又被稱為是怪癖模式、詭異模式、混雜模式，對應的是Standard模式。
這是個歷史遺留問題。發生在很久以前的IE5.5及更老的瀏覽器向IE6過渡時期。
簡單說，就是以這種模式模擬老瀏覽器行為，來兼容較早的網頁。
詳細區別如下：
總體會有布局、樣式解析和腳本執行三個方面的區別。
(1)盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
(2)設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
(3)設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的.
(4)用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
5. 標簽語義化是神馬
答：簡單說，用正確的標簽做正確的事情。 html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析; 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO; 使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。Part B：標簽與屬性系列
1. 行內元素與塊級元素都有啥？
答：簡單說，塊級和行內區別就是能不能自己占一行！ 塊級：div ul ol li p h1（標題系列） dl dt dd（描述列表系列） 行內：span a b img input select strong 對了，還有空元素系列 常見的空元素：
鮮為人知的是：
2. img的alt與title有何異同？b與strong的區別、i與em的區別？
答：(1)alt：簡單說，就是圖片出不來時顯示的字。 官方解釋是——為不能顯示圖像、窗體或applets的用戶代理（UA）， alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。 title：簡單說，就是鼠標移過去的提示信息 官方解釋：title屬性為設置該屬性的元素提供建議性的信息。 (2)strong是標明重點內容，有語氣加強的含義， 使用閱讀設備閱讀網絡時：會重讀，而是展示強調內容。 (3)i內容展示為斜體，em表示強調的文本；
3. cookies,sessionStorage和localStirage區別？
答：區別主要有以下3點
保存路徑
cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據 （通常經過加密）。cookie數據始終在同源的http請求中攜帶（即使不需要）， 會在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制， 但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。 cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
4. link和import的區別？
答： （1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用； 而@import是CSS提供的，只能用于加載CSS; （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載 （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;
5. src與href的區別？
答：簡單說，src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。 src常用于js/img/frame等元素，href常用于a/css等。 src的元素，下載時不能干別的了。href就可以。 所以把js的src放在底部是個明智的選擇。與上面問題相連，href比@import也是明智的選擇。Part C：前端設計與優化系列
1. div+css的布局較table布局有什么優點？
答：table布局是很老的網頁設計了，時代在進步嘛，前者的優點還很多的： (1)改版的時候更方便 只要改css文件。 (2)頁面加載速度更快、結構化清晰、頁面顯示簡潔。 (3)表現與結構相分離。 (4)易于優化（seo）搜索引擎更友好，排名更容易靠前。
2. 漸進增強還是優雅降級？
答：漸進增強（Progressive enhancement）：
簡單說，就是照顧老瀏覽器。先實現基本功能，再玩點花里胡哨的。
優雅降級（Graceful degradation）：
簡單說，就是先構建完整功能，再考慮老版本的兼容性。
兩種設計思想是有不同的考慮。
實話說，我更喜歡優雅降級的。用IE6的用戶，對不起，不想做兼容了。您老升級下瀏覽器吧。。
3. 為什么利用多個域名來存儲網站資源會更有效？
答：(1)CDN緩存更方便
(2)突破瀏覽器并發限制
(3)節約Cookie帶寬
(4)節約主域名連接數，優化頁面響應速度
(5)防止不必要的安全問題
4. 在css/js代碼上線之后開發人員經常會優化性能，從用戶刷新網頁開始，一次js請求一般情況下有哪些地方會有緩存處理？
答：DNS緩存、CDN緩存、瀏覽器緩存、服務器緩存
5. 一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。
答：這個問題有意思～
(1)圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，
判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優先加載。
(2)如果為幻燈片、相冊等，可以使用圖片預加載技術，
將當前展示圖片的前一張和后一張優先下載。
(3)如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
(4)如果圖片過大，可以使用特殊編碼的圖片，
加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
(5)如果圖片展示區域小于圖片的真實大小，
則在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。
Part D: HTML5系列
1. HTML5 為什么只需要寫 ？
答：HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行； 而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
2. html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
新特性
HTML5 現在已經不是 SGML 的子集， 主要是關于圖像，位置，存儲，多任務等功能的增加。 繪畫 canvas; 用于媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失; sessionStorage 的數據在瀏覽器關閉后自動刪除; 語意化更好的內容元素，比如 article、footer、header、nav、section; 表單控件，calendar、date、time、email、url、search; 新的技術webworker, websocket, Geolocation;
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽， 瀏覽器支持新標簽后，還需要添加標簽默認的樣式。 當然也可以直接使用成熟的框架、比如html5shim;
如何區分HTML5：
DOCTYPE聲明新增的結構元素功能元素
3. HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
答：在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：
HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
在離線狀態時，操作window.applicationCache進行需求實現。
4. 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
答：在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。離線的情況下，瀏覽器就直接使用離線存儲的資源。
5. HTML5的form如何關閉自動完成功能？
答：給不想要提示的 form 或某個 input 設置為 autocomplete=off。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50317.html
摘要：定位使元素的位置與文檔流無關，因此不占據空間。可以知道屬性有以下幾個特點該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 前端面試之CSS篇 1、三種基本引入方式 外部樣式表 內部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...
摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。 工欲善其事必先利其器-前端實習簡歷篇 - 掘金 有幸認識很多在大廠工作的學長，在春招正式開始前為我提供很多內部推薦的機會，非常感謝他們對我的幫助。現在就要去北京了，對第一份正式的實習工作也充滿期待，也希望把自己遇到的一些問題和...
摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...
平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
閱讀 889·2023-04-25 19:17
閱讀 2191·2021-09-10 11:26
閱讀 1905·2019-08-30 15:54
閱讀 3416·2019-08-30 15:53
閱讀 2685·2019-08-30 11:20
閱讀 3401·2019-08-29 15:12
閱讀 1236·2019-08-29 13:16
閱讀 2393·2019-08-26 12:19
