WEB前端面試題彙總整理02

時間 2020-02-07

標籤 web 端面試題彙總整理欄目 HTML 简体版

原文原文鏈接

一、列舉你工做中遇到的IE6 BUG，談談解決方案

a.雙倍邊距bug:css

例如：當給父元素內第一個浮動元素設置margin-left或margin-right的時候，margin屬性會加倍，此時須要添加屬性display:inline.
這樣能避免雙倍邊距html

b當浮動元素與非浮動元素相鄰時，這個3像素的Bug就會出現，它會偏移3像素。個人解決辦法是給非浮動元素加上浮動就能夠了前端

c.當子元素浮動未知高度時，使父容器適應子元素的高度bug
overflow:auto;——-讓父容器自適應子元素的高度web

在IE6會自動擴展父層元素的高度，而IE8和FF等瀏覽器加上overflow:auto後，便可清除浮動。編程

二、如何用CSS分別單獨定義IE六、七、8的width屬性

全部瀏覽器通用：height: 100px;
IE6 認：_height: 100px;
IE6 ，IE7 都認：*height: 100px;
IE7：*+height: 100px;瀏覽器

三、CSS中哪些屬性不能夠從父元素繼承

例如border（邊框）、margin（邊距）、padding（補白）和背景app

四、你如何理解HTML結構的語意化

HTML結構是頁面的骨架, 一個頁面就好像一幢房子, HTML結構就是鋼筋混泥土的牆，一幢房子若是沒有鋼筋混泥土的牆那就是一堆費磚頭, 不能住人，不能辦公。css是裝飾材料, css若是沒有html結構那就是一堆木板，一同油漆，沒有了實際使用價值。當咱們提到「語義標記」的時候，咱們所說的HTML應該是徹底脫離表現信息的，其中的標籤應該都是語義化地定義了文檔的結構。
意義：框架

這樣有利於讀取設備將根據自身條件合適地顯示頁面
搜索引擎的爬蟲也根據語義化的結構進行搜索
便於團隊開發和維護

五、作好SEO須要考慮什麼

SEO就是搜索引擎的優化ide

一、瞭解搜索引擎如何抓取網頁和如何索引網頁
你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別函數

二、Meta標籤優化
主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字好比Author（做者），Category（目錄），Language（編碼語種）等。

三、如何選取關鍵詞並在網頁中放置關鍵詞
搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞（通常在5個上下），而後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

四、瞭解主要的搜索引擎
雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索門戶和搜索引擎之間的關係，好比AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。

五、主要的互聯網目錄

六、你得學會用最少的廣告投入得到最多的點擊。

七、搜索引擎提交

八、連接交換和連接普遍度（Link Popularity）
跟獲取你的訪問量有很大的關係

九、標籤的合理使用
好比儘可能少用iframe，搜索引擎不會抓取到iframe裏的內容，重要內容不要放在框架中。
不可以使用display:none;的方法讓文字隱藏，由於搜索引擎會過濾掉display:none;裏邊的內容，就不會被蜘蛛檢索了。能夠設置text-indent爲負數，偏離瀏覽器以外，而後再利用overflow:hidden屬性進行隱藏

六、咱們知道能夠之外鏈的方式引入CSS文件，請談談外鏈引入CSS有哪些方式，這些方式的性能有區別嗎

a.行內樣式
缺點：通用性差，效果特殊，優勢：使用在ＣＳＳ命令較少，而且不常改動的地方，使用這種方法反而是很好的選擇。

b.內嵌樣式：css寫在head標籤裏面
優勢：直接在ＨＴＭＬ文檔中，運用這樣式比較快。缺點：代碼臃腫，不利於維護

c.連接樣式：引入外部的css文件
比較易於維護和美觀的一種方式

d.導入樣式
優勢：一次性導入多個css文件。用於css文件數量龐大的系統中

七、CSS Sprite是什麼，談談這個技術的優缺點

CSS Sprite其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行定位
CSS Sprites能減小圖片的字節，加快網頁的加載速度。缺點是開發和維護都是比較麻煩的。

八、以CSS3標準定義一個webkit內核瀏覽器識別的圓角（尺寸隨意）

border:30px;-webkit-border-radius:40px;

九、有這麼一段HTML，請挑毛病

`<P>`  哥寫的不是HTML，是寂寞。<br><br>  我說：<br>不要迷戀哥，哥只是一個傳說

缺乏p標記的結束標記。

十、如何觸發這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">

各個瀏覽器的混雜模式，基本就是各個瀏覽器的私有模式，不相互兼容。因此，除非是爲了兼容的問題，才採用混雜模式

十一、行內元素有哪些？塊級元素有哪些？CSS的盒模型？

行內元素有：a b span I img input select strong(input用於定義表單中的各個具體的表單元素)
塊級元素有：div ul ol li dl dt dd
盒模型：margin border padding content

十二、前端頁面有哪三層構成，分別是什麼？做用是什麼？

網頁分紅三個層次，即：結構層、表示層、行爲層。
網頁的結構層：由HTML 或XHTML 之類的標記語言負責建立，即HTML的語義化。，說白了就是一些標籤
網頁的表示層：說白了就是CSS
網頁的行爲層：說白了就是Javascript 語言和DOM 主宰的領域。

1三、有沒有關注HTML5和CSS3?若有請簡單說一些您對它們的瞭解狀況！

IE9以上開始支持
HTML5標籤的改變：<header>,<footer>, <dialog>, <aside>, <figure>, <section> 等
CSS3實現圓角，陰影（text-shadow）對文字加特效(text-overflow,word-wrap,font-size-adjust)，增長了更多的CSS選擇器(全局選擇器，組合選擇器，繼承選擇器，僞類選擇器等)

1四、怎樣添加、移除、移動、複製、建立和查找節點

（1）建立新節點

createDocumentFragment()    //建立一個DOM片斷
createElement_x()   //建立一個具體的元素
createTextNode()   //建立一個文本節點

（2）添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore()

（3）查找

getElementsByTagName()    //經過標籤名稱
getElementsByName()    //經過元素的Name屬性的值
getElementById()    //經過元素Id，惟一性

1五、面向對象編程:b怎麼繼承a

function A(name,age){
    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();

1六、請編寫一個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);

1七、在工做中，對瀏覽器的兼容性怎麼看待的

在工做中會常常遇到一些瀏覽器的兼容性問題，考慮的主要有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，表示在冒泡階段調用事件處理程序。

18.new 操做符具體幹了什麼？

new共經歷了四個過程。

var fn = function () { };
var fnObj = new fn();

一、建立了一個空對象

var obj = new object();

二、設置原型鏈

obj._proto_ = fn.prototype;

三、讓fn的this指向obj，並執行fn的函數體

var result = fn.call(obj);

四、判斷fn的返回值類型，若是是值類型，返回obj。若是是引用類型，就返回這個引用類型的對象。

if (typeof(result) == "object"){  
    fnObj = result;  
} else {  
    fnObj = obj;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。