前端面試題總結：HTML5，JS，CSS3，兼容性。

時間 2019-11-13

標籤端面試題總結 html5 html css3 css 兼容性欄目 HTML5 简体版

原文原文鏈接

一、 請寫出至少20個HTML5標籤css

<article><aside>
<audio><video>
<canvas><datalist><command> <details><embed>
<figcaption><figure>
<footer><header><nav><section>
<hgroup><keygen>
<mark><time><summary>

二、 簡述jpg。Gif。png-8.png-24的區別，分別使用場景html

　　gif、jpg、png格式的圖片在網站製做中的區別前端

　　Gif格式特色:
　　1.透明性,Gif是一種布爾透明類型，既它能夠是全透明，也能夠是全不透明，可是它並無半透明（alpha透明）。
　　2.動畫,Gif這種格式支持動畫。
　　3.無損耗性,Gif是一種無損耗的圖像格式，這也意味着你能夠對gif圖片作任何操做也不會使得圖像質量產生損耗。
　　4.水平掃描,Gif是使用了一種叫做LZW的算法進行壓縮的，當壓縮gif的過程當中，像素是由上到下水平壓縮的，這也意味着同等條件下，橫向的gif圖片比豎向的gif圖片更加小。例如500*10的圖片比10*500的圖片更加小
　　5.間隔漸進顯示,Gif支持可選擇性的間隔漸進顯示
　　由以上特色看出只有256種顏色的gif圖片不適合照片，但它適合對顏色要求不高的圖形（好比說圖標，圖表等），它並非最優的選擇，咱們會在後面中看到png是最優的選擇。
　　Jpeg格式特色:
　　1.透明性,它並不支持透明。
　　2.動畫,它也不支持動畫。
　　3.損耗性,除了一些好比說旋轉（僅僅是90、180、270度旋轉），裁切，從標準類型到先進類型，編輯圖片的原數據以外，全部其它操做對jpeg圖像的處理都會使得它的質量損失。因此咱們在編輯過程通常用png做爲過渡格式。
　　4.隔行漸進顯示,它支持隔行漸進顯示（可是ie瀏覽器並不支持這個屬性，可是ie會在整個圖像信息徹底到達的時候顯示）。
　　由上能夠看出Jpeg是最適web上面的攝影圖片和數字照相機中。
　　Png格式特色:
　　1.類型,Png這種圖片格式包括了許多子類，可是在實踐中大體能夠分爲256色的png和全色的png，你完成能夠用256色的png代替gif，用全色的png代替jpeg
　　2.透明性,Png是徹底支持alpha透明的（透明，半透明，不透明），儘管有兩個怪異的現象在ie6（下面詳細討論）
　　3.動畫,它不支持動畫
　　PNG圖片格式如今包含三種類型：
　　1.PNG8256色PNG的別名
　　2.PNG24全色PNG的別名
　　3.PNG32全色PNG的別名
　　基本上PNG32就是PNG24，可是附帶了全alpha通道。就是說每一個像素上不只存儲了24位真色彩信息還存儲了8位的alpha通道信息，就如同GIF能存儲透明和不透明信息同樣。當咱們把圖片放到不太搭配的背景上的時候，透明PNG圖片的邊緣會顯示得更加平滑。
　　固然，我也知道你的想法，「可是Photoshop也能生成帶透明通道的PNG圖片！」我也知道，它只是表面上這麼說是PNG24，讓我也產生困惑了。
　　做爲一個傷感的Fireworks倡導者，我只使用PNG32支持附帶alpha通道的真色彩圖片。無論怎樣，若是你習慣使用Photoshop，你就應該知道，Photoshop在「存儲爲WEB格式」中只提供PNG8和PNG24兩種PNG格式。
　　我敢確定你常常會勾選「支持透明」選項，以得到帶有透明度的PNG圖片，可是這樣你就獲取了一張PNG32圖片。——Photoshop只是以爲把PNG32這個名稱給隱藏掉了。奇怪吧？……
　　對png8的誤解
　　Png8的在ie中的怪異表現：
　　半透明的png8在ie6如下的瀏覽器顯示爲全透明。
　　Alpha透明的全色PNG（png32）在ie6中會出現背景顏色（一般是灰色）。
　　由上面能夠總結：
　　（a）全透明的png8能夠在任一瀏覽器正常顯示（就像gif同樣）。半透明的png8在除了ie6及其如下的瀏覽器下錯誤的顯示成全透明，其它瀏覽器都能正常顯示半透明。這個bug並不須要特殊對待，由於在不支持半透明的瀏覽器下只是顯示爲全透明，對用戶體驗影響不大，它反而是透明gif的增強版。
　　（b）第二個bug沒有什麼好的方法解決，只能經過影響性能的方法AlphaImageLoader與須要加特殊標籤（VML）。
　　所以得出結論就是：請使用PNG8。
　　Png8的軟件問題：
　　Photoshop只能導出布爾透明的PNG8。
　　Fireworks既能導出布爾透明的PNG8，也能導出alpha透明的PNG8。html5

三、 可以設置文本加粗的樣式屬性是什麼java

字體加粗（font-weight）　　webpack

功能：用於設置字體筆劃的粗細。　　es6

屬性值：正常度 - normal 　　web

相對度 - bold, bolder, light, lighter 　　ajax

