HTML面試題

時間 2019-11-06

標籤 html 面試欄目 HTML 简体版

原文原文鏈接

1.你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?javascript

所謂的「瀏覽器內核」無非指的是一個瀏覽器最核心的部分-「Rendering Engine」，直譯叫作「渲染引擎」，咱們也常稱爲「排版引擎」、「解釋引擎」。這個引擎的做用是幫助瀏覽器來渲染網頁內容，將頁面內容和排版代碼轉換爲用戶所見的視圖。css

但咱們經常把所說的「瀏覽器內核」，包含了javascript引擎，例如Webkit，它由渲染引擎WebCore和javascript引擎JSCore組成。html

下面咱們看看各個瀏覽器使用的內核：前端

（1）.IE：IE瀏覽器誕生於1994年，當時微軟爲了抗衡網景瀏覽器，和Spyglass合做，並根據源代碼實現了本身的IE內核Trident。每一次新的IE發佈，也標誌着Trident內核版本號的提高。java

（2）.Safari：Safari所用瀏覽器內核是大名鼎鼎的Webkit。Webkit前身是KDE小組的KHTML引擎，能夠說Webkit是KHTML的一個開源分之。Webkit能夠說是蘋果公司給開源世界的一大貢獻，基於此開源引擎，衍生了不少Webkit分之，若Chrome瀏覽器引擎。linux

（3）.Chrome：從08年開始，google創建了chromium引擎，它是webkit的一個分之。但卻把webkit代碼梳理得可讀性很是高，之前可能須要一天進行編譯的代碼，如今只須要兩三個小時就能搞定。但從2013年開始，chrome放棄chromium引擎而使用最新的Blink引擎（基於Webkit2-蘋果公司在2010年退出的新Webkit引擎）。web

（4）.Opera：Opera瀏覽器是一款挪威Opera Software ASA公司製做的支持多頁面標籤式瀏覽器。是誇平臺瀏覽器能夠在Windows、Mac、linux三個操做系統平臺上運行。爲了減小研發成本，Opera在2013年2月宣佈放棄Presto引擎，轉而跟隨Chrome使用Webkit分之的Chromium引擎做爲自家瀏覽器核心引擎。在Chrome與2013年推出Blink引擎後，Opera也緊跟其腳步表示將轉而使用Blink做爲瀏覽器核心引擎。面試

（5）.Firefox：Mozilla Firefox是一個開源網頁瀏覽器。Firefox使用的是Gecko內核。Gecko是網景公司開發的引擎，但後來網景公司解散。Mozilla基金會繼續推進着Gecko的發展。時至今日，Gecko任繼續由Mozilla的僱員和義工所維護和發展。chrome

2.每一個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？跨域

<!DOCTYPE>聲明處於<html>標籤以前。此標籤可告知瀏覽器文檔使用哪一種HTML或XHTML規範。在製做網頁時都須要定義文檔類型。即doctype。若是不聲明網頁的文檔類型，瀏覽器在解析時會以怪異模式解析網頁代碼，不一樣瀏覽器下，怪異模式解析的網頁效果差異很大，會形成佈局排版的錯位，所以，在寫html代碼前有必要寫明文檔類型。

經常使用的DOCKTYPE聲明包括：

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

3.Quirks模式是什麼？它和Standards模式有什麼區別

從IE6開始，引入了Standards標準模式，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程序。

在IE6以前CSS還不夠成熟，全部IE5等以前瀏覽器對CSS支持不好，IE6將對CSS提供更好的支持，然而不少頁面時基於舊的佈局方式寫的，而若是IE6支持CSS則將令這些頁面顯示不正常，若是在即保證不破壞現有頁面，也提供新的渲染機制?

遇到這種問題的一個常見作法就是增長參數和分支，即當某個參數爲真時，咱們就使用新功能，而若是不爲真時就使用舊功能。IE6也是類型這樣作的，它將DTD當成這個「參數」，由於之前的頁面你們都不會寫DTD，因此IE6就假定若是寫了DTD就採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪異模式）。

區別：

整體會有佈局、樣式解析和腳本執行三個方面區別。

盒模型：在W3C標準中，若是設置一個元素寬度和高度，指的是元素內容的寬度和高度，而在Quirks模式下，IE的寬度和高度還包括碰padding和border。

設置行內元素高度：在standards模式下，給span元素設置width和height都不會生效，而在quirks模式下，則會生效。

4.div+css的佈局較table佈局有什麼優勢？

