今天是19号，明天就要笔试了，紧张w，看了看去年题似乎没有算法类编程都是问答题。
三七互娱现场笔试题
Web语义化
三七互娱笔试题
CSS选择器的优化
三七互娱2018校招前端笔试
HTML
语义化页面
- 请用HTML5标签写一个符合语义化的页面，页面中有导航栏、页眉、页脚、文字内容以及图片内容；
HTML5教程
HTML5部分新增标签：
<header> 页眉
<article> 放置一篇完整的文章
<aside> 侧边栏 可防止关联信息 广告等
<nav> 导航链接
<section> 放置一个章节的内容
<footer>页脚
<main>表示body的主要内容（只能用一次）
<figure> figure标签规定独立的流内容（图 像、图表、照片、代码等等）。figure 元素的内容应该与文章相关，装饰 或广告等使用的图片不采用figure元素封装。
<body>
<header>我是页眉</header>
<nav>侧边栏</nav>
<main>
<article>
<section>
<p>我是第一段文字</p>
<p>我是第二段文字</p>
<p>我是第三段文字</p>
<figure>
<figcaption>我的头像</figcaption>
<img src="https://avatar.csdn.net/6/9/7/3_qq_33291740.jpg"/>
</figure>
</section>
</article>
</main>
<aside> 这是右边区 </aside>
<footer> 这是页脚 </footer>
</body>CSS
写一个input输入框的样式
1 ) 背景图片为bg.jpg，图片不重复显示，左对齐，背景颜色为蓝色； 2 ) 宽200像素，高50像素； 3 ) 边框为5像素绿色的虚线； 4 ) 边框圆角半径3像素； 5 ) 边框阴影效果，模糊距离3像素，垂直偏移2像素，水平偏移1像素； 6 ) 输入字符上下居中，左对齐； 7 ) 清楚两边浮动； 8 ) 水平垂直居中于视口。 1)  2 ) 官方用语： box-shadow:1px 2px 3px 4px #ccc inset；
1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）；
2px 从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）；
3px 阴影的模糊度，只允许为正值；
4px 阴影扩展半径；
ccc 阴影颜色；
inset 设置为内阴影（如果不写这个值，默认为外阴影）；
<!DOCTYPE html>
<html>
<head>
<title>一个输入框</title>
<style type="text/css">
div.container{
width: 80%;
position: absolute;
height: 80%;
}
input{
background: url('https://avatar.csdn.net/6/9/7/3_qq_33291740.jpg');
background-repeat: no-repeat;
background-position: left center;
background-color: blue;
width: 200px;
height: 50px;
border: 5px green dashed;
border-radius: 3px;
box-shadow: 1px 2px 3px;
line-height: 50px;
text-align: left;
margin: auto auto;
position: absolute;
top:50%;
left:50%;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<input type="text" >
<div class="clear"></div>
</div>
</body>
</html>CSS选择器的优先级如何定义？如何做选择器优化？
标签选择器给定1表示其优先级量，类选择器给定10，ID选择器给定100。 CSS优化原则 避免使用通配规则 如 *{} ,页面复杂的话，计算次数会很多，只对需要用到的元素进行选择 尽量少的直接去对标签进行选择，而是用class 如：#navs li{}, 更优的方式是给li加上nav_item的类名，及.nav_item{} 不要去用标签限定ID或者类选择符 如：div#main-container,应该简化为#main-container 尽量少的去使用后代选择器，降低选择器的权重值 后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素 要知道继承这个东西， 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复编写规则JavaScript
正则表达式
格式为： 2016-12-12类型的日期格式校验正则表达式；
字符串解析：将格式诸如“[img:(src…)]”的字符串解析替换为
“<a href="src..."><img src='src...'></a>”;
JavaScript的继承
请编写子类Child，通过原型链方法和构造方法实现People父类继承，并调用say()说出自己的名字和年龄。
链式调用
- 实现一个Hero类，实现对应输入输出
Hero("John");
"Hi,my name is John"
Hero("John").kill(10);
"Hi,my name is john"
"Kill 10 bugs"
Hero("John").sleep(10).kill(1);
"Hi,my name is john"
//等待10分钟
"Kill 10 bugs"冒泡排序
// 冒泡排序
(function(testArray){
for(var i=0;i<testArray.length-1;i++){
for(var j=i+1;j<testArray.length;j++){
if(testArray[i] > testArray[j]){
var temp = testArray[i] ;
testArray[i] = testArray[j];
testArray[j] = temp;
}
}
}
})(testArray);
console.log(testArray);已知数组如下，请用JS完成以下要求，需写出详细实现步骤
1）从大到小排序testArray各项；
2）在testArray数组首尾分别添加数字11,99；
3）在testArray数组元素61后插入62,63,64；
4）将testArray数组反转输出算法，第一位放在最后一位，以此类推；
5）将testArray去重算法
var testArray=[10,22,8,33,61,90,62];
console.log(testArray);
testArray.unshift(11);
testArray.push(99);
console.log(testArray);
testArray.splice(6,0,62,63,64);
console.log(testArray);
testArray.reverse();
console.log(testArray);
(function(testArray){
for(var i=0;i<testArray.length-1;i++){
for(var j=i+1;j<testArray.length;j++){
if(testArray[i]==testArray[j]){
testArray.splice(j,1);
}
}
}
})(testArray);
console.log(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 方法：对数组的元素进行排序
AJAX
- 使用ajax（可使用jQuery框架，若使用其他框架请注明）写一个跨域异步获取json数据方案；说说能否使用javascript进行跨域异步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);
}
});