web前端面试题:实习岗位

1.什么是W3C标准,HTML4.0, DHTML,HTML5 各有什么区别?

2.什么是盒子模型,css的盒子模型有哪几种,说说他们有什么区别?

box-sizing:border-box;/* 怪异盒子模型 */设置内边距和border不会撑开盒子
box-sizing:content-box;/* 普通盒子模型  */

3.css中引入样式的方法有哪几种?

link 外部样式表
行内样式style="width:100px"
<head>
    <style>
    </style>/*头部*/
</head>

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


    <div>
        <p> 
            <i>jimmy</i>
        </p>
    </div>

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 ,禁止用户缩放页面

发布了51 篇原创文章 · 获赞 23 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/liuqi332922337/article/details/78453093