html、css簡述面試題

hTML， HTTP，web綜合問題

一、前端須要注意哪些SEO

• 合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
• 語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
• 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
• 重要內容不要用js輸出：爬蟲不會執行js獲取內容
• 少用iframe：搜索引擎不會抓取iframe中的內容
• 非裝飾性圖片必須加alt
• 提升網站速度：網站速度是搜索引擎排序的一個重要指標

二、<img>的title和alt有什麼區別

• 一般當鼠標滑動到元素上的時候顯示
• alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

三、HTTP的幾種請求方法用途

• 一、GET方法

  • 發送一個請求來取得服務器上的某一資源

• 二、POST方法

  • 向URL指定的資源提交數據或附加新的數據

• 三、PUT方法

  • 跟POST方法很像，也是想服務器提交數據。可是，它們之間有不一樣。PUT指定了資源在服務器上的位置，而POST沒有

• 四、HEAD方法

  • 只請求頁面的首部

• 五、DELETE方法

  • 刪除服務器上的某資源

• 六、OPTIONS方法

  • 它用於獲取當前URL所支持的方法。若是請求成功，會有一個Allow的頭包含相似「GET,POST」這樣的信息

• 七、TRACE方法

  • TRACE方法被用於激發一個遠程的，應用層的請求消息迴路

• 八、CONNECT方法

  • 把請求鏈接轉換到透明的TCP/IP通道

四、從瀏覽器地址欄輸入url到顯示頁面的步驟

• 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
• 服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

五、如何進行網站性能優化

• content方面

  1. 減小HTTP請求：合併文件、CSS精靈、inline Image
  2. 減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
  3. 減小DOM元素數量

• Server方面

  1. 使用CDN
  2. 配置ETag
  3. 對組件使用Gzip壓縮

• Cookie方面

  1. 減少cookie大小

• css方面

  1. 將樣式表放到頁面頂部
  2. 不使用CSS表達式
  3. 使用<link>不使用@import

• Javascript方面

  1. 將腳本放到頁面底部
  2. 將javascript和css從外部引入
  3. 壓縮javascript和css
  4. 刪除不須要的腳本
  5. 減小DOM訪問

• 圖片方面

  1. 優化圖片：根據實際顏色須要選擇色深、壓縮
  2. 優化css精靈
  3. 不要在HTML中拉伸圖片

六、HTTP狀態碼及其含義

• 1XX：信息狀態碼
  • 100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
• 2XX：成功狀態碼
  • 200 OK 正常返回信息
  • 201 Created 請求成功而且服務器建立了新的資源
  • 202 Accepted 服務器已接受請求，但還沒有處理
• 3XX：重定向
  • 301 Moved Permanently 請求的網頁已永久移動到新位置。
  • 302 Found 臨時性重定向。
  • 303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
  • 304 Not Modified 自從上次請求後，請求的網頁未修改過。
• 4XX：客戶端錯誤
  • 400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
  • 401 Unauthorized 請求未受權。
  • 403 Forbidden 禁止訪問。
  • 404 Not Found 找不到如何與 URI 相匹配的資源。
• 5XX: 服務器錯誤
  • 500 Internal Server Error 最多見的服務器端錯誤。
  • 503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

七、語義化的理解

• 用正確的標籤作正確的事情！
• html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
• 在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
• 搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
• 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解

八、介紹一下你對瀏覽器內核的理解？

• 主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核

• JS引擎則：解析和執行javascript來實現網頁的動態效果
• 最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎

九、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的離線儲存怎麼使用，工做原理能不能解釋一下？

• 在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件

• 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現

• 如何使用：

  • 頁面頭部像下面同樣加入一個manifest的屬性；
  • 在cache.manifest文件的編寫離線存儲的資源
  • 在離線狀態時，操做window.applicationCache進行需求實現

1 2 3 4 5 6 7 8 9

CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html

十一、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢

• 在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。

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

十二、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

• cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）
• cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞
• sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

• 存儲大小：

  • cookie數據大小不能超過4k
  • sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大

• 有期時間：

  • localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
  • sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
  • cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

1三、iframe有那些缺點？

• iframe會阻塞主頁面的Onload事件
• 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
• 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題

1四、WEB標準以及W3C標準是什麼?

• 標籤閉合、標籤小寫、不亂嵌套、使用外鏈css和js、結構行爲表現的分離

