您的位置:首页 - 教程 - web前端 - 正文
常见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 />形式结束

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

    别用nameid

 

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)使用空标签

    2)使用overflow属性

    3)使用after伪对象


评论: