DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> 常見Web前端開發筆試題
常見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偽對象

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved