1、Vtonf是一款免費的基于web界面的控制面板（符合GPL），它可以管理OpenVz上虛擬專用服務器（VPS）。使用她甚至是那些有很少專業只是的用戶也可以很簡單地創建和管理OpenVZ上的虛擬機。到目前為止，Vtonf僅僅支持RedHat, Fedora, 和 CentOS（支持Debian正在計劃中）。因此，我將在一個CentOS5.2服務器上講解Vtonf的安裝和使用。我并不能保證這個教程完全適合你！1前言確信你已經在你的CentOS5.2服務器上安裝好了OpenVZ?？梢詤⒖歼@篇教程Installing And Using OpenVZ On CentOS 5.2我將在一個i386平臺的

2、系統上做試驗，我不知道Vtonf是否工作在x86_64位的系統上-Vtonf附帶的INSTALL文件上說不可以，但是Vtonf wiki確沒有關于這方面的介紹。2.安裝Vtonf在我們安裝Vtonf之前，我們必須安裝一些相關的軟件包yum install vzpkg expect然后去 HYPERLINK /downloads.html t _blank /downloads.html網站下載并安裝最新的Vtonf包，如下所示：cd /tmpwget HYPERLINK /sourceforge/vtonf/vtonfinstaller.1.0-beta1.tar.gz t _blank /s

3、 . er.1.0-beta1.tar.gztar xvfz vtonfinstaller.1.0-beta1.tar.gzcd vtonfinstaller.1.0-beta1./install你將會被問到幾個問題：Do you wish to start the installation procedure (y/n)? : Change Node Root Password,選擇虛擬機，并且兩次輸入你想要的管理密碼。 HYPERLINK /bbs/attachment.php?aid=MjI5MjMwfDk2OWM5N2E5fDEyNzE1MTc0MDh8Zjk5N1M0ZVRhY1Vk

4、Q2dsQnRETzVqVVY3UXhVMlZoVWQxYkVOSi9teUtQbjVjRlU%3D¬humb=yes o 17.jpg t _blank 下載 (37.73 KB)2009-02-13 22:53在NODE NANAGEMENT Set Nameservers之下，你也可以為你的虛擬機定義一些域名服務器（這一步也必須在虛擬機運行的時候進行）除非你在一個plan中定義了域名服務器，并且虛擬機也是從這個plan中創建的。 HYPERLINK /bbs/attachment.php?aid=MjI5MjMxfGI0YzkxNWQ3fDEyNzE1MTc0MDh8Zjk5N1M

5、0ZVRhY1VkQ2dsQnRETzVqVVY3UXhVMlZoVWQxYkVOSi9teUtQbjVjRlU%3D¬humb=yes o 21.jpg t _blank 下載 (44.79 KB)2009-02-13 23:01Vtonf相當易操作，你可以玩下其他的設置，來看看他們能做些什么.4.添加OS Templates 由于Vtonf僅僅附帶一個OS Templates(centos-4-i386-minimal)，你可能想添加更多的OS Templates。你可以在 HYPERLINK /Download/template/precreated t _blank /Downl

6、oad/template/precreated找到一個OS Templates列表。這些OS Templates必須存儲在/vz/template/cache文件夾下，我們來下載兩個OS templates (CentOS 5 and Debian Etch): cd /vz/template/cachewget HYPERLINK /template/precreated/contrib/centos-5-i386-default.tar.gz t _blank /templ . i386-default.tar.gzwget HYPERLINK /template/precreated/d

7、ebian-4.0-i386-minimal.tar.gz t _blank /templ . i386-minimal.tar.gz然后我們必須使得Vtonf重新讀取/vz/template/cache，來發現這兩個新的OS templates，點開VTONF Update Settings. HYPERLINK /bbs/attachment.php?aid=MjI5MjMyfDQ3YTY3N2Q1fDEyNzE1MTc0MDh8Zjk5N1M0ZVRhY1VkQ2dsQnRETzVqVVY3UXhVMlZoVWQxYkVOSi9teUtQbjVjRlU%3D¬humb=yes o

