web前端面試題系列：（二）
1、列舉你工作中遇到的IE6 BUG，談談解決方案
a.雙倍邊距bug:
例如：當給父元素內第一個浮動元素設置margin-left或margin-right的時候，margin屬性會加倍，此時需要添加屬性display:inline.
這樣能避免雙倍邊距
b當浮動元素與非浮動元素相鄰時，這個3像素的Bug就會出現，它會偏移3像素。我的解決辦法是給非浮動元素加上浮動就可以了
c.當子元素浮動未知高度時，使父容器適應子元素的高度bug
overflow:auto;——-讓父容器自適應子元素的高度
在IE6會自動擴展父層元素的高度，而IE8和FF等瀏覽器加上overflow:auto後，即可清除浮動。
2、如何用CSS分別單獨定義IE6、7、8的width屬性
所有瀏覽器 通用
height: 100px;
IE6 認：
_height: 100px;
IE6 ，IE7 都認：
*height: 100px;
IE7、FF 共用
height: 100px !important;
3、CSS中哪些屬性不可以從父元素繼承
例如border（邊框）、margin（邊距）、padding（補白）和背景
4、你如何理解HTML結構的語意化
HTML結構是頁面的骨架, 一個頁面就好像一幢房子, HTML結構就是鋼筋混泥土的墻，一幢房子如果沒有鋼筋混泥土的墻那就是一堆費磚頭, 不能住人，不能辦公。css是裝飾材料, css如果沒有html結構那就是一堆木板，一同油漆，沒有了實際使用價值。當我們提到“語義標記”的時候，我們所說的HTML應該是完全脫離表現信息的，其中的標簽應該都是語義化地定義了文檔的結構。
- 這樣有利於讀取設備將根據自身條件合適地顯示頁面
- 搜索引擎的爬蟲也根據語義化的結構進行搜索
- 便於團隊開發和維護
5、做好SEO需要考慮什麽
SEO就是搜索引擎的優化
1、了解搜索引擎如何抓取網頁和如何索引網頁
你需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區別
2、Meta標簽優化
主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。
3、如何選取關鍵詞並在網頁中放置關鍵詞
搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工作之一。首先要給網站確定主關鍵詞（一般在5個上下），然後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。
4、了解主要的搜索引擎
雖然搜索引擎有很多，但是對網站流量起決定作用的就那麽幾個。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。 不同的搜索引擎對頁面的抓取和索引、排序的規則都不一樣。還要了解各搜索門戶和搜索引擎之間的關系，比如AOL網頁搜索用的是Google的搜索技 術，MSN用的是Bing的技術。
5、主要的互聯網目錄
6、你得學會用最少的廣告投入獲得最多的點擊。
7、搜索引擎提交
8、鏈接交換和鏈接廣泛度（Link Popularity）
跟獲取你的訪問量有很大的關系
9、標簽的合理使用
比如盡量少用iframe，搜索引擎不會抓取到iframe裏的內容，重要內容不要放在框架中。
不可使用display:none;的方法讓文字隱藏，因為搜索引擎會過濾掉display:none;裏邊的內容，就不會被蜘蛛檢索了。可以設置text-indent為負數，偏離瀏覽器之外，然後再利用overflow:hidden屬性進行隱藏
6、我們知道可以以外鏈的方式引入CSS文件，請談談外鏈引入CSS有哪些方式，這些方式的性能有區別嗎
a.行內樣式
缺點：通用性差，效果特殊，優點：使用在ＣＳＳ命令較少，並且不常改動的地方，使用這種方法反而是很好的選擇。
b.內嵌樣式：css寫在head標簽裏面
優點：直接在ＨＴＭＬ文檔中，運用這樣式比較快。缺點：代碼臃腫，不利於維護
c.鏈接樣式：引入外部的css文件
比較易於維護和美觀的一種方式
d.導入樣式
優點：一次性導入多個css文件。用於css文件數量龐大的系統中
7、CSS Sprite是什麽，談談這個技術的優缺點
CSS Sprite其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行定位
CSS Sprites能減少圖片的字節，加快網頁的加載速度。缺點是開發和維護都是比較麻煩的。
8、以CSS3標準定義一個webkit內核瀏覽器識別的圓角（尺寸隨意）
border:30px;-webkit-border-radius:40px;
9、有這麽一段HTML，請挑毛病
<P> 哥寫的不是HTML，是寂寞。<br><br> 我說：<br>不要迷戀哥，哥只是一個傳說
缺少p標記的結束標記。
10、如何觸發這Doctype的標準模式和混雜模式？區分它們有何意義?
在標準模式中，瀏覽器根據規範呈現頁面。在混雜模式中，頁面以一種比較寬松的向後兼容的方式顯示。
觸發混亂模式：
IE6的觸發：
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聲明和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">
各個瀏覽器的混雜模式，基本就是各個瀏覽器的私有模式，不相互兼容。所以，除非是為了兼容的問題，才采用混雜模式
11、行內元素有哪些？塊級元素有哪些？CSS的盒模型？
行內元素有：a b span I img input select strong(input用於定義表單中的各個具體的表單元素)
塊級元素有：div ul ol li dl dt dd
盒模型：margin border padding content
12、前端頁面有哪三層構成，分別是什麽？作用是什麽？
網頁分成三個層次，即：結構層、表示層、行為層。
網頁的結構層：由HTML 或XHTML 之類的標記語言負責創建，即HTML的語義化。，說白了就是一些標簽
網頁的表示層：說白了就是CSS
網頁的行為層：說白了就是Javascript 語言和DOM 主宰的領域。
13、有沒有關註HTML5和CSS3?如有請簡單說一些您對它們的了解情況！
IE9以上開始支持
HTML5標簽的改變：<header>,<footer>, <dialog>, <aside>, <figure>, <section> 等
CSS3實現圓角，陰影（text-showdow）對文字加特效(text-overflow,word-wrap,font-size-adjust)，增加了更多的CSS選擇器(全局選擇器，組合選擇器，繼承選擇器，偽類選擇器等)
14、怎樣添加、移除、移動、復制、創建和查找節點
（1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement_x() //創建一個具體的元素
createTextNode() //創建一個文本節點
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
15、面向對象編程:b怎麽繼承a
function A{ this.name=name?name:‘小剛‘; this.age=age?age:30; this.say=function{ alert(this.name+"今年"+this.age+"歲了")； } } function B{} B.prototype=new A(); Var C= new B(); C.say();
16、請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象
function parseQueryString(url) { var pos; var obj = {}; if (pos = url.indexOf("?") != -1) { var urlstring = url.substring(pos + 1, url.lenght – 1); var urlArr = urlstring.split("&"); var keyValue = []; for (var i = 0; i < urlArr.lenght; i++) { keyValue = urlArr[i].split("="); obj[keyValue[0]] = keyValue[1]; } } return obj; } var objUrl = parseQueryString(url);
17、在工作中，對瀏覽器的兼容性怎麽看待的
在工作中會經常遇到一些瀏覽器的兼容性問題，考慮的主要有2塊方面的兼容性問題，一個是css樣式的兼容性，另一個是js的兼容性問題。
（1）.對於css樣式來說，比如IE與火狐兩大瀏覽器，它們對自身的瀏覽器都有默認的padding，margin等值，我們只需要在寫樣式的時候先清除它們默認樣式的值，引入一個reset.css樣式有能很大程度上解決一些常見問題，除此之外當然還有其它的樣式問題，比如IE6的雙邊距問題，解決辦法對IE6寫樣式display:inline；就能解決問題，還比如當子元素浮動未知高度時，使父容器自適應子元素的高度bug，解決辦法就是在父容器樣式裏面加上overflow：auto就能解決（這個問題IE6中能適應子元素的高度，但是IE8跟火狐等其它瀏覽器不行，需要加上剛才的代碼才能實現自適應），還比如當一個浮動元素跟一個非浮動元素相鄰時就會出現3像素的bug，解決辦法其實很簡單給非浮動元素加上浮動就可以解決。
（2）.對於js代碼來說，也有一些常見的瀏覽器兼容性問題，就拿瀏覽器事件處理來說，IE事件處理程序需要2個方法來實現，attachEvent()和detachEvent()兩個方法來實現，它們裏邊的參數只有2個，比如attachEvent()方法的兩個參數：事件處理程序名字與事件處理程序函數。其它瀏覽器用到的是addEventListener()和removeEventListener()兩個方法，但是它們的參數有3個，拿addEventListener()方法舉例，第一個參數，要處理的事件名，比如onclick，但是不需要加上on，參數裏面只需要click，第二個參事件處理程序的函數，最後一個參數是布爾值。布爾值如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
web前端面試題系列：（二）