以下是關(guān)于?Web前端面試題之HTML/CSS篇

001? 行內(nèi)元素有哪些？塊級(jí)元素有哪些？空（void）元素有哪些？

行內(nèi)元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級(jí)元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒(méi)有內(nèi)容的HTML元素，例如：br、hr、link、input、img、meta

002? jpg和png格式的圖片有什么區(qū)別？

jpg是有損壓縮格式，png是無(wú)損壓縮格式。所以，相同的圖片，jpg體積會(huì)小。比如我們一些官網(wǎng)的banner圖，一般都很大，所以適合用jpg類型的圖片。但png分8位的和24位的，8位的體積會(huì)小很多，但在某些瀏覽器下8位的png圖片會(huì)有鋸齒。

003? a標(biāo)簽在新窗口打開鏈接怎么加屬性？

<a target="_blank">鏈接</a>
target用法：_blank表示在新窗口打開被鏈接的文檔；_self表示在相同的框架中打開被鏈接文檔，這也是默認(rèn)值；_parent表示在父框架打開被鏈接文檔；_top表示在整個(gè)窗口中打開被鏈接文檔。

004? strong與em的異同？

strong:粗體強(qiáng)調(diào)標(biāo)簽，強(qiáng)調(diào)，表示內(nèi)容的重要性；
em:斜體強(qiáng)調(diào)標(biāo)簽，更強(qiáng)烈強(qiáng)調(diào)，表示內(nèi)容的強(qiáng)調(diào)點(diǎn)；

005? 說(shuō)一下src和href的區(qū)別？

● src是引入外部資源下載到文檔，會(huì)暫停其他資源的下載
● href是鏈接外部資源，不會(huì)暫停其他資源的下載

006? 請(qǐng)寫出完整的注冊(cè)表單。

007? 請(qǐng)寫出具有表格標(biāo)題為"bjpowernode"的2行3列表格結(jié)構(gòu)。

008? 請(qǐng)寫出具有標(biāo)題屬性和代替文本屬性的圖片標(biāo)簽。

<img alt="img" src="xxx" title="title" />

009? CSS選擇器有哪些？

CSS2選擇器：元素選擇器，id選擇器，群組選擇器，類選擇器，*通配符選擇器，后代選擇器
CSS2偽類選擇器：a:link/visited/hover/active
CSS3選擇器：空格 > +相鄰兄弟選擇器 ~通用選擇器（查找后面所有）

010? 什么是CSS盒子模型？

一個(gè)css盒子從外到內(nèi)可以分成四個(gè)部分：margin(外邊距),border(邊框),padding(內(nèi)邊距),content（內(nèi)容）
默認(rèn)情況下，盒子的width和height屬性只是設(shè)置content（內(nèi)容）的寬和高
盒子真正的寬應(yīng)該是：內(nèi)容寬度+左右填充+左右邊距+左右邊框
盒子真正的高應(yīng)該是：內(nèi)容高度+上下填充+上下邊距+上下邊框;

011? position的屬性值有何區(qū)別？

position 的常見(jiàn)四個(gè)屬性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right"以及"bottom” 屬性使用?！　?br>1]static：默認(rèn)位置，（static 元素會(huì)忽略任何top、bottom、left 或right 聲明）一般不常用。
2]relative：位置被設(shè)置為relative 的元素，偏移的top，right，bottom，left 的值都以它原來(lái)的位置為基準(zhǔn)偏移。注意relative 移動(dòng)后的元素在原來(lái)的位置仍占據(jù)空間。
3]absolute：位置設(shè)置為absolute 的元素，可定位于相對(duì)于包含它的元素的指定坐標(biāo)。意思就是如果它的父容器設(shè)置了position 屬性，并且position 的屬性值為absolute 或者relative，那么就會(huì)依據(jù)父容器進(jìn)行偏移。如果其父容器沒(méi)有設(shè)置position 屬性，那么偏移是以body為依據(jù)。注意設(shè)置absolute 屬性的元素在標(biāo)準(zhǔn)流中不占位置。
4]fixed：位置被設(shè)置為fixed 的元素，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置。它始終是以body 為依據(jù)的。注意設(shè)置fixed 屬性的元素在標(biāo)準(zhǔn)流中不占位置。
總結(jié)：position設(shè)置為absolute和fixed的元素都脫離了文檔標(biāo)準(zhǔn)流;

012? px，rem，em的區(qū)別？

