前端開發面試題和答案

時間 2019-11-14

原文原文鏈接

[HTML && CSS]
1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?javascript

首先我講講如何觸發兩種模式： 加入xml頭部聲明能夠觸發IE瀏覽器的Quirks mode，觸發以後，瀏覽器解析方式就和IE5.5同樣，擁有IE5.5同樣的bug和其餘問題，行爲（Javascript）也是如此。 IE6的觸發 在XHTML的DOCTYPE前加入XML聲明 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE7的觸發 在XML聲明和XHTML的DOCTYPE之間加入HTML註釋 <?xml version="1.0" encoding="utf-8"?> <!-- ... and keep IE7 in quirks mode --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE6和IE7均可以觸發的 在HTML4.01的DOCTYPE文檔頭部加入HTML註釋 <!-- quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 其次是這樣的意義 各個瀏覽器的混雜模式，基本就是各個瀏覽器的私有模式，不相互兼容。因此，除非是爲了兼容的問題，好比你不想修改好久好久之前作的IE ONLY的網頁，不然刻意觸發混雜模式沒有任何意義。

2：行內元素有哪些？塊級元素有哪些？CSS的盒模型？php

一.行內元素和塊級元素有哪些？css

塊級元素html


<address>	information on author
<blockquote>	long quotation
<button>	push button
<caption>	table caption
<dd>	definition description
<del>	deleted text
<div>	generic language/style container
<dl>	definition list
<dt>	definition term
<fieldset>	form control group
<form>	interactive form
<h1>	heading
<h2>	heading
<h3>	heading
<h4>	heading
<h5>	heading
<h6>	heading
<hr>	horizontal rule
<iframe>	inline subwindow
<ins>	inserted text
<legend>	fieldset legend
<li>	list item
<map>	client-side image map
<noframes>	alternate content container for non frame-based rendering
<noscript>	alternate content container for non script-based rendering
<object>	generic embedded object
<ol>	ordered list
<p>	paragraph
<pre>	preformatted text
<table>	table
<tbody>	table body
<td>	table data cell
<tfoot>	table footer
<th>	table header cell
<thead>	table header
<tr>	table row
<ul>	unordered list

行內元素前端


<a>	anchor
<abbr>	abbreviated form
<acronym>	acronym
<b>	bold text style
<bdo>	I18N BiDi over-ride
<big>	large text style
<br>	forced line break
<button>	push button
<cite>	citation
<code>	computer code fragment
<del>	deleted text
<dfn>	instance definition
<em>	emphasis
<i>	italic text style
<iframe>	inline subwindow
<img>	Embedded image
<input>	form control
<ins>	inserted text
<kbd>	text to be entered by the user
<label>	form field label text
<map>	client-side image map
<object>	generic embedded object
<q>	short inline quotation
<samp>	sample program output, scripts, etc.
<select>	option selector
<small>	small text style
<span>	generic language/style container
<strong>	strong emphasis
<sub>	subscript
<sup>	superscript
<textarea>	multi-line text field
<tt>	teletype or monospaced text style
<var>	instance of a variable or program argument

二.行內元素與塊級元素有什麼不一樣？java

1.尺寸-塊級元素和行內元素之間的一個重要的不一樣點 web

行內元素和width面試

W3C CSS2 標準規定行內元素、非置換元素不會應用width屬性。ajax

如下例子中，對行內元素<a>應用了width:200px,你能夠看到，根本就沒有什麼效果。算法

行內元素和height

W3C CSS2 標準規定行內元素、非置換元素不會應用height屬性，可是盒子高度能夠經過line-height來指定。

如下例子，對行內元素<a>應用了height:50px,你能夠看到什麼效果都沒。

行內元素和padding

你能夠給行內元素設置padding，但只有padding-left和padding-right生效。

如下例子，行內元素<a>應用了padding:50px。你能夠看到對左右的內容有影響，可是對上下沒影響。

行內元素和marging

margin屬性也是和padding屬性同樣，對行內元素左右有效，上下無效。

下面的例子,對<a>應用了margin:50px，你能夠看到左右邊緣是生效了可是內容上下卻沒有。

記住對行內元素

設置寬度width 無效。
設置高度height 無效，能夠經過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的，看圖上效果就知道了

盒子模型

W3C 組織建議把全部網頁上的對像都放在一個盒(box)中，設計師能夠經過建立定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層。盒模型主要定義四個區域：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。對於初學者，常常會搞不清楚 margin，background-color，background- image，padding，content，border之間的層次、關係和相互影響。這裏提供一張盒模型的3D示意圖，但願便於你的理解和記憶。

每一個HTML元素均可以看做一個裝了東西的盒子，盒子裏面的內容到盒子的邊框之間的距離即填充（padding），盒子自己有邊框（border），而盒子邊框外和其餘盒子之間，還有邊界（margin）。

盒模型的實際寬度

關於盒模型，還有如下幾點須要注意：

　　·對於塊級元素（display:block），未浮動的垂直相鄰元素的上邊界和下邊界會被壓縮，例如：有上下2個元素，上元素的下邊界爲5px，下面元素的上邊界爲20px，則實際2個元素的間距爲20px（2個邊界值中較大的值）。如圖所示。

注1. 塊級元素（display： block）

每一個塊級元素都從一個新行開始，並且其後的元素也需另起一行開始，標題、段落、表格、層、body等都是塊級元素。塊級元素只能做爲其餘塊級元素的子元素，並且須要必定的條件。

　　·內聯元素，例如<a>、<span>等，定義上下邊界不會影響到行高（line-height），內聯元素距離上一行元素的距離由行高決定，而不是填充或邊界。

注2. 內聯元素（display：inline）

內聯元素不須要在新行內顯示，並且也不強迫其後的元素換行，如a、em、span等都爲內聯元素。內聯元素能夠爲任何其餘元素的子元素。

　　·浮動元素（不管左或者右浮動）邊界不壓縮，且若浮動元素不聲明寬度，則其寬度趨向於0，即壓縮到其內容能承受的最小寬度。

　　·若是盒中沒有內容，則即便定義了寬度和高度都爲100%，實際上只佔0%，所以不會被顯示，此點在採起層佈局的時候需特別注意。

　　·邊界值可爲負，其顯示效果各瀏覽器可能不相同。

　　·填充值不可爲負。

　　·邊框默認的樣式（border-style）爲不顯示（none）。

3.CSS引入的方式有哪些? link和@import的區別是?

本質上，這兩種方式都是爲了加載CSS文件，但仍是存在着細微的差異。

差異1：老祖宗的差異。link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。

link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS了。

差異2：加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯（夢之都加載CSS的方式就是使用@import，我一邊下載一邊瀏覽夢之都網頁時，就會出現上述問題）。

差異3：兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

差異4：使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

大體就這幾種差異了（若是還有什麼差異，你們告訴我，我再補充上去），其它的都同樣，從上面的分析來看，仍是使用link標籤比較好。

標準網頁製做加載CSS文件時，還應該選定要加載的媒體（media），好比screen，print，或者所有all等。這個我到CSS高級教程中再給你們介紹。

注：

1，網友comehope在留言中提出了另外一種區別。

差異5：@import能夠在css中再次引入其餘樣式表，好比能夠建立一個主樣式表，在主樣式表中再引入其餘的樣式表，如：

main.css
———————-
@import 「sub1.css」;
@import 「sub2.css」;

sub1.css
———————-
p {color:red;}

sub2.css
———————-
.myclass {color:blue}

這樣更利於修改和擴展．

猴子提示：這樣作有一個缺點，會對網站服務器產生過多的HTTP請求，之前是一個文件，而如今倒是兩個或更多文件了，服務器的壓力增大，瀏覽量大的網站仍是謹慎使用。有興趣的能夠觀察一下像新浪等網站的首頁或欄目首頁代碼，他們總會把css或js直接寫在html裏，而不用外部文件。

4.CSS選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和important哪一個優先級高？

5:前端頁面有哪三層構成，分別是什麼？做用是什麼？

最準確的網頁設計思路是把網頁分紅三個層次，即：結構層、表示層、行爲層。

網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：「這是一個文本段。」

網頁的表示層（presentation layer） 由 CSS 負責建立。 CSS 對「如何顯示有關內容」的問題作出了回答。

網頁的行爲層（behavior layer）負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM 主宰的領域。

