1、請用HTML5標簽寫一個符合語義化的頁面，頁面中有導航欄、頁眉、頁腳、文字內容以及圖片內容；
一些新增的結構標記
◎section：這可以是書中的一章或一節，實際上可以是在HTML4中有自己的標題的任何東西
◎header：頁面上顯示的頁眉；與head元素不一樣
◎footer：頁腳；可以顯示電子郵件中的簽名
◎nav：指向其他頁面的一組鏈接
◎article：blog、雜志、文章匯編等中的一篇文章
HTML5的文檔結構
<header>...</header>
<nav>...</nav>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
HTML5的圖片結構
<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</figure>
2、寫一個input輸入框的樣式，要求如下：
1）背景圖片為bg.jpg，圖片不重復顯示，左對齊，背景顏色為藍色；
2）寬200像素，高50像素；
3）邊框為5像素綠色的虛線；
4）邊框圓角半徑3像素；
5）邊框陰影效果，模糊距離3像素，垂直偏移2像素，水平偏移1像素；
6）輸入字符上下居中，左對齊；
7）清楚兩邊浮動；
8）水平垂直居中於視口。
1）
多樣式標記語法：background: background-color || background-image || background-repeat || background-attachment || background-position
Body{background:#FFF url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 fixed }
|
2）
3）
border-left 設置左邊框
border-right 設置右邊框
border-top 設置上邊框
border-bottom 設置下邊框
四邊相同邊框border簡寫
#divcss5{border:1px solid #00F}
邊框樣式值如下：
none : 無邊框。與任何指定的border-width值無關
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為點線。否則為實線（常用）
dashed : 在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為虛線。否則為實線（常用）
solid : 實線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等於指定的border-width值
groove : 根據border-color的值畫3D凹槽
ridge : 根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3D凹邊
outset : 根據border-color的值畫3D凸邊
4)
5)
官方用語： box-shadow:1px 2px 3px 4px #ccc inset；
來分別看一下以上六個值的含義： 1px 從原點開始，沿x軸正方向的長度（倘若為負值，為沿x軸負方向的長度）；
2px 從原點開始，沿y軸正方向的長度；（倘若為負值，為沿y軸負方向的長度）；
3px 陰影的模糊度，只允許為正值；
4px 陰影擴展半徑；
#ccc 陰影顏色；
inset 設置為內陰影（如果不寫這個值，默認為外陰影）；
鋪墊完畢，說正事——給四條邊分別加陰影。
如果打算添加外部陰影，那么在div內部是不會顯示陰影的。看起來好像是廢話，來仔細分析一下。
將div放在直角坐標系中，則div上邊與x軸重合，左邊與y軸重合，沒錯吧。所以，對於上面一條邊，沿y軸正方向的陰影不會顯示，因為沿y軸正方向的長度已經進入到了div內部。同樣的，對於左側邊框，沿x軸正方向的長度也進入到了div內部，陰影不會顯示。
對於右側邊框，則沿x軸負方向的長度不顯示（不要糾結於原點位置，只考慮坐標方向。可以看做右邊與y軸重合，方便理解）；對於下方邊框（看做下邊與x軸重合），沿y軸負方向的長度進入div內部，不顯示。
box-shadow: 0px -10px 0px 0px #ff0000, /*上邊陰影 紅色*/
-10px 0px 0px 0px #3bee17, /*左邊陰影 綠色*/
10px 0px 0px 0px #2279ee, /*右邊陰影 藍色*/
0px 10px 0px 0px #eede15; /*下邊陰影 黃色*/
6)
左對齊：text-align:left;
7）
一般浮動是什么情況呢？一般是一個盒子里使用了CSS float浮動屬性，導致父級對象盒子不能被撐開，這樣CSS float浮動就產生了。
浮動會導致父級元素的背景、邊框無法撐開，父子間的margin、padding無法顯示
幾點用於清除浮動
a、對父級設置適合CSS高度
b、clear:both清除浮動
為了統一樣式，我們新建一個樣式選擇器CSS命名為“.clear”，並且對應選擇器樣式為“clear:both”，然后我們在父級“</div>”結束前加此div引入“class="clear"”樣式。這樣即可清除浮動。
c、父級div定義 overflow:hidden
3、CSS選擇器的優先級如何定義？如何做選擇器優化？
標簽選擇器給定1表示其優先級量，類選擇器給定10，ID選擇器給定100。
- 避免使用通配規則 如 *{} ,頁面復雜的話，計算次數會很多，只對需要用到的元素進行選擇
- 盡量少的直接去對標簽進行選擇，而是用class 如：#navs li{}, 更優的方式是給li加上nav_item的類名，及.nav_item{}
- 不要去用標簽限定ID或者類選擇符 如：div#main-container,應該簡化為#main-container
- 盡量少的去使用后代選擇器，降低選擇器的權重值 后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每一個標簽元素
- 要知道繼承這個東西， 了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復編寫規則
4、已知數組如下，請用JS完成以下要求，需寫出詳細實現步驟
1）從大到小排序testArray各項；
2）在testArray數組首尾分別添加數字11,99；
3）在testArray數組元素61后插入62,63,64；
4）將testArray數組反轉輸出算法，第一位放在最后一位，以此類推；
5）將testArray去重算法
JavaScript concat 方法：連接兩個或多個數組
JavaScript join 方法：把數組轉換為一個字符串
JavaScript Array toString 方法：把數組轉換為字符串
JavaScript push 方法：向數組的末尾添加一個或多個元素
JavaScript unshift 方法：向數組的開頭添加一個或多個元素
JavaScript pop 方法：刪除並返回數組的最后一個元素
JavaScript shift 方法：刪除並返回數組的第一個元素
JavaScript splice 方法：插入、刪除或替換數組的元素
JavaScript Array slice 方法：從數組中返回選定的元素
JavaScript Array reverse 方法：顛倒數組中元素的順序
JavaScript Array sort 方法：對數組的元素進行排序
http://www.5idev.com/p-javascript_array_splice.shtml
1）
var arrSimple2=new Array(1,8,7,6);
arrSimple2.sort(function(a,b){
return b-a});
解釋：a,b表示數組中的任意兩個元素，若return > 0 b前a后；reutrn < 0 a前b后；a=b時存在瀏覽器兼容
簡化一下：a-b輸出從小到大排序，b-a輸出從大到小排序。
http://www.cnblogs.com/longze/archive/2012/11/27/2791230.html
2）
3)
arrSimple2.splice(1,2,'tom')
4)
5)
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;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
5、使用ajax（可使用jQuery框架，若使用其他框架請注明）寫一個跨域異步獲取JSON數據方案；說說能否使用JS進行跨域異步post數據
var url = "http://www.37.com";
$.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded", dataType: "html", url: "http://www.*****.com", //這里是網址 success:function(data){alert(data);}, timeout:30000, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });
6、請編寫子類Child，通過原型鏈方法和構造方法實現People父類繼承，並調用say()說出自己的名字和年齡。
function People(name,age){
this.name = name;
this.age = age;
this.say = function(){
alert(this.name + "年齡:" + this.age);
}
}
http://www.cnblogs.com/humin/p/4556820.html // 定義一個動物類 function Animal (name) { // 屬性 this.name = name || 'Animal'; // 實例方法 this.sleep = function(){ console.log(this.name + '正在睡覺！'); } } // 原型方法 Animal.prototype.eat = function(food) { console.log(this.name + '正在吃：' + food); }; 原型方法繼承： function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.eat('fish')); console.log(cat.sleep()); console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //true 使用構造方法繼承： function Cat(name){ Animal.call(this); this.name = name || 'Tom'; } // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // false console.log(cat instanceof Cat); // true
7、正則表達式考查題
1）格式為：2016-12-12 類型的日期格式校驗正則表達式；
2）字符串解析：將格式諸如“[img:(src...)]”的字符串解析替換為“<a href = "src..."><img src = 'src...'></a>”;
var content = 'helloworld,[img:(http://www.37.com/helloworld.jpg)]';
//解析后輸出：
'helloworld,<a href = "http://www.37.com/hello.jpg"><img src = 'http://www.37.com/helloworld.jpg'></a>';
var str = '9999-12-23'; if(str.match(/^((\d\d\d\d))-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/)) { alert('是日期'); } else { alert('不是日期'); }
8、請描述zepto touch模塊的移動事件？click與tap的區別？tap底層是對哪些事件的封裝？
http://www.tuicool.com/articles/fURBr2v
如果手指移動屏幕超過30像素，則觸發相應的滑動事件，swipeLeft, swipeRight, swipeUp, swipeDown
一、click 和 tap 比較
兩者都會在點擊時觸發，但是在手機WEB端，click會有 200~300 ms，所以請用tap代替click作為點擊事件。
singleTap和doubleTap 分別代表單次點擊和雙次點擊。
二、關於tap的點透處理
在使用zepto框架的tap來移動設備瀏覽器內的點擊事件，來規避click事件的延遲響應時，有可能出現點透的情況，即點擊會觸發非當前層的點擊事件。
tap 事件相當於 pc 瀏覽器中的 click 效果，雖然在觸屏設備上 click 事件仍然可用，但是在很多設備上，click 會存在一些延遲，如果想要快速響應的 “click” 事件，需要借助 touch 事件來實現。
9、算法題：請用JS實現冒泡排序算法
function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len; i++) { for (var j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j+1]) { //相鄰元素兩兩對比 var temp = arr[j+1]; //元素交換 arr[j+1] = arr[j]; arr[j] = temp; } } } return arr; }
10、前端如何對web進行性能上的優化？有什么檢測工具？
http://www.cnblogs.com/mofish/archive/2010/10/12/1849041.html
一、提倡前端開發工程師在書寫xhtml的時候做到結構語義化。
二、css，js文件數量及大小的優化（外聯式；減少HTTP請求數）
三、背景圖片數量及大小的優化（這里建議使用PNG8格式的圖片結合css sprite，同樣的圖片，PNG8格式會相對來比GIF小）
四、內容圖片的大小的優化
工具：http://blog.csdn.net/five3/article/details/7686376
11、說說你所知道的提高前端開發效率的工具或方法？
排序：http://www.jianshu.com/p/1b4068ccd505
http://www.divcss5.com/rumen/r120.shtml