前端面试题小结①

1. 对web标准以及W3C的理解与认识

1.1web标准，简单来说就是将页面的结构、表现和行为各自独立实现,

W3C对web标准提出了规范化的要求：

1.对结构的要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO帮助）

1）标签字母要小写；

2）标签要闭合；

3）标签不允许随意嵌套。

2.对css和js的要求：

1）尽量使用外联css样式表和js脚本，使结构、表现和行为分成三块，符合规范，同时提高页面渲染速度，提高用户体验；

2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class命名要做到见文知义，标签越少，加载越快，用户体验更高，代码维护更简单，便于改版；

3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

1. xhtml与html的区别：

HTML是一种超文本标记语言，XHTML是一种可扩展的超文本标记语言。

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

1. DOCTYPE

a)         声明文档类型，一般来说，严格型、过渡性、解释型

b)         HTML5文档声明类型

1. 行内元素和块级元素+CSS盒模型

块级元素会独占一行,行内元素不会独占一行, 行内元素的margin和padding属性,只有水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果.

1. CSS引入方式有哪些，link和@import的区别

引入方式：1.链入外部样式表,

2. 内部样式表

3.导入外部样式表,用@import,

4. 内嵌样式,就是在标签内写入style="",

a)         导入（绝对的能不用就不用）

b)         link没有兼容性问题，@import在CSS2.1下不支持

c)         Link支持使用javascript改变样式，@import不行

1. CSS选择符有哪些？那些属性可以继承？优先级算法。

选择器：Tag id class

可继承：Color，font-size

不可继承的：display、margin、border、padding、background、height

优先级：Id>class>tag

1. 前端页面有那三层构成？分别是什么？作用是什么？

a)         结构层HTML

b)         表现层CSS

c)         行为层JS

1. CSS基本语句构成是？

a)         选择器{属性1：值1； 属性2：值2；……}

1. 你做的页面在那些浏览器测试过，这些浏览器的内核分别是什么？

a)         IE   IE内核 （Trident）

b)         CHROME  webkit 52 blink

c)         火狐   Gecko

d)         Op  presto

e)         Safari   webkit

1. 写出几种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）

1. img标签上title与alt属性分别是什么？

a)         Title：为该属性提供信息

b)         Alt：图片不显示的时候用文字代替

1. 描述CSS reset的作用和用途。
2. 解释CSS sprites，如何使用？

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

a)         雪碧图（CSS精灵）

1. 你如何对网站的文件和资源进行优化？

a)         13题

b)         文件合并

c)         引入外部图片、音乐、视频

1. 什么是语义化HTML？

a)         对于搜索引擎的抓取有好处

b)         便于浏览器爬虫更好的解析

c)         方便开发人员维护

1. 清除浮动的几种方式？

a)         Clear

b)         Overflow

1. javascript的typeof返回类型有哪些？
2. undefined,string,boolean,number,object,function
3. 例举三种强制类型转换和两种隐式类型转换？

a)         ParseInt、parseFloat、Number

b)         +-*/    ==

1. split()和join（）的区别

a)         字符串切成数组

b)         数组链接成字符串

1. 数组方法pop、push、shift、unshift

a)         pop从尾部进行删除，push从尾部进行添加

b)         shift从头部进行删除，unshift从头部进行添加

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

a)         Var oEvent = event||ev;

b)         Document.documentElement.clientWidth||document.body.clientWidth

1. ajax请求的时候get和post的区别

a)         一个是在url后面，一个是在虚拟内存当中

b)         有大小的限制

c)         安全问题

d)         应用不同

1. Ajax请求的时候，如何解释json数据

a)         使用eval

b)         使用parse

1. XHR

a)         XmlHttpRequest—>ajax

1. 事件委托是什么

a)         事件冒泡

b)         利用事件冒泡的原理，让自己触发的事件，交由父级代为执行

1. 什么是闭包？

a)         闭包就是能够读取其他函数内部变量的函数

1. 如何阻止事件冒泡？

a)         CanceBubble=“true”

1. 如何阻止默认事件？

a)         Return false

1. 添加、删除、替换、插入到某个节点obj的方法

a)         Obj.appendChild（）；

b)         RemoveChild

c)         ReplaceChild

d)         InsertBefore

1. 解释？的原理，以及为什么不是ajax

a)         Ajax是页面无刷新请求数据操作

1. javascript的本地对象、内置对象、宿主对象

a)         regexp、array、date可以用new实例化

b)         Math，不可以被实例化，Math.random();

c)         Document、window浏览器自带的对象

1. document load和document ready的区别？

a)         Document.onload在结构和样式加载完才执行js

b)         Document.ready原生没有这种方法，JQ中有$().ready(function)

18.javascript的同源策略是什么？

         一段JS的脚本只能读取来自于同一来源的窗口和文档属性，同一来源指的是来自于同一主机或者同一（协议和端口号组合）

1. 编写一个数组去重的方法：
2. function unique2(arr){

     var newArr = [];

    for(var i=0, len=arr.length; i<len; i++){

         if(arr.indexOf(arr[i]) == i){

             newArr.push(arr[i]);

         }

     }

      return newArr;

 }

 

21.阐述浏览器兼容性产生的原因，请列举一些IE6 BUG的解决方法

         1.各个浏览器公司采用的浏览器内核不同，对javascript的支持有相应的改变

         1.默认的内外边距不一样

                   * {margin:0; padding:0}

         2.水平居中

                   Text-align：center

                   IE6-7和其他浏览器不一样

                   Margin：0 auto

                   Margin-left:auto;margin-right:0

22.如何使连续长字段自动换行？

         FF新：word-wrap:break-word

         FF旧版浏览器：JS