常见Web前端开发笔试题

1、什么是web标准？

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

2、XHTML与HTML有什么区别？你觉得应该使用哪一个，并说出理由。

XHTML1.0和HTML4.01之间的主要差异是它遵守XML编码约定。

标签不能重叠,可以嵌套

标签与属性都要小写

标签都要有始有终,要么以</p>形式结束,要么以<br />形式结束

每个属性都要有属性值,并且属性值要在双引号中

别用name用id

 

3、请解释一下DOCTYPE的作用，有DOCTYPE和没有DOCTYPE有什么区别？

    DOCTYPE声明是指HTML文档开头处的一行或两行代码，它描述使用哪个DTD（文档类型定义）。DTD是一组机器可读的规则，它们定义XML或 HTML的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE声明来了解要使用哪个DTD，由此知道要使用HTML的哪个版本。

    DOCTYPE当前有两种风格，严格（strict）和过渡（transitional）。

　　　 严格版本禁止使用废弃的元素，从而把内容和表现分隔开。

    过渡的目的是帮助开发人员从老版本迁移到新版本，仍然允许使用已经废弃的元素。

4、严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。

    当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。

    在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

    混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

    浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式 呈现。对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准 模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

    根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。

    DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS，如果选择了错误的DOCTYPE，那么页面就将以混杂 模式呈现，其行为就可能会有错误或不可预测。因此一定要在每个页面上包含形式完整的DOCTYPE声明，并且在使用HTML时选择严格的DTD。

5、各种CSS样式的简写。如padding，border，font等。

使用缩写可以减少CSS文件的大小，并且更加易于阅读。以下主要介绍CSS的主要缩写规则，内容涉及到颜色、盒尺寸、边框、背景、字体、列表等方面的内容。

（1）颜色
　　16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
　　#000000可以缩写为#000;#336699可以缩写为#369;
　　（2）盒尺寸
　　通常有下面四种书写方法:
　　 property:value1; 表示所有边都是一个值value1；
　
　property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
　　

property:value1 value2 value3;
表示top的值是value1，right和left的值是value2，bottom的值是value3 　　

property:value1
value2 value3 value4; 四个值依次表示top,right,bottom,left
　　方便的记忆方法是顺时针，上右下左。

具体应用在margin和padding的例子如下：
　　margin:1em 0 2em 0.5em;
　　（3）边框(border)
　　边框的属性如下：
　　border-width:1px; 　　

border-style:solid; 　　

　　border-color:#000;
　　可以缩写为一句：border:1px solid #000;
　　语法是 border:width style color;

　　（4）背景(Backgrounds)
　　 背景的属性如下：
　
　background-color:#f00; 　　

　  background-image:url(background.gif);
　　

　　background-repeat:no-repeat; 　　

　　background-attachment:fixed;
　　

　　background-position:0 0;
　　可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
　　语法是 background:color image repeat attachment position;
　　你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
　　color: transparent 　　image: none 　　repeat: repeat 　　attachment: scroll 　　position: 0% 0%
　　（5）字体(fonts)
　　字体的属性如下：
　
　font-style:italic; 　　

　　font-variant:small-caps; 　　

　　font-weight:bold;
　　

　　font-size:1em; 　　

　　line-height:140%; 　　

　　font-family:"Lucida
Grande",sans-serif;
　　可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
　　注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

　　（6）列表(lists)
　　取消默认的圆点和序号可以这样写list-style:none;,
　　list的属性如下:
　　list-style-type:square; 　　

　　list-style-position:inside; 　　

　　list-style-image:url(image.gif);
　　可以缩写为一句：list-style:square inside url(image.gif);

（7）内边距（padding）

padding简写一般如下：

padding:1px2px3px4px;

等效于：

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;

顺序：top|right|bottom|left

不论是边框宽度，还是边框颜色、边距等，只要CSS样式涉及四边，顺序通通都是“上右下左”（顺时针方向）

padding简写的其它几种方式：

(1)如果四边的值省略一个，只写三个：

padding:1px2px3px;

则等效于：

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;（省略的“左”值等于“右”）

(2)如果四边的值省略两个：

padding:1px2px;

则等效于：

padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;（省略的“下”值等于“上”）

(3)如果只有一个值：

padding:1px;

则等效于：

padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;

6、img的alt与title有何异同？

使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool
tip）。

　 使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

7、strong与em的异同？

em
是句意强调，加与不加会引起语义变化。

　 strong
是重要性强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。并且在浏览器中，em
默认用斜体表示，strong 用粗体表示。

8、清除浮动的方法，各有什么特点？

（1）使用额外标签

使用额外标签，这也是W3C推荐的方法。这种方法就是在内容的末尾增加一个空的标签，典型的做法就是使用类似

<br style="clear:both;" />

或者使用

<div style="clear:both;"></div>

这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。

（2）使用overflow属性

把overflow值设置为hidden或者auto同样可以清理浮动

这种方法不需要添加额外的标记。但是使用overflow的时候一定要小心，因为它会影响浏览器的表现。另外，在Internet Explorer6中单纯地设置overflow为hidden或者auto并不能有效清除浮动（闭合浮动元素），还要指定“#outer”的一个维度，即要么给它指定一个宽度，要么指定一个高度：

#outer {
     overflow:auto;
     width:100%;
}

注意：如果你要在IE5/Mac上使用这种方法清除浮动（闭合浮动元素）的话，你就必须设定overflow的属性为值为hidden。

（3）使用after伪对象/伪类

使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容：

     #outer:after{
         content:".";
         height:;
         visibility:hidden;
         display:block;
         clear:both;
     } 

但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用，所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中，最常用就是Holly招数。Holly招数的原理是这样的，CSS代码

1. /* 这段代码只有IE/Win可以看见 \*/
2. CSS 规则
3. /* 结束Hack */

上面的代码中有两行注释，其中第一行结束时出现了反斜杠（\），在Mac的Internet Explorer中会认为注释并没有结束，于是继续向下直到第一个完事的“*/”出现，这中间的所有字符都被当作是注释，而IE/Win却也只会把第一行 和第三行看作是注释，中间的为有效代码。所以这样就区分出来了不同平台上的IE了。

正是基于以上原理，在windows的IE 6上的清理浮动，可以使用如下代码：

 #outer {
     display:inline-block;
 }
 /* Holly Hack Begine \*/
 * html #outer {
     height:1%;
 }
 #outer {
     display:block;
 }
 /* End Hack */

（4）浮动外部元素，float-in-float

这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。

但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小 心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布 局的难度。

这四种方式的比较与选择：

四种方法中使用哪种最好呢？首先，不推荐使用after伪类，对比其它三种方法，holly招数有点太烦琐，不好掌握，我上面讲到的holly招数中并不仅仅是IE/Win上有问题，当出现:hover时还会有其它问题，所以我们又加上了inline-block等属性，也就是说这种方法存在更多的不确定性。推荐对代码有“洁癖”并且技术较高的人使用。

那么其它三种方法其实都可以考虑。

• 不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；
• 而对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的 是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合 适。
• float-in-float，也是一个很好的选择，把你要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可，不过要注意相邻元素的变化。

参考：http://www.cnblogs.com/yuzhongwusan/archive/2008/06/18/1224383.html