也許你需要點實用的-Web前端筆試題

之前發的一篇部落格裡沒有附上答案，現在有空整理了下發出來，希望能幫助到正在找工作的你，還是那句話：技術只有自己真正理解了才是自己的東西，共勉。

Web前端筆試題

Html+css

1.對WE 標籤閉合，標籤小寫，不亂嵌套：提高搜尋機器人的搜尋幾率；使用外聯的

css

和

js，結構行為表現的分離：下載與載入頁面表現的分離：下載頁載入速度更快，內容能被更廣泛的設備所訪問；更少的程式碼和組件：容易維護，改版方便，不需要變動頁面內容，提供列印版本而不需要複製內容，提高網站的易用性。  

2.

Xhtml

和

html

有什麼差別。 Html（超文本標記語言）是標準通用標記語言下的一個應用，也是一種規範，一種標準。

Xhtml

（可擴展超文本標記語言）是一種置標語言，表現方式與html

類似，不過語法上更嚴格，主要不同：1，不過所有元素必須正確嵌套，

2

，所有標記必須閉合，

3

，標籤名，屬性名必須小寫字母，

4

，所有的屬性必須用“” ，所有非標籤一部分的>

都必須以編碼形式，

6

，所有屬性必須有值，7，註釋中不要有 ，圖片必須要有說明文字

 

3.

css的引入方式有哪些？ link

和

@import

的差別是？

四種：內聯，內嵌，外鏈，導入區別：1，linkxhtml

link

提供的一種方式，link除了加載css還可以定義rss，加載，只能定義rss，等負載css 。 2，載入順序差異：link引用的css是同時載入的，@import再被加載。

3，相容性差別，@import是css2.1提出，ie5以上才支持， 4，使用

dom

控制樣式的差別，當用javascript去控制樣式的時候，只能使用能控制的。 5，@import可以在css中再次引入其他樣式表。  

4.

css選擇符有哪些？哪些屬性可以繼承？優先順序如何計算？內聯和important哪個優先級高？ 標籤選擇符，類別選擇符，

id

選擇符

繼承的不如指定的，id>class>TagnameImportant頁面由哪三層構成，分別是什麼？作用是什麼？

結構層：

html由html

或

xhtml

負責創建，運用標籤對網頁內容的含義作出描述。

表示層：

css

由css

負責創建，對如何顯示有關內容做出回答。

行為層：

javascript由javascript負責創建，負責回答應該如何對事件作出反應。  

6.css的基本語句構成是？

選擇器，屬性，屬性值 

7.你曾經在哪些瀏覽器測試過相容？這些瀏覽器的核心分別是什麼？

Ie（ie

內核），火狐（

Gecko

），Google（ ）

 

8 .

標籤上

title與alt屬性是什麼？ Alt是在你的圖片因為某種原因不能加載的時候在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方，title是在鼠標懸停在圖片上的顯示的小提示，滑鼠離開就沒了，絕大數html標籤都支援title

。

 9.寫出幾個IE6 BUG的解1.雙邊

2.3像素問題使用float引起的使用dislpay:inline -3px  

3.超寫字後使用正確順序使用的點擊次數active 4.Ie z-index問題為父級添加position:relative

5.Png 透明使用js

代碼最小

Important 解決'7.select

在

ie6下遮蓋使用ifee

左右的寬度容器（ IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

 

Css reset重置瀏覽器的預設css樣式，瀏覽器種類不同，預設樣式不一樣，透過使用css reset重開發，讓他們統一，css reset

重開發，讓他們統一，。

 11.你如何對網站的文件和資源進行最佳化？期待的解決方案包括:

1，盡可能減少http請求數（檔案合併）2，使用

CDN個，N新增

Expire/Cache-Control

頭4

，啟用

Gzip壓縮55，

，

scrip 放在頁面最下面7

，避免在

css中使用Expressions

8 9，減少

dns

查詢10，壓縮

javascript

和css

13

，設定實體標籤14，使用ajax快取

 12.什麼是語意化的 12.什麼是語意化的html

根據內容的結構化（內容語義化），選擇合式的標籤（代碼語義化），便於開發者的閱讀和寫出更加優雅的代碼的同時讓瀏覽器的爬蟲和機器更好地解析。

 