8、18.jpg t _blank 下載 (39.89 KB)2009-02-13 23:01并且點擊Update按鈕 HYPERLINK /bbs/attachment.php?aid=MjI5MjMzfGMzNzk5OTc4fDEyNzE1MTc0MDh8Zjk5N1M0ZVRhY1VkQ2dsQnRETzVqVVY3UXhVMlZoVWQxYkVOSi9teUtQbjVjRlU%3D¬humb=yes o 19.jpg t _blank 下載 (35.91 KB)2009-02-13 23:01然后，當你打開SERVER Create Node你就會在Operating System下

9、拉菜單中發現新的OS templates。 HYPERLINK /bbs/attachment.php?aid=MjI5MjM0fDYyNzExOTI3fDEyNzE1MTc0MDh8Zjk5N1M0ZVRhY1VkQ2dsQnRETzVqVVY3UXhVMlZoVWQxYkVOSi9teUtQbjVjRlU%3D¬humb=yes o 20.jpg t _blank 下載 (40.23 KB)2009-02-13 23:01附錄資料：web前端面試題1. W3C標準有哪些？W3C推行的主要規范有HTML，CSS，XML，XHTML和DOM（Document Object Model）。

10、2. 談談Js的內存泄露問題。3. 談談對Html 5的了解。4. 談談對CSS 3的了解。5. 用js實現隨即選取10-100之間的10個數字，存入一個數組，并排序。var iArray = ;funtion getRandom(istart, iend) var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart;for(var i=0; i10; i+) iArray.push(getRandom(10,100);iArray.sort();6. 把兩個數組合并，并刪除第二個元素。v

11、ar array1 = a,b,c;var bArray = d,e,f;var cArray = array1.concat(bArray);cArray.splice(1,1);7. Js面向對象的幾種方式。8. 請談談原型方式構造對象的特點。9. 在Css中那個屬性會影響dom讀取文檔流的順序。答： float屬性。10. 請介紹幾種用div實現兩列布局的方案（兼容），另外要考慮文檔流的加載。11. 談談css在瀏覽器中的兼容問題，詳細談談IE6的一些bug,以及解決方案。12. 談談你對閉包的理解。以及如何實現js方法的重寫。HTML & CSS1.Doctype? 嚴格模式與混雜模式

12、-如何觸發這兩種模式，區分它們有何意義? 首先我講講如何觸發兩種模式： 加入xml頭部聲明可以觸發IE瀏覽器的Quirks mode，觸發之后，瀏覽器解析方式就和IE5.5一樣，擁有IE5.5一樣的bug和其他問題，行為（Javascript）也是如此。 IE6的觸發 在XHTML的DOCTYPE前加入XML聲明 IE7的觸發 在XML聲明和XHTML的DOCTYPE之間加入HTML注釋 IE6和IE7都可以觸發的 在HTML4.01的DOCTYPE文檔頭部加入HTML注釋 其次是這樣的意義 各個瀏覽器的混雜模式，基本就是各個瀏覽器的私有模式，不相互兼容。所以，除非是為了兼容的問題，比如你不想

13、修改很久很久以前做的IE ONLY的網頁，否則刻意觸發混雜模式沒有任何意義。2：行內元素有哪些？塊級元素有哪些？CSS的盒模型？一.行內元素和塊級元素有哪些？塊級元素information on authorlong quotationpush buttontable captiondefinition descriptiondeleted textgeneric language/style containerdefinition listdefinition termform control groupinteractive formheadingheadingheadingheading

14、headingheadinghorizontal ruleinline subwindowinserted textfieldset legendlist itemclient-side image mapalternate content container for non frame-based renderingalternate content container for non script-based renderinggeneric embedded objectordered listparagraphpreformatted texttabletable bodytable

15、data celltable footertable header celltable headertable rowunordered list行內元素anchorabbreviated formacronymbold text styleI18N BiDi over-ridelarge text styleforced line breakpush buttoncitationcomputer code fragmentdeleted textinstance definitionemphasisitalic text styleinline subwindowEmbedded image

16、form controlinserted texttext to be entered by the userform field label textclient-side image mapgeneric embedded objectshort inline quotationsample program output, scripts, etc.option selectorsmall text stylegeneric language/style containerstrong emphasissubscriptsuperscriptmulti-line text fieldtel

17、etype or monospaced text styleinstance of a variable or program argument二.行內元素與塊級元素有什么不同？1.尺寸-塊級元素和行內元素之間的一個重要的不同點行內元素和widthW3C CSS2 標準規定行內元素、非置換元素不會應用width屬性。以下例子中，對行內元素應用了width:200px,你可以看到，根本就沒有什么效果。行內元素和heightW3C CSS2 標準規定行內元素、非置換元素不會應用height屬性，但是盒子高度可以通過line-height來指定。以下例子，對行內元素應用了height:50px,你可

18、以看到什么效果都沒。行內元素和padding你可以給行內元素設置padding，但只有padding-left和padding-right生效。以下例子，行內元素應用了padding:50px。你可以看到對左右的內容有影響，但是對上下沒影響。行內元素和margingmargin屬性也是和padding屬性一樣，對行內元素左右有效，上下無效。下面的例子,對應用了margin:50px，你可以看到左右邊緣是生效了但是內容上下卻沒有。記住對行內元素設置寬度width 無效。設置高度height 無效，可以通過line-height來設置。設置margin 只有左右margin有效，上下無效。設置pa

19、dding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的，看圖上效果就知道了 盒子模型W3C 組織建議把所有網頁上的對像都放在一個盒(box)中，設計師可以通過創建定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層。盒模型主 要定義四個區域：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。對于初學者，經常會搞不清楚 margin，background-color，background- image，padding，content，border之間的層次、關系和相互影響。這里提供一張盒模型

20、的3D示意圖，希望便于你的理解和記憶。每個HTML元素都可以看作一個裝了東西的盒子，盒子里面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。盒模型的實際寬度關于盒模型，還有以下幾點需要注意：對于塊級元素（display:block），未浮動的垂直相鄰元素的上邊界和下邊界會被壓縮，例如：有上下2個元素，上元素的下邊界為5px，下面元素的上邊界為20px，則實際2個元素的間距為20px（2個邊界值中較大的值）。如圖所示。注1. 塊級元素（display： block）每個塊級元素都從一個新行開始，而且其后的

21、元素也需另起一行開始，標題、段落、表格、層、body等都是塊級元素。塊級元素只能作為其他塊級元素的子元素，而且需要一定的條件。內聯元素，例如、等，定義上下邊界不會影響到行高（line-height），內聯元素距離上一行元素的距離由行高決定，而不是填充或邊界。注2. 內聯元素（display：inline）內聯元素不需要在新行內顯示，而且也不強迫其后的元素換行，如a、em、span等都為內聯元素。內聯元素可以為任何其他元素的子元素。浮動元素（無論左或者右浮動）邊界不壓縮，且若浮動元素不聲明寬度，則其寬度趨向于0，即壓縮到其內容能承受的最小寬度。如果盒中沒有內容，則即使定義了寬度和高度都為100%

22、，實際上只占0%，因此不會被顯示，此點在采取層布局的時候需特別注意。邊界值可為負，其顯示效果各瀏覽器可能不相同。填充值不可為負。邊框默認的樣式（border-style）為不顯示（none）。3.CSS引入的方式有哪些? link和import的區別是?本質上，這兩種方式都是為了加載CSS文件，但還是存在著細微的差別。差別1：老祖宗的差別。link屬于XHTML標簽，而import完全是CSS提供的一種方式。 HYPERLINK /xhtml/tag_link/ link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義 HYPERLINK /xhtml/attribute

23、_rel/ rel連接屬性等，import就只能加載CSS了。差別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯（夢之都加載CSS的方式就是使用import，我一邊下載一邊瀏覽夢之都網頁時，就會出現上述問題）。差別3：兼容性的差別。由于 HYPERLINK /TR/CSS21/cascade.html l at-imp%3Cwbr%3Eort import是CSS2.1提出的所以老的瀏覽器

24、不支持，import只有在IE5以上的才能識別，而link標簽無此問題。差別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為import不是dom可以控制的。大致就這幾種差別了（如果還有什么差別，大家告訴我，我再補充上去），其它的都一樣，從上面的分析來看，還是使用link標簽比較好。標準網頁制作加載CSS文件時，還應該選定要加載的媒體（media），比如screen，print，或者全部all等。這個我到CSS高級教程中再給大家介紹。注：1，網友comehope在留言中提出了另一種區別。差別5：import可以在css中再次引入其

25、他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表，如：main.css-import “sub1.css”;import “sub2.css”;sub1.css-p color:red;sub2.css-.myclass color:blue這樣更利于修改和擴展猴 子提示：這樣做有一個缺點，會對網站服務器產生過多的HTTP請求，以前是一個文件，而現在卻是兩個或更多文件了，服務器的壓力增大，瀏覽量大的網站還是 謹慎使用。有興趣的可以觀察一下像新浪等網站的首頁或欄目首頁代碼，他們總會把css或js直接寫在html里，而不用外部文件。4.CSS選擇符有哪些？哪些屬性可以繼承？優先級

26、算法如何計算？內聯和important哪個優先級高？5:前端頁面有哪三層構成，分別是什么？作用是什么？最準確的網頁設計思路是把網頁分成三個層次，即：結構層、表示層、行為層。網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的信息。例如，P 標簽表達了這樣一種語義：“這是一個文本段?！本W頁的表示層（presentation layer） 由 CSS 負責創建。 CSS 對“如何顯示有關內容”的問題做出了回答。網頁的行為層（behavio

27、r layer）負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。8：你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些？怎么會出現？解決方法是什么？點評：css的兼容性也是大家關注的熱點。大家一定要注意多測試。Javascript 多瀏覽器兼容性問題及解決方案兼容性處理要點 1、DOCTYPE 影響 CSS 處理 2、FF: 設置 padding 后， div 會增加 height 和 width， 但 IE 不會， 故需要用 !important 多設一個 height 和 width 3、FF:

28、支持 !important， IE 則忽略， 可用 !important 為 FF 特別設置樣式 4、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行 5、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法： divmargin:30px!important;margin:28px; 注意這兩個margin的順序一定不能寫反，!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：

29、 divmaring:30px;margin:28px 重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important; 瀏覽器差異 1、ul和ol列表縮進問題 消除ul、ol等列表的縮進時，樣式應寫成：list-style:none;margin:0px;padding:0px; 其中margin屬性對IE有效，padding屬性對FireFox有效。 注 經驗證，在IE中，設置margin:0px可以去除列表的上下左右縮進、空白以及列表編號或圓點，設置padding對樣式沒有影響；在 Firefox 中，設置margin:0px僅僅可以去除上下的空白，設置padd

30、ing:0px后僅僅可以去掉左右縮進，還必須設置list- style:none才 能去除列表編號或圓點。也就是說，在IE中僅僅設置margin:0px即可達到最終效果，而在Firefox中必須同時設置margin:0px、 padding:0px以及list-style:none三項才能達到最終效果。 2、CSS透明問題 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。 注 最好兩個都寫，并將opacity屬性放在下面。 3、CSS圓角問題 IE：ie7以下版本不支持圓

31、角。 FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。 注 圓角問題是CSS中的經典問題，建議使用JQuery框架集來設置圓角，讓這些復雜的問題留給別人去想吧。不過jQuery的圓角只看到支持整個區域的圓角，沒有支持邊框的圓角，不過這個邊框的圓角可以通過一些簡單的手段來實現，下次有機會介紹下。 4、cursor:

32、hand VS cursor:pointer 問題說明：firefox不支持hand，但ie支持pointer ，兩者都是手形指示。 解決方法：統一使用pointer。 5、字體大小定義不同 對字體大小small的定義不同，Firefox中為13px，而IE中為16px，差別挺大。 解決方法：使用指定的字體大小如14px。 并列排列的多個元素（圖片或者鏈接）的div和div之間，代碼中的空格和回車在firefox中都會被忽略，而IE中卻默認顯示為空格（約3px）。 6、CSS雙線凹凸邊框 IE：border:2px outset;。 FF： -moz-border-top-colors: #d

33、4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080; 瀏覽器bug 1、IE的雙邊距bug 設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。 解決方案：在這個div里面加上display:inline; 例如： 相應的css為 以下為引用的內容： 復制代碼代碼如下:#IamFloat float:left; margin:5px;/*IE下理

34、解為10px*/ display:inline;/*IE下再理解為5px*/ #IamFloat float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/ 關 于CSS中的問題實在太多了，甚至同樣的CSS定義在不同的頁面標準中的顯示效果都是不一樣的。一個合乎發展的建議是，頁面采用標準XHTML標準編寫， 較少使用table，CSS定義盡量依照標準DOM，同時兼顧IE、Firefox、Opera等主流瀏覽器。很多情況下，FF和 Opera的CSS解釋標準更貼近CSS標準，也更具有規范性。 2、IE選擇符空格BUG 今天

35、在給博客的段落樣式設置首字符樣式的時候發現，原來一個空格也可以使樣式失效。 請看以下代碼： 復制代碼代碼如下: 對于世界而言，你是一個人；但是對于某個人，你是他的整個世界?？v然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。 /code 復制代碼代碼如下: 對于世界而言，你是一個人；但是對于某個人，你是他的整個世界。縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。 這 段代碼對的首字符樣式定義在IE6上看是沒有效果的（IE7沒測試），而在p:first-letter和font- size:300%加上空格，也就是p:first-letter font-size:300%后，顯示就正

36、常了。但是同樣的代碼，在FireFox下看是正常的。按道理說，p:first- letterfont-size:300%的寫法是沒錯的。那么問題出在哪里呢？答案是偽類中的連字符”-”。IE有個BUG，在處理偽類時，如果偽 類的名稱中帶有連字符”-”，偽類名稱后面就得跟一個空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。對css縮寫的支持問題：不論是ie 還是ff對css的縮寫都有一小點問題比如border: 0 xp solid #fff;兩個瀏覽器支持都沒有問題但對于四個邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff又會出現邊界解釋錯誤，而導致頁面變形正確

37、縮寫：border-width:0px 1px 2px 3px;border-style:solid;border-color:#fff;第二點是ie對于css的magin padding 等默認值為0px，但ff卻不一樣，為了保持外觀的統一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯位。IE與Firefox的CSS兼容大全1.DOCTYPE 影響 CSS 處理2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是

38、 margin-left,margin-right) 方可居中4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上6.div 的垂直居中問題: vertical-align:middle;將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是