漸變度 - 100, 200, 300, 400(至關於normal), 500, 600, 700(至關於 bold、 lighter、 bolder、以及數值100－900。　　算法

語法爲：h1 {font-weight: 屬性值}

四、 編寫一個佈局，頁面寬度自適應，最小寬度300px，左邊定寬35%，右邊定寬65%

 1 <div class="container">
 2 <div class="left"></div>
 3 <div class="right"></div>
 4 </div>
 5 
 6 <style>
 7 .container {
 8     height: 600px;
 9     _width: 300px;
10     min-width: 300px;
11 }
12 .left {
13     width: 35%;
14     height: 100%;
15     background: #ff0;
16     float: left;
17 }
18 .right {
19     overflow: hidden;
20     width: 65%;
21     height: 100%;
22     background: #0f0;
23 }
24 </style>

五、 談談對html5的瞭解

（1）、良好的移動性，以移動設備爲主。

（2）、響應式設計，以適應自動變化的屏幕尺寸

（3）、支持離線緩存技術，webStorage本地緩存

（4）、新增canvas，video，audio等新標籤元素。新特殊內容元素：article，footer，header，nav，section等，新的表單控件：calendar，date，time，email，url，search。

（5）、地理定位...

（6）、新增webSocket/webWork技術

六、 Js面向對象的幾種方式

（1）、對象的字面量 var obj = {}

（2）、建立實例對象 var obj = new Object();

（3）、構造函數模式 function fn(){} , new fn();

（4）、工廠模式：用一個函數，經過傳遞參數返回對象。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);

（5）、原型模式：function clock(hour){} fn.prototype.hour = 0; new clock();

首先，每一個函數都有一個prototype(原型)屬性，這個指針指向的就是clock.prototype對象。而這個原型對象在默認的時候有一個屬性constructor，指向clock，這個屬性可讀可寫。而當咱們在實例化一個對象的時候，實例newClock除了具備構造函數定義的屬性和方法外（注意，只是構造函數中的）,還有一個指向構造函數的原型的指針，ECMAScript管他叫[[prototype]]，這樣實例化對象的時候，原型對象的方法並無在某個具體的實例中，由於原型沒有被實例。

七、前端頁面有哪三層構成，分別是什麼，做用是什麼

Css: 層疊樣式表 ,表現, 由css負責建立。css對「如何顯示有關內容」的問題作出了回答。

Html:超文本標記語言 ,結構,由 HTML 或 xhtml之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」

Js: 客戶端腳本語言 ,行爲, 內容應該如何對事件作出反應。

八、 如何對網站的文件和資源進行優化

（1）、文件合併（目的是減小http請求）

（2）、文件壓縮（目的是直接減小文件下載的體積）

（3）、使用cdn託管資源

（4）、使用緩存

（5）、gizp壓縮你的js和css文件

（6）、meta標籤優化（title,description,keywords）,heading標籤的優化,alt優化

（7）、反向連接，網站外連接優化。

九、 JQuery中有幾種類型的選擇器

（1）、層疊選擇器$(「form input」)
（2）、基本過濾選擇器:first:last:not()
（3）、內容過濾選擇器:odd:eq():animated
（4）、可視化過濾選擇器:hidden:visible
（5）、屬性過濾選擇器：div[id]
（6）、子元素過濾選擇器:first-child:last-child:only:child
（7）、表單元素過濾選擇器:enabled:disabled:checked:selected
（8）、id,類，類型,元素...

十、說幾條javasprit的基本規範

（1）、不要在同一行聲明多個變量。
（2）、請使用 ===/!==來比較true/false或者數值
（3）、使用對象字面量替代new Array這種形式
（4）、不要使用全局函數。
（5）、Switch語句必須帶有default分支
（6）、函數不該該有時候有返回值，有時候沒有返回值。
（7）、For循環必須使用大括號
（8）、If語句必須使用大括號
（9）、for-in循環中的變量應該使用var關鍵字明確限定做用域，從而避免做用域污染。

十一、 Html5中本地存儲概念是什麼，有什麼優勢

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：

cookie數據大小不能超過4k。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。

cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

十二、什麼是ajax和json，它們的優缺點

ajax的全稱：Asynchronous Javascript And XML。

異步傳輸+js+xml。

所謂異步，在這裏簡單地解釋就是：向服務器發送請求的時候，咱們沒必要等待結果，而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗。

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

(3)設置響應HTTP請求狀態變化的函數

(4)發送HTTP請求

(5)獲取異步調用返回的數據

(6)使用JavaScript和DOM實現局部刷新

1三、 你知道那些針對jQuery的優化方法

基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。

好比：var str=$("a").attr("href");

for (var i = size; i < arr.length; i++) {}

for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快：

for (var i = size, length = arr.length; i < length; i++) {}

1四、編寫一個方法求一個字符串的字節長度，假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

 1 function num(str) {
 2     var num1 = str.length;
 3     var num2 = 0;
 4     for (var i = 0; i < str.length; i++) {
 5         if (str.charCodeAt(i) >= 10000) {
 6             num2++;
 7         }
 8     }
 9     console.log(num1 + num2)
10 }

1五、簡述ECMASCRIPT6的新特性

1.增長塊做用域

2.增長let const

3.解構賦值

4.函數參數擴展（函數參數可使用默認值、不定參數以及拓展參數）

5.增長class類的支持

6.增長箭頭函數

7.增長模塊和模塊加載（ES6中開始支持原生模塊化啦）

8.math, number, string, array, object增長新的API

1六、Apply和call方法的異同

相同點:兩個方法產生的做用是徹底同樣的，第一個參數都是對象；

不一樣點: