Web前端笔试题

浏览数：36 / 时间：2015年06月09日

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.域名劫持是怎么发生的，有什么危害？