39、要控制內容不要換行7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：divmargin:30px!important;margin:28px;注意這兩個margin的順序一定不能寫反，據阿

40、捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：divmaring:30px;margin:28px重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important;10.IE5 和IE6的BOX解釋不一致IE5下divwidth:300px;margin:0 10px 0 10px;div 的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改di

41、vwidth:300px!important;width :340px;margin:0 10px 0 10px關于這個是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了！：）11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義ulmargin:0;padding:0;就能解決大部分問題注意事項：1、float的div一定要閉合。例如：(其中floatA、floatB的屬性已經設置為float:left;)這里的NOTfloatC并不希望繼續平移，而是希望往下排。這段代碼在IE中毫無問題，問

42、題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在之間加上這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。并且將clear這種樣式定義為為如下即可：.clearclear:both;此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;9.如何居中一個浮動元素?設置容器的浮動方式為相對定位然后確定容器的寬高 比如寬500 高 300 的層然后設置層的外邊距DivWidth:500px ;height:300px; Margin: -150p

43、x 0 0 -250px;position: absolute;left:50%;top:50%;10.有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的了解情況！在HTML 5平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。那么我們來看一下HTML5的技術概覽有哪些： HTML5新增和移除的元素HTML5新增了很多多媒體和交互性元素如video, audio，在HTML4當中如果要嵌入一個視頻或是音頻的話需要引入一大段的代碼，還有兼容各個瀏覽器，而HTML5只需要通過引入一個標簽就可以，就像img標簽一樣方便。HTML5對表單的支持HTML5 提供了強大的控件類型如url