8：你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?常常遇到的瀏覽器的兼容性有哪些？怎麼會出現？解決方法是什麼？

點評：css的兼容性也是你們關注的熱點。你們必定要注意多測試。Javascript 多瀏覽器兼容性問題及解決方案

兼容性處理要點
一、DOCTYPE 影響 CSS 處理

二、FF: 設置 padding 後， div 會增長 height 和 width，但 IE 不會，故須要用 !important 多設一個 height 和 width

三、FF: 支持 !important， IE 則忽略，可用 !important 爲 FF 特別設置樣式

四、div 的垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行

五、在mozilla firefox和IE中的BOX模型解釋不一致致使相差2px解決方法：

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序必定不能寫反，!important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：

div{maring:30px;margin:28px}

重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx!important;

瀏覽器差別
一、ul和ol列表縮進問題

消除ul、ol等列表的縮進時，樣式應寫成：list-style:none;margin:0px;padding:0px;
其中margin屬性對IE有效，padding屬性對FireFox有效。

[注] 經驗證，在IE中，設置margin:0px能夠去除列表的上下左右縮進、空白以及列表編號或圓點，設置padding對樣式沒有影響；在 Firefox 中，設置margin:0px僅僅能夠去除上下的空白，設置padding:0px後僅僅能夠去掉左右縮進，還必須設置list- style:none才能去除列表編號或圓點。也就是說，在IE中僅僅設置margin:0px便可達到最終效果，而在Firefox中必須同時設置margin:0px、 padding:0px以及list-style:none三項才能達到最終效果。

二、CSS透明問題

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好兩個都寫，並將opacity屬性放在下面。

三、CSS圓角問題

IE：ie7如下版本不支持圓角。
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的圓角只看到支持整個區域的圓角，沒有支持邊框的圓角，不過這個邊框的圓角能夠經過一些簡單的手段來實現，下次有機會介紹下。

四、cursor:hand VS cursor:pointer

問題說明：firefox不支持hand，但ie支持pointer ，二者都是手形指示。
解決方法：統一使用pointer。

五、字體大小定義不一樣

對字體大小small的定義不一樣，Firefox中爲13px，而IE中爲16px，差異挺大。

解決方法：使用指定的字體大小如14px。

並列排列的多個元素（圖片或者連接）的div和div之間，代碼中的空格和回車在firefox中都會被忽略，而IE中卻默認顯示爲空格（約3px）。

六、CSS雙線凹凸邊框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

瀏覽器bug
一、IE的雙邊距bug

設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。

解決方案：在這個div裏面加上display:inline;

例如：

<#div id=」imfloat」>

相應的css爲

如下爲引用的內容：

複製代碼代碼以下:
#IamFloat{
float:left;
margin:5px;
display:inline;
}
#IamFloat{
float:left;
margin:5px;
display:inline;
}

關於CSS中的問題實在太多了，甚至一樣的CSS定義在不一樣的頁面標準中的顯示效果都是不同的。一個合乎發展的建議是，頁面採用標準XHTML標準編寫，較少使用table，CSS定義儘可能依照標準DOM，同時兼顧IE、Firefox、Opera等主流瀏覽器。不少狀況下，FF和 Opera的CSS解釋標準更貼近CSS標準，也更具備規範性。

二、IE選擇符空格BUG
今天在給博客的段落樣式設置首字符樣式的時候發現，原來一個空格也可使樣式失效。

請看如下代碼：

<p>對於世界而言，你是一我的；可是對於某我的，你是他的整個世界。縱然傷心，也不要愁雲滿面，由於你不知是誰會愛上你的笑容。</p>
</body>
</html>
[/code]

複製代碼代碼以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<p>對於世界而言，你是一我的；可是對於某我的，你是他的整個世界。縱然傷心，也不要愁雲滿面，由於你不知是誰會愛上你的笑容。</p>
</body>
</html>