改版更方便，只須要改CSS文件。頁面加載速度更快、結構化清晰、頁面顯示簡潔。表現與結構相分離。易於優化（SEO）搜索引擎更友好，排名更容易靠前。

5.a：img的alt與title有何異同？b：strong與em的異同？

含義不一樣，alt是當前圖片不存在時的替代文字。而tittle是對圖片的描述與進一步說明；

在瀏覽器中表現不一樣，在firefox和ie8中，當鼠標通過圖片時title值會顯示，而alt值不會顯示；只有在ie6中，當鼠標通過圖片時title和alt值都會顯示；

對於網站seo優化來講，title與alt還有最重要一點：搜索引擎對圖片意思的判斷，主要靠alt屬性。全部在圖片alt屬性中以簡要文字說明，同時包含關鍵詞，也是頁面優化的一部分。

strong粗體強調標籤，強調，表示內容的重要性；

em斜體強調標籤，更強烈強調，表示內容的強調點；

6.你能描述一下漸進加強和優雅降級之間的不一樣嗎?

漸進加強（progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級（graceful degradation）:一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着日後看；而漸進加強則意味着超前看，同時保證其根基處於安全地帶。

優雅降級觀點

認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做拿牌在開發週期的最後階段，並把測試對象限定在主流瀏覽器（如IE、Mozilla等）的前一個版本。在這種規範下，舊版瀏覽器被認爲僅能提供「簡陋卻無妨（poor,but passable）」的瀏覽體驗。你能夠作一些小的調整來適應某個特定瀏覽器。但因爲他們並不是咱們關注重點，因此除了修復較大的錯誤以外，其餘的差別將被直接忽略。

漸進加強觀點

認爲應關注內容自己。內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都設計到內容。這使得漸進加強稱爲一種更合理的設計範例。這也是它當即被Yahoo!所採納並用以構建其「分級式瀏覽器支持」策略的緣由所在。

7.爲何利用多個域名來存儲網站資源會更有效？

CDN緩存更方便。靜態內容和動態內容分服務器存放，使用不一樣的服務器處理請求。處理動態內容的不處理靜態內容。提升效率。

突破瀏覽器併發限制。節約主域名的連接數，從而提高客戶端網絡帶寬的利用率，優化頁面響應。由於老的瀏覽器（IE6是典型），針對同一個域名值容許同時保持兩個HTTP連接。將圖片等資源請求分配到其餘域名商，避免大圖片之類的並不必定重要的內容阻塞主域名上的其餘資源連接。

節約cookie帶寬。例如twitter的主戰twitter.com每次訪問，都會帶上本身的cookie，挺大的。加入圖片也放在主域名下，那麼每次訪問圖片時，請求頭也會攜帶cookie，而圖片是不須要知道用戶的cookie的，全部者部分帶寬白白浪費了。

節約主域名的連接數，優化頁面響應速度。

防止沒必要要的安全問題。對於UGC（user generated content）的內容和主站隔離，防止安全問題（上傳js竊取主站cookie之類的）。正是這個緣由要求用戶內容的域名必須不是本身主站的子域名，而是一個徹底獨立的第三方域名。

9.請描述一下cookies，sessionStorage和localStorage的區別？　

sessionStorage用於本地存儲一個回話（session）中的數據，這個數據只有在同一個回話中的頁面才能訪問而且當回話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是回話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是用於不會過時的。

web storage和cookie區別

web storage的概念和cookie類似，區別是它是爲了更大容器存儲設計的。Cookie大小是受限的，而且每次你請求一個新頁面的時候Cookie都會被髮送過去，這無形浪費了帶寬，另外cookie還須要還指定做用域，不能夠跨域調用。

Cookie的做用是用於與服務器進行交互，做爲http規劃的一部分而存在，而web storage僅僅是爲了在本地存儲數據而生。

10.簡述一下src與href的區別

src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

src是souce的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

<script src="base.js"></script>

當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，知道將該資源加載、編譯、執行完畢，圖片和框架元素也如此，相似於將全部指向資源嵌入到當前標籤內。這也是爲何獎js腳本放到底部而不是頭部。

href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加

<link href="common.css" rel="stylesheet"/>

那麼瀏覽器會識別該css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css。而不使用@import方式。

11.在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？

dns緩存：若是你在短期內屢次訪問了某個網址，DNS都要屢次解析並返回給你的話，DNS就重複工做了。因而操做系統聰明地設計了一個本地「DNS緩存」，當你第一次訪問a.com，DNS返回了正確的IP以後，系統就會將這個結果臨時存儲起來，這就是DNS緩存。而且它會爲緩存設定一個失效時間，在失效時間內再次訪問某個網站時，系統就會直接從你電腦本地的DNS緩存把結果交換給你，而沒必要再詢問DNS服務器。

cdn緩存：CDN是Content Delivery Network簡稱，即「內容分發網絡」的意思。通常咱們所說的CDN加速，通常是指網站加速或者用戶下載資源加速。

CDN能夠理解爲分佈在每一個縣城的火車票代售點，用戶在瀏覽網站的時候，CDN會選擇一個離用戶最近的CDN邊緣節點來響應用戶的請求，這樣海南移動用戶請求就不會千里迢迢跑到北京電信機房的服務器上了。

CDN有事很明顯，CDN節點解決了跨運營商和跨地域訪問的問題，訪問延時大大下降；另一方面，大部分請求在CDN邊緣節點王城，CDN起到了分流做用，減輕了源站的負載。

瀏覽器緩存：瀏覽器在用戶資源磁盤上，對最新請求過的文檔進行了存儲。可是當網站發生了更新的時候（如替換css、js以及圖片文件），瀏覽器本地保存着舊版本的而文件，從而致使沒法預料後果。

服務器緩存：將須要頻繁訪問的web頁面和對象保存在離用戶更近的系統中，當再次訪問這些對象的時候加快了速度。

12.個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。什麼是圖片懶加載？

對於圖片過多的頁面，爲了加速頁面加載速度，因此不少時候咱們須要將頁面內未出如今可視區域內的圖片先不加載，等到滾動到可視區域後再去加載。這樣子對於頁面加載性能會有很大的提高，也提升了用戶體驗。

若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

若是圖片爲css圖片，可使用CSSsprinte，SVGsprite,Iconfont、Base64等技術。

若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

若是圖片展現區域小於圖片的真實大小，則應在服務端根據業務須要先進行圖片壓縮，圖片壓縮後大小與展現一致。

13.你如何理解HTML結構的語義化？

去掉或丟失樣式的時候，能讓頁面呈現清晰的結構：html自己是沒有表現的，咱們看到例如<h1>是粗體、<strong>是加粗的。不要認爲這是htl的表現，這些其實html默認的css樣式起的做用。瀏覽器都有默認樣式，默認樣式的目的也是爲了更好的表達html的語義。

搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重。過去你可能尚未考慮搜索引擎的爬蟲也是網站的「訪客」，但如今它們其實是極其寶貴的用戶。沒有它們的話，搜索引擎將沒法索引你的網站，而後通常用戶很難過來訪問。

你的頁面對爬蟲容易理解很是重要，由於爬蟲很大程度上會忽略用於表現的標記，而只注重語義標記。SEO主要仍是靠你網站的內容和外部連接的。

14.談談之前端角度出發作好SEO須要考慮什麼？

瞭解搜索引擎如何抓取網頁和如何索引網頁。你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人（SE robot或叫web crawler）如何工做，搜索引擎如何對搜索結果進行排序等等。

Meta標籤優化。主要包括主題（Title）、網站描述（Description）、關鍵詞（Keywords）。還有一些其餘隱藏文字，好比Author（做者）、Category（目錄）、Language(編碼語種)等。

如何選擇關鍵詞並在網頁中放置關鍵詞。搜索就得用關鍵詞，關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞（通常5個左右），而後針對這些關鍵詞進行優化，包括關鍵詞密度（Density）、相關度（Relavancy），突出性（Prominency）等等。

瞭解主要的搜索引擎。雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google、Yahoo、Bing等；中文的有百度、搜狗、有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索引擎門戶和搜索引擎之間的關係，好比AOL網頁搜索用的是Google搜索技術，MSN用的是Bing的技術。

搜索引擎登陸。網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交到搜索引擎。

連接交換和連接普遍度（Link Popularity）。網頁內容都是以超文本（Hypertext）的方式來相互連接的，網站之間也是如此。除了搜索引擎之外，人們也天天經過不一樣網站之間的連接來Surfing（「衝浪」）。其餘網站到你的網站的連接越多，你也就會得到更多的訪問量。更重要的是，你的網站外部鏈接數越多，會被搜索引擎認爲它的重要性越大，從而給你更高排名。

html和css面試：http://www.jb51.net/css/238279.html

javascript面試：http://www.jb51.net/article/56847.htm