1五、xhtml和html有什麼區別?

• 一個是功能上的差異

  • 主要是XHTML可兼容各大瀏覽器、手機以及PDA，而且瀏覽器也能快速正確地編譯網頁

• 另外是書寫習慣的差異

  • XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素

1六、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

• 頁面被加載的時，link會同時被加載，而@imort頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
  import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題
  link方式的樣式的權重 高於@import的權重
• <!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器， 用什麼文檔類型 規範來解析這個文檔
• 嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行
• 在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。 DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現

1七、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什麼區別？

• 行內元素有：a b span img input select strong
• 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行內元素不能夠設置寬高，不獨佔一行
• 塊級元素能夠設置寬高，獨佔一行

1八、HTML全局屬性(global attribute)有哪些

• class:爲元素設置類標識
• data-*: 爲元素增長自定義屬性
• draggable: 設置元素是否可拖拽
• id: 元素id，文檔內惟一
• lang: 元素內容的的語言
• style: 行內css樣式
• title: 元素相關的建議信息

1九、Canvas和SVG有什麼區別？

• svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。canvas輸出的是一整幅畫布
• svg輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會是真和鋸齒。而canvas輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒

20、HTML5 爲何只須要寫 <!DOCTYPE HTML>？

• HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲
• 而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型

2一、如何在頁面上實現一個圓形的可點擊區域？

• svg
• border-radius
• 純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

2二、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題

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

$CSS部分

一、css sprite是什麼,有什麼優缺點

• 概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案。

• 優勢：

  • 減小HTTP請求數，極大地提升頁面加載速度
  • 增長圖片信息重複度，提升壓縮比，減小圖片大小
  • 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現

• 缺點：

  • 圖片合併麻煩
  • 維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

二、display: none;與visibility: hidden;的區別

• 聯繫：它們都能讓元素不可見

• 區別：

  • display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
  • display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
  • 修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
  • 讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

三、link與@import的區別

1. link是HTML方式， @import是CSS方式
2. link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC
3. link能夠經過rel="alternate stylesheet"指定候選樣式
4. 瀏覽器對link支持早於@import，可使用@import對老瀏覽器隱藏樣式
5. @import必須在樣式規則以前，能夠在css文件中引用其餘文件
6. 整體來講：link優於@import

四、什麼是FOUC?如何避免

• Flash Of Unstyled Content：用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染以後再重新顯示文檔，形成頁面閃爍。
• 解決方法：把樣式表放到文檔的head

五、如何建立塊級格式化上下文(block formatting context),BFC有什麼用

• 建立規則：

  • 根元素
  • 浮動元素（float不是none）
  • 絕對定位元素（position取值爲absolute或fixed）
  • display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
  • overflow不是visible的元素

• 做用：

  • 能夠包含浮動元素
  • 不被浮動元素覆蓋
  • 阻止父子元素的margin摺疊

六、display,float,position的關係

• 若是display爲none，那麼position和float都不起做用，這種狀況下元素不產生框
• 不然，若是position值爲absolute或者fixed，框就是絕對定位的，float的計算值爲none，display根據下面的表格進行調整。
• 不然，若是float不是none，框是浮動的，display根據下表進行調整
• 不然，若是元素是根元素，display根據下表進行調整
• 其餘狀況下display的值爲指定值
• 總結起來：絕對定位、浮動、根元素都須要調整display

七、清除浮動的幾種方式，各自的優缺點

• 父級div定義height
• 結尾處加空div標籤clear:both
• 父級div定義僞類:after和zoom
• 父級div定義overflow:hidden
• 父級div也浮動，須要定義寬度
• 結尾處加br標籤clear:both
• 比較好的是第3種方式，好多網站都這麼用

八、爲何要初始化CSS樣式?

• 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
• 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化

九、css3有哪些新特性

• 新增各類css選擇器
• 圓角 border-radius
• 多列布局
• 陰影和反射
• 文字特效text-shadow
• 線性漸變
• 旋轉transform

CSS3新增僞類有那些？

• p:first-of-type 選擇屬於其父元素的首個<p>元素的每一個<p> 元素。
• p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個<p> 元素。
• p:only-of-type 選擇屬於其父元素惟一的 <p>元素的每一個 <p> 元素。
• p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
• p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
• :after 在元素以前添加內容,也能夠用來作清除浮動。
• :before 在元素以後添加內容
• :enabled
• :disabled 控制表單控件的禁用狀態。
• :checked 單選框或複選框被選中