這段代碼對<p>的首字符樣式定義在IE6上看是沒有效果的（IE7沒測試），而在p:first-letter和{font- size:300%}加上空格，也就是p:first-letter {font-size:300%}後，顯示就正常了。可是一樣的代碼，在FireFox下看是正常的。按道理說，p:first- letter{font-size:300%}的寫法是沒錯的。那麼問題出在哪裏呢？答案是僞類中的連字符」-」。IE有個BUG，在處理僞類時，若是僞類的名稱中帶有連字符」-」，僞類名稱後面就得跟一個空格，否則樣式的定義就無效。而在FF中，加不加空格均可以正常處理。

對css縮寫的支持問題：
不管是ie 仍是ff對css的縮寫都有一小點問題
好比
border: 0xp solid #fff;兩個瀏覽器支持都沒有問題
但對於四個邊的magin不一樣狀況下，就不能用這種縮寫了，不管是ie仍是ff又會出現邊界解釋錯誤，而致使頁面變形
正確縮寫：
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(主要是 margin-left,margin-right) 方可居中
4.FF: 設置 padding 後, div 會增長 height 和 width, 但 IE 不會, 故須要用 !important 多設一個 height 和 width
5.FF: 支持 !important, IE 則忽略, 可用 !important 爲 FF 特別設置樣式，值得注意的是，必定要將xxxx !important 這句放置在另外一句之上
6.div 的垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行
7.cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠
8.FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格。
9.在mozilla firefox和IE中的BOX模型解釋不一致致使相差2px解決方法：div{margin:30px!important;margin:28px;}
注意這兩個margin的順序必定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx!important;

10.IE5 和IE6的BOX解釋不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div 的寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的寬度爲280px，而在IE6和其餘瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的。這時咱們能夠作以下修改div{width:300px!important;width :340px;margin:0 10px 0 10px}
關於這個是什麼我也不太明白，只知道IE5和firefox都支持但IE6不支持，若是有人理解的話，請告訴我一聲，謝了！：）

11.ul標籤在Mozilla中默認是有padding值的,而在IE中只有margin有值因此先定義ul{margin:0;padding:0;}
就能解決大部分問題
注意事項：
一、float的div必定要閉合。
例如：(其中floatA、floatB的屬性已經設置爲float:left;)<#div id=\"floatA\" >
<#div id=\"floatB\" >
<#div id=\"NOTfloatC\" >
這裏的NOTfloatC並不但願繼續平移，而是但願往下排。
這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將float標籤閉合。
在<#div class=\"floatB\">
<#div class=\"NOTfloatC\">
之間加上<#div class=\"clear\">
這個div必定要注意聲明位置，必定要放在最恰當的地方，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。
而且將clear這種樣式定義爲爲以下便可：.clear{
clear:both;}
此外，爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden;

9.如何居中一個浮動元素?

設置容器的浮動方式爲相對定位

而後肯定容器的寬高好比寬500 高 300 的層

而後設置層的外邊距

