中软高科WEB前端面试题

2018-06-24 01:16:38来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一个朋友面试的题目,百度了一下这个中软高科貌似是一个培训机构。。。以下答案是我本人的理解,仅供参考

 

HTML+CSS

1、你能解释一下css的盒子模型吗?

  有两种盒子模型:IE盒子模型,W3C盒子模型。

  标准的CSS盒子模型包括:内容(content)、填充(padding)、边框(border)、边距(margin)。

  

 

2、XHTML和HTML的区别?

  最主要的差别:XHTML元素必须被正确的嵌套,XHTML必须被关闭,标签名必须用小写,XHTML文档必须拥有根元素。

  详细文章可以参考:HTML和XHTML的区别

 

3、行内元素有哪些?块级元素有哪些?

  1) 行内元素有:a  b  span  img  input  select  strong ...;

  2) 块级元素有:div  header  main  footer  section  ul  p  h1  h2 ...;

 

4、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和 important哪个优先级高?

  1) id选择器(#)、类选择器(.)、标签选择器(div)、兄弟元素选择器(div + p)、子选择器(ul>li)、后代选择器(div a)、通配符选择器(*)、属性选择器(input[type="number"])、伪类选择器(a:hover,p:nth-child)

  2) 所有元素可继承:visibility和cursor。

    内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

    列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

    表格元素可继承:border-collapse。

  3) 内联样式表的权值最高 1000;

    ID 选择器的权值为 100;

    Class 类选择器的权值为 10;

    HTML 标签选择器的权值为 1

  4) important比内联优先级高

 

5、前端页面有哪三层构成,分别是什么,作用是什么?

  1) 由结构层,表示层,行为层组成

  2) 结构层:对网页的内容作出描述;

    表示层:负责如何显示内容;

    行为层:对网页中的事件作出反应;

 

6、哪些浏览器支持HTML5,这些浏览器的内核分别是什么?

  目前使用较为广泛的浏览器有:IE,Google,Firefox,Safari和Opera;

  内核分别是:IE(Trident),WebKit,Gecko,WebKit,Presto;

 

7、写出5种以上IE6 BUG的解决办法,哪些你认为解决起来是最麻烦的?

  1) IE6在块级元素设置左右浮动,设定的margin造成双边距bug

    解决办法:display: inline;

  2) line-height,文本垂直居中差1px

    解决办法:padding-top代替line-height居中,或line-height加1或减1

  3) img于块元素中,底边多出空白

    解决办法:父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

  4) li之间会有间距

    解决办法:float: left;

  5) position下的left,bottom错位

    解决办法:为父级(relative层)设置宽高或添加*zoom:1

  

  都很麻烦。。。

 

8、描述CSS reset的作用和用途

  reset的作用是让各个浏览器的CSS样式有一个统一的基准,理解为初始化css样式

 

9、解释CSS sprites,如何使用?

  Sprite是图片处理技术,俗称图片精灵。

  1、将用到的背景图片压缩为zip格式的压缩包
  2、用Css图片拼合生成器将其拼合成一张图片,然后下载该图片
  3、拼合完成后会生成相应的Css规则,该文件定位了每个图片的位置及图片的宽度和高度
  4、在Css样式中定位背景图片

 

10、你如何对网站的文件和资源进行优化?

  1) 利用浏览器缓存js文件和css文件

  2) 优化js,css代码,避免重用。

  3) 使用 css sprite合并图片。

  4) 文件合并,文件压缩。减少http请求,减少体积。

  5) 使用cdn托管资源

 

11、什么是语义化的HTML,HTML5新增的语义化标签有哪些?

  1) html语义化让页面的内容结构化,结构更加清晰,便于浏览器、搜索引擎解析。

    使阅读代码的人对网站更容易分块,便于阅读维护和理解。

  2) 比如:header,main,footer,canvas等

 

12、清楚浮动的几种方式,各自的优缺点。

  1) 父级元素定义高度:优点是简单,代码少,容易掌握,缺点是只适合高度固定的布局,一旦高度不一致时就会出现问题。

  2) 结尾处添加空div标签clear: both:优点是代码少,浏览器支持好,不容易出现怪问题,缺点是如果页面浮动布局多,就要增加很多空div,让人感觉很不爽。

  3) 父级元素设置overflow: hidden:优点是简单,代码少,浏览器支持好,缺点是不能和position配合使用,因为超出的尺寸的会被隐藏。

  只介绍三种。。。

 

JS

1、JavaScript 的 typeof 返回哪些数据类型?

  返回6中数据类型:undefined,string,Boolean,number,object,function。

 

2、split() join()的区别?数组方法pop() push() unshift() shift()。

  1) split() 方法用于把一个字符串分割成字符串数组。

    join() 方法用于把数组中的所有元素放入一个字符串。

    区别:前者是将字符串切割成数组的形式,后者是将数组转化为字符串。

  2) shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度

    pop() 方法用于删除并返回数组的最后一个元素

    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度

 

3、事件绑定和普通事件有什么区别?

  普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个

 

4、IE和标准下有哪些兼容性的写法?

  获取鼠标当前的坐标:

  IE下event.x,event.y;

  标准下event.pageX,event.pageY;

  获取窗体的高度和宽度:

  IE下document.body.offsetWidth和document.body.offsetHeight

  标准下document.documentElement.clientWidth和document.documentElement.clientHeight

  添加事件:

  IE下element.attachEvent(”onclick”, func);

  标准下element.addEventListener(”click”, func, true);

 

5、ajax 在请求的时候 get请求和 post请求的区别?

  1)使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来

  2)使用Get请求发送数据量小,Post请求发送数据量大

  3)Get请求安全性较低,Post安全性较高

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计

下一篇:CSS3效果:animate实现点点点loading动画效果(一)