web前端面试题：实习岗位
1.什么是W3C标准，HTML4.0, DHTML,HTML5 各有什么区别？
2.什么是盒子模型，css的盒子模型有哪几种，说说他们有什么区别？
box-sizing:border-box;/* 怪异盒子模型 */设置内边距和border不会撑开盒子
box-sizing:content-box;/* 普通盒子模型 */
3.css中引入样式的方法有哪几种？
link 外部样式表
行内样式style="width:100px"
/*头部*/
4.说说并比较css中各种选择器的优先级
!important > #id > .class > div
div span em{} 大于 div em{}
行内 style="width:100px" 大于 #id
(> div :nth-child + ~)
5.css3中新增了哪些高级属性
transform
transition
box-shadow
border-radius
display:flex
@media only screen and (max-width:xxxx){
}
animation
perspective
perspective-origin
transform-origin
text-overflow
word-break:break-all
word-wrap:break-word;
outline:
background-image:-webkit-linear-gradient(left top,red,blue);
background-size:cover;
(
-webkit-filter:滤镜
-webkit-text-stroke:文字描边
)
渐变色 动画 背景图平铺方式 文字溢出处理方式 弹性布局 媒体查询 旋转中心点
6.html5中新增了哪些标签，废弃了哪些不用的标签
新增： input:email
tel
search
color
date
month
time
range
video
audio
head
section
sidebar
article
foot
menu
nav
废弃：basefont
big
center
font
s
strike
tt
u
frame
frameset
noframes
7.javascript中的基本数据类型有哪些？
数组 对象 数字类型 字符串 布尔值 undefined null
8.如何让一个未知高度的div在页面水平垂直居中
8.1.利用transform:translate向上和向左缩进50%
~
父元素相对定位，子元素绝对定位top:50%,left:50%,
transform:translate(-50%,-50%)
8.2设置绝对定位，四个方向设置为0，加个margin：auto
宽高设置为50%,绝对定位四个方向都设置为0，最后margin:auto;
.box4 span{
width: 50%;
height: 50%;
background: #eee;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
word-break: break-all;
}
8.3设置绝对定位，子元素的top和left设置为50%；margin-left/top:负盒子的一半大小；
9.什么是javascript闭包
function a(){
return function b(){
return 'web';
}
}
var name = a()();
alert(name);
10.undefined和null有什么区别
undefined 未定义
null 定义过 但是没有给值
11.window.onload 和 $(document).ready()有什么区别
一个页面可以有多个 $(document).ready() 方法 多个方法都可以执行
一个页面只能有一个window.onload = function(){}
假如写了多个window.onload = function(){}
那么后面的会覆盖掉前面的！
12.css里面清除浮动有哪些方式
使用CSS的overflow属性；
使用伪元素清除浮动
.clearfix:after{
content:”“;
width:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1; /兼容ie/
}
使用双伪类元素清除
.clearfix:after,clearfix:before{
content:”“;
display:table;
clear:both;
}
.clearfix{
zoom:1;/兼容ie/
}
13.截取字符串用什么方法
substring(3,6) //从索引3的位置开始截取 截取6个长度 也就是截取到索引是9的位置
substr(3,6) //从索引3的位置开始截取 截取到索引是6的位置
14.文本框中文字改变的时候 触发的是什么事件
oninput(html5新增事件)
onchange
15.html中有哪些标签是单标签？ （没有开始标签和结束标签，只有一个标签）
hr,br,input,img
meta link
16.ajax中get和post请求有什么不一样？
1.安全方面考虑 get会将数据传在URL上，GET方式请求的数据会被浏览器缓存起来，不安全
2.传输数据大小方面考虑 get的字节限制在1024，post 限制在4kb
17.删除数据的末尾最后一个元素，用什么方法
shift 数组开始删除
unshift 数组开始追加
pop 数组末尾删除
push 数组末尾追加
18.下拉菜单中，用户更改表单元素select的值时，就会触发什么事件？
onchange
19.图片的alt和title属性有什么区别
alt：图片路径找不到时替换的文字
title:鼠标放上到图片时显示的文字,全局属性，任何标签都可以加
20.超链接在新窗口打开应该添加什么属性？
target=”_blank”
target=”_self”
display:block(不要跟我弄混淆了)
21.javascript中的全局对象有哪些
new Date //日期
new Object //对象
new String //字符串
new Array //数组
new RegExp //正则表达式
22.键盘上的哪一个按键没有对应的keyCode值
prt sc sysrq 截屏键
23.让一个元素隐藏，有哪些css属性可以做到？
display:none
visibility:hidden
background-color:rgba(0,0,0,0) transparent
z-index:-1;
left:-200%;
24.display:none; 和visibility:hidden；有什么区别
display:none 隐藏不保留位置
visibility：hidden 隐藏保留位置
25.页面乱码了如何解决？
26.页面加载比较慢，请问你有哪些方法优化让页面体验流畅？
代码方面：
1.将CSS的代码压缩成一行，并且减少注释
2.index.js home.js reset.js public.js jquery.min.js
将多个js合并，并且压缩打包后再引入页面！
3.js里面尽量少操作DOM元素。
4.动画方面 能用css3实现的动画 尽量不要去用js实现。
比如悬停给背景色 div:hover transition
DOM.onmouseover
5.让代码精简化！尽量不要嵌套
jimmy
jimmy
6.变量，以及函数命名要简单，不要太长！
var s = 123;
var fdsgjlfgh =123;
图片方面
1.icon_home.png icon_qq.png 30*30px
多个小图片合并成雪碧图 可以减少http请求
2.图片保证清晰的前提下，尽量让图片占用小的资源空间，压缩图片！
500*500px 100*100px
（页面总资源大小比较大时，一般都是图片占用了较大的空间。所以把图片压缩更小是必要的处理方式）
3.jimmy.jpg(12kb) jpg无法弄透明的背景 jimmy.png（65kb）png图片可以有
在不设置背景图透明的情况下，尽量使用jpg图片格式
4.用base64图片代替png,jpg，可以减小图片资源大小
5.使用图片延迟加载技术，懒加载。 图片较多的情况下，可以使用延迟加载图片！使得第一次进来的时候请求数量减少很多
(在移动端商城里面，商品列表图片经常使用该技术)
文档方面：
1.减少http请求数量。
2.部署到服务器上的url不要太长
fb.mylove920.com/jimmy/index.html
fb.mylove920.com/jimmy/love/index.html
缓存方面：
第一个进入页面都要从服务器上读取文件。
如果没有清除浏览器的缓存，那么第二次进入的时候 页面不会从服务器读取内容，而是从缓存中读取！（从缓存中读取要快一些！）
27. $.ajax({
url:'',//传输路径
data:{},//传入数据
type:'',//请求类型
dataType:'json',//数据类型
success:function(){
//成功时候的处理
},
error:function(){
//错误处理
}
})
28. ajax如何处理跨域的请求？
将dataType设置成 jsonp;
29.H5 touch事件
touchstart 当手指触摸键盘时触发
touchmove 当手指在屏幕上滑动时连续触发
touchend 当手指离开屏幕时触发
touchcancel 当手指触摸屏幕时候 手机突然没电了，或者朋友打电话来了！
中断了此次事件时触发！
30.click事件在移动端有300ms延迟 如何处理？
用zepto的tap事件 代替click事件
31.移动端页面必须写的
视窗 内容 页面宽度 = 设备的宽度 初始化缩放比例1.0， max(imum)允许用户最大缩放比例1.0，min(imum)允许用户最小缩放比例1.0 ,禁止用户缩放页面