十、display有哪些值？說明他們的做用

• block 象塊類型元素同樣顯示。
• none 缺省值。象行內元素類型同樣顯示。
• inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
• list-item 象塊類型元素同樣顯示，並添加樣式列表標記。
• table 此元素會做爲塊級表格來顯示
• inherit 規定應該從父元素繼承 display 屬性的值

十一、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

• 有兩種， IE盒子模型、W3C盒子模型；
• 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
• 區 別： IE的content部分把 border 和 padding計算了進去;

十二、CSS優先級算法如何計算？

• 優先級就近原則，同權重狀況下樣式定義最近者爲準
• 載入樣式以最後載入的定位爲準
• 優先級爲: !important > id > class > tag important 比 內聯優先級高

1三、對BFC規範的理解？

• 它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用

1四、談談浮動和清除浮動

• 浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上

1五、position的值， relative和absolute定位原點是

• absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位
• fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位
• relative：生成相對定位的元素，相對於其正常位置進行定位
• static 默認值。沒有定位，元素出如今正常的流中
• inherit 規定從父元素繼承 position 屬性的值

1六、display:inline-block 何時不會顯示間隙？(攜程)

• 移除空格
• 使用margin負值
• 使用font-size:0
• letter-spacing
• word-spacing

1七、PNG,GIF,JPG的區別及如何選

• GIF

  • 8位像素，256色
  • 無損壓縮
  • 支持簡單動畫
  • 支持boolean透明
  • 適合簡單動畫

• JPEG

  • 顏色限於256
  • 有損壓縮
  • 可控制壓縮質量
  • 不支持透明
  • 適合照片
• PNG
  • 有PNG8和truecolor PNG
  • PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫
  • 適合圖標、背景、按鈕

1八、行內元素float:left後是否變爲塊級元素？

• 浮動後，行內元素不會成爲塊狀元素，可是能夠設置寬高。行內元素要想變成塊狀元素，佔一行，直接設置display:block;。但若是元素設置了浮動後再設置display:block;那就不會佔一行。

1九、在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

• 偶數字號相對更容易和 web 設計的其餘部分構成比例關係

20、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用

• 單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素
• 用於區分僞類和僞元素

2一、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

• 多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

2二、CSS合併方法

• 避免使用@import引入多個css文件，可使用CSS工具將CSS合併爲一個CSS文件，例如使用Sass\Compass等

2三、CSS不一樣選擇器的權重(CSS層疊的規則)

• ！important規則最重要，大於其它規則
• 行內樣式規則，加1000
• 對於選擇器中給定的各個ID屬性值，加100
• 對於選擇器中給定的各個類屬性、屬性選擇器或者僞類選擇器，加10
• 對於選擇其中給定的各個元素標籤選擇器，加1
• 若是權值同樣，則按照樣式規則的前後順序來應用，順序靠後的覆蓋靠前的規則

2四、列出你所知道能夠改變頁面佈局的屬性

• position、display、float、width、height、margin、padding、top、left、right、`

2五、CSS在性能優化方面的實踐

• css壓縮與合併、Gzip壓縮
• css文件放在head裏、不要用@import
• 儘可能用縮寫、避免用濾鏡、合理使用選擇器

2六、CSS3動畫（簡單動畫的實現，如旋轉等）

• 依靠CSS3中提出的三個屬性：transition、transform、animation
• transition：定義了元素在變化過程當中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定義元素的變化結果，包含rotate、scale、skew、translate。
• animation：動畫定義了動做的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

2七、base64的原理及優缺點

• 優勢能夠加密，減小了http請求
• 缺點是須要消耗CPU進行編解碼

$HTML， HTTP，web綜合問題

• 一、前端須要注意哪些SEO
• 二、<img>的title和alt有什麼區別
• 三、HTTP的幾種請求方法用途
• 四、從瀏覽器地址欄輸入url到顯示頁面的步驟
• 五、如何進行網站性能優化
• 六、HTTP狀態碼及其含義
• 七、語義化的理解
• 八、介紹一下你對瀏覽器內核的理解
• 九、html5有哪些新特性、移除了那些元素？
• 十、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
• 十一、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢
• 十二、請描述一下 cookies，sessionStorage 和 localStorage 的區別
• 1三、iframe有那些缺點？
• 1四、WEB標準以及W3C標準是什麼?
• 1五、xhtml和html有什麼區別?
• 1六、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?
• 1七、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什麼區別？
• 1八、HTML全局屬性(global attribute)有哪些
• 1九、Canvas和SVG有什麼區別？
• 20、HTML5 爲何只須要寫 <!DOCTYPE HTML>？
• 2一、如何在頁面上實現一個圓形的可點擊區域？
• 2二、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題

$CSS部分

• 一、css sprite是什麼,有什麼優缺點
• 二、display: none;與visibility: hidden;的區別
• 三、link與@import的區別
• 四、什麼是FOUC?如何避免
• 五、如何建立塊級格式化上下文(block formatting context),BFC有什麼用
• 七、清除浮動的幾種方式，各自的優缺點
• 八、爲何要初始化CSS樣式?
• 九、css3有哪些新特性
• 十、display有哪些值？說明他們的做用
• 十一、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？
• 十二、CSS優先級算法如何計算？
• 1三、對BFC規範的理解？
• 1四、談談浮動和清除浮動
• 1五、position的值， relative和absolute`定位原點是
• 1六、display:inline-block 何時不會顯示間隙？(攜程)
• 1七、PNG,GIF,JPG的區別及如何選
• 1八、行內元素float:left後是否變爲塊級元素？
• 1九、在網頁中的應該使用奇數仍是偶數的字體？爲何呢？
• 20、::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用
• 2一、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）
• 2二、CSS合併方法
• 2三、CSS不一樣選擇器的權重(CSS層疊的規則)
• 2四、列出你所知道能夠改變頁面佈局的屬性
• 2五、CSS在性能優化方面的實踐
• 2六、CSS3動畫（簡單動畫的實現，如旋轉等）
• 2七、base64的原理及優缺點

$JavaScript

• 一、閉包
• 二、說說你對做用域鏈的理解
• 三、JavaScript原型，原型鏈 ? 有什麼特色？
• 四、請解釋什麼是事件代理
• 五、Javascript如何實現繼承？
• 六、談談This對象的理解
• 七、事件模型
• 八、new操做符具體幹了什麼呢?
• 九、Ajax原理
• 十一、模塊化開發怎麼作？
• 十二、異步加載JS的方式有哪些？
• 1三、那些操做會形成內存泄漏？
• 1四、XML和JSON的區別？
• 1五、談談你對webpack的見解
• 1七、常見web安全及防禦原理
• 1八、用過哪些設計模式？
• 1九、爲何要有同源限制？
• 20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別
• 2一、javascript有哪些方法定義對象
• 2二、常見兼容性問題？
• 2二、說說你對promise的瞭解
• 2三、你以爲jQuery源碼有哪些寫的好的地方
• 2五、Node的應用場景
• 2六、談談你對AMD、CMD的理解
• 2七、那些操做會形成內存泄漏？
• 2八、web開發中會話跟蹤的方法有哪些
• 2九、介紹js的基本數據類型
• 30、介紹js有哪些內置對象？
• 3一、說幾條寫JavaScript的基本規範？
• 3二、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？
• 3三、javascript建立對象的幾種方式？
• 3四、eval是作什麼的？
• 3五、null，undefined 的區別？
• 3六、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
• 3七、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
• 3八、JSON的瞭解？
• 3九、js延遲加載的方式有哪些？
• 40、同步和異步的區別?
• 4一、漸進加強和優雅降級
• 4二、defer和async
• 4三、說說嚴格模式的限制
• 4四、attribute和property的區別是什麼？
• 4五、談談你對ES6的理解
• 4六、ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?
• 4七、什麼是面向對象編程及面向過程編程，它們的異同和優缺點
• 4八、從你本身的理解來看，你是如何理解面向對象編程的，它解決了什麼問題，有什麼做用
• 4九、對web標準、可用性、可訪問性的理解

$編程題

• 一、寫一個通用的事件偵聽器函數
• 二、如何判斷一個對象是否爲數組
• 三、冒泡排序
• 四、快速排序
• 五、編寫一個方法 求一個字符串的字節長度

$其餘

• 一、談談你對重構的理解
• 二、什麼樣的前端代碼是好的
• 三、對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
• 四、你以爲前端工程的價值體如今哪
• 五、平時如何管理你的項目？

人事面