44、, email, date, tel等，強大的約束屬性，如required表示必填，文件上傳的accept屬性，以及一些表單重復元素模型的支持，HTML5在提交表單的時候還可 以設置提交的方式為XML提交方式，這樣服務器端接收到的數據將是XML格式，HTML5的表單被定義為“Web Forms 2.0”，目前opera9.5+對Web Forms 2.0的支持較為完美。HTML5 DOM變化HTML5的Javascript APIsHTML5在Javascript上面新增了哪些API呢？Video/Audio: HTML5為Video和Audio提供了API來讓開發者控制他們自己的用戶界面，如

45、可以播放或暫停媒體內容。CSS3CSS3對于我們Web開發者來說不只是新奇的技術，更重要的是這些全新概念的web應用給我們帶來更多無限的可能性，也極大地提高了我們的開發效率。我們將不必再依賴圖片或者Javascript 去完成圓角、多背景、用戶自定義字體、3D動畫、漸變、盒陰影、文字陰影、透明度等提高Web設計質量的特色應用。CSS3對于動畫的支持CSS3 支持的動畫類型有：transform(變換)、transition(過渡)和animation(動畫)。你可以對特定的屬性設置 transition，transiton和animation的區別不大，animation的動畫是自己定義的，面

46、向的更多的是腳本開發者，往往更加 復雜。11.你怎么來實現下面這個設計圖,主要講述思路 （效果圖省略）13:如果讓你來制作一個訪問量很高的大型網站，你會如何來管理所有CSS文件、JS與圖片？14：你對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？Javascript1：js是什么，js和html 的開發如何結合？2.怎樣添加、移除、移動、復制、創建和查找節點3.怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別4.面向對象編程:b怎么繼承a5.看看下面alert的結果是什么view sourceprint?1.function b(x, y, a) .arguments2 =