13.清除浮動有幾種方式？各自的優缺點是？

1,父級定義height（優點：代碼少，簡單易掌握；缺點：只適合固定高度元素，無法高度自適應）

2，結尾處使用空標籤清除浮動：Clear:both（優點：理論上能清除所有標籤的浮動，簡單代碼少瀏覽器支持好；缺點：增加了無意義的標籤）

3，父級定義偽類 after和zoom（優點：瀏覽器支援好；缺點：程式碼多，兩句程式碼結合使用才能讓主流瀏覽器都支援）

4，父級定義overflow: （優點：程式碼少，簡單，瀏覽器支援好；缺點：必須定義width或zoom，同時無法定義height，同時無法定義height，不能使用和搭配使用5

，父級定義

overflow:auto（優點：代碼少，簡單，瀏覽器支援好；缺點：必須定義width或 ，內部元素高度超過父級會出現捲軸）還有，父級一起浮動，父級定義display:table，結尾加

br

的 both等 14.瀏覽器標準模式和怪異模式之間的區別是什麼？ 所謂的標準模式是指，瀏覽器按W3C

標準解析執行程式碼；怪異模式則是使用瀏覽器自己的方式解析執行程式碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的

DTD

聲明直接相關，

DTD

聲明定義了標準文件的類型（標準模式解析）文檔類型，會使瀏覽器使用對應的方式載入網頁並顯示，忽略DTD聲明,將使網頁進入怪異模式(quirks mode)。 標準模式中IE6不認識!important聲明，

IE7

、

. ome等瀏覽器認識；而在在怪異模式中，IE6/7/8都不認識!important聲明 

15.解釋下 CSS sprites，以及你要如何在頁面或網站中使用它

是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

頁icon很多的情況下使用合適。

 

16.討論CSS，條件引用或其他?

🜎ox 9所有的 ie瀏覽器可辨識；

 

區別：優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時確保其根基處於安全地帶。

 

19.CSS字母大寫?

text-transform 值
Lowercase 英文拼音字母全小寫
 
20.CSS選擇器有哪些

派生選擇器（用申明器（用申明）用申

類選擇器（用一個樣式類名申明）
屬性選擇器（用
• DOM的屬性申明，屬於CSS2，IE6不支持，不常用，不知道就算了

  除了前

  3種基本選擇器，還有一些擴充選擇器，包括

• 後代選擇器（利用空格間隔，例如

  p .a{  }）

• 組（利用群逗號間隔，如
p,p,#a{  }）

 

21.

• 超連結造訪後hover樣式就不出現的問題是什麼？如何解決？

• 答案：被點擊訪問過的超連結樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

瀏覽器還有預設的天生

inline-block

元素（擁有內在尺寸，可設定高寬，但不會自動換行），有哪些？

答案：、 、

 23.

px

和

大小時，比較穩定和精確。但是這種方法有一個問題，當使用者在瀏覽器中瀏覽我們製作的網頁頁面時，如果改變了瀏覽器的縮放，這時會使用我們的網頁版面配置被打破。這樣對於那些關心自己網站可用性的使用者來說，就是一個大問題了。因此，這時就提出了使用「em」來定義Web頁面的字體。 EM:

EM就是根據基準來縮放字體的大小。 EM實質是相對值，而非具體的數值。這種技術需要一個參考點，一般都是以另外，em是相對於父元素的屬性而計算的，如果想計算px和em之間的換算，這個網站不錯，輸入數據就可以px和em相互計算。狠擊這裡：px和em換算

Rem:

EM是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小。而Rem是相對於根元素

瀏覽器的兼容性

除了IE6-IE8r，其它的瀏覽器都支援em和rem屬性，px是所有瀏覽器都支援。 因此為了瀏覽器的兼容性，可“px”和“rem”一起使用，用"px"來實現IE6-8下的效果，然後使用“Rem”來實現代瀏覽器的效果。  

24.

透明度

html{

filter:alpha(opacity=50);  /* ie 有效*/:alpha(opacity=50);  /* ; /* 通用，其他瀏覽器 有效*/

 }

 

Javascript

1. What data types does typeof of javascript return?

Object, number, function, boolean, undefined;

2. Examples3 types of casts and 2 implicit type conversions.

force Number(),String(),Boolean(),Object();

Implicit + - == if while for in alert

3.Split()and The difference between join().

Join() function takes a batch of strings and then joins them with a delimiter string to return a string.

Split() The function takes a string and breaks it at the separator, thus returning a batch of strings.

split is to divide a string of characters (according to a certain delimiter) into several elements and store them in an array. And Join is to connect the strings in the array into a long string, which can be roughly considered as the reverse operation of split.

4.What is the difference between event binding and ordinary events?

The ordinary method of adding events does not support adding multiple events. The bottom event will overwrite the top one. However, adding events by event binding (addEventListener) can add multiple events.

5.Array methodpop() push() unshift() shift()

Push()Tail additionpop()Tail deletion

Unshift()head Header addition shift()Header deletion

6. What is the difference between the event flow of Ie and dom?

1.The execution order is different

2.The parameters are different

3.Events added or noton

4.Thispoints to the problem

7 . What are the compatible writing methods between Ie and the standard? ... What is the difference between get

and

post

?

1, when using Get when requesting , the parameters are displayed in URL

, while using Post is to put them in virtual Inside the carrier , will not be displayed.

2. For the get method, the server side uses Request.QueryString to get the value of the variable. For the post method, the server side uses Request.Form to get the submitted data. Parameters of both methods can be obtained using Request. The amount of data transferred by

3 and get is small and cannot be larger than 2KB. post transfers a large amount of data and is generally unrestricted by default. But in theory, it varies from server to server. .

4, get are very low security, post are high security.

5, get requests need to pay attention to caching issues, post requests do not need to worry about this problem.

6, post request must set Content-Type value to application/x-form-www-urlencoded

7, when sending request , Because The parameters of the get request are all in url, so the parameters sent by the send function are null, and the post request is using send When using the method , needs to be given its parameters

9. What is the difference between call and apply?

callmethod:

Syntax: call(thisObj, Object)

Definition: Call a method of an object to replace the current object with another object.

Description: The

call method can be used to call a method instead of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj .

If no thisObj parameter is provided, then the Global object is used as thisObj.

applyMethod:

Syntax: apply(thisObj, [argArray])

Definition: Apply a method of an object to replace the current object with another object.

Description:

If argArray is not a valid array or is not an arguments object, then a TypeError will result.

If neither argArray nor thisObj is provided, then the Global object will be used as thisObj, and no parameters can be passed.

10. How to parse json data during Ajax request?

Use eval parse In view of security considerations, it is more reliable to use parse

11.What are the local objects, built-in objects and host objects of javascript?

Local objects: Objects provided by the ECMAScript implementation independent of the host environment. They include: Object, Function, Array, String, Boolean, Number, Date, RegExp , Error, EvalError, RangeError, ReferenceError , SyntaxError, TypeError URIError can be instantiated.

Built-in objects Global and Math : All objects provided by the ECMASscript implementation independently of the host environment cannot be instantiated.

Host objects: All non-local objects are host objects, that is, objects provided by the host environment implemented by ECMAscript. All BOM and DOM objects are host objects, document, window , etc.

12. What is the difference between Document load and document ready?

There are two events when the page is loaded. One is ready, which indicates that the document structure has been loaded (excluding non-text media files such as images), and the other is onload, which indicates that the page contains images and other files. All elements included are loaded.

13.Write a method to remove duplicates from an array.

1.Create a new array to store the results

2.Create an empty object

3. When the for loops, each time an element is taken out and compared with the object. If the element is not repeated, it is stored in the result array. At the same time, the content of this element is used as an attribute of the object and assigned a value of 1, stored in the object created in step 2.

var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //测试数组
for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) {
    if (o[s[i]]) {
        count++;//重复+1
    } else {
        o[s[i]] = 1;//不重复设置属性
        tmp.push(s[i])//加入新数组
}}
alert(count);alert(tmp)

14.Event delegation.

Use the principle of bubbling to add events to the parent to trigger the execution effect. Using event delegation techniques allows you to avoid adding event listeners to specific each node; instead, event listeners are added to their parent elements. The event listener will analyze the events that bubble up from the child elements and find out which child element the event is from.

15.Scope chain.

When code is executed in an environment, a scope chain of variable objects (scope chain) will be created. The purpose of the scope chain is to ensure ordered access to all variables and functions that the execution environment has access to. The front end of the scope chain is always the variable object of the environment where the currently executing code is located. If this environment is a function, its active object is used as a variable object.

Each function has its own execution environment. When execution flows into a function, the function environment will be pushed into an environment stack. After the function is executed, the stack will pop up its environment and return control to In the previous execution environment, this stack was the scope chain.

When a function is executed, the execution environment of the function (calling object) will be created, and the object will be placed at the beginning of the linked list, then the calling object of the parent function will be linked after it, and finally the global object .

16.Closure.

A closure is a function that can read the internal variables of other functions. Since in the Javascript language, only sub-functions inside the function can read local variables, closures can be simply understood as "functions defined inside a function". So, in essence, closure is a bridge connecting the inside of the function with the outside of the function. Closures can be used in many places. Its greatest uses are two, one is to read the variables inside the function, and the other is to keep the values ​​of these variables in memory.

1) Since closures will cause the variables in the function to be stored in memory, which consumes a lot of memory, closures cannot be abused, otherwise it will cause performance problems on the web page, which may occur in IE Memory leak. The solution is to delete all unused local variables before exiting the function.

2) The closure will change the value of the variable inside the parent function outside the parent function. So, if you use the parent function as an object (object), the closure as its public method (Public Method), and the internal variables as its private properties (private value), you must be careful not to change the value of the internal variable of the parent function casually.

17.How to prevent event bubbling and default events. Same origin policy for

//如果提供了事件对象，则这是一个非IE浏览器 
if  ( e  &&  e.stopPropagation )  { 
　　e.stopPropagation();   //因此它支持W3C的stopPropagation()方法
} else {
　　window.event.cancelBubble  =  true;  //否则，我们需要使用IE的方式来取消事件冒泡  
　　return  false; 
}
//如果提供了事件对象，则这是一个非IE浏览器 
if  ( e  &&  e.preventDefault ) {
　　e.preventDefault();  //阻止默认浏览器动作(W3C)  
}  else  { 
　　window.event.returnValue  =  false;  //IE中阻止函数器默认动作的方式
　　return  false;
}

18.javascript.

A script can only read the properties of windows and documents from the same source, where the same source refers to the combination of host name, protocol and port number

19.JSSort algorithm.

var sort = {
 debug: function(str) {
   if (window.console && window.console.log) {
   console.log(str);
   }
 },
 swap: function(arr, index1, index2) { //数组数据交换
  var temp = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = temp;
 },
 bubbleSort: function(arr) { //冒泡排序
  this.debug("冒泡排序before:" + arr);
  var len = arr.length;
   for (var outer = 0; outer < len - 1; outer++) { //比较的轮数
    for (var inner = 0; inner < len - outer - 1; inner++) { //每轮比较的次数
     if (arr[inner] > arr[inner + 1]) {
      this.swap(arr, inner, inner + 1)
     }
    }
    this.debug("第" + (outer + 1) + "轮后:" + arr);
   }
   this.debug("冒泡排序after:" + arr);
  },
 selectionSort: function(arr) { //选择排序
  this.debug("选择排序before:" + arr);
  var min, len = arr.length;
  for (var outer = 0; outer < len - 1; outer++) {
   min = outer;
   // 比较最小项目和第outer项之后的剩余数组项, 以寻找更小项
   for (var inner = outer + 1; inner < len; inner++) {
    if (arr[inner] < arr[min]) {
     min = inner;
     this.debug("min--" + min);
    }
   }
   this.swap(arr, outer, min);
   this.debug("第" + (outer + 1) + "轮后:" + arr);
  }
  this.debug("选择排序after:" + arr);
 },
 insertionSort: function(arr) { //插入排序
  this.debug("插入排序before:" + arr);
  var temp, inner, len = arr.length;
  for (var outer = 1; outer < len; outer++) {
   temp = arr[outer];
   inner = outer;
   while (inner > 0 && arr[inner - 1] >= temp) {
    arr[inner] = arr[inner - 1];
    --inner;
   }
   arr[inner] = temp;
  }
  this.debug("插入排序after:" + arr);
 },
 shellSort: function(arr) { //希尔排序
  this.debug("希尔排序before:" + arr);
  var gaps = [5, 3, 1],
  temp;
  for (var g = 0; g < gaps.length; g++) {
   for (var i = gaps[g]; i < arr.length; i++) {
    temp = arr[i];
    for (var j = i; j >= gaps[g] && arr[j - gaps[g]] > temp; j -= gaps[g]) {
     arr[j] = arr[j - gaps[g]];
    }
    arr[j] = temp;
   }
  }
  this.debug("希尔排序after:" + arr);
 },
 shellSortDynamic: function(arr) { //动态计算间隔序列的希尔排序
 this.debug("动态计算间隔序列的希尔排序before:" + arr);
 var N = arr.length,
 h = 1;
 while (h < N / 3) {
  h = 3 * h + 1;
 }
 while (h >= 1) {
  for (var i = h; i < N; i++) {
   for (var j = i; j >= h && arr[j] < arr[j - h]; j -= h) {
    this.swap(arr, j, j - h);
   }
  }
  h = (h - 1) / 3;
 }
 this.debug("动态计算间隔序列的希尔排序after:" + arr);
},
mergeSort: function(arr) { //归并排序
 this.debug("归并排序before:" + arr);
 var len = arr.length,
 step = 1,
 left,
 right;
 var mergeArray = function(arr, startLeft, stopLeft, startRight, stopRight) {
  var rightArr = new Array(stopRight - startRight + 1),
  leftArr = new Array(stopLeft - startLeft + 1),
  k = startRight,
  m = 0,
  n = 0;
  for (var i = 0; i < (rightArr.length - 1); ++i) {
   rightArr[i] = arr[k];
   ++k;
  }
  k = startLeft;
  for (var i = 0; i < (leftArr.length - 1); ++i) {
   leftArr[i] = arr[k];
   ++k;
  }
  rightArr[rightArr.length - 1] = Infinity; //哨兵值
  leftArr[leftArr.length - 1] = Infinity; //哨兵值
  for (var k = startLeft; k < stopRight; ++k) {
   if (leftArr[m] <= rightArr[n]) {
    arr[k] = leftArr[m];
    m++;
   } else {
    arr[k] = rightArr[n];
    n++
   }
  }
 }
 if (len < 2) {
  return;
 }
 while (step < len) {
 left = 0;
 right = step;
 while (right + step <= len) {
  mergeArray(arr, left, left + step, right, right + step);
  left = right + step;
  right = left + step;
 }
 if (right < len) {
  mergeArray(arr, left, left + step, right, len);
 }
 step *= 2;
 }
this.debug("归并排序after:" + arr);
},
quickSort: function(arr) { //快速排序
 this.debug("快速排序before:" + arr);
 var _quickSort = function(arr) {
 var len = arr.length,
 lesser = [],
 greater = [],
 pivot,
 meCall = arguments.callee;
 if (len == 0) {
  return [];
 }
 pivot = arr[0];
 for (var i = 1; i < len; i++) {
  if (arr[i] < pivot) {
   lesser.push(arr[i])
  } else {
   greater.push(arr[i])
  }
 }
 return meCall(lesser).concat(pivot, meCall(greater));
}
this.debug("快速排序after:" + _quickSort(arr));
return _quickSort(arr);
}
}
var search = {
linearSearch: function(arr, data) { //线性查找
for (var i = 0; i < arr.length; i++) {
if (arr[i] == data) {
return i;
}
}
return -1;
},
binarySearch: function(arr, data) { //二分查找 适用于已排好序的线性结构
var lowerBound = 0,
upperBound = arr.length - 1,
mid;
while (lowerBound <= upperBound) {
mid = Math.floor((lowerBound + upperBound) / 2);
if (arr[mid] < data) {
lowerBound = mid + 1;
} else if (arr[mid] > data) {
upperBound = mid - 1;
} else {
return mid;
}
    return -1;
}
}
}
var tempArr = [3, 6, 4, 2, 11, 10, 5];
//sort.bubbleSort(tempArr);
//sort.selectionSort(tempArr);
//sort.insertionSort(tempArr);
//sort.shellSort(tempArr);
//sort.shellSortDynamic(tempArr);
//sort.mergeSort(tempArr);
//sort.quickSort(tempArr);

The above is the content of the Web front-end written test questions that you may need, and more For related content, please pay attention to the PHP Chinese website (www.php.cn)!