px實(shí)際上就是像素，用PX設(shè)置字體大小時(shí)，比較穩(wěn)定和精確。
px像素（Pixel）。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。
em的值并不是固定的；
em會(huì)繼承父級(jí)元素的字體大小。
rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），使用rem為元素設(shè)定字體大小時(shí)，相對(duì)的是HTML根元素。

013? JS 的內(nèi)置類型有哪些？

基本類型：null、undefined、boolean、number、string、symbol
對(duì)象（Object）：引用類型（也稱為復(fù)雜類型）
注意: NaN 也屬于 number 類型，并且 NaN 不等于自身。

014? NaN是什么？NaN == NaN嗎？

NaN（Not a Number，非數(shù)字）是計(jì)算機(jī)科學(xué)中數(shù)值數(shù)據(jù)類型的一類值，表示未定義或不可表示的值。
雖然 NaN 是“Not a Number”，但是它的類型還是數(shù)值類型

console.log(typeof NaN === "number"); ?//true

NaN 和任何東西都不相等——甚至是它自己本身!

console.log(NaN === NaN); ?//false

015? js中null與undefined區(qū)別?

undefined是undefined類型。表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒(méi)有定義
(1)作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。
(2)作為對(duì)象原型鏈的終點(diǎn)。
null是object類型，代表“空值”，代表一個(gè)空對(duì)象指針
(1)變量被聲明了，但沒(méi)有賦值時(shí)，就等于undefined。
(2)調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒(méi)有提供，該參數(shù)等于undefined。
(3)對(duì)象沒(méi)有賦值的屬性，該屬性的值為undefined。
(4)函數(shù)沒(méi)有返回值時(shí)或者return后面什么也沒(méi)有，返回undefined。

016? 什么是事件冒泡？

在一個(gè)對(duì)象上觸發(fā)某類事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒(méi)有定義此事 件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類事件都將被激活），或者它到達(dá)了對(duì) 象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。
打個(gè)比方說(shuō)：你在地方法院要上訴一件案子，如果地方?jīng)]有處理此類案件的法院，地方相關(guān)部門會(huì)幫你繼續(xù)往上級(jí)法院上訴，比如從市級(jí)到省級(jí)，直至到中央法院，最終使你的案件得以處理。

017? 說(shuō)一下同步和異步的區(qū)別?

同步會(huì)阻塞，異步不會(huì)阻塞
同步：程序運(yùn)行從上而下，瀏覽器必須把這個(gè)任務(wù)執(zhí)行完畢，才能繼續(xù)執(zhí)行下一個(gè)任務(wù)
異步：程序運(yùn)行從上而下，瀏覽器任務(wù)沒(méi)有執(zhí)行完，但是可以繼續(xù)執(zhí)行下一行代碼，當(dāng)被調(diào)用者得到結(jié)果之后會(huì)通過(guò)回調(diào)函數(shù)主動(dòng)通知調(diào)用者。

018? split()和 join() 的區(qū)別？

前者是切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符串；

019? "=="和"==="的不同？

"=="會(huì)自動(dòng)轉(zhuǎn)換類型，因此直接判斷兩邊的值
"==="先判斷左右兩邊的數(shù)據(jù)類型，然后再判斷兩邊的值

020? Javascript如何實(shí)現(xiàn)繼承？

原型鏈繼承，借用構(gòu)造函數(shù)繼承，組合繼承，寄生式繼承，寄生組合繼承

021? 把 Script 標(biāo)簽 放在頁(yè)面的最底部的body封閉之前 和封閉之后有什么區(qū)別？瀏覽器會(huì)如何解析它們？

如果說(shuō)放在body的封閉之前，將會(huì)阻塞其他資源的加載；
如果放在body封閉之后，不會(huì)影響body內(nèi)元素的加載；

022? documen.write和 innerHTML 的區(qū)別？

document.write 只能重繪整個(gè)頁(yè)面；
innerHTML 可以重繪頁(yè)面的一部分；

023? 閉包是什么，有什么特性？

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
閉包的缺點(diǎn)：濫用閉包函數(shù)會(huì)造成內(nèi)存泄露，因?yàn)殚]包中引用到的包裹函數(shù)中定義的變量都永遠(yuǎn)不會(huì)被釋放，所以我們應(yīng)該在必要的時(shí)候，及時(shí)釋放這個(gè)閉包函數(shù)。

024? 已知ID的Input輸入框，希望獲取這個(gè)輸入框的輸入值，怎么做？

document.getElementById(“ID”).value;

025? 獲取到頁(yè)面中所有的checkbox怎么做？

026? 設(shè)置一個(gè)已知ID的DIV的html內(nèi)容為xxxx，字體顏色設(shè)置為黑色。

