前端基礎（一）

時間 2019-11-17

標籤前端基礎简体版

原文原文鏈接

1.標籤上title與alt屬性的區別是什麼？javascript

title是設置鼠標移動到圖片上時顯示的內容，而alt是用於當圖片沒有正常顯示時出現的提示文字，另外alt還用於在seo中針對圖片的優化說明.css

2.<p>標籤內的文字是什麼顏色的？html

<style>前端

.classA{color:blue !important;}html5

.classB{color:red;}java

</style>node

<body>react

<p class=‘classB classA’ style=‘color:green’>123</p>jquery

</body>web

答：文字是blue藍色，! important ，能夠更改默認的CSS樣式優先級規則，使該條樣式屬性聲明具備最高優先級

3. css單位px,em,rem的區別。

px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的

px的特色：

1. IE沒法調整那些使用px做爲單位的字體大小；

2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；

3. Firefox可以調整px和em，rem，可是96%以上的中國網民使用IE瀏覽器(或內核)。

em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸

EM特色

1. em的值並非固定的；

2. em會繼承父級元素的字體大小。

rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

4.DOMContentLoaded 與 OnLoad事件的區別。

onload會在html,css,js,圖片等資源文件加載完成後執行裏面的代碼，而DOMContentLoaded則只需在html,css,js加載完成後就執行裏面的代碼。

5.「==」和「===」的不一樣。

==用於通常比較，===用於嚴格比較，==在比較的時候能夠轉換數據類型，===嚴格比較，只要類型不匹配就返回flase

6.JavaScript的數據類型都有哪些？

JavaScript中有5種簡單數據類型（也稱爲基本數據類型）：Undefined、Null、Boolean、Number和String。還有1種複雜數據類型——Object，Object本質上是由一組無序的名值對組成的

7. var foo = 「11」 + 2 - 「1」;

foo 輸出的是？

typeof foo輸出的是？

foo輸出的是111,首先字符串11+數字2,執行字符串鏈接爲112,然後減1，是將112執行隱式類型轉換爲數字112後再減1，因此最後結果是111

typeof foo，爲number

8.split() join()的區別在哪？

split是將字符串分割爲數組，而join是將數組中的值鏈接爲字符串

9.數組方法pop() push() unshift() shift()的區別在哪？

pop是刪除數組最後一位

push是在數組最後一位插入一個新元素

unshift是在數組開頭添加一個或更多元素

shift是將數組開頭的元素刪除

10.JavaScript的事件流模型都有哪些？

在各類瀏覽器中存在三種事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.

原始事件模型簡單來講就是用on+事件名的方式綁定的事件,好比onclick,onsubmit等

dom2事件模型就是經過addEventListener綁定的事件，能夠經過event.stopPropagation()來中止事件的傳播,調用preventDefault()來阻止瀏覽器的默認行爲

IE模型也提供了一個event對象封裝了事件的詳細信息,可是IE不把該對象傳入事件處理函數,因爲在任意時刻只會存在一個事件,因此IE把它做爲全局對象window的一個屬性,IE中的事件傳播模式對應於DOM2的第二和第三階段,首先執目標元素的處理函數,而後向上傳播到達document,ie中只能能捕捉鼠標事件,而DOM2中能夠捕捉全部的事件,IE中註冊和刪除事件處理函數的方法也不一樣於DOM2.

事件處理函數的註冊和刪除是經過元素的attachEvent( "eventType","handler") and detachEvent("eventType","handler" ),與dom2不一樣的是eventType有on前綴

11.請按執行順序寫出幾回alert()語句a的值：

function fn1() {

var a = 1;

function fn2() {

alert(a++);

}

return fn2;

}

var f = fn1();

f();

兩次：第1次1，第二次2，var f=fn1()的時候只是調用了fn1這個函數並將fn2做爲返回值返回，並未執行fn2裏面的內容.

在第一個f()的時候就是執行fn2裏面的內容，同時由於fn2是一個閉包函數，調用了fn1中的a，因此a爲1，至於a++，由於a++爲後自加，先引用a,再進行自加操做，因此第一次彈出爲1,而第二個f(),由於a的值已經++過了，因此彈出2.

12.請按要求操做數組。a：

i. 如何刪除數組a中第2個元素（即：「B」）？

var a = [「A」, 「B」, 「C」, 「D」];

a.splice(1,1);

ii. 如何刪除數組a中最後一個元素？

var a = [「A」, 「B」, 「C」, 「D」];

a.pop()

iii. 如何將「NEW」插入數組a的「B」和「C」之間？

var a = [「A」, 「B」, 「C」, 「D」];

a.splice(2,0,」new」);

13.如下技術您用到過哪些？

EasyUI BootStrap jQuery jQuery Mobile zepto ExtJS

angular react backbone redux grunt gulp seats nodeJS

swiper web pack requireJS

略

14.var stringArray = [「Hello」, 「World」],給出您能想到的最好的方法輸出「Hello World」。

stringArray.join(「」);

15.typeof輸出的類型有哪些A.number B.string C.null D.undefined

16.如下關於Array數組對象的說法不正確的是（c）

A.對數組裏數據的排序能夠用sort函數，若是排序效果非預期，能夠給sort函數加一個排序函數的參數。

B.reverse用於對數組數據的倒序排列。

C.向數組的最後位置加一個新元素，能夠用pop方法。

D.unshift方法用於向數組刪除第一個元素。

17.如下哪些是css僞類？（c,d）after和before是僞元素

A.after B.before C.hover D.nth-child

18.javascrip的基本數據類型有哪些？（a,b,e,f,g）

A.number B.string C.object D.array E.null F.undefined G.boolean

19.如下不是html5元素的有哪些？(b,c）

A.footer B.center C.font D.frame

20.下面有關瀏覽器中使用js跨域獲取數據的描述。說法錯誤的是？a

A.域名，端口相同，協議不一樣，屬於相同的域。

B.js可使用jsonp進行跨域。

C.經過修改document.domain來跨子域。

D.使用window.name來進行跨域。

21.下述有關css屬性position的屬性值的描述。語法錯誤的是？b

static：沒有定位，元素出如今正常的流中。
fixed：生成絕對定位的元素，相對於父元素進行定位。
relative：生成相對定位的元素，相對於元素自己正常位置進行定位。
absolute：生成絕對定位的元素，相對於static定位意外的第一個祖先元素。

22.CSS實現隱藏頁面元素的方法有哪些？

display:none; visibility: hidden;opacity:0; position:absolute;left:-10000px;

23.請寫出打印出來的值。

var flag = true;

if (flag) {

var a = 10;

}

function fn() {

var b = 20;

c = 30;

}

fn();

console.log(a);

console.log(c);

console.log(b);

答:10,30,報錯(b是在fn內部定義，全局並無b這個變量)

24.xhtml和html有什麼區別？

xhtml比HTML嚴謹性會高點，而後基本語言都仍是沿用的HTML的標籤，只不過廢除了部分表現層的標籤，同事在標準上要求高了點好比標籤的嚴格嵌套，標籤結束等等

25.每一個html文件裏開頭都有個Doctype。這是表明了什麼意思？

版本聲明

26.問題 strong與em的異同？

語義都是語氣加劇，strong在顯示上是變粗，而em是斜體顯示

27.行內元素有哪些？塊級元素有哪些？

塊狀：* <ol>

* <ul>

* <dl>

* <table>

* <h1>...<h6>

* <p>

* <blockquote>

* <dt>

* <address>

* <caption>

* <div>

內聯（行內）：

* a - 錨點

　　* abbr - 縮寫

　　* acronym - 首字

　　* b - 粗體(不推薦)

　　* bdo - bidi override

　　* big - 大字體

　　* br - 換行

　　* cite - 引用

　　* code - 計算機代碼(在引用源碼的時候須要)

　　* dfn - 定義字段

　　* em - 強調

　　* font - 字體設定(不推薦)

　　* i - 斜體

　　* img - 圖片

　　* input - 輸入框

　　* kbd - 定義鍵盤文本

　　* label - 表格標籤

　　* q - 短引用

　　* s - 中劃線(不推薦)

　　* samp - 定義範例計算機代碼

　　* select - 項目選擇

　　* small - 小字體文本

　　* span - 經常使用內聯容器，定義文本內區塊

　　* strike - 中劃線

　　* strong - 粗體強調

　　* sub - 下標

　　* sup - 上標

　　* textarea - 多行文本輸入框

　　* tt - 電傳文本

　　* u - 下劃線

　　* var - 定義變量

28.css選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？

選擇符：http://www.360doc.com/content/14/0104/22/15643_342679505.shtml

除了這些均可以繼承：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

原則一：繼承不如指定

原則二： #id > .class > 標籤選擇符

原則三：越具體越強大

原則四：標籤#id >#id ; 標籤.class > .class

CSS優先級包含四個級別（標籤內選擇符，ID選擇符，Class選擇符，元素選擇符）以及各級別出現的次數!

根據這四個級別出現的次數計算獲得CSS的優先級。

CSS優先級的計算規則以下：

* 元素標籤中定義的樣式（Style屬性）,加1,0,0,0

* 每一個ID選擇符(如 #id),加0,1,0,0

* 每一個Class選擇符(如 .class)、每一個屬性選擇符(如 [attribute=])、每一個僞類(如 :hover)加0,0,1,0

* 每一個元素選擇符（如p）或僞元素選擇符(如 :firstchild)等，加0,0,0,1

而後，將這四個數字分別累加，就獲得每一個CSS定義的優先級的值，

而後從左到右逐位比較大小，數字大的CSS樣式的優先級就高。

29.HTML5文檔類型和字符集是？

<!DOCTYPE html>

30.HTML5中canvas是什麼？datalist是什麼？

canvas：繪圖標籤，可使用它製做遊戲和圖像處理

datalist:<datalist> 標籤訂義選項列表。與 input 元素配合使用該元素，來定義 input 可能的值

31.請分別使用原生js，jquery獲取標籤信息。（<div id=「div1」>這是一個DIV標籤</div>)

document.getElementById(「div1」).innerHTML;

document.querySelector(「#div1」).innerText;

$(「#div1」).html()

32.求下面兩種狀況下，a和b的值是多少？

題目1：var a = 1; function func1(){a=b=5;} alert(a); alert(b);

題目2：var a = 1; function func1(){var b = 1;a=b=5;}alert(a);alert(b);

題目1答：若是在alert(a)前沒有調用func1的話就1，和報錯，b沒定義,若是調用了func1的話就是5,5

題目2答：若是在alert(a)前沒有調用func1的話就1，和報錯，b沒定義,若是調用了func1的話就是5,和報錯，由於b是在func1中定義的局部變量，在全局獲取不到

34.將數組[「a」, 「b」, 「c」, 「d」]轉化爲字符串」d#c#b#a」;

[‘a’,’b’,’c’,’d’].join(「#」)

35.對應寫出下列輸出值。

alert(typeof(null))

alert(typeof(NaN))

alert(typeof(undefined))

alert(typeof(「undefined」))

alert(NaN == undefined)

alert(NaN == NaN)

答：

alert(typeof(null))//object

alert(typeof(NaN))//number

alert(typeof(undefined))//undefined

alert(typeof("undefined"))//string

alert(NaN == undefined)//false

alert(NaN == NaN)//false

36.獲取enent目標對象的方法（要求兼容性）。

document.onclick = function (ev){

var e = ev||window.event;

}

37.常用的頁面開發工具以及測試工具。

sublime,hbulider,webstorm,測試工具：mocha

38.常用什麼腳本庫，開發或使用過什麼應用或組建。

jquery,zepto

39.請寫出代碼執行結果

var a;

alert(a); ___undefined_________

alert(typeof a); undefined______________

alert(b); 報錯_________________

40.舊版本的IE瀏覽器(如:IE6,IE7)的默認盒模型,W3C定義的合模型,兩者之間有什麼不一樣?

ie的width是包含border和padding的,也稱爲怪異模式，觸發條件是在沒寫版本聲明的時候

而w3c的width就width不含border和padding

41.如下HTML代碼片斷,有幾種方法讓該div在瀏覽器中橫向居中?

第一種：<div style=「width:200px;height:100px; margin:0 auto」></div>

第二種：<div style="width:200px;height:100px; position:absolute; left:50%; margin-left:-100px;」></div>

第三種:<div style="width:200px;height:100px; position:absolute; left:50%; transform:translate(-50%,0)"></div>

42.如下css代碼片斷,在IE6,IE7,IE8,Firefox,Chrome下分別呈現什麼顏色?

.browers{

background-color:#000000;/*黑色*/

background-color:#ff0000\9;/*紅色*/

+background-color:#00ff00;/*綠色*/

_background-color:#0000ff;/*藍色*/

}

在firefox和chrome中顯示的是黑色

在ie8下是紅色(\9是ie8的hack)

在ie7下是綠色（+是ie7的hack）

在ie6下是藍色(_是ie6轉有hack)

43.如何作到讓一個div隱藏可是卻在html流中佔位?

visibility: hidden;和opacity:0;

44.請寫一段json字符串,包含全部的數據類型.

{"a":"string","b":5,"c":[1,2,3,4],"d":{"e":"obj"}}

45.請按執行順序寫出幾回alert()語句a的值:

var a = 10;

function fn() {

alert(a);

var a = 100;

alert(a);

}

fn();

alert(a);

undefined,100,10

46.請按執行順序寫出幾回alert()語句a的值:

function fn1(){

var a = 1;

function fn2(){

alert(a++);

}

fn2();

}

fn1();

1,1

47.下面的輸出是?

<style>

.red{color:red;}

.blue{color:blue;}

</style>

藍色

48.怎樣添加,移除,移動,複製,建立和查找節點?

appendChild,removeChild,replaceChild,cloneNode,createElement,getElementById(ByTagName)

49.用js寫一個正則匹配標籤中是否包含一個class?

var className = "active";

var reg = new RegExp(「\\b"+className+"\\b");

50.閱讀如下代碼回答:hello world 是什麼顏色?

<style>

.classA{color:red;}

.classB{color:yellow;}

</style>

<p class=「classB classA」>hello world</p>

yellow

51.完善如下代碼:

</div>

(1).請用CSS實現」鋁神公司」在div內水平垂直居中?

(2).請用javascript將字體設置爲紅色.

答：(1)

第一種寫法：

margin: 0;

}

div{

text-align: center;

line-height: 50px;

}

第二種寫法：

margin: 0;

}

div{

display: table;

width: 100%;

}

div p{

display: table-cell;

width: 100%;

text-align: center;

vertical-align: middle;

}

第三種寫法：

margin: 0;

}

div{

position: relative;

}

div p{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

(2)

第一種：content.style.color=「red」，高級瀏覽器id不用獲取

第二種: document.getElementById(「content」).style.color=「red」

第三種：document.querySelector(「#content").style.color="red";

52.寫一個函數,將一串字符串中空格替換」.」,如replace(「鋁神歡迎你」)=「鋁.神.歡.迎.你」

第一種：

function re(s){

return s.replace(/\s/g,".");

}

第二種：

function re(s){

return s.split(" ").join(".");

}

53.請用CSS實現4個div的水平排列佔滿一行,要求4個div寬度相同,有10px的padding值.

div{

float: left;

width: 25%;

height: 100px;

background-color: #ccc;

padding: 10px;

box-sizing:border-box;

}

54.對做用域上下文和this的理解,看下列代碼:

var User = {

count:1,

getCount:function(){

return this.count;

}

};

console.log(User.getCount());//??

var func = User.getCount;

console.log(func());//??

1,undefined

55.<!DOCTYPE html>中DOCTYPE有什麼做用，去掉會有什麼影響？

聲明文檔類型，在ie6下若是去掉會進入怪異模式，width包含padding和border

56.HTML行內元素有哪些，塊級元素有哪些？畫出CSS盒模型。

上面有

57.內聯和important哪一個優先級更高？

important更高

58.清除浮動的幾種方式？

第一種：clear:both;

第二種：overflow:hidden;

第三種：父級一塊兒浮動

第四種：父級定義:after僞元素配合zoom解決ie6,7

第五種：父級加position:absolute

59.HTML5存儲類型有哪些？

cookies：存儲大小爲4k

localstorage：以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除,大小爲5m

sessionstorage:HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存

離線緩存（application cache）:本地緩存應用所需的文件

Web SQL:關係數據庫，經過SQL語句訪問

Web SQL 數據庫 API 並非 HTML5 規範的一部分，可是它是一個獨立的規範，引入了一組使用 SQL 操做客戶端數據庫的 APIs。

60.HTTP狀態碼有哪些，分別表明什麼意思？

若是是1開頭的表明請求已被接受，須要繼續處理

若是是2開頭這一類型的狀態碼，表明請求已成功被服務器接收、理解、並接受

若是是3開頭這類狀態碼錶明須要客戶端採起進一步的操做才能完成請求

若是是4開頭這類的狀態碼錶明瞭客戶端看起來可能發生了錯誤，妨礙了服務器的處理

若是是5開頭這類狀態碼錶明瞭服務器在處理請求的過程當中有錯誤或者異常狀態發生，也有多是服務器意識到以當前的軟硬件資源沒法完成對請求的處理

61.CSS3新增僞類選擇器有哪些？

:first-of-type p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

:last-of-type p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

:only-of-type p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

:only-child p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

:nth-child(n) p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

:nth-last-child(n) p:nth-last-child(2) 同上，從最後一個子元素開始計數。

:nth-of-type(n) p:nth-of-type(2) 選擇屬於其父元素第二個 <p> 元素的每一個 <p> 元素。

:nth-last-of-type(n) p:nth-last-of-type(2) 同上，可是從最後一個子元素開始計數。

:last-child p:last-child 選擇屬於其父元素最後一個子元素每一個 <p> 元素。

:root :root 選擇文檔的根元素。

:empty p:empty 選擇沒有子元素的每一個 <p> 元素（包括文本節點）。

:target #news:target 選擇當前活動的 #news 元素。

:enabled input:enabled 選擇每一個啓用的 <input> 元素。

:disabled input:disabled 選擇每一個禁用的 <input> 元素

:checked input:checked 選擇每一個被選中的 <input> 元素。

:not(selector) :not(p) 選擇非 <p> 元素的每一個元素。

::selection ::selection 選擇被用戶選取的元素部分。

62.用CSS3編寫：div旋轉90度，0.5秒後變圓，0.5秒後方法兩倍。

略

63.舉例2種強制類型轉換和1種隱式類型轉換？

強制（parseInt,parseFloat,number）

隱式（== - ===）

64.split() 和join()的區別

split是將字符串切割爲數組，而join是將數組鏈接爲字符串

66.事件綁定和普通事件有什麼區別

區別就是普通事件只支持單個事件，而事件綁定能夠添加多個事件

67.ajax請求的時候get和post方式的區別

第一：ajax.open方法的第二個參數若是是get請求路徑中是帶有參數的，而post就只是路徑

第二：若是是post方式在open方法和send方法之間還要設置請求的頭：ajax.setRequestHeader("Content-Type", 「application/x-www-form-urlencoded");

第三：ajax.send方法若是是get的話參數留空就行，而post須要將參數以序列化的格式傳入

68.call和apply的區別

call和apply都是改變函數內部的this指向，第一個參數也都放的是要改變this對象，區別主要在第二個參數上，call從第二個開始放的是正常的參數，而apply放的是數組

69.事件委託是什麼，使用事件委託有什麼好處？

就是讓別人來作，這個事件原本是加在某些元素上的，然而你卻加到別人身上來作，完成這個事件。

也就是：利用冒泡的原理，把事件加到父級上，觸發執行效果。

好處呢：1，提升性能。

70.如何阻止事件冒泡和默認事件

阻止事件冒泡：ie:window.event.cancelBubble=true;而非ie:e.stopPropagation();

阻止默認事件：ie:window.event.returnValue = false;return false;而非ie:e.preventDefault();

72.跨域的方法

1> document.domain + iframe (只有在主域相同的時候才能使用該方法)

2> window.name + iframe

3>html5中的postMessage()

4>CORS

5>jsonp

6>websocket

跨域支持post請求的：

1>CORS

2>window.postMessage

3>html5的websocket

4>iframe http://www.jianshu.com/p/4773501f1adf

5>flash proxy

73.編寫一個數組去重的方法

Array.prototype.unique3 = function(){

var res = [];

var json = {};

for(var i = 0; i < this.length; i++){

if(!json[this[i]]){

res.push(this[i]);

json[this[i]] = 1;

}

return res;

}

74.Ajax請求Json數據後如何解析

第一種：使用eval

第二種：使用JSON.parse()

第三種：new Function("return" + strJSON)();

75.如何實現多標籤頁之間的通信。

調用 localstorge、cookies 等本地存儲方式

76.簡述什麼是按需加載,而後實現一個圖片按需加載的js。

圖片的按需加載又稱爲延時加載，隨着用戶的滾動條滑動來按需獲取圖片。代碼略，課件中有

77.簡述下閉包,有什麼好處和壞處。

閉包的好處有：

1.緩存

2.面向對象中的對象

3.實現封裝，防止變量跑到外層做用域中，發生命名衝突

4.匿名自執行函數，匿名自執行函數能夠減少內存消耗

閉包的壞處：

1.內存消耗

2.性能差

78.什麼是模塊開發,怎麼實現一個模塊開發。

一個模塊就是實現特定功能的文件，有了模塊，咱們就能夠更方便地使用別人的代碼，想要什麼功能，就加載什麼模塊。

可使用模塊加載器好比sea.js或者require.js

79.實現一個多列的等高佈局。

略

80.zoom是什麼,有什麼用?

Zoom屬性是IE瀏覽器的專有屬性,它能夠設置或檢索對象的縮放比例,好比觸發ie的hasLayout屬性，清除浮動、清除margin的重疊等。

81.怎麼優化一個首屏的加載速度,能夠從js和css等多方便考慮

能夠

1.可使用延遲加載，經過js將第二屏出現的圖片設置問延遲加載，優先加載第一屏的圖片，若是不想本身寫js推薦一個lazyload這個插件

2.儘量壓縮圖片大小，能夠利用在線圖片壓縮工具tinypng

3.將JS放到HTML最後的地方，能最後加載，優先保證基礎信息閱讀。能夠參考雅虎優化原則

83.怎麼實現一個對象的繼承。

Object.prototype.extend = function(obj){

//在函數裏，把obj屬性複製到自身

for(var k in obj){

if(obj.hasOwnProperty(k)){

if(this[k] == undefined){

this[k] = obj[k];

}

var kitty = {color:'yellow',climb:function(){alert('我會爬樹');}};

var tiger = {color:'yellow and black'};

tiger.extend(kitty);

tiger.climb();

84.簡述下平時開發用到的技術棧。

做者：何幻

連接：http://www.zhihu.com/question/33179506/answer/75015013

來源：知乎

著做權歸做者全部，轉載請聯繫做者得到受權。

瀏覽器環境IE6~8 IE9+ Chrome Firefox Safari Opera Edge

HTTP協議URI Cache Session Cookie Request Response

HTMLW3C HTML4.01 HTML5 DOM 語義化

CSSCSS1~3 選擇器盒模型 Flex 媒體檢測響應式渲染引擎

JavaScriptEcmaScript3~5~6 Lexical-scope prototype-chain AJAX js引擎

編輯器Emacs Vim WebStorm Atom Sublime-Text

發佈部署合併壓縮單元測試 Node.js Grunt Gulp Yeoman Phantom JSLint

框架類庫jQuery Zepto UnderScore Backbone Knockout React AngularJS

模塊管理CommonJS Webpack

UI框架BootStrap SemanticUI jQueryUI Foundation

推送技術WebSocket 輪詢長鏈接

跨域技術iframe JSONP CORS

數據可視化D3 Echarts HighCharts Canvas

異步編程Promise $.Deferred Generator

CSS預處理器LESS SASS Stylus

客戶端模板Handlebars Haml Jade Mustache

相關語言CoffeeScript TypeScript Dart WebAssembly

WebApp/PCReact-native ionic

85.css選擇器中，如下排序正確的爲（a）

A、行內樣式>id>class>標籤

B、行內像是>class>id>標籤

C、id>class>行內樣式>標籤

D、標籤>class>id>行內樣式

86.在JavaScript中，如下哪一個變量名是非法的(b)

A、Name B、9name C、Name_a D、Name9

87.請選擇結果爲真的表達式（c）

A、null instance Object B、null === undefined C、null == undefined D、NaN == NaN

88.var a = new Object();

a.value = 1;

b = a;

b.value = 2;

console.log(a.value);

輸出正確的是：（b）

A、1 B、2 C、undefined D、以上都不正確

89. var a = 3;

(function() {

window.a = 2

var a = 1;

})()

console.log(a)

輸出爲：（b）

A、1 B、2 C、3 D、undefined

91.<p>標籤內的文字顏色是什麼？

<style>

.classA{color:blue !important;}

.classB{color:red;}

</style>

<body>

</body>

藍色

100.微信分享怎麼實現

分爲3種：

第一種使用微信默認分享，分享標題爲分享頁的title標籤的內容，若是是分享給朋友，描述中爲網頁連接，分享小圖標爲網頁中第一張符合大小的圖片

第二種是使用微信的jssdk，wx.onMenuShareTimeline分享到朋友圈.和wx.onMenuShareAppMessage分享給朋友。

第三種若是是作微信廣告，部署到騰訊服務器下，可使用WeixinJSBridge調用分享接口

105.ajax出問題時怎麼判斷是前端的問題仍是後臺的

首先測試api是否能正常調用，好比能夠模擬一些數據發送一下，若是是get請求就直接瀏覽器地址欄中拼接上而後看返回結果。在確認api調用正常的狀況下，基本就能夠肯定是屬於前端的問題。

技術方面問題：

108.如何解決在移動端1px的線比實際粗

1.設置爲0.5px

2.判斷若是在retina屏上就使用tranform對它進行縮放

@media screen and (-webkit-min-device-pixel-ratio: 2){

.radius-border:before{

content: "";

pointer-events: none; /* 防止點擊觸發 */

box-sizing: border-box;

position: absolute;

width: 200%;

height: 200%;

left: 0;

top: 0;

border-radius: 8px;

border:1px solid #999;

-webkit-transform(scale(0.5));

-webkit-transform-origin: 0 0;

transform(scale(0.5));

transform-origin: 0 0;

}

109.如何計算移動端rem的值

若是html的font-size爲10px,2rem就是20px.

110.ajax請求到顯示流程

1.建立ajax對象

2.調用open方法

3.調用send方法

4.添加onreadystatechange事件

5.判斷返回的狀態碼是否爲成功的狀態碼

6.經過調用ajax的responesText屬性返回數據

113.向後臺請求數據，有幾種方式

用的最多的就是get和post.

除了這兩個還有：

HEAD

相似於get請求，只不過返回的響應中沒有具體的內容，用於獲取報頭

PUT

傳說當前請求文檔的一個版本

DELETE

發送一個用來刪除指定文檔的請求

TRACE

發送請求的一個副本，以跟蹤其處理進程

OPTIONS

返回全部可用的方法；可檢查服務器支持哪些方法

CONNECT

用於ssl隧道的基於代理的請求

121.如下localStroage的使用方式,哪些是正確的?abe

A.localStorage. setItem(「lastname」, 「smith」);

B.document.getElementById(「result」).innerHTML=loaclStorage.getItem(「lastname」);

C.localStorage.lastname=「Smith」;

D.document.getElementByid(「result」).innerHTML=localStorage.lastname;

E.localStorage.removeItem(「lastname」);

122.如下關於Array數組對象的說法不正確的是?c

A.對數組裏數據的排序能夠用sort函數,若是排序效果非預期,能夠給sort函數加一個排序函數的參數.

B.reverser用於對數組數據的排序排列.

C.向數組的最後位置加一個新元素,能夠用pop方法.

D.unshift方法用於向數組刪除第一個元素.

123.var stringArray=[「Hello」,」World」],給出您能想到的最好的方法輸出」Hello, World」

stringArray.join(「,」);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。