web前端面试整理

1，对WEB标准和W3C的理解

web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。

web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

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

1）。标签字母要小写

2）。标签要闭合

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

2.对于css和js来说

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

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

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

2.XHTML和HTML的区别

XHTML是用xml重写了HTML，是HTML像xml的过渡语言，继续沿用HTML标签，废除了部分表现层标签，在标准上比HTML严格，比如标签嵌套，标签结束

3.DOCTYPE

是一组机器可读的规则，指示web浏览器使用哪个版本的HTML编写命令（DTD）

严格模式：浏览器根据web标准去解析页面，是一种严格要求的DTD，不允许使用任何表现层的语法，如<br>

      触发：正常编写网页，声明正确的DTD

混合模式：是一种向后兼容的解析方法，可以实现IE5.5以下的浏览器版本的渲染模式

     触发：不声明DTD，或者在DOCTYPE前加上xml声明，如<?xml version='1.0'  encoding='utf-8'>

4。块级元素和行内元素的区别

在标准文档流里面，块级元素具有以下特点：

①总是在新行上开始，占据一整行；

②高度，行高以及外边距和内边距都可控制；

③宽带始终是与浏览器宽度一样，与内容无关；

④它可以容纳内联元素和其他块元素。

行内元素的特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距部分可改变；

③宽度只与内容有关；

④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

5。link和@import区别

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：

XML/HTML代码

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   

XML/HTML代码

<style type="text/css" media="screen">   

@import url("CSS文件");   

</style>  

两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：@import最优写法

@import的写法一般有下列几种：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别

@import url(style.css) //Windows NS4, Macintosh NS4不识别

@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import url("style.css") //Windows NS4, Macintosh NS4不识别

由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

6.浏览器内核

Trient   IE 

Webkit  Safari,Chorme内核原型，开源（苹果公司自己的内核）

Gecko  Firefox

7。IE6  BUG

(1).双倍边距BUG

     display:inline;或display:block;

（2）3pxBUG

float

（3）图片链接下方有间隙

display:block;

（4）奇数高宽问题

（5）空元素的高度bug

display:inline;

<!---->

（6）重复文字的bug

display:inline;

<!--[if !ie]-->xxx<!--[endif]-->

(7)IE6  z-index失效

  原因：（1）父级position：relative；（2）问题元素无position，（3）问题元素float

解决方法：（1）relative改为absolute（2）浮动元素加position，（3）去除浮动

详情请看点击打开链接