47、10; .alert(a); b(1, 2, 3);如果函數體改成下面，結果又會是什么？a = 10; alert(arguments2 );6.請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象var obj = parseQueryString(url); alert(obj.key0)/ 輸出07.ajax是什么?ajax的交互模型? 同步和異步的區別? 如何解決跨域問題?ajax(動態網站靜態化)伴隨的goole 的推動，越來越多的站點開始使用了，在開大ajax(動態網站靜態化)程序的時候會遇到很多的問題，主要有以下幾個方面： 1

48、.跨瀏覽器問題 2.歷史后退狀態問題 3.跨域問題 跨瀏覽器的問題因為現在有很多的開元的框架已經解決了，我們無需為此而煩惱。 歷史后退狀態問題我們可以使用一個數組來保存歷史紀錄，然后把這些數據村到歷史對象中去，中的也可以解決，并且還有很多的開元框架給與支持，這樣問題就不是很大。 跨域的問題就不是很好的解決，但是還是有辦法的，一下給出一些基本的解決方案供大家選擇： 1.使用代理，你可以使用web端的程序編寫代理程序，把所有的ajax(動態網站靜態化)請求的數據進行轉發，web程序可以使php(做為現在的主流 開發語言)，jsp(SUN企業級應用的首選)，asp等所有的編程語言。相信大家對這種方式

49、一定很熟悉，這里就不詳細的介紹了。 2.使用iframe的方式來定勢的刷新葉面，這種方式只是取得數據來顯示，并不能真正的和求得的數據進行交互，轉化成本頁面的動態數據，不是很可取，應用也不是很多，我也忽略不去討論了。 3.使用apache(Unix平臺最流行的WEB服務器平臺)的代理功能，主要就是apache(Unix平臺最流行的WEB服務器平臺)的方向代理， 或者是url從定向，你也可以把其他的站點直接的掛在自己的網站上，這樣的方式可能會友邦權的問題，多的九部介紹了，有興趣的本有可以自己實踐以下。 4.使用script標簽的方式，這樣的話就可以保正使用真正的ajax(動態網站靜態化)來跨域，并

50、且可以使用返回來的數據，發誓很簡單，在我們的后臺程序處理后的到的結果都直接的用javascript 的方式返回，在我們的html中直接的使用返回數據的變量就可以了一個簡單的例子 8.什么是閉包？下面這個ul，如何點擊每一列的時候alert其index? 這是第一條這是第二條這是第三條 9.最近看的一篇Javas cript的文章是？10.常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？pageSpeed .Yslow,Fiddler、fireBug11.說說YSlow(可以詳細一點) 這個插件可以分析網站的頁面，并告訴你為了提高網站性能，如何基于某些規則而進行優化。網頁制作方向的題

