前端面试题（1）

这是我之前在南京面试的一家公司的面试题
1.对web标准以及w3c的理解与认识。
百度知道：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
web标准简单来说可以分为结构、表现和行为。其中结构主要由HTML标签组成，表现指css样式表，行为是指页面和用户具有一定的交互，同时页面结构或者表现发生改变，主要是由js组成。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范
1.对于结构要求（标签规范可以提高搜索引擎对页面的抓取效率，对SEO帮助很大）
（1）标签字母要小写（2）标签要闭合（3）标签不允许随意嵌套
2.对于css和js来说
（1）尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
（2）样式尽量少用行间样式表，使结构与表现分离，标签的id和calss等属性命名要做到见名之意，标签越少加载越快，用户体验越高，代码维护简单，便于改版。
（3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
 
2.XHTML和HTML有什么区别。
 
     HTML与XHTML之间的差别，主要分为功能上的差别和书写习惯的差别两方面。

     关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。 

     由于XHTML的语法较为严谨，所以如果你是习惯松散结构的HTML编写者，那需要注意XHTML的规则。

      下面列出了几条容易犯的错误，供理解。  

  1. 所有标签都必须小写

    在XHTML中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。

  2.  标签必须成双成对

    像是<p>...</p>、<a>...</a>、<div>...</div>标签等，当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样

  3. 标签顺序必须正确

    标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。

  4. 所有属性都必须使用双引号

    在XHTML 1.0中规定连单引号也不能使用，所以全程都得用双引号。

  5. 不允许使用target="_blank"
    从XHTML 1.1开始全面禁止target属性，如果想要有开新窗口的功能，就必须改写为rel="external"，并搭配JavaScript实现此效果。

3.Doctype？严格模式和混杂模式。如何触发这两种模式，区分他们有何意义。
  1. doctype（document type）文档类型
  1. 区别：严格模式是浏览器根据规范去显示页面；混杂模式是以一种向后兼容的方式去显示
  2. 意义：决定浏览器如何渲染网站（浏览器使用那种规范去解析网页）
  3. 触发：浏览器根据doctype是否存在和使用的是那种dtd来决定。
  4. DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
 
4.行内元素有哪些？块级元素有哪些？css的盒模型？
  1. 块级元素：div p h1 h2 h3 h4 form ul
  2. 行内元素: a b br i span input select em
  3. Css盒模型:content，border ,margin，padding
 
5.css引入的方式有哪些？link和@import的区别是什么？
  1. 内联方式：<div style="color:red"></div>
  2. 嵌入方式：<head><style>.divClass{}</style></head>
  3. 链接方式：<link rel="stylesheet" type="text/css" href="">
  4. 导入方式：<style>@import url();</style>
  5. 区别：
    • link是XHTML标签，除了加载css外，还可以定义RSS等其他事务；@import属于css范畴，只能加载css。
    • link引用css时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
    • link是XHTML的标签，无兼容问题；@import实在css2.1提出的，低版本的浏览器不支持。
    • link支持使用JavaScript控制DOM去改变样式；而@import不支持。
 
6.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联样式和important哪个优先级较高？
  1. css选择符
    • 通配选择符 *{}
    • class选择符
    • ID选择符
    • 类型选择符（标签选择符）
    • 属性选择副  h[title]{}
    • 包含选择符 div p{}
    • 子对象选择符 div>p{}
    • 伪类及伪对象选择符    a:hover{}
     2.font-size,font-family,color
               内联样式：1000
               id选择符：0100
               class选择符，属性选择符，伪类选择符：0010
               元素选择符，为元素选择符：0001
               依次相加就得到每个css定义的优先级的值，然后从左到右逐位比较大小，数字大的css样式的优先级就高。
注意：
   !important声明的样式优先级最高，如果冲突再进行计算。
   如果优先级相同，则选择最后出现的样式。
   继承得到的样式的优先级最低。
 
7.前端页面有哪三层构成，分别是什么？作用是什么？
  1. 结构层：由HTML或XHTML之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
  2. 表示层：由css负责创建，解决了页面“如何显示内容”的问题。
  3. 行为层：由脚本负责。解决了页面上“内容应如何对事件做出反应”的问题。
 
8.css的基本语句构成是什么？
可同上述题5中的1-4
 
9.你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？
  1. Trident内核代表产品Internet Explorer，又称其为IE内核。
  2. Gecko内核代表作品Mozilla
  3. WebKit内核代表作品Safari、Chromewebkit
  4. Presto内核代表作品OperaPresto 
 
10.写出几种IE6 BUG的解决方案。
　　1.双边距BUG float引起的  使用display：inline
　　2.3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px  
　　3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active
　　4.Ie z-index问题 给父级添加position:relative
　　5.Png 透明 使用js代码 改
　　6.Min-height 最小高度 ！Important 解决’
　　7.select 在ie6下遮盖 使用iframe嵌套
　　8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
 
