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