• 面試完你還有什麼問題要問的嗎
• 你有什麼愛好?
• 你最大的優勢和缺點是什麼?
• 你爲何會選擇這個行業，職位?
• 你以爲你適合從事這個崗位嗎?
• 你有什麼職業規劃?
• 你對工資有什麼要求?
• 如何看待前端開發？
• 將來三到五年的規劃是怎樣的？

常問

• 自我介紹
• 你的項目中技術難點是什麼？遇到了什麼問題？你是怎麼解決的？
• 你認爲哪一個項目作得最好？
• 最近在看哪些前端方面的書？
• 平時是如何學習前端開發的？
• 你最有成就感的一件事
• 你是怎麼學習前端的

$HTML， HTTP，web綜合問題

一、前端須要注意哪些SEO

• 合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
• 語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
• 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
• 重要內容不要用js輸出：爬蟲不會執行js獲取內容
• 少用iframe：搜索引擎不會抓取iframe中的內容
• 非裝飾性圖片必須加alt
• 提升網站速度：網站速度是搜索引擎排序的一個重要指標

二、<img>的title和alt有什麼區別

• 一般當鼠標滑動到元素上的時候顯示
• alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

三、HTTP的幾種請求方法用途

• 一、GET方法

  • 發送一個請求來取得服務器上的某一資源

• 二、POST方法

  • 向URL指定的資源提交數據或附加新的數據

• 三、PUT方法

  • 跟POST方法很像，也是想服務器提交數據。可是，它們之間有不一樣。PUT指定了資源在服務器上的位置，而POST沒有

• 四、HEAD方法

  • 只請求頁面的首部

• 五、DELETE方法

  • 刪除服務器上的某資源

• 六、OPTIONS方法

  • 它用於獲取當前URL所支持的方法。若是請求成功，會有一個Allow的頭包含相似「GET,POST」這樣的信息

• 七、TRACE方法

  • TRACE方法被用於激發一個遠程的，應用層的請求消息迴路

• 八、CONNECT方法

  • 把請求鏈接轉換到透明的TCP/IP通道

四、從瀏覽器地址欄輸入url到顯示頁面的步驟

• 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
• 服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

五、如何進行網站性能優化

• content方面

  1. 減小HTTP請求：合併文件、CSS精靈、inline Image
  2. 減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
  3. 減小DOM元素數量

• Server方面

  1. 使用CDN
  2. 配置ETag
  3. 對組件使用Gzip壓縮

• Cookie方面

  1. 減少cookie大小

• css方面

  1. 將樣式表放到頁面頂部
  2. 不使用CSS表達式
  3. 使用<link>不使用@import

• Javascript方面

  1. 將腳本放到頁面底部
  2. 將javascript和css從外部引入
  3. 壓縮javascript和css
  4. 刪除不須要的腳本
  5. 減小DOM訪問

• 圖片方面

  1. 優化圖片：根據實際顏色須要選擇色深、壓縮
  2. 優化css精靈
  3. 不要在HTML中拉伸圖片

六、HTTP狀態碼及其含義

• 1XX：信息狀態碼
  • 100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
• 2XX：成功狀態碼
  • 200 OK 正常返回信息
  • 201 Created 請求成功而且服務器建立了新的資源
  • 202 Accepted 服務器已接受請求，但還沒有處理
• 3XX：重定向
  • 301 Moved Permanently 請求的網頁已永久移動到新位置。
  • 302 Found 臨時性重定向。
  • 303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
  • 304 Not Modified 自從上次請求後，請求的網頁未修改過。
• 4XX：客戶端錯誤
  • 400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
  • 401 Unauthorized 請求未受權。
  • 403 Forbidden 禁止訪問。
  • 404 Not Found 找不到如何與 URI 相匹配的資源。
• 5XX: 服務器錯誤
  • 500 Internal Server Error 最多見的服務器端錯誤。
  • 503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

七、語義化的理解

• 用正確的標籤作正確的事情！
• html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
• 在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
• 搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
• 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解

八、介紹一下你對瀏覽器內核的理解？

• 主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核

• JS引擎則：解析和執行javascript來實現網頁的動態效果
• 最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎

九、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的離線儲存怎麼使用，工做原理能不能解釋一下？

• 在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件

• 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現

• 如何使用：

  • 頁面頭部像下面同樣加入一個manifest的屬性；
  • 在cache.manifest文件的編寫離線存儲的資源
  • 在離線狀態時，操做window.applicationCache進行需求實現

