1.网页经常用到的图片格式有几种，它们之间有什么不同点和用途？
jpg是一种有损图片压缩格式，支持的颜色数量很多，适用于保存颜色较多且比较复杂的摄影图片或写实图像，且生成的文件体积较小；
jpg格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲，就是：高的压缩比=低的图片质量=小的文件大小。反之，低的压缩比=高的图片质量=大的文件大小。由于jpg文件无法保持100％的原始图像的像素数据，所以它不被认为是一种无损图像格式。
注：jpg,jpeg这两种格式其实是一样的。
用途：由于这种极其敏感的平衡特性，jpg非常适合被应用在那些允许轻微失真的像素色彩丰富的图片（照片）场合。反之，JPEG格式图片并不适合做简单色彩（色调少）的图片，比如LOGO，各种小图标（ICONS）。
gif
Gif是一种无损图片压缩格式，最大支持256种颜色，支持透明，可保存动画，适用于保存颜色较简单的卡通图像；
它是为使图片能够应用在在线（online）应用程序上所特别开发的图片格式。Gif，有时也被成为“Giff”，是一种无损，8位图片格式。“无损”是指100%的保持原始图片的像素数据信息。专业名词“8位”是指，所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色（一个多余256种颜色的图片若用gif图片保存会出现失真）。
用途：由于8位颜色深度的限制，Gif不适合应用于各种色彩过于丰富的照片存储场合。但它却非常适合应用在以下场合：
* Logo：小图标（Icon）、用于布局的图片（例如某个布局角落，边框等等）以及 仅包含不超过256种色彩的简单，小型图片场合等。
透明特性：GIF支持基本的透明特性，这意味着你能够使图片的某些像素“不可见”。在其被放置到网页中时，我们就可以看到通过这些不可见区域看到此图片后面的背景颜色（图片）。此特性非常有用：如果你需要将某个gif图片的内容置于所有图片的上层，你可以将其设置为透明。
压缩特性： GIF格式采用LZW算法进行压缩，此算法是Unisys申请的一项专利。在很久很久之前，如果你想使用GIF格式，那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是，此项专利技术已于2003年6月20日过期，我们现在可以免费的使用GIF了！
隔行扫描：GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。
动画GIF：一个动态的GIF文件，是由若干帧图片所联结而成的动态图片。在显示时，这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。合理的运用GIF动画能够为网页增添动静结合的效果，而过度的使用则会使网页杂乱无章。
png
Png是一种压缩算法优于gif的无损图片压缩格式，能在保证最不失真的情况下尽可能压缩图像文件的大小，支持图像透明，不支持动画，只要不是需要动画效果的颜色较简单的图片，优先采用png格式输出。
PNG，读“ping”，初始时被作为GIF的免费替代格式所开发，采用公共专利压缩算法。PNG格式也是一种无损压缩，但与GIF格式不同的是，PNG同时支持8位和24位的图像。
8位PNG图像：一个8位PNG图片，支持透明背景且像素颜色不能超过256种。除了压缩算法不同之外，此8位PNG格式与GIF格式极其相似；
用途：8位PNG图片的用途与GIF格式基本相同，
* Logo：小图标（Icon）、用于布局的图片（例如某个布局角落，边框等等）以及仅包含不超过256种色彩的简单，小型图片场合等等
24位PNG图像：24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。
对PNG的支持：由于PNG格式的广泛使用和开发者更加重视网页的WEB标准，不同浏览器对PNG的支持就显得相当重要了。不过，幸运的是，目前市场上主流的浏览器对PNG格式都有很好的支持，这包括：IE*, Firefox, Safari, Opera, and Konqueror。
*但不幸的是，IE6及IE6以下的浏览器对PNG透明背景的支持并不好。不过我们仍可以通过其他方法来解决这个问题，详情请查看如何在IE6中正常显示透明PNG。
2.请画出盒子模型
3.前端MVC是什么意思？
前端MVC：主要还是将页面的代码分层，页面显示HTML（V） + 事件控制（C）+数据模型 +（M），其中C和M都是JS。
4.在table标签中，tr指什么？，td指什么？
tr指表格中的一行，td指表格中的单元格。
5.让一个div层水平居中于浏览器窗口中，最简单的实现方法是？
margin:auto 0 或者 text-aligh:center
6.怎样让一个200*200的div垂直居中于浏览器中？
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid pink;
}
--> </style>
<div>让层垂直居中于浏览器窗口</div>
解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以2。如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。
7.网页中的中文文字小于多少像素就会开始影响识别？
12像素
8.设置一个链接在新窗口打开的方法是？
为链接添加”target=”_blank”属性
9.CSS选择符有哪些哪些属性可以继承，style、!important、class、id 以及tag哪个优先级高？
id和class优先级高，class 可继承，伪类a标签、列表ul、li 、dl、dd、dt 可继承
优先级就近原则，样式定义最近者为准
载入样式以最后载入的定位为准
优先级为：!important > [ id > class > tag ]
Important 比 内联优先级高
10.CSS中的id选择器和class选择器，哪个定义的级别高？这二者的区别是什么？
id选择器的级别高。
W3C标准这样规定的，其一：在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。其二：当页面中用到js或者要动态调用对象的时候，要用到id控制页面，总共有四种方式：行内方式、内嵌方式、链接方式、导入方式， 通过这四种方式就可以实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。
11.CSS中，你习惯的命名规则是什么？
使用驼峰法命名规则，另外使用CSS 类和ID的常用命名，如下：
12.CSS的position属性可以设置为哪些值，这些值分别代表什么意思，区别是什么？
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。一般通常用绝对定位absolute。
13.用CSS实现，为一个100*100的div层添加边框为2px的黑色虚线边框和3px的矩形圆角，背景是一张名为image.jpg的图片。
14.用CSS3如何给一个div添加阴影
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
15.怎么才能让层显示在flash之上呢？
给FLASH设置透明param value=transparent 或者param value=opaque
16.｛clear:both｝是什么意思，有什么作用？
清除当前定义的元素左右浮动 诸如： clear:left; //清除左浮动 clear:right; //清除右浮动 clear:both; //清除左右两边浮动
17.用div设计一个宽度为800px的四行三列的网页（头部，Banner广告，身体，底部；身体部分为三列），要求居中显示。Header和Banner为通栏。
18.当float和margin同时使用时，IE6的双倍边距bug如何解决？
先看css代码:
div {
float:left;
margin-left:10px;
width:420px;
height:150px;
border:1px solid red
}
这样设置左边距设置为10px，但IE6.0解释为20px，解决办法就是是加上display:inline
代码
div {
float:left;
margin-left:10px;
display:inline;
width:420px;
height:150px;
border:1px solid red
}
display:inline
display:inline的作用是设置对象做为行内元素显示，
inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span）
而我们一般用的div是块级元素，默认display属性是block,
但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。
19.你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？经常遇到的浏览器的兼容性问题有哪些？解决方法是什么？
IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT
非IE内核浏览器：firefox opera safari chrome
1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。
2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。
3. ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
4. 还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
5. 浮动的清除，ff下不清除浮动是不行的。
6. mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。
7. 吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
8. 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start
20.请说出几个你知道的响应式前端开发框架。
Twitter Bootstrap
21.请列举HTML的行内元素、块元素以及空元素
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易，也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表 内联元素(inline element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器，定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量
22.CSS加载方式：link和@import有何区别？
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
23.js延迟加载的方式什么？
<script type=”text/javascript” src=”" id=”my”></script> <script type=”text/javascript”> setTimeout(“document.getElementById(‘my‘).src=‘include/php100.php‘; “,3000);//延时3秒 </script>
24.域名劫持是怎么发生的，有什么危害？
域名劫持是如何进行的？
25.简述5种前端优化的具体方式？