Div{

Width:500px ;

height:300px;

Margin: -150px 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, email, date, tel等，強大的約束屬性，如required表示必填，文件上傳的accept屬性，以及一些表單重複元素模型的支持，HTML5在提交表單的時候還可以設置提交的方式爲XML提交方式，這樣服務器端接收到的數據將是XML格式，HTML5的表單被定義爲「Web Forms 2.0」，目前opera9.5+對Web Forms 2.0的支持較爲完美。

HTML5 DOM變化
HTML5的Javascript APIs

HTML5在Javascript上面新增了哪些API呢？
Video/Audio: HTML5爲Video和Audio提供了API來讓開發者控制他們本身的用戶界面，如能夠播放或暫停媒體內容。

CSS3

CSS3對於咱們Web開發者來講不僅是新奇的技術，更重要的是這些全新概念的web應用給咱們帶來更多無限的可能性，也極大地提升了咱們的開發效率。咱們將沒必要再依賴圖片或者Javascript 去完成圓角、多背景、用戶自定義字體、3D動畫、漸變、盒陰影、文字陰影、透明度等提升Web設計質量的特點應用。

CSS3對於動畫的支持

CSS3 支持的動畫類型有：transform(變換)、transition(過渡)和animation(動畫)。你能夠對特定的屬性設置 transition，transiton和animation的區別不大，animation的動畫是本身定義的，面向的更多的是腳本開發者，每每更加複雜。

11.你怎麼來實現下面這個設計圖,主要講述思路（效果圖省略）

13:若是讓你來製做一個訪問量很高的大型網站，你會如何來管理全部CSS文件、JS與圖片？
14：你對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

[Javascript]
1：js是什麼，js和html 的開發如何結合？

2.怎樣添加、移除、移動、複製、建立和查找節點
3.怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差異
4.面向對象編程:b怎麼繼承a
5.看看下面alert的結果是什麼
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
若是函數體改爲下面，結果又會是什麼？
a = 10;
alert(arguments[2] );

6.請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析爲一個對象
var obj = parseQueryString(url);
alert(obj.key0) // 輸出0

7.ajax是什麼? ajax的交互模型? 同步和異步的區別? 如何解決跨域問題?

ajax(動態網站靜態化)伴隨的goole 的推進，愈來愈多的站點開始使用了，在開大ajax(動態網站靜態化)程序的時候會遇到不少的問題，主要有如下幾個方面：

1.跨瀏覽器問題
2.歷史後退狀態問題

3.跨域問題

跨瀏覽器的問題由於如今有不少的開元的框架已經解決了，咱們無需爲此而煩惱。

歷史後退狀態問題咱們可使用一個數組來保存歷史紀錄，而後把這些數據村到歷史對象中去，中的也能夠解決，而且還有不少的開元框架給與支持，這樣問題就不是很大。

跨域的問題就不是很好的解決，可是仍是有辦法的，一下給出一些基本的解決方案供你們選擇：

    1.使用代理，你可使用web端的程序編寫代理程序，把全部的ajax(動態網站靜態化)請求的數據進行轉發，web程序可使php(作爲如今的主流開發語言)，jsp(SUN企業級應用的首選)，asp等全部的編程語言。相信你們對這種方式必定很熟悉，這裏就不詳細的介紹了。
    2.使用iframe的方式來定勢的刷新葉面，這種方式只是取得數據來顯示，並不能真正的和求得的數據進行交互，轉化成本頁面的動態數據，不是很可取，應用也不是不少，我也忽略不去討論了。
    3.使用apache(Unix平臺最流行的WEB服務器平臺)的代理功能，主要就是apache(Unix平臺最流行的WEB服務器平臺)的方向代理，或者是url從定向，你也能夠把其餘的站點直接的掛在本身的網站上，這樣的方式可能會友邦權的問題，多的九部介紹了，有興趣的本有能夠本身實踐如下。
    4.使用《script》標籤的方式，這樣的話就能夠保正使用真正的ajax(動態網站靜態化)來跨域，而且可使用返回來的數據，發誓很簡單，在咱們的後臺程序處理後的到的結果都直接的用javascript 的方式返回，在咱們的html中直接的使用返回數據的變量就能夠了一個簡單的例子

8.什麼是閉包？下面這個ul，如何點擊每一列的時候alert其index?
<ul id=」test」>
<li>這是第一條</li><li>這是第二條</li><li>這是第三條</li>
</ul>

9.最近看的一篇Javas

cript的文章是？

10.常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？
pageSpeed .Yslow,Fiddler、fireBug
11.說說YSlow(能夠詳細一點)

這個插件能夠分析網站的頁面，並告訴你爲了提升網站性能，如何基於某些規則而進行優化。

網頁製做方向的題目

1.什麼是網站重構？div+css的佈局較table佈局有什麼優勢？
2.如何理解css盒模型？
3.平時作網頁常用哪些hack?
4.如何理解表現與內容相分離？
5.如何解決ie6的雙邊距問題？
6. 如何定義高度爲1px的容器？{heigh：1px; width:10px; background:#000; overflow:hidden}ie6下這個問題是默認行高形成的，overflow:hidden | zoom:0.08 | line- height:1px這樣也能夠解決
7.如何實現一個層在瀏覽器中垂直左右居中？margin：auto
8.如何解決ie6的3像素問題？_zoom:1; margin-left: value; _margin-left: value-3px;
9.爲何FF下文本沒法撐開容器的高度?如何解決？清楚浮動
10. 怎麼樣才能讓層顯示在FLASH之上呢? 解決的辦法是給FLASH設置透明屬性<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />

一、答：把"未採用CSS，大量使用HTML進行定位、佈局，或者雖然已經採用CSS，可是未遵循HTML結構化標準的站點"變成"讓標記迴歸標記的本來意義。經過在HTML文檔中使用結構化的標記以及用CSS控制頁面表現，使頁面的實際內容與它們呈現的格式相分離的站點。"的過程就是網站重構

網站爲何要進行重構（網站重構的好處）

a、使頁面加載得更快速；

b、下降帶寬帶來的費用：節約成本；

c、讓你在修改設計時更有效率而代價更低；

d、幫助你的整個站點保持視覺的一致性；

e、更利於搜索引擎的檢索（符合SEO的規範）；

f、令站點更容易被各類瀏覽器和用戶訪問（包括手機、PDA和殘障人士使用的文字瀏覽器）；

g、兼容不容忽視的Mozilla系瀏覽器（Firefox份額）；

h、提升你的職場競爭實力(事實上也就是下降失業的風險)。

div+css的佈局較table佈局有什麼優勢:

一、改版的時候更方便只要改css文件。二、頁面加載速度更快、結構化清晰、頁面顯示簡潔。三、表現與結構相分離。四、易於優化（seo）搜索引擎更友好，排名更容易靠前。

答：2.如何理解css盒模型：每一個HTML元素都是長方形盒子外邊局(margin)、內邊距(padding)、邊框(border);

答：3.平時作網頁用的css hack

Ie6 * _; ie7 *, *+,!important; ff !important.

答：4.表現與結構相分離簡單的說就是HTML中只有標籤元素表現徹底是由CSS文件控制的

答：5.解決ie6雙邊距問題塊級元素就加display：inline；行內元素轉塊級元素display：inline後面再加display：table

6.如何定義高度爲1px的容器？

{heigh：1px; width:10px; background:#000; overflow:hidden}ie6下這個問題是默認行高形成的，overflow:hidden | zoom:0.08 | line-height:1px這樣也能夠解決

7.如何實現一個層在瀏覽器中垂直左右居中？

margin：auto

8.如何解決ie6的3像素問題？

_zoom:1; margin-left: value; _margin-left: value-3px;

9.爲何FF下文本沒法撐開容器的高度?如何解決？

清除浮動 .clear{ clear:both; height:0px; overflow:hidden;}

10.怎麼樣才能讓層顯示在FLASH之上呢?

解決的辦法是給FLASH設置透明屬性

補充:

一、margin-left:10px在FF和IE6下顯示問題。IE6顯示 20px,FF顯示10px。
用!important就能夠解決了。margin-left:10px !important;margin-left:5px;
二、cursor:hand在FF不顯示小手，如何解決？
一句話：cursor;pointer;
三、要求在FF顯示height爲20px;IE6下顯示height爲25px;IE7下顯示height爲30px.

   #test{height:20px;}
   *html #test{height:25px;}
   *+html #test{height:30px;}

   這個之前咱們說過，請參考【IE6的瘋狂Bug之九】解決CSS兼容性最經常使用的"Haker"
   三個就寫上，FF只認識第一個#test,IE6只認識第二個*html #test，IE7只認識第三個*+html #test
  PS：DTD必須加上<!DOCTYPE HTML PUBLIC 「-//W3C//DTD HTML 4.01 Transitional//EN」　」http://www.w3.org/TR/html4/loose.dtd「>要不仍是不認。

四、在IE中內容會自適應高度，而FF不會自適應高度。
在要自適應高度的層中加一個層，樣式爲
.clear{clear:both;font-size:0px;height:1px}，
這樣解決有一個小小的問題，高度會多一個像素。還有一種解決方法，給當前層加上一個僞類
#test:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

1.超連接訪問事後hover樣式就不出現的問題?

被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A

2.IE6的雙倍邊距BUG

例如:

浮動後原本外邊距10px,但IE解釋爲20px,解決辦法是加上display:inline

3.爲何FF下文本沒法撐開容器的高度?

標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度，又想能被撐開須要怎樣設置呢？辦法就是去掉he ight設置min-height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義：

div { height:auto!important; height:200px; min-height:200px; }

4.爲何web標準中IE沒法設置滾動條顏色了?

原來樣式設置：

解決辦法是將body換成html

5.爲何沒法定義1px左右高度的容器?