027? 用js實(shí)現(xiàn)隨機(jī)選取10–100之間的10個(gè)數(shù)字，存入一個(gè)數(shù)組，并排序。

028? 把兩個(gè)數(shù)組合并，并刪除第二個(gè)元素。

029? 怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)？

1)創(chuàng)建新節(jié)點(diǎn)

?

createDocumentFragment(); //創(chuàng)建一個(gè)DOM片段

createElement(); //創(chuàng)建一個(gè)具體的元素

createTextNode(); //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

?

2)添加、移除、替換、插入

appendChild(); ?//添加removeChild(); ?//移除replaceChild(); //替換insertBefore(); //插入

3)查找

getElementsByTagName(); //通過(guò)標(biāo)簽名稱

getElementsByName(); //通過(guò)元素的Name屬性的值

getElementById(); //通過(guò)元素Id，唯一性

030? 字符串反轉(zhuǎn)，如將 '12345678' 變成 '87654321'

//思路：先將字符串轉(zhuǎn)換為數(shù)組 split()，利用數(shù)組的反序函數(shù) reverse()顛倒數(shù)組，再利用 join() 轉(zhuǎn)換為字符串

?

var str = '12345678';?

str = str.split('').reverse().join('');

031? 將數(shù)字 12345678 轉(zhuǎn)化成 RMB形式 如： 12,345,678

//思路：先將數(shù)字轉(zhuǎn)為字符， str= str + '' ;

//利用反轉(zhuǎn)函數(shù)，每三位字符加一個(gè) ','最后一位不加； re()是自定義的反轉(zhuǎn)函數(shù)，最后再反轉(zhuǎn)回去！

032? 生成5個(gè)不同的隨機(jī)數(shù)；

//思路：5個(gè)不同的數(shù)，每生成一次就和前面的所有數(shù)字相比較，如果有相同的，則放棄當(dāng)前生成的數(shù)字！

033? 去掉數(shù)組中重復(fù)的數(shù)字方法一；

034? 什么是AJAX？

AJAX（Asynchronous Javascript And XML）其實(shí)就是異步的javaScript和XML。它是一組用于異步顯示數(shù)據(jù)的相關(guān)技術(shù)。換句話說(shuō)，它在不重新加載網(wǎng)頁(yè)的情況下發(fā)送和檢索數(shù)據(jù)。

035? 簡(jiǎn)述AJAX的優(yōu)點(diǎn)？

1.頁(yè)面局部刷新。在讀取數(shù)據(jù)的過(guò)程中，用戶所面對(duì)的不是白屏，而是原來(lái)頁(yè)面的轉(zhuǎn)臺(tái)，或者正在更新的信息提示狀態(tài)，只有當(dāng)接收到全部數(shù)據(jù)后才能更新相應(yīng)的內(nèi)容，而這種更新也是瞬間的用戶幾乎感受不到。
2.可以充分利用客戶端閑置的處理能力，減輕服務(wù)器和網(wǎng)絡(luò)傳輸?shù)呢?fù)擔(dān)。
3.使得web中界面與應(yīng)用相分離 也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)相分離。

036? 簡(jiǎn)述AJAX的缺點(diǎn)？

1.AJAX干掉了Back和History功能，即對(duì)瀏覽器機(jī)制的破壞。
2.AJAX安全問(wèn)題
3.對(duì)搜索引擎支持較弱
4.不好調(diào)試
5.違背了URL和資源定位的初衷
6.AJAX不是很好支持移動(dòng)設(shè)備

037? AJAX如何處理網(wǎng)絡(luò)請(qǐng)求？

AJAX模塊在處理網(wǎng)絡(luò)請(qǐng)求的時(shí)候包括以下四個(gè)步驟
①通過(guò)XMLHttpRequest類創(chuàng)建xhr對(duì)象
②為xhr對(duì)象添加屬性與回調(diào)方法
③令xhr對(duì)象執(zhí)行open()方法，指明請(qǐng)求被發(fā)往某處
④令xhr對(duì)象執(zhí)行send()方法，發(fā)出請(qǐng)求。
補(bǔ)充：Ajax可以發(fā)出同步請(qǐng)求，也可以發(fā)出異步請(qǐng)求。但大多數(shù)情況下指的是異步請(qǐng)求，因?yàn)橥降腁jax請(qǐng)求對(duì)瀏覽器會(huì)產(chǎn)生‘阻塞效應(yīng)。

038? 原生JS是如何實(shí)現(xiàn)AJax的？

039? AJAX幾種請(qǐng)求方式？他們的優(yōu)缺點(diǎn)？

常用的post,get,delete。不常用copy、head、link等等。
區(qū)別：
(1)post比get安全 (因?yàn)閜ost參數(shù)在請(qǐng)求體中。get參數(shù)在url上面)
(2)get傳輸速度比post快 根據(jù)傳參決定的。(post通過(guò)請(qǐng)求體傳參，后臺(tái)通過(guò)數(shù)據(jù)流接收。速度稍微慢一些。而get通過(guò)url傳參可以直接獲取)
(3)post傳輸文件大理論沒(méi)有限制 ?get傳輸文件小大概7-8k ie4k左右
(4)get獲取數(shù)據(jù) post上傳數(shù)據(jù)(上傳的數(shù)據(jù)比較多 ?而且上傳數(shù)據(jù)都是重要數(shù)據(jù)。所以不論在安全性還是數(shù)據(jù)量級(jí) post是最好的選擇)。

040? 同步和異步請(qǐng)求有什么區(qū)別？

同步請(qǐng)求會(huì)阻止用戶，直到檢索到響應(yīng)，而異步不會(huì)阻止用戶。

041? 回調(diào)函數(shù)在AJAX中的作用是什么？

回調(diào)函數(shù)將函數(shù)作為參數(shù)傳遞給另一個(gè)函數(shù)。如果我們必須在網(wǎng)站上執(zhí)行各種AJAX任務(wù)，那么我們可以創(chuàng)建一個(gè)用于執(zhí)行XMLHttpRequest的函數(shù)和一個(gè)用于執(zhí)行每個(gè)AJAX任務(wù)的回調(diào)函數(shù)。

042? 調(diào)試AJAX應(yīng)用程序的工具有哪些？

有幾種用于調(diào)試AJAX應(yīng)用程序的工具。
● 適用于Mozilla Firefox的Firebug
● 適用于IE的Fiddler（Internet Explorer）
● JavaScript HTML調(diào)試器
● MyEclipse AJAX工具
● 腳本調(diào)試器

043? AJAX中請(qǐng)求的準(zhǔn)備狀態(tài)有哪些？

在AJAX中有5個(gè)請(qǐng)求的就緒狀態(tài)。
● 0：意味著未被發(fā)現(xiàn)
● 1：表示已打開
● 2：表示HEADERS_RECEIVED
● 3：表示裝載
● 4：表示完成

044? jQuery的美元符號(hào)$有什么作用？

其實(shí)美元符號(hào)$只是jQuery的別名，它是jQuery的選擇器

045? body中的onload()函數(shù)和jQuery中document.ready()有什么區(qū)別？

1.我們可以在頁(yè)面中使用多個(gè)document.ready()，但只能使用一次onload()。
2.document.ready()函數(shù)在頁(yè)面DOM元素加載完以后就會(huì)被調(diào)用，而onload()函數(shù)則要在所有的關(guān)聯(lián)資源（包括圖像、音頻）加載完畢后才會(huì)調(diào)用。

046? jQuery中有哪幾種類型的選擇器？

正常是有9中，但我們常用的就3種：
1.基本選擇器：直接根據(jù)id、css類名、元素名返回匹配的dom元素。
2.層次選擇器：也叫做路徑選擇器，可以根據(jù)路徑層次來(lái)選擇相應(yīng)的DOM元素。
3.過(guò)濾選擇器：在前面的基礎(chǔ)上過(guò)濾相關(guān)條件，得到匹配的dom元素。

047? jQuery對(duì)象和DOM對(duì)象是怎樣轉(zhuǎn)換的？

jQuery對(duì)象是一個(gè)包含了dom對(duì)象的數(shù)組 可以通過(guò)jQuery對(duì)象[下標(biāo)]獲取dom對(duì)象
將dom對(duì)象放入$("")中轉(zhuǎn)為jQuery對(duì)象

048? jQuery中的delegate()函數(shù)有什么作用？

如果你有一個(gè)父元素，需要給其下的子元素添加事件，這時(shí)你可以使用delegate（）了，代碼如下：
$("ul").delegate("li","click",function(){$(this).hide();}) 當(dāng)元素在當(dāng)前頁(yè)面不可用時(shí)，可以使用delegate()

049? 使用jQuery將頁(yè)面上的所有元素邊框設(shè)置為2px寬的虛線？

<script language="javascript" type="text/javascript"> ?

$("*").css("border", "2px dotted red");

</script>

050? 如何使用jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出一個(gè)對(duì)話框？

051? 如何用jQuery禁用瀏覽器的前進(jìn)后退按鈕？