11.<img>标签上title和alt属性的区别是什么？
alt是给搜索引擎识别，在图像无法显示时的替代文本；
title是关于元素的注释信息，主要是给用户解读。
 
12.描述css reset的作用和用途。
作用：重置浏览器的css默认属性
用途：由于各个浏览器都是按照自己的方式去理解css规范，使得在不同浏览器下展示的效果不同，则需要重置css属性， 然后再将它统一定义，就可以产生相同的显示效果。
 
13.解释css sprites如何使用。
css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
 
14.浏览器标准模式和怪异模式之间的区别是什么？
标准模式是指不同的浏览器都按照w3c标准对页面的渲染有了统一的标准
怪异模式是指在w3c标准出台之前，各个浏览器均以自己的标准来渲染页面产生了不差异，在w3c出台之后为了保证原来的页面能够正常显示还保留着这种向后兼容的方式显示。


区别是：



　1）在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;


在怪癖模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)


 　　2）可以设置行内元素的高宽

    在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

　　3）可设置百分比的高度

    在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

　　4）用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:

   body{text-align:center};#content{text-align:left}

　　5）quirk模式下设置图片的padding会失效

　　6）quirk模式下Table中的字体属性不能继承上层的设置

　　7）quirk模式下white-space:pre会失效


 





















15.你如何对网站的文件和资源进行优化？期待的解决方案包括？




　　1、文件合并（目的是减少http请求）


　　2、文件压缩：目的是直接减少文件下载的体积；常用的工具是YUI Compressor。


　　3、使用 CDN （内容分发网络）来托管资源


　　4、缓存的使用（并且多个域名来提供缓存）


　　5、GZIP 压缩你的 JS 和 CSS 文件



 





















16.什么是语义化的HTML？


根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。




为什么要语义化？


    

  • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
    • 

  • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
    • 

  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
    • 

  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
    • 

  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
    • 








































 


17.清除浮动的几种方式，各自的优缺点。


 


以下是js问题


18.JavaScript的typeof返回哪些数据类型？


“undefined” ——未定义

“boolean”——布尔值

“string”——字符串

“number”——数值

“object”——对象或者null;

“function”——函数


 


19.例举三种强制类型转换和两种隐式类型转换？


强制：parseInte parseFloat number


隐式类型转换：==和===（==比较的是值而===还比较数据类型是否一样）


 


20.split()和join()的区别。


join() 方法用于把数组中的所有元素以指定的分隔符进行分隔成一个字符串。


split()方法是以指定的元素开始将字符串进行（ 指定长度）分割成数组。


例如 var str="how are you"  str.split("a")->[how ,re you]   str.split(" ",2)->[how,are you]



 


21.数组方法push()pop()unshift()shift()


push()尾部添加   pop()尾部删除


unshift()头部添加   shift()头部删除


 


22.事件绑定和普通事件有什么区别？


普通事件中的onclick是DOM0级事件只支持单个事件，会被其他onclick事件覆盖，


而事件绑定中的addEventListener是DOM2级事件可以添加多个事件而不用担心被覆盖




 


23.IE和标准下有哪些兼容性的写法？


var ev = ev || window.event;


document.documentElement.clientWidth || document.body.clientWidth;


var target = ev.srcElement || ev.target;


 


24.ajax请求的时候get和post方式的区别。






　　1、 get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 




　　2、 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。        




　　3、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异.   




　　4、get安全性非常低，post安全性较高。 


　　5、Get请求有如下特性：它会将数据添加到URL中，通过这种方式传递到服务器，通常利用一个问号？代表URL地址的结尾与数据参数的开端，后面的参数每一个数据参数以“名称=值”的形式出现，参数与参数之间利用一个连接符&来区分。       


Post请求有如下特性：数据是放在HTTP主体中的，其组织方式不只一种，有&连接方式，也有分割符方式，可隐藏参数，传递大批数据，比较方便。


       














































































25.call和apply的区别。


call方法: 
语法：call(thisObj，Object)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 

apply方法： 
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。 
说明： 
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 


如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。


26.ajax请求时，如何解析json数据。


27.b继承a的方法。


28.事件委托是什么？


29.闭包是什么，有什么特性，对页面有什么影响。


30.如何阻止事件冒泡和默认事件。


31.添加 删除 替换 插入到某个节点的方法。


32.解释jsonp的原理，以及为什么不是真正的ajax。


33.document load 和 document ready的区别（这几种页面加载方式的区别）


34.“==”和“===”的不同


35.JavaScript的同源策略。


36.编写一个数组去重的方法。






            

            
posted @ 
2017-08-10 20:20 
约爱丽丝下午茶 
阅读(236) 
评论(0) 
编辑 
收藏 
举报