51、目1.什么是網站重構？div+css的布局較table布局有什么優點？2.如何理解css盒模型？3.平時做網頁經常使用哪些hack?4.如何理解表現與內容相分離？5.如何解決ie6的雙邊距問題？6. 如何定義高度為1px的容器？heigh：1px; width:10px; background:#000; overflow:hiddenie6下這個問題是默認行高造成的，overflow:hidden|zoom:0.08|line- height:1px這樣也可以解決7.如何實現一個層在瀏覽器中垂直左右居中？margin：auto8.如何解決ie6的3像素問題？_zoom:1;margin-le

52、ft: value; _margin-left: value-3px;9.為什么FF下文本無法撐開容器的高度?如何解決？ 清楚浮動10. 怎么樣才能讓層顯示在FLASH之上呢?解決的辦法是給FLASH設置透明屬性或者1、 答：把未采用CSS，大量使用HTML進行定位、布局，或者雖然已經采用CSS，但是未遵循HTML結構化標準的站點變成讓標記回歸標記的原本意 義。通過在HTML文檔中使用結構化的標記以及用CSS控制頁面表現，使頁面的實際內容與它們呈現的格式相分離的站點。的過程就是網站重構網站為什么要進行重構（網站重構的好處）a、使頁面加載得更快速；b、降低帶寬帶來的費用：節約成本；c、讓你在修改

53、設計時更有效率而代價更低；d、幫助你的整個站點保持視覺的一致性；e、更利于搜索引擎的檢索（符合SEO的規范）；f、令站點更容易被各種瀏覽器和用戶訪問（包括手機、PDA和殘障人士使用的文字瀏覽器）；g、兼容不容忽視的Mozilla系瀏覽器（Firefox份額）；h、提高你的職場競爭實力(事實上也就是降低失業的風險)。div+css的布局較table布局有什么優點:1、改版的時候更方便 只要改css文件。2、頁面加載速度更快、結構化清晰、頁面顯示簡潔。3、表現與結構相分離。4、易于優化（seo）搜索引擎更友好，排名更容易靠前。答：2.如何理解css盒模型 ： 每個HTML元素都是長方形盒子 外邊局

54、(margin)、內邊距(padding)、邊框(border);答：3.平時做網頁用的css hackIe6 * _;ie7 *, *+,!important;ff !important.答：4.表現與結構相分離簡單的說就是HTML中只有標簽元素表現完全是由CSS文件控制的答：5.解決ie6雙邊距問題塊級元素就加display：inline；行內元素轉塊級元素display：inline后面再加display：table6.如何定義高度為1px的容器？heigh：1px; width:10px; background:#000; overflow:hiddenie6下這個問題是默認行高造成的，overflow:hidden|zoom:0.08|line-height:1px這樣也可以解決7.如何實現一個層在 瀏覽器中垂直左右居中？margin：auto8.如何解決ie6的3像素 問題？_zoom:1; margin-left: value; _margin-left: value-3px;9.為什么FF下文本無法撐開容器的高度?如何解決？清除浮動 .cl