1 2 3 4 5 6 7 8 9

CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html

十一、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢

• 在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。

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

十二、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

• cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）
• cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞
• sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

• 存儲大小：

  • cookie數據大小不能超過4k
  • sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大

• 有期時間：

  • localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
  • sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
  • cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

1三、iframe有那些缺點？

• iframe會阻塞主頁面的Onload事件
• 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
• 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題

1四、WEB標準以及W3C標準是什麼?

• 標籤閉合、標籤小寫、不亂嵌套、使用外鏈css和js、結構行爲表現的分離

1五、xhtml和html有什麼區別?

• 一個是功能上的差異

  • 主要是XHTML可兼容各大瀏覽器、手機以及PDA，而且瀏覽器也能快速正確地編譯網頁

• 另外是書寫習慣的差異

  • XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素

1六、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

• 頁面被加載的時，link會同時被加載，而@imort頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
  import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題
  link方式的樣式的權重 高於@import的權重
• <!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器， 用什麼文檔類型 規範來解析這個文檔
• 嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行
• 在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。 DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現

1七、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什麼區別？

• 行內元素有：a b span img input select strong
• 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行內元素不能夠設置寬高，不獨佔一行
• 塊級元素能夠設置寬高，獨佔一行

1八、HTML全局屬性(global attribute)有哪些

• class:爲元素設置類標識
• data-*: 爲元素增長自定義屬性
• draggable: 設置元素是否可拖拽
• id: 元素id，文檔內惟一
• lang: 元素內容的的語言
• style: 行內css樣式
• title: 元素相關的建議信息

1九、Canvas和SVG有什麼區別？

• svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。canvas輸出的是一整幅畫布
• svg輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會是真和鋸齒。而canvas輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒

20、HTML5 爲何只須要寫 <!DOCTYPE HTML>？

• HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲
• 而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型

2一、如何在頁面上實現一個圓形的可點擊區域？

• svg
• border-radius
• 純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

2二、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題

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

$CSS部分

一、css sprite是什麼,有什麼優缺點

• 概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案。

• 優勢：

  • 減小HTTP請求數，極大地提升頁面加載速度
  • 增長圖片信息重複度，提升壓縮比，減小圖片大小
  • 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現

• 缺點：

  • 圖片合併麻煩
  • 維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

二、display: none;與visibility: hidden;的區別

• 聯繫：它們都能讓元素不可見

• 區別：

  • display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
  • display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
  • 修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
  • 讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

三、link與@import的區別

1. link是HTML方式， @import是CSS方式
2. link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC
3. link能夠經過rel="alternate stylesheet"指定候選樣式
4. 瀏覽器對link支持早於@import，可使用@import對老瀏覽器隱藏樣式
5. @import必須在樣式規則以前，能夠在css文件中引用其餘文件
6. 整體來講：link優於@import

四、什麼是FOUC?如何避免

• Flash Of Unstyled Content：用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染以後再重新顯示文檔，形成頁面閃爍。
• 解決方法：把樣式表放到文檔的head

五、如何建立塊級格式化上下文(block formatting context),BFC有什麼用

• 建立規則：

  • 根元素
  • 浮動元素（float不是none）
  • 絕對定位元素（position取值爲absolute或fixed）
  • display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
  • overflow不是visible的元素

• 做用：

  • 能夠包含浮動元素
  • 不被浮動元素覆蓋
  • 阻止父子元素的margin摺疊

六、display,float,position的關係

• 若是display爲none，那麼position和float都不起做用，這種狀況下元素不產生框
• 不然，若是position值爲absolute或者fixed，框就是絕對定位的，float的計算值爲none，display根據下面的表格進行調整。
• 不然，若是float不是none，框是浮動的，display根據下表進行調整
• 不然，若是元素是根元素，display根據下表進行調整
• 其餘狀況下display的值爲指定值
• 總結起來：絕對定位、浮動、根元素都須要調整display

七、清除浮動的幾種方式，各自的優缺點

• 父級div定義height
• 結尾處加空div標籤clear:both
• 父級div定義僞類:after和zoom
• 父級div定義overflow:hidden
• 父級div也浮動，須要定義寬度
• 結尾處加br標籤clear:both
• 比較好的是第3種方式，好多網站都這麼用

八、爲何要初始化CSS樣式?

• 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
• 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化

九、css3有哪些新特性

• 新增各類css選擇器
• 圓角 border-radius
• 多列布局
• 陰影和反射
• 文字特效text-shadow
• 線性漸變
• 旋轉transform

CSS3新增僞類有那些？

• p:first-of-type 選擇屬於其父元素的首個<p>元素的每一個<p> 元素。
• p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個<p> 元素。
• p:only-of-type 選擇屬於其父元素惟一的 <p>元素的每一個 <p> 元素。
• p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
• p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
• :after 在元素以前添加內容,也能夠用來作清除浮動。
• :before 在元素以後添加內容
• :enabled
• :disabled 控制表單控件的禁用狀態。
• :checked 單選框或複選框被選中

十、display有哪些值？說明他們的做用

• block 象塊類型元素同樣顯示。
• none 缺省值。象行內元素類型同樣顯示。
• inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
• list-item 象塊類型元素同樣顯示，並添加樣式列表標記。
• table 此元素會做爲塊級表格來顯示
• inherit 規定應該從父元素繼承 display 屬性的值

十一、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

• 有兩種， IE盒子模型、W3C盒子模型；
• 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
• 區 別： IE的content部分把 border 和 padding計算了進去;

十二、CSS優先級算法如何計算？

• 優先級就近原則，同權重狀況下樣式定義最近者爲準
• 載入樣式以最後載入的定位爲準
• 優先級爲: !important > id > class > tag important 比 內聯優先級高

1三、對BFC規範的理解？

• 它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用

1四、談談浮動和清除浮動

• 浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上

1五、position的值， relative和absolute定位原點是

• absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位
• fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位
• relative：生成相對定位的元素，相對於其正常位置進行定位
• static 默認值。沒有定位，元素出如今正常的流中
• inherit 規定從父元素繼承 position 屬性的值

1六、display:inline-block 何時不會顯示間隙？(攜程)

• 移除空格
• 使用margin負值
• 使用font-size:0
• letter-spacing
• word-spacing

1七、PNG,GIF,JPG的區別及如何選

• GIF

  • 8位像素，256色
  • 無損壓縮
  • 支持簡單動畫
  • 支持boolean透明
  • 適合簡單動畫

• JPEG

  • 顏色限於256
  • 有損壓縮
  • 可控制壓縮質量
  • 不支持透明
  • 適合照片
• PNG
  • 有PNG8和truecolor PNG
  • PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫
  • 適合圖標、背景、按鈕

1八、行內元素float:left後是否變爲塊級元素？

• 浮動後，行內元素不會成爲塊狀元素，可是能夠設置寬高。行內元素要想變成塊狀元素，佔一行，直接設置display:block;。但若是元素設置了浮動後再設置display:block;那就不會佔一行。

1九、在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

• 偶數字號相對更容易和 web 設計的其餘部分構成比例關係

20、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用

• 單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素
• 用於區分僞類和僞元素

2一、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

• 多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

2二、CSS合併方法

• 避免使用@import引入多個css文件，可使用CSS工具將CSS合併爲一個CSS文件，例如使用Sass\Compass等

2三、CSS不一樣選擇器的權重(CSS層疊的規則)

• ！important規則最重要，大於其它規則
• 行內樣式規則，加1000
• 對於選擇器中給定的各個ID屬性值，加100
• 對於選擇器中給定的各個類屬性、屬性選擇器或者僞類選擇器，加10
• 對於選擇其中給定的各個元素標籤選擇器，加1
• 若是權值同樣，則按照樣式規則的前後順序來應用，順序靠後的覆蓋靠前的規則

2四、列出你所知道能夠改變頁面佈局的屬性

• position、display、float、width、height、margin、padding、top、left、right、`

2五、CSS在性能優化方面的實踐

• css壓縮與合併、Gzip壓縮
• css文件放在head裏、不要用@import
• 儘可能用縮寫、避免用濾鏡、合理使用選擇器

2六、CSS3動畫（簡單動畫的實現，如旋轉等）

• 依靠CSS3中提出的三個屬性：transition、transform、animation
• transition：定義了元素在變化過程當中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定義元素的變化結果，包含rotate、scale、skew、translate。
• animation：動畫定義了動做的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

2七、base64的原理及優缺點

• 優勢能夠加密，減小了http請求
• 缺點是須要消耗CPU進行編解碼