h5常見的面試題

第一部分 HTML&CSS整理答案

1. 什么是HTML5豺鼻？

答：HTML5是最新的HTML標準覆积。

注意：講述HTML5推出的設計目的芦拿，以及現(xiàn)在市場的使用情況支示，瀏覽器支持情況等广辰。暇矫。。择吊。

設計目的

HTML5的設計目的是為了在移動設備上支持多媒體李根。新的語法特征被引進以支持這一點，如video几睛、audio和canvas 標記房轿。HTML5還引進了新的功能，可以真正改變用戶與文檔的交互方式所森，包括：坎坎坷坷

· 新的解析規(guī)則增強了靈活性

· 新屬性

· 淘汰過時的或冗余的屬性

· 一個HTML5文檔到另一個文檔間的拖放功能

[if !supportLists]2.????? [endif]HTML5中什么是不同的新的表單元素類型囱持？

答：提示本地驗證表單需要再外面添加form標簽包起來，才能查看效果

??? color

??? date

???datetime-local

??? email

??? time

??? url

??? range

??? telephone??????????????????????????????????????????????????????????????????????????????????????????????????????

??? number

??? search

[if !supportLists]3.???? [endif]HTML5的頁面結構同HTML4或者更前的HTML有什么區(qū)別焕济？

答：一個典型的WEB頁面包含頭部纷妆，腳部，導航晴弃，中心區(qū)域掩幢，側邊欄。現(xiàn)在如果我們想在在HTML4的HTML區(qū)域中呈現(xiàn)這些內(nèi)容肝匆，我們可能要使用DIV標簽粒蜈。

但是在HTML5中通過為這些區(qū)域創(chuàng)建元素名稱使他們更加清晰，也使得你的HTML更加可讀

以下是形成頁面結構的HTML5元素的更多細節(jié)：（注意主要考的是標簽語意化）

???：代表HTML的頭部數(shù)據(jù)

???：頁面的腳部區(qū)域

??? ：頁面導航元素

???：自包含的內(nèi)容

???：使用內(nèi)部article去定義區(qū)域或者把分組內(nèi)容放到區(qū)域里

???：代表頁面的側邊欄內(nèi)容

[if !supportLists]4.????? [endif]哪些瀏覽器支持HTML5旗国？

答：幾乎所有的高版本瀏覽器Safari枯怖，Chrome，F(xiàn)irefox能曾，Opera度硝，IE8以上都支持HTML5

[if !supportLists]5.????? [endif]為什么HTML5里面我們不需要DTD（Document Type

Definition文檔類型定義）肿轨？

答：HTML5沒有使用SGML或者XHTML，他是一個全新的東西蕊程，因此你不需要參考DTD椒袍，對于HTML5，你僅需放置下面的文檔類型代碼告訴瀏覽器識別這是HTML5文檔即可

[if !supportLists]6.????? [endif]HTML5的離線儲存藻茂？

答：localStorage??? 長期存儲數(shù)據(jù)驹暑，瀏覽器關閉后數(shù)據(jù)不丟失；

sessionStorage? 數(shù)據(jù)在瀏覽器關閉后自動刪除辨赐。

[if !supportLists]7.????? [endif]瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢优俘？

答：在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性掀序，它會請求manifest文件帆焕，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應的資源并且進行離線存儲不恭。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了叶雹，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件换吧，如果文件沒有發(fā)生改變折晦，就不做任何操作，如果文件改變了式散，那么就會重新下載文件中的資源并進行離線存儲筋遭。

離線的情況下打颤，瀏覽器就直接使用離線存儲的資源暴拄。

[if !supportLists]8.????? [endif]請描述一下 cookies，sessionStorage 和 localStorage的區(qū)別编饺？

（1）cookie在瀏覽器和服務器間來回傳遞前联，sessionStorage和localStorage不會尝丐。

（2）sessionStorage和localStorage的存儲空間更大。

（3）sessionStorage和localStorage有更多豐富易用的接口。

（4）sessionStorage和localStorage各自獨立的存儲空間爹谭。

[if !supportLists]9.????? [endif]頁面可見性（Page Visibility）API 可以有哪些用途？

答：在頁面被切換到其他后臺進程的時候错览，自動暫停音樂或視頻的播放档押。

[if !supportLists]10. [endif]HTML5的form如何關閉自動完成功能？

答：給不想要提示的input是設置autocomplete=off即可锅论。

[if !supportLists]11.?? [endif]一個div讼溺，要求實現(xiàn)當內(nèi)容過少時，div的最低高度為200px最易，當內(nèi)容較多時怒坯，div的高度被內(nèi)容撐開炫狱。

答：min-height:200px

[if !supportLists]12.?? [endif]實現(xiàn)一個布局，分左中右三欄剔猿。左欄固定寬為200px视译，右欄固定150px，中欄隨屏幕寬自動適應归敬。寫出html和css酷含。

???

#content{background:#ff6;}??

#left,#right{width:200px;background:#fc0;float:left;}??

#middle{float:left;width:100%;margin:0 -200px;}??

#middle .inner{margin:0200px;background:#ccc;}??

#right{float:right;}?

[if !supportLists]13.?? [endif]a標簽的四個偽類是什么？如何排序汪茧？為什么第美？

愛恨分明原則: l v h a

注釋：為了產(chǎn)生預期的效果，在 CSS 定義中陆爽，a:hover 必須位于 a:link 和 a:visited 之后 !

注釋：為了產(chǎn)生預期的效果什往，在 CSS 定義中，a:active 必須位于 a:hover 之后；疟铡别威！

注釋：Pseudo-class（偽類）的名稱對大小寫不敏感。

注釋：偽類可與 CSS 類配合使用：

a.red:visited

{color: #FF0000;}

class="red" href="css_syntax.asp">CSS Syntax

如果上面這個例子中的鏈接已訪問過驴剔，那么它會顯示為紅色省古。

[if !supportLists]14.?? [endif]如何實現(xiàn)浮動元素居中

class="box">

我是浮動的

我也是居中的

.box{

?float:left;

?position:relative;

?left:50%;

}

?float:left;

?position:relative;

?right:50%;

}

[if !supportLists]15.?? [endif]已知一個div內(nèi)有一個img，兩者的高度均不知道丧失，但圖片的高度一定小于div的高度豺妓。用css實現(xiàn)圖片在div內(nèi)的垂直居中。

參考：http://www.jb51.net/css/76120.html

[if !supportLists]16.?? [endif]HTML靜態(tài)頁面出現(xiàn)中文亂碼如何解決布讹？

答：

[if !supportLists]17.?? [endif]下列標簽既是行內(nèi)屬性標簽又可以設寬高的標簽是琳拭？（D）

[if !supportLists]A.?????? [endif]div???? B. span????C. input???? D. img ????E. h1

[if !supportLists]18.?? [endif]用一兩句話說一下你對“盒模型”這個概念的理解，和它都涉及到哪些css屬性描验。

答：網(wǎng)頁設計中常聽的屬性名：內(nèi)容(content)白嘁、填充(padding)、邊框(border)膘流、邊界(margin)絮缅， CSS盒子模式都具備這些屬性。

這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解呼股，所以叫它盒子模式耕魄。

CSS盒子模型就是在網(wǎng)頁設計中經(jīng)常用到的CSS技術所使用的一種思維模型。

[if !supportLists]19.?? [endif]外邊距彭谁、內(nèi)邊距吸奴、邊框有幾種書寫形式,列舉說明。

參考：http://wangye.huseoblog.com/cssdivhezi.html

[if !supportLists]20.?? [endif]有上下兩個div，上一個div設置margin-bottom：10px奄抽；下一個div設置margin-top： 5px蔼两；那么兩個div最后的間距是多少？

答：10px[覆蓋原則]

[if !supportLists]21.?? [endif]寫出下列CSS命令的最簡寫法{margin-left:20px;

margin-bottom:50px; margin-right:20px; margin-top:20px;}

答：margin:

20px 20px 50px;

[if !supportLists]22.?? [endif]我們用hack調兼容時逞度，用到如下命令 div{height：300px额划；*height：400px；_height：500px;}档泽，在ie6里div顯示高度是多少俊戳，火狐里顯示高度是多少？

答：ie6:400px,????? 火狐：300px;[ CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什么樣的瀏覽器識別什么樣的符號是有標準的，CSS hack就是讓你記住這個標準]{ CSS屬性Hack何鸡、CSS選擇符Hack以及IE條件注釋Hack，Hack主要針對IE瀏覽器阿逃。

1、屬性級Hack：比如IE6能識別下劃線“_”和星號“*”赃蛛，IE7能識別星號“*”恃锉，但不能識別下劃線”_ ”，而firefox兩個都不能認識呕臂。

2破托、選擇符級Hack：比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}歧蒋。}

[if !supportLists]23.?? [endif]三層嵌套用在什么地方最合適土砂，有什么優(yōu)點。

答：有圓角邊框不固定寬度同時兼容ie的時候

[if !supportLists]24.?? [endif]背景圖合并用在什么地方最適合谜洽，有什么優(yōu)點萝映。

答: 通常當遇到一個網(wǎng)站要加載大量icon(小圖標)的時候，我們會把它合并成sprite(圖片拼接)褥琐。目的是為了減少HTTP請求次數(shù)锌俱。這樣做既能減少頁面加載時間晤郑，又可以減輕服務器的負載

[if !supportLists]25.?? [endif]頁面如何在瀏覽器里達到居中敌呈，并且左右自適應？

答：margin: 0 auto;

[if !supportLists]26.?? [endif]HTML5版本類型聲明怎么寫造寝。有什么用磕洪？

答：

[if !supportLists]27.?? [endif]XHTML1.0版本你知道么，跟html5版本有什么區(qū)別

答: XHTML 1.0 是 XML 風格的 HTML 4.01诫龙。

XHTML 1.1 主要是初步進行了模塊化析显。

HTML5 是下一代 HTML，取代 HTML 4.01签赃。

W3C(W3C組織是對網(wǎng)絡標準制定的一個非贏利組織谷异，W3C是萬維網(wǎng)聯(lián)盟的縮寫分尸，像HTML、XHTML歹嘹、CSS箩绍、XML的標準就是由W3C來定制。World Wide Web Consortium聯(lián)盟,1994)原本確實計劃用 XHTML 系列替代 HTML 4.01尺上，但 XHTML 系列實際上只活到了 1.1（1.1 和夭折的 1.2 已經(jīng)體現(xiàn)出過分 XML 的跡象材蛛，而 W3C 的理想其實在瘋狂的 XHTML 2 身上，當然怎抛，它沒能誕生）卑吭，還沒脫離HTML 4.01 的陰影就死了。

還沒等 XHTML 興起马绝，它的地位就被 HTML5 取代了豆赏。

[if !supportLists]28.?? [endif]書寫ol，ul富稻，table的嵌套規(guī)范

答：http://www.5icool.org/a/201308/a2081.html

[if !supportLists]29.?? [endif]前端頁面有哪三層構成河绽，分別是什么？作用是什么唉窃？

答: 分成：結構層耙饰、表示層、行為層纹份。

結構層由 HTML 或 XHTML之類的標記語言負責創(chuàng)建苟跪。標簽，也就是那些出現(xiàn)在尖括號里的單詞蔓涧，對網(wǎng)頁內(nèi)容的語義含義做出了描述件已，但這些標簽不包含任何關于如何顯示有關內(nèi)容的信息。例如元暴，P標簽表達了這樣一種語義：“這是一個文本段篷扩。”

表示層由 CSS 負責創(chuàng)建茉盏。 CSS對“如何顯示有關內(nèi)容”的問題做出了回答鉴未。

行為層負責回答“內(nèi)容應該如何對事件做出反應”這一問題篮洁。這是 Javascript 語言和 DOM主宰的領域裳扯。

[if !supportLists]30.?? [endif]img的alt和title有什么區(qū)別？

答: alt 是圖片加載失敗時抓韩，顯示在網(wǎng)頁上的替代文字讶迁； title 是鼠標放上面時顯示的文字

[if !supportLists]31.?? [endif]HTML代碼的書寫規(guī)范有哪些连茧？

答: https://segmentfault.com/a/1190000003229217

[if !supportLists]1.? [endif]黃金法則（Golden rule）在一個項目中永遠遵循同一套編碼規(guī)范

[if !supportLists]2.? [endif]命名規(guī)范? CSS文件名使用英文小寫，多個單詞時，中間用下劃線（_）連接啸驯，如：index.html web-guide.html

id 命名使用英文駝峰命名法客扎，多采用語義化來命名

自定義屬性采用英文小寫命名，多個單詞時罚斗，中間用中劃線（-）連接虐唠，如：generate-catalogue

以 data- 開始的屬性名，是用來存儲數(shù)據(jù)的惰聂，具體可參考 W3C

Html 5 data- 疆偿。html可以通過 dataset 來取屬性中的值，對于不支持的瀏覽器搓幌，可以通過getAttribute來獲取杆故。例如：data-city="ShangHai"，如果對應的html標簽id為 cityList溉愁，則document.getElementById('cityList').dataset('city'); 對于不支持的瀏覽器处铛，應該document.getElementById('cityList').getAttribute('-data-city');

[if !supportLists]3.? [endif]書寫規(guī)范

語法：兩個空格來代替制表符（tab）作為縮進，— 這是保證代碼在各種環(huán)境下顯示一致的唯一方式

屬性中的值拐揭，確保全部使用雙引號

不要省略可選的結束標簽

行內(nèi)元素中不要嵌套塊級元素撤蟆、

p標簽中是不能嵌套塊級元素的

HTML5 doctype：為每個 HTML 頁面的第一行添加標準模式（standard

mode）的聲明

字符編碼：聲明一個明確的字符編碼，讓瀏覽器正確的呈現(xiàn)內(nèi)容堂污，防止出現(xiàn)亂碼家肯，通常字符編碼為UTF-8

引入 CSS 和 JavaScript 文件：在引入CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為text/css 和text/javascript 分別是它們的默認值盟猖。

減少標簽嵌套的數(shù)量：使 HTML 變得更少

[if !supportLists]32.?? [endif]瀏覽器的調試工具有哪些讨衣？都有什么功能？

答: http://www.cnblogs.com/Excellent/p/5368812.html

Chrome的開發(fā)者工具：在打開Chrome后可以通過點擊“F12”功能鍵式镐、“Ctrl+Shift+I”或者“Ctrl+Shift+J”打開開發(fā)者工具反镇。也可以通過工具 - 開發(fā)者工具打開

IE的開發(fā)者工具：IE11的調試工具功能也是比較強大，同樣可以通過F12打開

firefox插件Firebug：在firefox瀏覽器- 添加附件 - 搜索firebug

- 安裝娘汞，然后在firefox瀏覽器的右上角會有個蟲子的圖標歹茶，那個就是firebug了。除此之外你弦，firefox也內(nèi)置了開發(fā)者的工具惊豺，可以如下圖中的按鈕打開開發(fā)者工具

IETest，IE瀏覽器版本切換工具：

JS壓縮和解壓縮工具：notepad++的一個JSTool工具-jsformat來實現(xiàn)的鳖目，該工具能很容易的實現(xiàn)對JS文件的壓縮和解壓縮

JSON格式校驗工具: 在線的網(wǎng)站https://jsonformatter.curiousconcept.com/另外一個是Notepad++ 的Json Viewer插件-show JSONviewer

[if !supportLists]33.?? [endif]table的合并邊框屬性是什么扮叨？跨行是什么？跨列是什么领迈？

答:合并邊框:cellspacing, 跨行:rowspan, 跨列: colspan

[if !supportLists]34.? [endif]CSS是什么？有什么用處。

答: 層疊樣式表是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言狸捅。

CSS目前最新版本為CSS3衷蜓，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言尘喝，CSS能夠對網(wǎng)頁中的對象的位置排版進行像素級的精確控制磁浇，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力朽褪，并能夠進行初步交互設計置吓，是目前基于文本展示最優(yōu)秀的表現(xiàn)設計語言。CSS能夠根據(jù)不同使用者的理解能力缔赠，簡化或者優(yōu)化寫法衍锚，針對各類人群，有較強的易讀性嗤堰。

[if !supportLists]35.?? [endif]你知道less,sass這些東西么（小米）戴质；

答: CSS 預處理器技術已經(jīng)非常的成熟，而且也涌現(xiàn)出了越來越多的 CSS 的預處理器框架踢匣。最為普遍的三款 CSS 預處理器框架蜂林，分別是 Sass坛善、Less CSS、Stylus。CSS 預處理器是一種語言用來為 CSS 增加一些編程的的特性瀑凝，無需考慮瀏覽器的兼容性問題，例如你可以在 CSS 中使用變量答憔、簡單的程序邏輯十艾、函數(shù)等等在編程語言中的一些基本技巧，可以讓你的 CSS 更見簡潔模闲，適應性更強建瘫，代碼更直觀等諸多好處。

[if !supportLists]36.?? [endif]解釋W3C

答: 萬維網(wǎng)聯(lián)盟創(chuàng)建于1994年尸折，是Web技術領域最具權威和影響力的國際中立性技術標準機構啰脚。到目前為止，W3C已發(fā)布了200多項影響深遠的Web技術標準及實施指南实夹，

如廣為業(yè)界采用的超文本標記語言（標準通用標記語言下的一個應用）橄浓、可擴展標記語言（標準通用標記語言下的一個子集）以及幫助殘障人士有效獲得Web內(nèi)容的信息無障礙指南（WCAG）等，

有效促進了Web技術的互相兼容亮航，對互聯(lián)網(wǎng)技術的發(fā)展和應用起到了基礎性和根本性的支撐作用荸实。

[if !supportLists]37.?? [endif]頁面重構

答: 網(wǎng)站重構不是一種技術，不是css+div缴淋，更不是標準准给，網(wǎng)站重構是一種思想泄朴，是一種理念。

引用WebReBuild.ORG 的話：當前國內(nèi)的同行普遍的認為：所謂的網(wǎng)站重構就是“DIV+CSS”露氮，想法固然極度局限祖灰。但也不是另一部分的人認為是“XHTML+CSS”，因為“XHTML+CSS”只是頁面重構畔规。真正的網(wǎng)站重構理應包含結構局扶、行為、表現(xiàn)三層次的分離以及優(yōu)化叁扫，行內(nèi)分工優(yōu)化三妈，以及以技術與數(shù)據(jù)、人文為主導的交互優(yōu)化等莫绣。

重構網(wǎng)站先重構人畴蒲，重構你的理念，不要光光追求技術兔综，追求還原設計稿饿凛，追求瀏覽器的兼容性，重要的是基礎和理念软驰。當你真正了解什么是網(wǎng)站重構的時候網(wǎng)站重構也就真正開始了涧窒。

[if !supportLists]38.?? [endif]div+css與table布局的有何區(qū)別？

答: div+css:布局簡潔明了锭亏，使用方便纠吴，相對于表格來說更容易搜索的到！優(yōu)化程度高點慧瘤。不易出現(xiàn)錯誤或者不可控戴已！樣式繁多，易控易修改锅减。

Table: 表格布局不建議使用糖儡，這個算是快要被淘汰的一種布局方式。布局不容易調整和規(guī)劃怔匣。容易失控握联。大部分都不能使用太多樣式。

[if !supportLists]39.?? [endif]后臺編碼格式不是UTF-8怎么辦每瞒？

答: 統(tǒng)一編碼格式

[if !supportLists]40.?? [endif]一個CSS文件如果過大的話金闽，加載會很慢，占用過大帶寬剿骨，如果解決代芜？

答: 1.去除空格和換行,壓縮css代碼;

????? 2.盡量使用簡寫, 縮減代碼;

????? 3.將css文件分成多個文件

[if !supportLists]41.?? [endif]input標簽存在的兼容問題？

答: 當input標簽在type為text時浓利，在Firefox和Safari中的默認高度為22像素（包括上下邊框）寬度為146像素（包括左右邊框），而在IE中的默認高度為24像素，而寬度卻和Firefox和Safari是一致的帆赢，也是146像素。

當 input標簽在type為submit時玉工，在Firefox中的高度為23像素（包括陰影）羽资，寬度為75像素淘菩。在Safari中高度為21像素，寬度為73像素屠升，在IE中高度為為25像素潮改、寬度為73像素。

[if !supportLists]42.?? [endif]input中disabled與readonly有何區(qū)別腹暖？

答: Readonly只針對input(text /

password)和textarea有效汇在，而disabled對于所有的表單元素都有效，包括select, radio, checkbox, button等脏答。

表單元素在使用了disabled后糕殉，當我們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去殖告，而readonly會將該值傳遞出去(這種情況出現(xiàn)在我們將某個表單中的textarea元素設置為disabled或readonly阿蝶，但是submit button卻是可以使用的)。

[if !supportLists]43.?? [endif]input屬性有哪些黄绩？

[if !supportLists]44.?? [endif]position屬性值羡洁，如只寫了absolute，是相對誰定的位爽丹？

答:離它最近的已經(jīng)定位的父元素

[if !supportLists]45.?? [endif]CSS選擇器中div.ps是什么意思

答: 類名是ps的div

[if !supportLists]46.?? [endif]使用display:inline-block在IE6中不能正常顯示筑煮，如何解決？

答: 方法1：直接讓塊元素設置為內(nèi)聯(lián)對象呈遞（設置屬性 display:inline）粤蝎，然后觸發(fā)塊元素的 layout（如：zoom:1 等）真仲。兼容各瀏覽器的代碼如下： div

{display:inline-block;*display:inline; *zoom:1;...}

方法2：先使用 display:inline-block 屬性觸發(fā)塊元素，然后再定義 display:inline初澎，讓塊元素呈遞為內(nèi)聯(lián)對象（兩個display 要先后放在兩個 CSS 樣式聲明中才有效果秸应，這是 IE 的一個經(jīng)典 bug ，如果先定義了 display:inline-block谤狡，然后再將 display 設回 inline 或 block灸眼，layout 不會消失）。代碼如下（…為省略的其他屬性內(nèi)容）： div {display:inline-block;...}div

{*display:inline;}

[if !supportLists]47.?? [endif]png圖片有幾種格式

答: png有3種不同深度的格式：png8墓懂、png24焰宣、png32

[if !supportLists]48.????? [endif]display的屬性值有哪些？

[if !supportLists]49.????? [endif]標簽的隱藏（display:none和visibility:hidden）的區(qū)別

答：visibility:hidden隱藏捕仔，但在瀏覽時保留位置匕积；CSS display:none視為不存在盈罐，且不加載！

[if !supportLists]50.?????[endif]在頁面內(nèi)居中（水平和垂直方向）*3

答：垂直居中:水平方向給父級設置text-align;使用左右margin值為auto

????? ?豎直方向:設置line-height值為元素高度;設置元素絕對定位,top:0;bottom:0 margin:auto, 0;

[if !supportLists]51.??[endif]如何讓鏈接訪問過后的hover消失

正常情況下:愛恨原則:

l —> v —> h — > a

為了達到上述效果,改變順序即可:

l —> h —> v —> a

[if !supportLists]52.?? [endif]Ie6中為什么不能設置1px高的div

答：在用DIV構建網(wǎng)頁的時候闪唆，有時候需要的高度很小盅粪，這時候就可能會出現(xiàn)問題，因為悄蕾，IE6下DIV有個默認的高度票顾，大約10-12px。當你試圖定義一個高度小于這個默認值的 div 的時候帆调，IE 會固執(zhí)的認為這個層的高度不應該小于字體的行高奠骄。

解決辦法：

第一：定義該DIV字體大小。

例如:

style="height:1px;font-size:0;">

????? 第二：

直接限制自動調整

style="height: 1px; overflow: hidden;”>

[if !supportLists]53.??[endif]div中內(nèi)容沒有撐開高度的原因番刊，怎么解決

父親div沒有設置高度

孩子div設置高度了,

此時,父親的高度是靠孩子撐起來的

但是當孩子浮動了,

父親的高度也就沒了

此時需要給孩子增加一個兄弟div,并且clear:both,問題完美解決

[if !supportLists]54.?? [endif]雙倍邊距bug

連接地址:http://www.360doc.com/content/14/1224/20/21166337_435502508.shtml

在產(chǎn)生雙邊距bug的元素內(nèi),增加一行屬性:display:inline;

第二種辦法:采用cssHack:margin-left:20px;_margin-left:20px;

[if !supportLists]55.??[endif]如何讓div水平排列

1:浮動

2.定位

[if !supportLists]56.??[endif]定義id名和class名有什么區(qū)別

從概念上來說:

id是先找到結構/內(nèi)容含鳞，再給它定義樣式；class是先定義好一種樣式芹务，再套給多個結構/內(nèi)容蝉绷。????

從樣式效果上來說:

????? id的優(yōu)先級要比class高出一個層次

html中不管有幾個id,

在css獲取到的就是所有的

但是在js中通過document獲取到的是第一個

[if !supportLists]57.??[endif]CSS有幾種引入方式？link和@import有什么區(qū)別

link是XHTML標簽枣抱，除了加載CSS外熔吗，還可以定義RSS等其他事務；@import屬于CSS范疇沃但，只能加載CSS磁滚。

link引用CSS時，在頁面載入時同時加載宵晚；@import需要頁面網(wǎng)頁完全載入以后加載育苟。

link是XHTML標簽绿鸣，無兼容問題派任；@import是在CSS2.1提出的赶诊，低版本的瀏覽器不支持。

[if !supportLists]58.??[endif]在IE中給div設display:inline-block;它還會占一行不會?

答：ie不支持display屬性

[if !supportLists]59.??[endif]如何制作漸變效果（不使用CSS3）

這里的關鍵點是h1

{ position: relative } 和h1 span { position: absolute }

?h1 {

? font: bold 330%/100% "LucidaGrande";

? position: relative;

? color: #464646;

}

span {

? background: url(gradient.png) repeat-x;

? position: absolute;

? display: block;

? width: 100%;

? height: 31px;

}

是的逸贾，就這些陨仅，你已經(jīng)搞定了

[if !supportLists]60.??[endif]上下兩個div分別設置了margin-bottom和margin-top，兩個div之間的距離是多少铝侵？

會發(fā)生融合效果,距離就是數(shù)值比較大的那個

[if !supportLists]61.??[endif]除了ul灼伤、ol還用什么寫列表

dt dd

[if !supportLists]62.??[endif]如果不寫頭部聲明會有什么問題

通常html

DOCTYPE聲明是必須的，而且使用div+css更是必不可少咪鲜，如果缺少或錯誤document將會造成你的CSS失效或半失效狐赡，即因為css失效，網(wǎng)頁布局變亂疟丙，有的css屬性不能體現(xiàn)颖侄。

另外:由于萬惡的IE（尤其指IE6和IE7）鸟雏，我們在頁面重構時不免要對其進行各種bug修復及差異化處理。在標準瀏覽器[1]中可實現(xiàn)的效果在IE里卻有各種離奇問題览祖，例如IE6孝鹊、IE7不能良好應對的inline-block和.clearfix問題.

所以就加入了IE版本區(qū)分代碼，主要還是解決IE版本兼容性問題展蒂。

[if !supportLists]63.??[endif]如何優(yōu)化你的頁面

一又活、提倡前端開發(fā)工程師在書寫xhtml的時候做到結構語義化。

?????????????? 結構中主要包括了head和body兩個部分玄货，但是我們經(jīng)常說的是結構語義化主要是body中的標簽皇钞，但是我在這里還是簡單的說一下head悼泌，head中其實包括了一些對于我們seo很有用的一些東西松捉，比如title,Description,Keywords,這些東西在蜘蛛抓取的時候都是有幫助的，當然馆里，還有其他的一些隘世，我在此就不一一說明了，比如設置緩存等一些其他的信息鸠踪。

那么body中的話丙者，包括的標簽就很多了，我覺得作為一個合格的前端開發(fā)人員你應該去熟悉他們营密，比如div,span,h,ul,ol,dl,p等等這類的標簽的使用械媒。應該非常合理，還有就是注意h標簽的斷層评汰，及h1標簽的使用纷捞，這些都是非常重要的。

同時在我們的結構中不要出現(xiàn)style和onclick這樣的內(nèi)聯(lián)的樣式和事件被去。希望大家能夠注意結構與表現(xiàn)主儡、行為的分離。

二惨缆、css糜值，js文件數(shù)量及大小的優(yōu)化

那么關于css、js的優(yōu)化的話坯墨，一般情況下建議css和js采用外聯(lián)式寂汇。但是如果你的頁面內(nèi)容比較多，設計師把整個效果做得比較花的話捣染，恐怕css就非常多了骄瓣，那么這種情況下，你一定要把你的css規(guī)劃好液斜，盡量的采用縮寫累贤，這樣可以減少css文件的大小叠穆，那么對css做相應的規(guī)劃也可以減少css的個數(shù)，減少http請求數(shù)臼膏，js同理硼被。

三、背景圖片數(shù)量及大小的優(yōu)化

由于我們的背景圖片數(shù)量比較多渗磅，這樣的話嚷硫，會給服務器帶來影響此疹，增加了http請求數(shù)柑爸，我們是否有一種好的解決辦法呢融痛？這個答案是肯定的谭羔，如果你是一個合格的前端開發(fā)边败，你應該清楚榆俺，在我們的css定義背景的時候谒臼，可以通過坐標來實現(xiàn)對背景進行定位的艇挨，既然如此会烙，那么我們可以將這些背景合并起來负懦，這樣即可減少http請求數(shù)，同時柏腻，我們在背景整合的時候纸厉，也需要考慮圖片質量，同時也需要考慮圖片的大小.

你的背景圖片保證不超過3個以上五嫂，你的css文件不超過2個颗品，js文件不超過3個。而且良好的遵守web標準的一些規(guī)定沃缘，css放到head中躯枢，js文件放到之前或者之后.

建議body中增加text-align:center

用代替 @import

作為大型網(wǎng)站來說，首頁使用內(nèi)聯(lián)式樣式表孩灯，這樣可以減少http請求數(shù)的同時闺金，也可以防止裸奔。當然其他頁面需要使用外聯(lián)樣式表峰档，這樣才可以方便維護败匹。因為作為大型網(wǎng)站來說，他的首頁訪問量是非常的大的讥巡，所以掀亩。。

把樣式表置于頂部

把腳本置于頁面底部

避免使用 CSS表達式（Expression）

使用外部 JavaScript和 CSS

削減 JavaScript和 CSS

用代替 @import

避免使用濾鏡

剔除重復腳本

減少DOM訪問

開發(fā)智能事件處理程序

最好的方案就是按照 HTML規(guī)范在文檔

/> 內(nèi)加載你的樣式表欢顷。

對于擁有較大瀏覽量的首頁來說槽棍，有一種技術可以平衡內(nèi)置代碼帶來的 HTTP請求減少與通過使用外部文件進行緩存帶來的好處。其中一個就是在首頁中內(nèi)置 JavaScript和 CSS，但是在頁面下載完成后動態(tài)下載外部文件炼七，在子頁面中使用到這些文件時缆巧，它們已經(jīng)緩存到瀏覽器了。

Coockie:

減小Cookie體積

對于頁面內(nèi)容使用無coockie域名

圖片：

優(yōu)化圖像

優(yōu)化CSS

Spirite

不要在HTML中縮放圖像

favicon.ico要小而且可緩存

優(yōu)化前端網(wǎng)站:http://blog.sina.com.cn/s/blog_630dca5b0101koe3.html

[if !supportLists]64.??[endif]兩欄自適應布局豌拙，右側div寬高不定

class="main">

???????????????????????? 右側主體自適應區(qū)塊

??????????????

???????????????????????? 左側定寬200px區(qū)塊

?????????????? .main,.sitebar{

?????????????????????????????????? height: 300px;

?????????????????????????????????? font: bolder 20px/300px "微軟雅黑";

?????????????????????????????????? color: white;

?????????????????????????????????? text-align: center;

?????????????????? }

?????????????????? .main{

?????????????????????????????????? width: 100%;

?????????????????????????????????? float: left;

?????????????????? }

?????????????????? .main .content{

?????????????????????????????????? margin-left: 200px;

?????????????????????????????????? background: red;

?????????????????? }

?????????????????? .sitebar{

?????????????????????????????????? width: 200px;

?????????????????????????????????? float: left;

?????????????????????????????????? margin-left: -100%;

?????????????????????????????????? background-color: green;

?????????????????? }

[if !supportLists]65.??[endif]響應式布局是什么怎么用陕悬？?

用通俗的話來講，所謂的響應式布局（Responsive

Design）按傅，簡單可以理解為自適應屏幕大小進行展示捉超，并且獲得比較好的體驗。

其中唯绍，瀏覽器的兼容是很大的一個技術點拼岳，而布局設計是一個設計難點。如果將響應式布局簡單理解為瀏覽器兼容又大合適况芒，這樣的技術在很多年前就已經(jīng)有提出并有解決方案惜纸。以前的瀏覽器兼容，屏幕大小是相似的牛柒，操作習慣是相同的堪簿，所以兼容只要不用瀏覽器或者平臺展示的樣子一模一樣就可以。

而響應式布局并不是說要展現(xiàn)得一樣皮壁。比如說菜單，在PC可以是左右布局哪审，直接展示蛾魄。而在手機上，不應該是PC上的縮小版湿滓，而應該是菜單屏展示滴须，類似手機原生應用，這就是所謂的不同媒介的適應性體驗叽奥。

備記之

[if !supportLists]66.??[endif]IE6

png的問題扔水。

http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html?????????????????? http://18sucai.com/article/338.htm

方案1 - 純CSS解決方案：

介紹：雖說是純CSS解決方案，但是也使用了JavaScript來運算朝氓，只不過是將腳本寫到了CSS文件中，遺憾的是，此方案只支持img標簽另锋，對背景圖片無效俊柔。

目錄說明：

思路：

1、首先下載透明的圖片文件

2枫夺、在需要設置透明的樣式中加入下方代碼将宪，其中藍色標注代碼為剛才下載的透明圖片，路徑同樣還是相對于HTML文件的位置（不相對于CSS文件！）：

img

{

_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName

== "IMG" &&

this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage

= "none",this.runtimeStyle.filter =

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src

+ "', sizingMethod='image')",this.src =

"images/blank.gif"):(this.origBg = this.origBg? this.origBg

:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter

= "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +

this.origBg + "',

sizingMethod='crop')",this.runtimeStyle.backgroundImage =

"none")),this.pngSet=true);

}

優(yōu)點：

CSS代碼看起來似乎很優(yōu)雅较坛，至少沒有亂七八糟的文件了印蔗，基本沒有外加的文件，效率還算不錯丑勤。

缺點：

1喻鳄、多引入了一個本不應該存在的blank.gif圖片文件；

2确封、不支持背景圖即Background除呵；

3、當文件載入之前爪喘，會先暫時呈現(xiàn)灰底颜曾；

4、不支持Hover等偽類秉剑；

使用情況：

1泛豪、大部分透明的png存在于img標簽中時可考慮；

2侦鹏、如果有背景圖的可以參考上面所說的支持背景圖的兩種方式诡曙；

方案2 - 濾鏡解決方案：

介紹：濾鏡從IE4.0被微軟正式引入，所以我們可以使用濾鏡解決IE6的PNG透明問題略水，濾鏡不僅可以實現(xiàn)目前CSS3的一些旋轉效果而且還可以引入圖片价卤。注意：此方法在部分版本的IETest中無效，建議使用標準的IE6來進行測試渊涝！

目錄說明：

思路：

1慎璧、書寫正常的CSS代碼，通過background導入圖片跨释，這樣所有的瀏覽器均使用了此PNG圖片胸私；

?background:url(../images/W3CfunsLogo.png);

2、通過濾鏡對引入圖片鳖谈，濾鏡引入圖片的時候是相對于HTML文件岁疼，而不是相對于CSS文件，語法如下：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");

代碼寫到這里缆娃，我們放到IE6下測試后發(fā)現(xiàn)IE6還是沒有透明捷绒，因為我們雖然設置了濾鏡引入圖片，但是background也同樣加載了此圖片龄恋，又因為background的圖層比濾鏡設置的高疙驾，所以才沒有顯示出來，如下圖：

3郭毕、所以我們得出的結論就是當我們使用filter的時候它碎，就要使background失效，因此我們可以使用CSSHack來解決此問題（如果您不知道IE6的CSSHack如何使用的話，請看這里０飧亍）傻挂，只需要將IE6的background:none;即可，那么可以得出的代碼如下：

??_background:none;

/*此代碼只有IE6識別*/

又因為filter只在IE6下讓其產(chǎn)生作用挖息，IE6+版本的瀏覽器雖然也識別filter金拒，但是png透明是沒有灰底問題的，所以我們同樣將filter也加上IE6 Hack即可套腹。

4绪抛、最終我們可以得到如下代碼：

#pics

{

background:url(../images/W3CfunsLogo.png)

no-repeat;?

?/*以下為IE6設置PNG透明代碼*/

??_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");

}

提示：如果需要使其支持鏈接的hover，那么需要在CSS中定義：cursor:pointer;使其呈現(xiàn)手型电禀，否則將為默認的鼠標狀態(tài)幢码。

優(yōu)點：

1、綠色無插件尖飞；

2症副、效率高，速度快政基；

3弊仪、網(wǎng)速慢的時候蜈块，不會出現(xiàn)先灰底再透明的情況，支持遠程圖片铃辖；

4甜滨、支持Hover等偽類烛亦，但是得使用兩張圖片射富，網(wǎng)速慢的情況下解虱，會導致第二張圖片暫時無法顯示，因為還沒有完全載入摧扇；

缺點：

1、不支持平鋪挚歧，雖然filter有sizingMethod="scale", 拉伸縮放模式扛稽，但是圖片會變形，如果單純的顏色或簡單的漸變色還能橫向平鋪滑负；

2在张、不支持Img標簽；

3矮慕、不支持CSS Sprite帮匾；

使用情況：

1、當沒有img引入png時可考慮痴鳄；

2瘟斜、當沒有CSS Sprite需求時可考慮；

3、當沒有平鋪需求時候可考慮螺句；

方案3 - HTC插件解決方案：

介紹：從IE 5.5版本開始虽惭，Internet Explorer（IE）開始支持Web 行為的概念。這些行為是由后綴名為.htc的腳本文件描述的蛇尚，它們定義了一套方法和屬性芽唇，程序員幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素上去。

目錄說明：

思路：

1取劫、首先下載壓縮文件?? htc.zip (2.27 KB, 下載次數(shù): 108)

2匆笤、復制并粘貼iepngfix.htc和blank.gif到您的網(wǎng)站文件夾中。

3谱邪、在需要使用的PNG標簽上定義如下炮捧，相對于HTML文件的位置（不相對于CSS文件！）虾标。例如寓盗，你可能看起來像這樣：

img,div{behavior:url(style/iepngfix.htc);}

5、如果您的網(wǎng)站使用的子文件夾璧函，打開傀蚌。HTC文件，大約在第16行更改blankImg變量蘸吓，修改blank.gif路徑像這樣：同樣路徑相對于HTML文件的位置（不相對于CSS文件Ｉ旗拧）。

????IEPNGFix.blankImg

= "images/blank.gif";

6库继、復制并粘貼iepngfix.htc和blank.gif到您的網(wǎng)站文件夾中箩艺。

javascript"

src="js/iepngfix_tilebg.js">

7、由于此js只有使用IE6時才有用宪萄，所以為了讓我們的頁面更加高效的執(zhí)行艺谆，我們可以將上方代碼修改如下，只有IE6的時候才調用執(zhí)行此JavaScript：

type="text/javascript" src="../js/iepngfix_tilebg.js">

優(yōu)點：

1拜英、一次性配置好静汤，只需要像平時一樣引入png圖片，也不需要考慮png相對于html路徑的問題居凶，當目錄有所變化虫给，只需要修改htc文件或css中htc文件路徑即可。

2侠碧、支持平鋪屬性抹估。

3、不支持Img標簽弄兜；

4药蜻、不支持Hover等偽類瓷式；

缺點：

1、多引入了js谷暮、圖片和htc叶眉，共三個文件企孩；

2纪蜒、不支持CSS Sprite凿将；

3、當文件載入之前颊埃，會先暫時呈現(xiàn)灰底蔬充；

使用情況：

1、當沒有img引入png時可考慮班利；

2饥漫、當沒有CSS Sprite需求時可考慮；

3罗标、PNG圖片比較頻繁修改時可考慮庸队；

方案4 - jQuery解決方案：

介紹：jQuery為我們帶來了很大的方便，jQuery沒有讓我們有太大的失望闯割，img和png都同時得以支持彻消，唯一美中不足的還是無法平鋪，無法使用CSS Sprite宙拉。

目錄說明：

思路：

1宾尚、首先下載此方案所用到的js文件和透明gif?? jQueryPngFix.zip (2.7 KB, 下載次數(shù): 139)

2、找到js文件中找到blankgif: 'images/blank.gif'谢澈，將路徑修改為相對于HTML文件的位置（不相對于CSS或js文件；吞）

3、由于此js只有使用IE6時才有用锥忿，所以為了讓我們的頁面更加高效的執(zhí)行牛郑，我們可以將上方代碼修改如下，只有IE6的時候才調用執(zhí)行此JavaScript：

type="text/javascript" src="js/pngfix.js">

優(yōu)點：

1敬鬓、CSS代碼看起來很優(yōu)雅井濒，只需要引入js進行簡單的配置一下就行了，效率還算不錯列林；

2、支持背景圖酪惭，支持img希痴；

缺點：

1、額外加入了js文件和圖片文件春感，增加http請求砌创；

2虏缸、加載了一個龐大的jQuery類庫；

3嫩实、多庫共存的時候可能會出現(xiàn)問題刽辙；

4、不支持平鋪甲献；

5宰缤、不支持CSS Sprite；

6晃洒、當文件載入之前慨灭，會先暫時呈現(xiàn)灰底；

7球及、不支持Hover等偽類氧骤；

使用情況：

當您的項目中使用jQuery的時可以考慮；

jQuery解決方案 - DEMO入口

方案5 - 原生JavaScript解決方案：

介紹：利用了方案1的濾鏡原理來實現(xiàn)吃引，但由于此javascript沒有讀取css文件中的樣式筹陵，所以此方案同樣只支持img標簽，對背景圖片無效镊尺。

目錄說明：

思路：

1朦佩、首先下載透明此方案所用到的js文件?? iepngfix.zip (1.25 KB, 下載次數(shù): 144)

2、由于此js只有使用IE6時才有用鹅心，所以為了讓我們的頁面更加高效的執(zhí)行吕粗，我們可以將上方代碼修改如下，只有IE6的時候才調用執(zhí)行此JavaScript：

type="text/javascript"

src="js/iepngfix.js">

優(yōu)點：

代碼看起來似乎很優(yōu)雅旭愧，基本沒有外加的文件颅筋，效率還算不錯。

缺點：

1输枯、額外加入了js文件议泵，增加http請求；

2、不支持背景圖即Background咙俩；

3樟澜、當文件載入之前，會先暫時呈現(xiàn)灰底碉京；

4、不支持Hover等偽類螟深；

使用情況：

1谐宙、大部分透明的png存在于img標簽中時可考慮；

2界弧、如果有背景圖的可以參考上面所說的支持背景圖的兩種方式凡蜻；

方案6 - EvPng解決方案：

介紹：此方案與第七種方案差不多搭综，使用方法也如出一轍，效果也非常不錯划栓。

目錄說明：

思路：

1兑巾、首先下載此方案所用到的文件，?? EvPng.zip (3.39 KB, 下載次數(shù): 128)

2忠荞、參考第七種方案的使用方法蒋歌。

優(yōu)點：

1、CSS代碼無需任何修改钻洒，按照平時的思路來寫即可奋姿；

2、無需配置素标；

3称诗、沒有多余的gif圖片；

4头遭、支持img寓免；

5、支持平鋪计维；

6袜香、支持CSS Sprite；

8鲫惶、支持Hover等偽類蜈首；

缺點：

1、額外加入了js文件（文件4.93k欠母，比DD_belatedPNG的6.39k還谢恫摺）和http請求，可以忽略不計赏淌；

2踩寇、當文件載入之前，會先暫時呈現(xiàn)灰底六水；

3俺孙、js文件過多的時候，可能會報錯掷贾，導致js無法正常運行（這種情況極少出現(xiàn)睛榄，可以忽略不計）；

4想帅、使用CSS Sprite技術的hover效果在部分情況下top可能會有1像素的偏差懈费。

使用情況：

1、當前7種方法均不能解決問題的時候可考慮博脑；

2憎乙、當DD_belatedPNG效果不理想的時候可以考慮；

方案7 - DD_belatedPNG解決方案：

介紹：我們都知道在目前所用的png圖片透明解決方案基本都是使用濾鏡叉趣、xpression解決的泞边、透明gif替代。但是這些方法都有一個缺點,就是不支持CSS中backgrond-position與 background-repeat疗杉。而這次的js插件使用了微軟的VML語言進行繪制且不需要引入其他文件阵谚，一個小小的js就可以完美解決png圖片 bug就連img標簽和hover偽類也可以很好的解決。

目錄說明：

思路：

1烟具、首先下載此方案所用到的文件梢什，?? DD_belatedPNG.zip (3.76 KB, 下載次數(shù): 254)

2、引入剛下載的js文件朝聋，同樣由于此js只有使用IE6時才有用嗡午，所以為了讓我們的頁面更加高效的執(zhí)行，我們可以將上方代碼修改如下冀痕，只有IE6的時候才調用執(zhí)行此JavaScript：

type="text/javascript"

src="js/DD_belatedPNG.js">

3荔睹、調用函數(shù)孔飒，設置參數(shù)如下：

DD_belatedPNG.fix("#pngImg,#pics,#picsRepeat");

其中傳入的參數(shù)為所使用png圖片的標簽的ID燥撞、類樣式和標簽名稱策泣，同樣也可以按照下方這樣來寫

DD_belatedPNG.fix("#content

img");

此方法則表示#content下的所有img標簽透明

如果為鏈接和鏈接的hover設置透明淤毛，那么您按照下方這么來寫宅此，在部分版本里面可以不用加入:hover直接寫選擇器即可喜每，但是為了保險箕慧，建議咱們還是加上:hover：

DD_belatedPNG.fix("#links,#link:hover");

寫到這里并且您使用過jQuery或者CSSQuery類庫歉胶，那么您一定熟悉上面的這種選擇方法婿斥，總之就是劝篷，在CSS中您是如何選擇的元素，那么在這個js函數(shù)（方法）中傳入什么受扳，只不過多個選擇的時候携龟，使用逗號隔開即可。

KwooShung用此方法時的小技巧：如果頁面中存在很多png勘高，DD_belatedPNG.fix();函數(shù)的參數(shù)豈不是很長峡蟋？我們可以使用這種寫法：

????DD_belatedPNG.fix(".pngFix,.pngFix:hover");

???? 如果使用上述的寫法，我們的html中只需要在相對應的標簽上加入class="pngFix"就行了华望，如果有多個類樣式蕊蝗，按照平時的多個類樣式的寫法即可class="abc cbc pngFix"，

???? 使用此方法的時候赖舟，我們每次都要加載兩個js文件或者寫兩個標簽才行蓬戚，這樣不太好，http請求會增多宾抓，那么我們可以打開DD_belatedPNG.js文件子漩，在尾部加入如下代碼即可：

???? window.onload =

function()

???? {

? DD_belatedPNG.fix(".pngFix,.pngFix:hover");

???? }

????這樣我們只需要引入此JS豫喧，在需要透明的標簽上加入class="pngFix"即可，簡單 · 方便 · 快捷幢泼！

優(yōu)點：

1紧显、CSS代碼無需任何修改，按照平時的思路來寫即可缕棵；

2孵班、無需配置；

3招驴、沒有多余的gif圖片篙程；

4、支持img别厘；

5虱饿、支持平鋪；

6丹允、支持CSS Sprite郭厌；

8、支持Hover等偽類雕蔽；

缺點：

1折柠、額外加入了js文件（6.39k）和http請求，可以忽略不計批狐；

2扇售、當文件載入之前，會先暫時呈現(xiàn)灰底嚣艇；

3承冰、js文件過多的時候，可能會報錯食零，導致js無法正常運行（這種情況極少出現(xiàn)困乒，可以忽略不計）；

使用情況：

1贰谣、當前6種方法均不能解決問題的時候可考慮娜搂；

2、當png圖片過多的時候可考慮吱抚，因為png圖片太多百宇，使用前面的幾個方法，有的會導致CSS代碼冗余過多秘豹，還不如引入此文件劃算携御；

方案8 - PNG8格式的圖片解決方案：

介紹：png8和gif都是8位的透明度，IE6與生俱來就支持png8的索引色透明度，但不支持png或8位以上的 alpha透明度啄刹。而對于非動畫的GIF建議你使用PNG8由境，因為體積會更小~

思路：一個最簡單也最保險的方法讓IE6支持PNG圖片透明（小小的分享一下）

[if !supportLists]67.??[endif]Hack是什么怎么用州胳？

http://www.kwstu.com/Admin/ViewArticle/201409011604277330

[if !supportLists]68.??[endif]Border虛邊

border:

1px dashed red;

[if !supportLists]69.??[endif]li在ie6與ie8下的高度問題

在li樣式上加上vertical-align:bottom;

[if !supportLists]70.??[endif]Css常見兼容性問題陕习，如何解決法焰？

http://www.zhufengpeixun.cn/CSS/2011-08-25/142.html

[if !supportLists]71.??[endif]Css常見選擇器有哪些？優(yōu)先級谭企？

選擇器:http://www.runoob.com/cssref/css-selectors.html

優(yōu)先級:id

> class > 層級選擇器和標簽選擇器

[if !supportLists]72.??[endif]你如何理解絕對定位和相對定位的？都用在什么地方评肆？有什么優(yōu)點和缺點债查？

絕對定位就是你的位置已經(jīng)不屬于你了，你只能漂浮在半空中瓜挽。

相對定位就是你的位置你還占用的盹廷，人還在飄著

有意思的是這些都是相對父輩元素有position為相對或者絕對屬性來定位的，都找不到的話就以body窗口來定位

因為絕對定位（和文檔流沒關系）如無申明久橙，則其是對與body而言的俄占，處理不好的話。如顯示器尺寸變了淆衷，可能就會變型缸榄。

相對定位的元素屬文檔流，所以穩(wěn)定的祝拯，相對定位是相對他該出現(xiàn)的位置甚带，如無設top

left之類，和普通div基本一樣佳头。

一般的絕對定位是這樣用的鹰贵，父元素要是相對定位的且須有布局，如有個高度康嘉，這樣子元素用絕對定位碉输，就可以相對它的父元素進行絕對定位，父元素若不這樣做亭珍，那么子元素用絕對定位其實是相對body定位

[if !supportLists]73.??[endif]左側樣式固定敷钾，右側文本寬度自適應如何布局

看第五十六題面試題.

[if !supportLists]74.?? [endif]下面的布局如何實現(xiàn),如何不用浮動還能使用什么布局方式

定位.或則flex-box

[if !supportLists]75.??[endif]HTML靜態(tài)頁面出現(xiàn)中文亂碼如何解決？

答:

[if !supportLists]76.??[endif]下列哪個選擇器優(yōu)先級是最高的块蚌？

a.?? #a???? b.????? .a .b .c .d .e .f .g .h .i .j .k .l .m .n.o???? c.????? #a.b????????? d.????? div.b#a

答:d

[if !supportLists]77.??[endif]寫CSS命令闰非，設置字體為宋體，12px大小峭范，顏色為#eeeeee,加粗财松。

一、字體屬性主要包括下面幾個

font-family，font-style辆毡，font-variant菜秦，font-weight，font-size舶掖，font

font-family（字體族）: “Arial”球昨、“Times New Roman”、“宋體”眨攘、“黑體”等;

font-style（字體樣式）: normal（正常）主慰、italic（斜體）或oblique（傾斜）;

font-variant (字體變化): normal（正常）或small-caps（小體大寫字母）;

font-weight (字體濃淡): 是normal（正常）或bold（加粗）。有些瀏覽器甚至支持采用100到900之間的數(shù)字（以百為單位）;

font-size（字體大婿晔邸）: 可通過多種不同單位（比如像素或百分比等）來設置, 如：12xp共螺，12pt，120%情竹，1em

如果用 font 屬性的話藐不，就可以把幾個樣式進行簡化，減少書的情況秦效；font 屬性的值應按以下次序書寫(各個屬性之間用空格隔開)：

順序：font-style | font-variant | font-weight |

font-size | line-height | font-family

二雏蛮、font的簡寫實例

.font{

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:12px;

line-height:1.5em;

font-family:arial,verdana;

}

上面的樣式簡寫為：

.font{font:italic

small-caps bold 12px/1.5em arial,verdana;}

三、font的簡寫注意事項

1阱州、簡寫時挑秉，font-size和line-height只能通過斜杠/組成一個值，不能分開寫贡耽。

2衷模、順序不能改變.這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且蒲赂，如果你沒有設定font-weight, font-style, 以及 font-varient 阱冶，他們會使用缺省值

[if !supportLists]78.??[endif]常用布局屬性有哪些？有什么特點滥嘴？

margin

, padding , position , float

http://www.codesec.net/view/404576.html

[if !supportLists]79.?? [endif]填空題

一個div里伯，css設置如下：{width:200px;margin:200px

20px;padding:50px 60px 70px;border:100px solid red;overflow:hidden;}在IE6怪癖解析下胆萧，這個div的實際寬是_360px___渔期？在正常解析下柠辞，這個div的實際寬度是_560px___?

[if !supportLists]80.??[endif]web網(wǎng)頁中常見的圖片格式有哪些？分別有什么特點走触？

常用的圖片格式有JPG晦譬、GIF、PNG互广。

1敛腌、jpg：jpg全名是JPEG卧土。JPEG圖片以 24位顏色存儲單個位圖。JPEG是與平臺無關的格式像樊，支持最高級別的壓縮尤莺，不過，這種壓縮是有損耗的生棍。漸近式 JPEG文件支持交錯颤霎。

2、gif:GIF分為靜態(tài)GIF和動畫GIF兩種涂滴，擴展名為.gif友酱，是一種壓縮位圖格式，支持透明背景圖像柔纵，適用于多種操作系統(tǒng)粹污，“體型”很小，網(wǎng)上很多小動畫都是GIF格式首量。其實GIF是將多幅圖像保存為一個圖像文件，從而形成動畫进苍，最常見的就是通過一幀幀的動畫串聯(lián)起來的搞笑gif圖加缘，所以歸根到底GIF仍然是圖片文件格式。但GIF只能顯示256色觉啊。和jpg格式一樣拣宏，這是一種在網(wǎng)絡上非常流行的圖形文件格式。

3杠人、png：PNG勋乾，圖像文件存儲格式，其設計目的是試圖替代GIF和TIFF文件格式嗡善，同時增加一些GIF文件格式所不具備的特性辑莫。PNG的名稱來源于“可移植網(wǎng)絡圖形格式(Portable

Network Graphic Format，PNG)”罩引，也有一個非官方解釋“PNG's Not GIF”各吨，是一種位圖文件(bitmap

file)存儲格式，讀作“ping”袁铐。PNG用來存儲灰度圖像時揭蜒，灰度圖像的深度可多到16位，存儲彩色圖像時剔桨，彩色圖像的深度可多到48位屉更，并且還可存儲多到16位的α通道數(shù)據(jù)。PNG使用從LZ77派生的無損數(shù)據(jù)壓縮算法洒缀，一般應用于JAVA程序瑰谜、網(wǎng)頁或S60程序中，原因是它壓縮比高，生成文件體積小似舵。

[if !supportLists]81.??[endif]在HTML中脚猾，SEO常見的白帽優(yōu)化技巧有哪些？

http://seo.pingce.cc/seoweb/hmseo/20130626204.html

[if !supportLists]82.??[endif]塊屬性標簽與行屬性標簽的區(qū)別砚哗？哪些標簽是塊屬性的龙助，哪些是行的?

在標準文檔流里面，塊級元素具有以下特點：

①總是在新行上開始蛛芥，占據(jù)一整行提鸟；

②高度，行高以及外邊距和內(nèi)邊距都可控制仅淑；

③寬如果不設置,默認是父級的寬度称勋，與內(nèi)容無關；

④它可以容納內(nèi)聯(lián)元素和其他塊元素涯竟。

行內(nèi)元素的特點：

①和其他元素都在一行上赡鲜；

②高，行高及外邊距和內(nèi)邊距部分可改變庐船；

③寬度只與內(nèi)容有關扳还；

④行內(nèi)元素只能容納文本或者其他行內(nèi)元素找御。

不可以設置寬高，其寬度隨著內(nèi)容增加，高度隨字體大小而改變寡喝，內(nèi)聯(lián)元素可以設置外邊界参咙，但是外邊界不對上下起作用表蝙，只能對左右起作用，也可以設置內(nèi)邊界壹将，但是內(nèi)邊界在ie6中不對上下起作用嗤攻，只能對左右起作用

http://www.cnblogs.com/imihiroblog/archive/2012/08/28/2660370.html

[if !supportLists]83.??[endif]IE6和IE7有什么不同？

答：

[if !supportLists]I.????????[endif]打開IE7瞭恰，第一感覺就是簡潔干凈了許多屯曹。主要是去除了工具菜單，按鈕圖標變得更加圓滑惊畏。

[if !supportLists]II.??????[endif]只放一些常用的工具按鈕恶耽。

[if !supportLists]III.???[endif]新的收藏中心、RSS feeds和歷史颜启，更加整潔偷俭、方便管理和使用。

[if !supportLists]IV.????[endif]現(xiàn)在流行的任何一款瀏覽器都會有TAB（標簽）功能缰盏。IE當然也不能落伍涌萤，TAB可以方便的切換窗口淹遵，而不像以前那樣在任務欄上來回尋找窗口。

[if !supportLists]V.??????[endif]新建標簽放在了網(wǎng)頁標簽旁邊负溪，在節(jié)省空間上IE7做的淋漓盡致透揣。

[if !supportLists]VI.????[endif]快速標簽，可以在打開多個窗口時查看每個窗口的縮略圖川抡。這個功能不如Opera 辐真，Opera可以在鼠標放到TAB上時自動顯示一個縮略圖。

[if !supportLists]VII.?[endif]搜索工具欄崖堤，隨著Goolge 百度的出現(xiàn)侍咱，人們查東西的頻率越來越高了，整合到瀏覽器里更是方便密幔。當然微軟也不會為Google做廣告楔脯，默認的搜索引擎是MSN

Search，可以手動設置到Google.

[if !supportLists]VIII.?????????[endif]時間就是金錢胯甩，用戶瀏覽網(wǎng)頁只希望在第一時間看到所需的信息昧廷，而不用浪費時間去檢查大量的網(wǎng)站以及Blog的更新，新聞聚合器做到了這一點偎箫。

[if !supportLists]IX.????[endif]IE7加入了自動檢測到網(wǎng)站中的RSS

Feeds功能麸粮。

[if !supportLists]X.??????[endif]Feeds的收藏夾，有趣的是里面還有個Internet

Explorer Team Blog

[if !supportLists]XI.???? [endif]安全性和隱私得到了提高

[if !supportLists]84.???????????[endif]有三個兄弟div,設制樣式div{float:left}如何使第二個div不浮動（不能用CSS3選擇器）

style="float:none">

[if !supportLists]85.???????????[endif]寫出兩個div并排顯示的css樣式镜廉，要求左側的div寬度200px；字體加粗愚战；行高30px娇唯；與右側div的外邊距10px；右側的div寬度自適應寂玲，邊框1px灰色塔插；

答:

?????????????????

????????????????? ??? * {

????????????????? ???? ???padding: 0;

????????????????? ???? ???margin: 0;

????????????????? ??? }

????????????????? ??? .out {

????????????????? ???? ???position: fixed;

????????????????? ???? ???right: 0;

????????????????? ???? ???top: 0;

????????????????? ???? ???left: 0;

????????????????? ??? }

?????????????????????????? #left {

???????????????????????????????????? width:200px;

???????????????????????????????????? height:200px;

???????????????????????????????????? font-weight:bold;

???????????????????????????????????? line-height:30px;

???????????????????????????????????? background-color:red;

?????????????????????????? }

?????????????????????????? #right {

???????????????????????????????????? margin-left:10px;

???????????????????????????????????? height:198px;

???????????????????????????????????? border:1px solid gray;

???????????????????????????????????? background:blue;

???????????????????????????????????? position:absolute;

???????????????????????????????????? left:200px;

???????????????????????????????????? top:0;

???????????????????????????????????? right:0;

?????????????????????????? }

?????????????????

??????????????????????????

[if !supportLists]86.???? [endif]css樣式引用和js引入的位置問題（為什么會放在頭部或者底部）。

答: 在開發(fā)網(wǎng)頁時拓哟，盡量將css放置在頁面的header里想许，js不管是外部引入的或嵌入的js片段都應放在頁面的尾部。

因為頁面在加載時断序，css加載是可以并發(fā)請求的（同頁面中的圖片流纹，ie6除外），而js加載時需要等待一個js文件加載完成后才加載其他資源违诗，為了頁面的快速呈現(xiàn)漱凝，放置在尾部效果較好。

同時由于嵌入的js片段會阻塞整個頁面的呈現(xiàn)（外部引入js文件阻塞其他資源下載诸迟，也會阻塞該js引入位置以下的頁面的內(nèi)容呈現(xiàn)茸炒，所以要放置頁面的最下面）

[if !supportLists]87.???????????[endif]下列成立的是（ABCD）

A.? null==undefined????? B. NaN!＝NaN????????? C.false==0????? D.?? "5"==5????? E.????? undefined==0

[if !supportLists]88.???????????[endif]在下面的XHTML標簽中愕乎，正確地標記折行的是（A）

A.
????????????????? B.???????????????? C.
?????????????? D.

[if !supportLists]89.???????????[endif]下面不支持overflow-y屬性的瀏覽器是（A）

A.IE7???????????? B. Firefox3.1????????????? C. Safari3.1??????????????? D. Opera 9.5

[if !supportLists]90.???????????[endif]讀下面一段代碼，相鄰div的垂直外邊距是多少壁公？

div{height: 50px; margin: 50px; background-color: #999;}

?????

????? 答: 50px

[if !supportLists]91.???????????[endif]讀下面一段代碼感论，div#a和div#b哪個疊放層次更高，a覆蓋b還是b覆蓋a紊册？

body{margin: 0;padding: 100px;background-color: #000;}

div.elem{width: 100px;height: 120px;margin-top: -40px;

????? background-color:#FCE5A6;border: 1px solid #FFF;

????? position: absolute;

}

div.box{margin-top: -50px;padding: 10px 20px;

????? width: 100px;height: 100px;

????? background-color: #F97C01;border: 1px solid #FFF;

????? position: relative;

}

?????

??? ?????? ??

????? 答: a覆蓋b

標簽語義化的好處:

[if !supportLists]92.????? [endif]標簽語義化和CSS命名語義化有什么好處橡疼？

1.去掉樣式或者樣式丟失時頁面結構依然清晰分明

2.移動設備能夠更加完美的展示你的網(wǎng)頁（移動設備對css的支持較弱）

3.閱讀器會根據(jù)標簽的語義自動解析，呈現(xiàn)更容易閱讀的內(nèi)容形式（無障礙閱讀）

4.搜索引擎會根據(jù)標簽的語義確定上下文和權重問題

5.便于后期的開發(fā)以及維護坐儿，團隊合作效率提高

答: 如下場景使用img標簽比較合適：

1奏篙、如果圖像是等內(nèi)容的一部分或圖表或人(真正的人,而不是股票圖人)，使用Img標簽加上alt屬性关斜。

2示括、如果你想打印頁面并且你想要的圖像包括默認情況下使用IMG。

3痢畜、使用IMG(alt文本)圖像有一個重要的語義時,比如一個警告圖標垛膝。這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器。

4丁稀、如果你依賴于瀏覽器縮放圖像比例并且可以呈現(xiàn)不錯的效果時使用IMG吼拥。

5、如果配合 z - index 伸展背景圖像來填補它的整個窗口時使用IMG线衫。

6凿可、使用img代替有背景圖像可以顯著提高性能的動畫背景。

7授账、IMG會首先加載因為src在html文件本身中而在有背景圖像源是樣式表中引入的圖像枯跑，加載樣式表加載后,延遲加載的網(wǎng)頁。

如下場景使用background-image屬性比較合適：

1白热、如果圖像不是內(nèi)容的一部分時使用backgrond-image敛助。

2、當圖像代替文本使用時使用backgrond-image屋确。

3纳击、如果你想打印頁面并且你不想要的圖像包括默認情況下使用backgrond-image。

4攻臀、如果需要縮短下載時間通過CSS sprites 時使用backgrond-image焕数。

5、如果你只需要展示圖像的一部分通過CSS sprites刨啸，時使用backgrond-image百匆。

6、如果你需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時使用backgrond-image呜投。

[if !supportLists]94.???????????[endif]應用DIV+CSS寫出一個固定寬度的三列布局加匈，能夠使內(nèi)容根據(jù)屏幕大小自適應居中存璃。????

答案：

?????????????????

????????????????? ??? * {

????????????????? ???? ???padding: 0;

????????????????? ???? ???margin: 0;

????????????????? ??? }

????????????????? ??? .out {

????????????????? ???? ??width:75%;

????????????????? ???? ??margin:0 auto;

????????????????? ???? ??overflow: hidden;

????????????????? ??? }

????????????????? ??? .out div{

????????????????? ???? ???width:33.33%;

????????????????? ???? ???float:left;

????????????????? ??? }

?????????????????

??????????????????????????

[if !supportLists]95.???????????[endif]CSS布局中，擁有布局(haslayout)有什么作用雕拼？怎樣觸發(fā)元素擁有布局纵东？塊級格式化范圍(Block Formatting Context簡稱BFC)有什么作用？怎樣觸發(fā)元素BFC特性啥寇？

答: 參考http://blog.sina.com.cn/s/blog_51048da701018o29.html

[if !supportLists]96.??? [endif]你做的頁面在哪些瀏覽器測試過偎球？這些瀏覽器的內(nèi)核是什么？經(jīng)常遇到的瀏覽器的兼容性有哪些辑甜？怎么會出現(xiàn)衰絮？解決方法是什么？（至少說3個）

答: IE內(nèi)核瀏覽器：360磷醋，傲游猫牡，搜狗，世界之窗邓线，騰訊TT

非IE內(nèi)核瀏覽器：firefox opera safari chrome

1.就是ie6雙倍邊距的問題淌友，在使用了float的情況下，不管是向左還是向右都會出現(xiàn)雙倍骇陈，最簡單的解決方法就是用display:inline;加到css里面去震庭。

2.文字本身的大小不兼容。同樣是font-size:14px的宋體文字你雌，在不同瀏覽器下占的空間是不一樣的器联，ie下實際占高16px，下留白3px婿崭，ff下實際占高17px主籍，上留白1px，下留白3px逛球，opera下就更不一樣了。解決方案：給文字設定 line-height 苫昌。確保所有文字都有默認的 line-height 值颤绕。這點很重要，在高度上我們不能容忍1px 的差異祟身。

3. ff下容器高度限定奥务，即容器定義了height之后锦溪，容器邊框的外形就確定了技矮，不會被內(nèi)容撐大檐束，而ie下是會被內(nèi)容撐大孽惰，高度限定失效盲赊。所以不要輕易給容器定義height。

4.還討論內(nèi)容撐破容器問題嘹叫，橫向上的蓬痒。如果float容器未定義寬度，ff下內(nèi)容會盡可能撐開容器寬度闯睹，ie下則會優(yōu)先考慮內(nèi)容折行戏羽。故，內(nèi)容可能撐破的浮動容器需要定義width楼吃。

5.浮動的清除始花，ff下不清除浮動是不行的。

mirrormargin bug孩锡，當外層元素內(nèi)有float元素時酷宵，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px躬窜。padding也會出現(xiàn)類似問題浇垦，都是ie6下的特產(chǎn)，該類bug 出現(xiàn)的情況較為復雜斩披，遠不只這一種出現(xiàn)條件溜族，還沒系統(tǒng)整理。解決方案：外層元素設定border或設定float垦沉。

7.吞吃現(xiàn)象煌抒，限于篇幅，我就不展開了厕倍。還是ie6寡壮，上下兩個div，上面的div設置背景讹弯，卻發(fā)現(xiàn)下面沒有設置背景的div 也有了背景况既，這就是吞吃現(xiàn)象。對應上面的背景吞吃現(xiàn)象组民，還有滾動下邊框缺失的現(xiàn)象棒仍。解決方案：使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的臭胜。

[if !supportLists]97.??? [endif]什么是CSS浮動問題莫其？如何清除浮動？寫出所有你知道的方法

clear:both;

1.使用空標簽清除浮動耸三。這種方法是在所有浮動標簽后面添加一個空標簽定義css

clear:both.弊端就是增加了無意義標簽乱陡。

2.使用overflow。給包含浮動元素的父標簽添加css屬性overflow:auto;zoom:1;zoom:1用于兼容IE6仪壮。

3.使用after偽對象清除浮動憨颠。該方法只適用于非IE瀏覽器。具體寫法可參照以下示例积锅。使用中需注意以下幾點爽彤。一养盗、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像素淫茵；二爪瓜、content屬性是必須的，但其值可以為空匙瘪，content屬性的值設為”.”铆铆，空亦是可以的。

4.浮動外部元素

此三種方法各有利弊丹喻，使用時應擇優(yōu)選擇薄货，比較之下第二種方法更為可取。

[if !supportLists]98.???????????[endif]觸發(fā)haslayout的方法

答:大部分的 IE顯示錯誤碍论，都可以通過激發(fā)元素的haslayout 屬性來修正谅猾。可以通過設置css 尺寸屬性(width/height)等來激發(fā)元素的 haslayout鳍悠，使其“擁有布局”税娜。可以通過設置 css 尺寸屬性(width/height)等來激發(fā)元素的 haslayout藏研，使其“擁有布局”敬矩。如下所示，通過設置以下 css 屬性即可蠢挡。

　　* display:

inline-block

　　* height: (任何值除了auto)通常用 _height:1%;解決IE6的問題轰枝，height:1%不會改變實際高度

　　* float: (left 或 right)

　　* position: absolute

　　* width: (任何值除了auto)

　　* writing-mode: tb-rl

　　* zoom: (除 normal 外任意值)

[if !supportLists]99.???????????[endif]ie瀏覽器Hack的寫法

1晓避、IE6以及IE6以下版本瀏覽器

html .demo {color: green;}

2宫补、僅僅IE7瀏覽器

*:first-child+html

.demo {color: green;}

3植阴、除IE6之外的所有瀏覽器（IE7-9, Firefox,Safari,Opera）

html>body

.demo {color: green;}

4、IE8-9,Firefox,Safari,Opear

html>/**/body

.demo {color: green;}

5勤家、IE9+

:root

.demo {color: red;}

[if !supportLists]100.?????? [endif]清除浮動的方法

clear:both;

1.使用空標簽清除浮動腹尖。這種方法是在所有浮動標簽后面添加一個空標簽定義css

clear:both.弊端就是增加了無意義標簽。

2.使用overflow伐脖。給包含浮動元素的父標簽添加css屬性overflow:auto;zoom:1;zoom:1用于兼容IE6热幔。

3.使用after偽對象清除浮動。該方法只適用于非IE瀏覽器晓殊。具體寫法可參照以下示例。使用中需注意以下幾點伤提。一巫俺、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像素肿男；二介汹、content屬性是必須的却嗡，但其值可以為空，content屬性的值設為”.”嘹承，空亦是可以的窗价。

4.浮動外部元素

此三種方法各有利弊，使用時應擇優(yōu)選擇叹卷，比較之下第二種方法更為可取撼港。

[if !supportLists]101.???????[endif]用css分別實現(xiàn)某個DIV元素上下居中和左右居中。

方法一:

#one

{

????? width: 100px;

????? height: 100px;

????? border: 4px solid red;

????? position: absolute;

????? left: 50%;

????? top: 50%;

????? transform: translate(-50%, -50%);

}

方法二:

#one

{

????? width: 100px;

????? height: 100px;

????? border: 4px solid red;

????? position: absolute;

????? left: 0;

????? right: 0;

????? bottom: 0;

????? top: 0;

????? margin: auto;

}

方法三:

#one

{

????? width: 100px;

????? height: 100px;

????? border: 4px solid red;

????? position: absolute;

????? left: 50%;

????? right: 50%;

????? margin-left: -50px;

????? margin-top: -50px;

}

[if !supportLists]102. [endif]表單中有一些checkbox該如何提交值骤竹，name一樣嗎

答: name值可以寫成一樣的, 但是要注意

比如這樣寫,

action="test.php" method="get">

type="checkbox" name="name1" value="1" />A

type="checkbox" name="name1" value="2" />B

????? C

?????

如果你選擇了多個選項, 最終服務器只能接收到最后一個值

需要這樣寫,

action="test.php" method="get">

????? A

????? B

????? C

?????

如果你選擇了多個選項, 最終服務器接收到的是一個數(shù)組

[if !supportLists]103.????????????[endif]你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎?

答: 優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作帝牡，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作蒙揣。由于IE獨特的盒模型布局問題靶溜，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.

漸進增強：從被所有瀏覽器支持的基本功能開始懒震，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能的罩息。當瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用个扰。

[if !supportLists]104.????????????[endif]你如何對網(wǎng)站的文件和資源進行優(yōu)化瓷炮？

答:期待的解決方案包括：文件合并文件最小化/文件壓縮使用CDN托管緩存的使用（多個域名來提供緩存）其他。

[if !supportLists]105.????????????[endif]如果你接到了一個使用Tab來縮進代碼的項目锨匆，但是你喜歡空格崭别，你會怎么做？

答:1恐锣、建議項目使用EditorConfig之類的規(guī)范

????? 2茅主、為了保持風格的一致性，保持原有

????? 3土榴、直接使用vim里的retab命令將所有的tab轉換成空格

[if !supportLists]106.????????????[endif]你都使用那些工作來測試代碼的性能诀姚？

例如JSPerf (http://jsperf.com/)

例如Dromaeo (http://dromaeo.com/)

[if !supportLists]107.????????????[endif]‘data-‘屬性的作用是什么？

data-*屬性用于存儲頁面或應用程序的私有自定義數(shù)據(jù)玷禽。data-*屬性賦予我們在所有HTML 元素上嵌入自定義data 屬性的能力赫段。存儲的（自定義）數(shù)據(jù)能夠被頁面的JavaScript 中利用，以創(chuàng)建更好的用戶體驗（不進行Ajax 調用或服務器端數(shù)據(jù)庫查詢）矢赁。

data-*屬性包括兩部分：

屬性名不應該包含任何大寫字母糯笙，并且在前綴"data-" 之后必須有至少一個字符

屬性值可以是任意字符串

在HTML5中我們可以使用以?data-?為前綴來設置我們需要的自定義屬性，來進行一些數(shù)據(jù)的存放撩银。當然高級瀏覽器下可通過腳本進行定義和數(shù)據(jù)存取

data-author="david" data-time="2011-06-20"

data-comment-num="10">...

[if !supportLists]108.????????????[endif]描述css reset的作用和用途给涕。

答: 在HTML標簽在瀏覽器里有默認的樣式, 不同瀏覽器的默認樣式之間也會有差別,往往會給我們帶來麻煩，影響開發(fā)效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉够庙，更準確說就是通過重新定義標簽樣式讓他們統(tǒng)一. 這就是CSS reset恭应。

[if !supportLists]109.????????????[endif]解釋css sprites以及如何使用。

答: CSSSprites在國內(nèi)很多人叫css精靈耘眨，是一種網(wǎng)頁圖片應用處理方式昼榛。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來剔难，當訪問該頁面時胆屿，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了

把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”钥飞，“background- repeat”莺掠，“background-position”的組合進行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置。

[if !supportLists]110.????????????[endif]你使用CSS預處理器嗎？如果有請簡單介紹一下

答: CSS 預處理器是一種語言用來為 CSS 增加一些編程的的特性童叠，無需考慮瀏覽器的兼容性問題，例如你可以在CSS 中使用變量唇兑、簡單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧桦锄，可以讓你的CSS 更見簡潔扎附，適應性更強，代碼更直觀等諸多好處结耀。最為普遍的三款CSS 預處理器框架留夜，分別是Sass、Less

CSS图甜、Stylus碍粥。

[if !supportLists]111.???????[endif]談談你對WEB標準以及W3C的理解與認識。

答: （1）web標準規(guī)范要求黑毅，書寫標簽必須閉合嚼摩、標簽小寫、不亂嵌套矿瘦，可提高搜索機器人對網(wǎng)頁內(nèi)容的搜索幾率枕面。--- SEO

（2）建議使用外鏈css和js腳本，從而達到結構與行為缚去、結構與表現(xiàn)的分離潮秘，提高頁面的渲染速度，能更快地顯示頁面的內(nèi)容易结。

（3）樣式與標簽的分離枕荞，更合理的語義化標簽稠通，使內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設備所訪問买猖、更少的代碼和組件，從而降低維護成本滋尉、改版更方便

（4）不需要變動頁面內(nèi)容玉控，便可提供打印版本而不需要復制內(nèi)容，提高網(wǎng)站易用性

遵循w3c制定的web標準狮惜，能夠使用戶瀏覽者更方便的閱讀高诺，使網(wǎng)頁開發(fā)者之間更好的交流。

[if !supportLists]112.???????[endif]下面哪幾項是HTML4.01中不建議使用的（AC）

A.??????????? B.??????? C.???????????????? D.

[if !supportLists]113.????????????[endif]你能描述一下你制作一個網(wǎng)頁的工作流程嗎碾篡？

???????? 第一步：項目需求評審（明確需求）

???????? 第二步：等待ui設計師提供psd（項目需求技術調研）

???????? 第三步：等到ui設計師設計稿通過以后虱而，給前端制作靜態(tài)html＋js（自己在瀏覽器或者移動設置上瀏覽，查看是否有兼容問題）

???????? 以上為基本制作流程

???????? 以下幾步為項目對接－一直到發(fā)布到線上的過程

???????? 第四步：前后臺數(shù)據(jù)對接完成－測試沒有問題以后开泽，提交測試環(huán)境（任務給測試人員）

???????? 第五步：修改測試返回的問題（直到測試通過為準）

???????? 第六步：測試發(fā)送測試報告以后牡拇，提交預生產(chǎn)環(huán)境，先試著跑1到2周穆律，觀察情況（測試回歸任務檢驗開發(fā)任務是否正常）－－－如果不正常返回給響應的開發(fā)人員進行修復惠呼。

???????? 第七步：正式上線（一般在凌晨更新上線）－－主要原因：減少更新項目對用戶影響。

???????? 第八步：測試人員回歸－－前端同時參與回歸－－后端也參與回歸（如果有問題就悲催了峦耘，解決bug剔蹋，沒有問題項目運行正常－－回家睡覺）

[if !supportLists]114.????????????[endif]你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎?

優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器辅髓，則代碼會檢查以確認它們是否能正常工作泣崩。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案洛口，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.

漸進增強：從被所有瀏覽器支持的基本功能開始矫付，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時绍弟，它們會自動地呈現(xiàn)出來并發(fā)揮作用技即。

參考文檔：https://segmentfault.com/a/1190000000800711#articleHeader30

[if !supportLists]115.????????????[endif]請解釋一下什么是語義化的HTML。

語義化的HTML使用每個html標簽都特定的用途樟遣，例如p標簽放大段文字而叼，???????????????????????????????????? h1~h6常用于標題，strong加粗強掉….豹悬。

[if !supportLists]116.????????????[endif]你如何對網(wǎng)站的文件和資源進行優(yōu)化葵陵？

???????? 文件合并

??????? 文件最小化/文件壓縮

??????? 使用 CDN 托管

??????? 緩存的使用（多個域名來提供緩存）

[if !supportLists]117.????????????[endif]為什么利用多個域名來存儲網(wǎng)站資源會更有效？

答：使用多個域名的原因主要有以下方面：

???????? 1.將請求圖片的url使用單獨的域名,因為圖片資源對網(wǎng)站來說是重要的一部瞻佛，同時帶寬要求高（主要做cdn加速）

???????? 2.靜態(tài)資源單獨的域名（如：css文件脱篙，js文件）?

??????? 3.其中某個域名崩潰用戶也能通過其他郁悶訪問網(wǎng)站

[if !supportLists]118.????????????[endif]請說出三種減低頁面加載時間的方法

???????? 1娇钱、壓縮css、js文件???????? 2绊困、合并js文搂、css文件，減少http請求???????? 3秤朗、外部js枷莉、css文件放在最底下???????? 4零渐、減少dom操作，盡可能用變量替代不必要的dom操作

[if !supportLists]119.????????????[endif]什么是FOUC？你如何來避免FOUC铃诬？

???????? 答：如果使用import方法對CSS進行導入,會導致某些頁面在Windows 下的Internet Explorer出現(xiàn)一些奇怪的現(xiàn)象:以無樣式顯示頁面內(nèi)容的瞬間閃爍,這種現(xiàn)象稱之為文檔樣式短暫失效(Flash of Unstyled Content),簡稱為FOUC.???????? 原因大致為：???????? 1钉疫，使用import方法導入樣式表洲赵。

???????? 2鞋吉，將樣式表放在頁面底部

???????? 3，有幾個樣式表折欠，放在html結構的不同位置贝或。其實原理很清楚：當樣式表晚于結構性html 加載，當加載到此樣式表時锐秦，頁面將停止之前的渲染傀缩。此樣式表被下載和解析后，將重新渲染頁面农猬，也就出現(xiàn)了短暫的花屏現(xiàn)象赡艰。解決方法：使用LINK標簽將樣式表放在文檔HEAD中更多

[if !supportLists]120.????????????[endif]文檔類型的作用是什么？你知道多少種文檔類型聲明方式斤葱？

影響瀏覽器對html代碼的編譯渲染???????? dtd三種方式

???? 1過渡的(Transitional)

?????????????????? 是要求非常寬松的DTD慷垮，一般的情況下網(wǎng)頁中會使用這個，它允許你繼續(xù)使用HTML4.01的標識(但是要符合xhtml 的寫法)揍堕。

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

???? 2嚴格的(Strict)

???????? 要求嚴格的DTD料身，對頁面的標簽使用非常嚴格，頁面里幾乎不準使用 inline-style 的 CSS 樣式衩茸。

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

???? 3框架的(Frameset)

?????????????????? 專門針對框架頁面設計使用的DTD芹血，以前Table 滿街走的年代很流行這種DTD，如果你的頁面中包含有框架楞慈，需要采用這種DTD幔烛。

Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

?? ?? 4適用于手機瀏覽器的DTD（已經(jīng)不用了）

[if !supportLists]121.????????????[endif]你常使用的HTML標簽有哪些？

???????? h1-h6? headerfooter nav article span? p? a??div?? img?? ul?li??? ol li??? dl?dt? dd? br strong等

???????? 注意：不要只關注問題的字面意思囊蓝，要深刻的去理解考官為什么要出這個題的目的

???????? 參考思路：

?????????????????? 1.對標簽的理解

?????????????????? 2.對瀏覽器兼容問題的理解

?????????????????? 3.對h5新增標簽的理解饿悬，以及h5新增的屬性有哪些？聚霜？狡恬？

?????????????????? 4.對新技術的關注以及是否自己驗證過

[if !supportLists]122.????????????[endif]說下你對標簽語義化的理解珠叔。

???????? 答：“語義化”是指在人為更少的干預下讓機器更好的理解和收集信息網(wǎng)頁信息；標簽的語義化可以讓人們更直觀認識標簽和屬性的作用弟劲。特別是HTML5規(guī)范以后祷安，新出現(xiàn)的許多標簽如header、footer兔乞、article等辆憔，使html正在朝著更加健壯的語義化的HTML結構發(fā)展。

[if !supportLists]123.????????????[endif]你知道的html 行級元素和塊級元素標簽分別有哪些报嵌？

塊級元素會從新的一行出現(xiàn)，行內(nèi)元素在一行并排顯示熊榛；行級元素不能設置width與height.

塊級元素有：h1~h6锚国、ul、li玄坦、ol 血筑、dl 、dt煎楣、dd豺总、p、div择懂、form喻喳、等

行內(nèi)元素有：a、span

strong 等

特殊元素具有行和塊的屬性：img困曙、input表伦、table

[if !supportLists]124.????????????[endif]常用瀏覽器的內(nèi)核有哪些？

???????? 答：一慷丽、Trident內(nèi)核代表產(chǎn)品Internet Explorer蹦哼，又稱其為IE內(nèi)核。Trident（又稱為MSHTML）要糊，是微軟開發(fā)的一種排版引擎纲熏。使用Trident渲染引擎的瀏覽器包括：IE、傲游锄俄、世界之窗瀏覽器局劲、Avant、騰訊TT奶赠、Netscape 8容握、NetCaptor梗掰、Sleipnir祭钉、GOSURF相种、GreenBrowser和KKman等遣妥。

???????? 二、Gecko內(nèi)核代表作品Mozilla

FirefoxGecko是一套開放源代碼的谈跛、以C++編寫的網(wǎng)頁排版引擎羊苟。Gecko是最流行的排版引擎之一，僅次于Trident感憾。使用它的最著名瀏覽器有Firefox蜡励、Netscape6至9。

???????? 三阻桅、WebKit內(nèi)核代表作品Safari凉倚、Chromewebkit 是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件嫂沉，主要用于Mac

OS系統(tǒng)稽寒，它的特點在于源碼結構清晰、渲染速度極快趟章。缺點是對網(wǎng)頁代碼的兼容性不高杏糙，導致一些編寫不標準的網(wǎng)頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome蚓土。

???????? 四宏侍、Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用蜀漆。它取代了舊版Opera 4至6版本使用的Elektra排版引擎谅河，包括加入動態(tài)功能，例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版确丢。

?主流瀏覽器所使用的內(nèi)核分類

Trident內(nèi)核：IE,MaxThon,TT,The

World,360,搜狗瀏覽器等

Gecko內(nèi)核：Netscape6及以上版本旧蛾，F(xiàn)F,MozillaSuite/SeaMonkey等

Presto內(nèi)核：Opera7及以上

Webkit內(nèi)核：Safari,Chrome等

典型的雙核瀏覽器包括：

搜狗2.0：Trident內(nèi)核和WebKit內(nèi)核

傲游3.0Beta：Trident和WebKit內(nèi)核

QQ瀏覽器5：Trident內(nèi)核和WebKit內(nèi)核

使用雙核瀏覽器時，可以自動/手動切換內(nèi)核來瀏覽網(wǎng)頁蠕嫁。

關于不要再叫我IE11地址：http://liulanmi.com/news/5546.html

[if !supportLists]125.????????????[endif]為什么要清除浮動锨天，有哪些方式？

???????? 這里其實是面試的陷阱（歸根結底需要多瀏覽器兼容性的問題了如指掌）

???????? 一個塊級元素的高度如果沒有設置height剃毒，那么其高度就是由里面的子元素來撐開的病袄，如果子元素使用浮動，脫離了標準的文檔流赘阀，那么父元素的高度會將其忽略益缠，如果不清除浮動，父元素會出現(xiàn)高度不夠基公，那樣如果設置border或者background都得不到正確的解析幅慌。

清除浮動的方法：區(qū)分以下哪些是最好的方案（1~5不可取）

1)在浮動元素下加子元素

然后設置樣式.clear{ height:0px;font-size:0;clear:both;}轰豆；

2)在浮動元素下面（與浮動元素同級）加

3)給浮動元素的父級也加浮動(這種情況當父級margin:0 auto時不居中)

4)給父級加display:inline-block;(同方法2,不居中,只有IE6,7居中)

5)給浮動元素父級加overflow:auto;

6）經(jīng)典用法

?.clear,.clear-all{clear:both;font-size:0;height:0;line-height:0;overflow:hidden}

.fix:after,.clearfix:after{clear:both;content:"

";display:block;font-size:0;height:0;visibility:hidden}

.fix,.clearfix{*zoom:1}

[if !supportLists]126.????????????[endif]SGML（標準通用標記語言）和HTML（超文本標記語言）胰伍，XML（可擴展標記語言）和HTML的之間有什么關系齿诞？

???????? SGML（標準通用標記語言）是一個標準，告訴我們怎么去指定文檔標記骂租。他是只描述文檔標記應該是怎么樣的元語言祷杈，HTML是被用SGML描述的標記語言。

???????? 因此利用SGML創(chuàng)建了HTML參照和必須共同遵守的DTD渗饮，你會經(jīng)常在HTML頁面的頭部發(fā)現(xiàn)“DOCTYPE”屬性但汞，用來定義用于解析目標DTD

4.01//EN" “http://www.w3.org/TR/html4/strict.dtd">

???????? 現(xiàn)在解析SGML是一件痛苦的事情，所以創(chuàng)建了XML使事情更好互站。XML使用了SGML私蕾，例如：在SGML中你必須使用起始和結束標簽，但是在XML你可以有自動關閉的結束標簽胡桃。

???????? XHTML創(chuàng)建于XML踩叭，他被使用在HTML4.0中。你可以參考下面代碼片段中展示的XML DTD

Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[if !supportLists]127.????????????[endif]Doctype作用标捺？嚴格模式與混雜模式如何區(qū)分？它們有何意義?

答：（1）聲明位于文檔中的最前面揉抵，處于標簽之前亡容。告知瀏覽器的解析器，用什么文檔類型規(guī)范來解析這個文檔冤今。

（2）嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標準運行闺兢。

（3）在混雜模式中，頁面以寬松的向后兼容的方式顯示戏罢。模擬老式瀏覽器的行為以防止站點無法工作屋谭。

（4）DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現(xiàn)。

[if !supportLists]128.????????????[endif]行內(nèi)元素有哪些龟糕？塊級元素有哪些桐磁？空(void)元素有那些嘉赎？

答：（1）塊級元素尉姨。默認display屬性是block。div ul ol li dl dt dd h1 h2 h3 h4…p扰藕。

（2）行內(nèi)元素缓艳。默認display屬性是inline校摩。a b span img input select strong。

[if !supportLists]129.????????????[endif]介紹一下CSS的盒子模型阶淘？

答：（1）有兩種衙吩， IE 盒子模型、標準 W3C 盒子模型溪窒；IE的content部分包含了 border 和 pading;

（2）盒模型：內(nèi)容(content)坤塞、填充(padding)冯勉、邊界(margin)、邊框(border).

[if !supportLists]130.????????????[endif]link和@import的區(qū)別是尺锚？

答：（1）屬于XHTML標簽珠闰，而@import是CSS提供的;

（2）頁面被加載的時，會同時被加載瘫辩，而@import引用的CSS會等到頁面被加載完再加載;

（3）import只在IE5以上才能識別伏嗜，而是XHTML標簽，無兼容問題;

（4）方式的樣式的權重高于@import的權重伐厌。

[if !supportLists]131.????????????[endif]如何居中div承绸？如何居中一個浮動元素？

div1

div2

.div1{width:200px;height:200px;background:red;margin:0px

auto;}

.div2{width:200px;height:200px;background:red;float:left;margin-left:-100px;position:absolute;left:50%;top:220px;}

[if !supportLists]132.????????????[endif]瀏覽器的內(nèi)核分別是什么挣轨？

答：IE瀏覽器的內(nèi)核Trident军熏、Mozilla的Gecko、Chrome的Blink（WebKit的分支）卷扮、Opera內(nèi)核原為Presto荡澎，現(xiàn)為Blink。

[if !supportLists]133.????????????[endif]HTML語義化的理解晤锹？

答：（1）用正確的標簽做正確的事情摩幔！

（2）html語義化就是讓頁面的內(nèi)容結構化，便于對瀏覽器鞭铆、搜索引擎解析或衡；

（3）在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的车遂。

（4）搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重封断，利于SEO。

（5）使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊舶担，便于閱讀維護理解坡疼。

[if !supportLists]134.????????????[endif]iframe有那些缺點？

答：（1）iframe會阻塞主頁面的Onload事件衣陶；

（2）iframe和主頁面共享連接池回梧，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載祖搓。

解決方法：使用iframe之前需要考慮這兩個缺點狱意。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值拯欧，這樣可以可以繞開以上兩個問題详囤。

[if !supportLists]135.????????????[endif]Label的作用是什么？是怎么用的？（加 for）

答：主要是和input配合使用藏姐，沒有單獨存在的意義

??????????? 用戶名

???????????

??????????? 點擊label的時候自動會聚焦input輸入框

[if !supportLists]136.????????????[endif]列出display的值隆箩，說明他們的作用。position的值羔杨， relative和absolute定位原點是?

答案：1.display:none\block\inline-block

display:none;使添加none屬性元素隱藏

回答display：block捌臊；先講出哪些是行標簽或塊標簽（都具備什么樣的特性）

行元素（span strong a …）（或內(nèi)聯(lián)元素、行標簽指的都是同一類型的元素兜材，只是叫法不一樣）

行元素的特性：能在一行顯示排成一行

塊元素(p divh1-h6)?

塊元素的特性：獨自占一行只有內(nèi)容方不下的時候理澎，內(nèi)容才會換行

display:block;將行元素具備了塊元素的特性

display:inline-block;

將行元素——具備了塊元素的特性的同時也具備行元素本身的特性，元素能設置寬高曙寡，當然特殊的標簽本身可以設置寬高（例如：input img table）

塊元元素——具備了行元素的特性可以在一行顯示

????? position:relative\absolute

?????????????? 默認沒有設置left right top bottom 偏移值時糠爬，為瀏覽器的最左上腳開始為原點

absolute:???????? 1、父級元素沒有relative時,當前元素的定位父級為document文檔

????? 2举庶、父級有relative時执隧，父級為當前元素的定位起點

[if !supportLists]137.????????????[endif]用純 CSS創(chuàng)建一個三角形

????? .triangle{

??? width:0;height: 0;

??? border-left:60px solid transparent;

???border-right: 60px solid transparent;

border-top: 120px solid red;

??? }

[if !supportLists]138.????????????[endif]一個滿屏”品”字布局如何設計?

???????

???????????

???.header{height:200px;background:#e33;width:100%;}

???.main{width:100%;height:200px;overflow:hidden;}

??? .main.left,.main .right{width:50%;height:200px;float:left;background:#a23;}

.main .right{background:#e11;}

[if !supportLists]139.????????????[endif]li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法户侥？

li使用display:inline-block以后瀏覽器會解析空白的字符镀琉。

解決辦法：使用float

[if !supportLists]140.????????????[endif]經(jīng)常遇到的瀏覽器的兼容性有哪些？原因蕊唐，解決方法是什么屋摔，常用hack的技巧烙荷？

(1)png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8拒秘。

(2)瀏覽器默認的margin和padding不同古沥。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

(3)IE6雙邊距bug:塊屬性標簽float后涨享，又有橫行的margin情況下，在ie6顯示margin比設置的大。

(4)IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;

??????? Firefox下,只能使用getAttribute()獲取自定義屬性俗扇；

??????? 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

(5)IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;

??????????????????????????? Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性箕别；

??????? 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)铜幽。

(6)Chrome中文界面下默認會將小于12px 的文本強制按照12px 顯示,可通過加入 CSS屬性 -webkit-text-size-adjust: none; 解決。

[if !supportLists]141.????????????[endif]為什么要初始化CSS樣式串稀。(面試官主要考的是對標簽的默認樣式了解)

1.因為瀏覽器的兼容問題除抛，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異母截。

2.初始化CSS樣式主要是提高編碼質量到忽，如果不初始化整個頁面做完很糟糕，重復的css樣式很多。

去掉標簽的默認樣式如：margin喘漏，padding 护蝶，其它瀏覽器默認解析字體大小字體設置

??????? html,body, dl, dd, h1, h2, h3, h4, h5, h6, p,form{margin:0;}

??????? ul,ol,li{margin:0;padding:0}

詳細參考地址：http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/

[if !supportLists]142.????????????[endif]absolute 的 containing block(容器塊)計算方式跟正常流有什么不同？

(1)若此元素為 inline 元素翩迈，則 containing

block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形持灰；

(2)否則,則由這個祖先元素的 padding box 構成。

如果都找不到负饲，則為 initial containing block堤魁。

補充：

(1)static(默認的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）

(2)absolute: 向上找最近的定位為absolute/relative的元素

(3)fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block

[if !supportLists]143.????????????[endif]對BFC規(guī)范的理解绽族？

答：W3C CSS 2.1 規(guī)范中的一個概念,它決定了元素如何對其內(nèi)容進行定位,以及與其他元素的關系和相互作用姨涡。

參考地址：https://segmentfault.com/a/1190000003827247

[if !supportLists]144.????????????[endif]css定義的權重？（考的是css書寫優(yōu)先級）

答：權重的規(guī)則：標簽的權重為1吧慢，class的權重為10涛漂，id的權重為100 ，style 1000检诗，

/*權重為1*/

div{}

/*權重為10*/

.class1{}

/*權重為100*/

#id1{}

/*權重為100+1=101*/

#id1 div{}

/*權重為10+1=11*/

.class1 div{}

/*權重為10+10+1=21*/

.class1 .class2 div{}

????? important資料擴展知識參考地址：http://baike.baidu.com/link?url=0QBBKMjn_uHaipI5N18gg_J5eEKAUhFQeuKhjRScsW0JW56EZjbsuw-aOZOilum_hFon-47_G-PJ33Ey_UU03q

????? http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html

[if !supportLists]145.????????????[endif]解釋下浮動和它的工作原理匈仗？清除浮動的技巧

答：浮動元素脫離文檔流，不占據(jù)空間逢慌。浮動元素碰到包含它的邊框或者浮動元素的邊框停留悠轩。

1.使用空標簽清除浮動。

?這種方法是在所有浮動標簽后面添加一個空標簽定義css clear:both. 弊端就是增加了無意義標簽攻泼。

2.使用overflow火架。

?給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after偽對象清除浮動忙菠。

?該方法只適用于非IE瀏覽器何鸡。具體寫法可參照以下示例。使用中需注意以下幾點牛欢。一骡男、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像素傍睹；

浮動元素引起的問題：

（1）父元素的高度無法被撐開隔盛，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后

（3）若非第一個元素浮動，則該元素之前的元素也需要浮動拾稳，否則會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決2吮炕、3問題，對于問題1访得，添加如下樣式龙亲，給父元素添加clearfix樣式：

清除浮動的幾種方法：

1，額外標簽法，

（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔俱笛。）

2捆姜，使用after偽類

[if !supportLists]146.????????????[endif]CSS優(yōu)化、提高性能的方法有哪些迎膜？

CSS 優(yōu)化主要是四個方面：

1.?? 加載性能

2.?? 選擇器性能

3.?? 渲染性能

4.?? 可維護性泥技、健壯性

盡量減少HTTP請求個數(shù)——須權衡

一般就是把多個css用merge（后臺）合并

把CSS放到頂部

避免使用CSS表達式

將CSS和JS放到外部文件中

精簡CSS（主要是把空格和注釋去掉，一般和第一點一起進行）

剔除重復的JS和CSS（一般大的工程很容易出現(xiàn)這樣的問題）

高效的CSS書寫規(guī)則（這點比較重要……簡單講磕仅，就是少些廢話）

????? 參考地址：http://www.zhihu.com/question/19886806

[if !supportLists]147.????????????[endif]瀏覽器是怎樣解析CSS選擇器的珊豹？

答：瀏覽器解析CSS選擇器的方式是從右到左

參考地址：http://www.zhihu.com/question/20185756?rf=21310443

[if !supportLists]148.????????????[endif]在網(wǎng)頁中的應該使用奇數(shù)還是偶數(shù)的字體？為什么呢榕订？

答：都是使用偶數(shù)店茶，如果在網(wǎng)站里面使用的奇數(shù)字體，文字在顯示的時候不是很美觀

[if !supportLists]149.????????????[endif]margin和padding分別適合什么場景使用劫恒？

答：margin是設置元素外邊距的屬性贩幻，W3C官方解釋為：圍繞在元素邊框的空白區(qū)域是外邊距酒甸。設置外邊距會在元素外創(chuàng)建額外的“空白”胖齐。設置外邊距的最簡單的方法就是使用margin屬性，這個屬性接受任何長度單位徒溪、百分數(shù)值甚至負值憔辫。

Padding是設置元素內(nèi)邊距的屬性趣些，W3C的官方解釋為：元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間》∧控制該區(qū)域最簡單的屬性是padding 屬性坏平。CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域。

上下兩個元素之間的間距使用margin合適锦亦。

padding的使用是針對當前設置元素的內(nèi)邊距

主要考的是對margin和padding的理解：在項目里面能用padding搞定的堅決不使用margin舶替。

參考答案地址：http://blog.sina.com.cn/s/blog_87f8e6160100xlt5.html

[if !supportLists]150.????????????[endif]如何修改chrome記住密碼后自動填充表單的黃色背景？

通過審查元素可以看到這是由于chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性

參考地址：工作中經(jīng)常會碰到類似的問題???????? https://segmentfault.com/q/1010000000671971

????? http://www.poluoluo.com/jzxy/201510/430850.html

擴展資料：

-webkit-appearance:?none;

http://www.css88.com/archives/5402

[if !supportLists]151.????????????[endif]設置元素浮動后孽亲，該元素的display值是多少?(自動變成display:block)

行元素設置浮動：具備了（display:block屬性能設置寬高）

塊元素設置浮動：具備了（display:inline屬性能在一行顯示）

[if !supportLists]152.????????????[endif]怎么讓Chrome支持小于12px 的文字坎穿？

Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決展父。

瀏覽器默認的margin和padding不同返劲。解決方案是加一個全局的*{margin:0;padding:0;}這個方式現(xiàn)在用的比較少了，需要清晰知道每個元素的默認樣式來統(tǒng)一栖茉。

Html,body,p,h1,h2{margin:0}

[if !supportLists]153.????????????[endif]讓頁面里的字體變清晰篮绿，變細用CSS怎么做？

（-webkit-font-smoothing: antialiased;）

[if !supportLists]154.????????????[endif]font-style屬性可以讓它賦值為“oblique” oblique是什么意思吕漂？

瀏覽器會顯示一個傾斜的字體樣式亲配。（很少使用oblique）

????? 在項目里面平常使用的italic比較多一些

[if !supportLists]155.????????????[endif]position:fixed;在android下無效怎么處理？

使用js處理判斷當前設備是否是android，如果是則添加監(jiān)聽當前頁面滾動情況吼虎，設置position:absolute;不斷的改變top值

[if !supportLists]156.????????????[endif]如果需要手動寫動畫犬钢，你認為最小時間間隔是多久，為什么?（阿里）

多數(shù)顯示器默認頻率是60Hz思灰，即1秒刷新60次玷犹，所以理論上最小間隔為1/60＊1000ms ＝16.7ms

[if !supportLists]157.????????????[endif]display:inline-block 什么時候會顯示間隙？(攜程)

移除空格洒疚、使用margin負值歹颓、使用font-size:0、letter-spacing油湖、word-spacing

[if !supportLists]158.????????????[endif]淺談一下怎么處理瀏覽器的兼容性問題巍扛。

答：合理化HTML結構，簡潔化css屬性：html結構合理規(guī)范了乏德，很大程度上避免了兼容問題撤奸，css要盡量寫的簡單有效，特效用JavaScript來做喊括，很多時候別用css偽類實現(xiàn)寂呛，針對比較特殊的用css hack 處理。

[if !supportLists]159.????????????[endif]瀏覽器標準模式和怪異模式之間的區(qū)別是什么瘾晃？

答：主要原因：doctype聲明問題???????? 區(qū)別：盒模型解釋不同

????? IE：IE盒子模型的width和height是包括了內(nèi)容贷痪、內(nèi)邊距和邊框長度的。IE6之前蹦误，以及IE6~8在怪異模式下時劫拢，就是采用這種盒子模型。

例如IE的怪異模式中强胰，元素的width包含了padding和border舱沧，而標準模式中padding和border 并不屬于寬度的一部分。

[if !supportLists]160.????????????[endif]css hack知道哪些偶洋？

答：由于不同的瀏覽器熟吏，甚至同一瀏覽器的不同版本對CSS的解析認識不一樣，導致生成的頁面效果不一致玄窝，寫出針對不同瀏覽器CSS code就稱為CSS hack牵寺。

????? _color:red;只有ie6生效???（IE6能識別下劃線"_"和星號" * "）

????? *color:blue;??????IE7能識別星號" * “

????? *+html .class{}IE7能識別

????? 在標準模式中：

?? ???????? “-″減號是IE6專有的hack

????????????? ?“\9″ IE6/IE7/IE8/IE9/IE10都生效

?????????????? “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

?????????????? “\9\0″ 只對IE9/IE10生效恩脂，是IE9/10的hack

[if !supportLists]161.????????????[endif]你對css盒模型的理解帽氓。

答：盒模型有兩種：標準盒模型（w3c標準）和IE盒模型。

標準盒模型中width和height指的是內(nèi)容區(qū)域的寬度和高度俩块，增加內(nèi)邊距黎休、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸浓领，但是會增加元素框的總尺寸；

但在IE6瀏覽器的width不是內(nèi)容的寬度势腮，而是內(nèi)容联贩、內(nèi)邊距和邊框的寬度總和。

[if !supportLists]162.????????????[endif]data-屬性的作用是什么捎拯？

答：data-為前端開發(fā)者提供自定義的屬性

data-time="2011-06-20"

data-comment-num="10">...

[if !supportLists]163.????????????[endif]你能解釋一下CSS的盒子模型么撑蒜？

CSS和模型是圍繞在HTML元素周圍的定義Border(邊界)，padding(內(nèi)邊距)和margin(外邊距)的矩形空間

Border(邊界)：定義了元素包含的最大區(qū)域玄渗，我們能夠使邊界可見座菠，不可見，定義高度和寬度等藤树；

Padding(內(nèi)邊距)：定義了邊界和內(nèi)部元素的間距

Margin：定義了邊界和任何相鄰元素的間距

注意面試官想要的答案不止這些（需要回答什么是怪異盒模型盒標準盒模型）如果能回答就扯一下產(chǎn)生怪異模型盒的原因和結果浴滴。面試題1和2有答案

原因：主要原因是doctype文檔聲明問題

結果：

標準盒模型中width和height指的是內(nèi)容區(qū)域的寬度和高度，增加內(nèi)邊距岁钓、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸升略，但是會增加元素框的總尺寸；

但在IE6瀏覽器的width不是內(nèi)容的寬度屡限，而是內(nèi)容品嚣、內(nèi)邊距和邊框的寬度總和。

????? 分別能畫出盒模型的樣式

[if !supportLists]164.????????????[endif]CSS3有哪些新特性（包含哪些模塊）钧大？

圓角（border-radius:8px）翰撑，

陰影（box-shadow:10px），

文字特效（text-shadow啊央、）斯够，

線性漸變（gradient）帽蝶，

旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90)

translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器

背景透明 rgba

更多選擇器參考地址：http://www.runoob.com/cssref/css-selectors.html

其它模塊：（Other modules）

media queries:感覺叫媒體選擇比較合適，可以為網(wǎng)頁中不同的對象設置不同的瀏覽設備匠璧。比如可以為某一塊分別設置屏幕瀏覽樣式和手機瀏覽樣式定铜，以前則只能設置整個網(wǎng)頁巾陕。

multi-column layout:多列布局踢匣，讓文字以多列顯示似枕，包括column-width、column-count趣苏、column-gap三個值

column-width:指定每列寬度

column-count:指定列數(shù)

column-gap:指定每列之間的間距

column-rule-color:控制列間的顏色

column-rule-style:控制列間的樣式

column-rule-width:控制列間的寬度

column-space-distribution:平均分配列間距

[if !supportLists]165.????????????[endif]請解釋一下CSS3的Flexbox（彈性盒布局模型）,已經(jīng)適用場景狡相？

?主要應用場景為：移動端布局

flexbox的布局是一個用于頁面布局的全新CSS3模塊功能。它可以把列表放在同一個方向（從左到右或從上到下排列）拦键，并且讓這些列表能延伸到占用可用的空間谣光。較為復雜的布局可以通過嵌套一個伸縮容器（flex container）來輔助實現(xiàn)檩淋。

Flexbox可以簡單快速的創(chuàng)建一個具有彈性功能的布局芬为，當在一個小屏幕上顯示的時候萄金，F(xiàn)lexbox可以讓元素在容器（伸縮容器）中進行自由擴展和收縮，從而容易調整整個布局媚朦。它的目的是使用常見的布局模式氧敢，比如說三列布局，可以非常簡單的實現(xiàn)询张。

[if !supportLists]166.????????????[endif]用過媒體查詢孙乖，針對移動端的布局嗎？

在移動端布局的時候份氧，經(jīng)常會使用到媒體查詢針對不到顯示比例的手機做樣式處理唯袄。（注意了這里可以開啟裝逼模式：把現(xiàn)有的主流手機顯示寬高比例以及型號倒背如流）

最終目的是一套代碼在不通的移動設備上查看一樣的效果

參考地址：http://blog.csdn.net/iefreer/article/details/24212161

公司現(xiàn)在用的統(tǒng)計平臺：

https://mtj.baidu.com/web/demo/terminal?appId=468475

http://#baidu.com/data/mobile/brand

之前google木有被屏蔽的時候都喜歡使用google的統(tǒng)計

[if !supportLists]167.????????????[endif]使用 CSS 預處理器嗎？喜歡那個蜗帜？

答：常用的SASS恋拷、LESS（回答的時候要注意了，每個優(yōu)缺點）

Sass (Syntactically Awesome Stylesheets)是一種動態(tài)樣式語言厅缺，語法跟css一樣(但多了些功能)蔬顾，比css好寫，而且更容易閱讀湘捎。Sass語法類似與Haml诀豁，屬于縮排語法（makeup），用意就是為了快速寫Html和Css窥妇。

Less一種動態(tài)樣式語言.將CSS賦予了動態(tài)語言的特性舷胜，如變量，繼承活翩，運算逞带，函數(shù). LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)纱新。

區(qū)別：

(1))Sass是基于Ruby的展氓，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器脸爱，也可以在開發(fā)環(huán)節(jié)使用Less遇汞，然后編譯成Css文件，直接放到項目中簿废，也有Less.app空入、SimpleLess、CodeKit.app這樣的工具族檬，也有在線編譯地址歪赢。

(2)變量符不一樣，less是@单料，而Scss是$埋凯，而且變量的作用域也不一樣点楼，后面會講到。

(3)輸出設置白对，Less沒有輸出設置掠廓，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。

(4)Sass支持條件語句甩恼，可以使用if{}else{},for{}循環(huán)等等蟀瞧。而Less不支持。

LESS咋們使用的HBuilder可以把less插件安裝上就可以編寫less了条摸，注意需要建立一個css文件夾啊悦污，必須把less文件放在css文件里面。

Less官網(wǎng)：http://lesscss.cn/

?????????????? 參考地址：http://www.1024i.com/demo/less/

Sass 官網(wǎng)：http://www.sass-zh.com/

參考地址：http://caibaojian.com/css-processor.html

[if !supportLists]168.????????????[endif]元素豎向的百分比設定是相對于容器的寬度嗎钉蒲？

????? 答：不是的塞关，元素豎向的百分是相對于設定容器的高度的

[if !supportLists]169.????????????[endif]全屏滾動的原理是什么？用到了CSS的那些屬性子巾？

答：1.transform

2.使用定位方式

簡單的css3全屏滾動-左右方向

translateZ(0)可以觸發(fā)GPU渲染帆赢，提高動畫的性能。

1. transform:translateX的值（不考慮低版本瀏覽器的同時推薦使用該屬性）2. left的值线梗；

經(jīng)驗分享：在項目里面需要實現(xiàn)全屏滾動椰于，可以做瀏覽器版本檢查，高版本瀏覽器支持css3 transform的盡情的使用仪搔，不支持的使用定位方式

[if !supportLists]170.????????????[endif]什么是響應式設計瘾婿？為什么要做響應式設計？響應式設計的基本原理是什么烤咧？

答：頁面的設計與開發(fā)應當根據(jù)用戶行為以及設備環(huán)境(系統(tǒng)平臺偏陪、屏幕尺寸、屏幕定向等)進行相應的響應和調整煮嫌。具體的實踐方式由多方面組成笛谦，包括彈性網(wǎng)格和布局、圖片昌阿、CSS media query的使用等瞄桨。無論用戶正在使用筆記本還是iPad嘉涌，我們的頁面都應該能夠自動切換分辨率柬甥、圖片尺寸及相關腳本功能等噪奄，以適應不同設備；換句話說刷钢，頁面應該有能力去自動響應用戶的設備環(huán)境笋颤。

??????? 響應式網(wǎng)頁設計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣内地，我們就可以不必為不斷到來的新設備做專門的版本設計和開發(fā)了伴澄。赋除、

??????? 響應式設計的基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。頁面頭部必須有meta聲明viewport：

content="width=device-width, initial-scale=1, maximum-scale=1,

user-scalable=no">

[if !supportLists]171.????????????[endif]::before 和 :after中雙冒號和單冒號有什么區(qū)別秉版？解釋一下這2個偽元素贤重。本質上并不支持偽元素的雙冒號(::)寫法茬祷，而是忽略掉了其中的一個冒號清焕，仍以單冒號來解析，所以等同變相支持了E::before

答：在before元素前面祭犯，:after元素的后面插入內(nèi)容（經(jīng)典場景使用font-face小圖標結合content: ""）

參考資料：http://www.css88.com/book/css/selectors/pseudo-element/before.htm http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html

第二部分：JS面試題

[if !supportLists]1.?????????[endif]獲取一堆name名相同的div秸妥，點擊彈出顯示第幾個div

（本題主要考察閉包的用法，是在面試中常被問的題目沃粗，不難但是比較容易上當?shù)念}目）

var boxes

= document.getElementsByTagName("div");

for(var i

= 0; i < boxes.length; i++) {

?????????????? boxes[i].index =i+1;

?????????????? boxes[i].onclick = function() {

???????????????????????? alert(this.index);

?????????????? }

????? }

????? 答案二

????? var boxes =document.getElementsByTagName("div");

????? for(var i = 0; i < boxes.length; i++) {

?????????????? (function(i){

???????????????????????? boxes[i].onclick =function() {

????????????????????????????????? alert(i+1);

???????????????????????? }

?????????????? })(i);

????? }

[if !supportLists]2.?????????[endif]abcdefgsdds獲取里面字面最多的字母（答案有很多）

var str = “abcdefgsdds”;

var obj = {};

var arr = [];

var letter;

for(var i = 0,len =

str.length;i

letter = str[i];

if(!obj[letter]){

obj[letter] = 1;

}else{

obj[letter]++;

}

var max_key,max_num=0;

for(key in obj){

if(max_num

max_num = obj[key];

max_key = key;

}

document.write(“字母：”+max_key+”　次數(shù)：”+max_num);

[if !supportLists]3.?????????[endif]abcdefghi獲取ghi怎么實現(xiàn)

???? 答：”abcdefghi".substring(6)

[if !supportLists]4.?????????[endif]‘a(chǎn)sdjhklzxc’ 截取’asd’

答：”asdjhklzxc".substring(3,-1)

[if !supportLists]5.?????????[endif]翻轉字符串

答：”asd".split("").reverse().join("")

[if !supportLists]6.?????????[endif]刪除數(shù)組第一個元素

答：arr.shift()

[if !supportLists]7.?????????[endif][1,2,1,3,2,3,5,6,5]? 去除重復元素

var arr =

[1,2,1,3,2,3,5,6,5] ;

var

newArr = [];

for(var i

= 0; i < arr.length; i++) {

?????????????? if(newArr.indexOf(arr[i]) == -1){

???????????????????????? newArr.push(arr[i]);

?????????????? }

????? }

alert(newArr)

[if !supportLists]8.?????????[endif]JS中有幾種數(shù)據(jù)類型分別是哪幾種粥惧？

答：Number,String,Boolean,Object,Null,Undefined

[if !supportLists]9.?????????[endif]說一下拖拽的原理？怎么樣實現(xiàn)多個DIV在拖拽時有相撞讓它們改變屬性與屬性值和他們的位置最盅？（部分程度不太好的同學看到拖拽會懵突雪，項目期有這個情況）

mousedown,mousermove,mouseup事件

e.clientX,e.clientY鼠標位置

碰撞檢測

[if !supportLists]10.????? [endif]用JS創(chuàng)建一個a標簽，在body中顯示涡贱，點擊在新窗口打開

var alink

= document.createElement("a");

alink.innerHTML

= "google";

alink.href

= "http://www.google.com";

alink.target

= "_blank";

document.body.appendChild(alink);

[if !supportLists]11.????? [endif]鼠標滾輪動畫

function

mousewheel(element,up,down) {

????? element.onmousewheel = fn;

????? if(window.addEventListener) {

?????????????? element.addEventListener("DOMMouseScroll",fn,false)

????? }

????? function fn(e) {

?????????????? var e = e || window.event;

?????????????? console.log(e);

?????????????? if(e.wheelDelta > 0 ||e.detail < 0) {

???????????????????????? up();

?????????????? }else {

???????????????????????? down();

?????????????? }

?????????????? e.cancelBubble = true;

?????????????? e.stopPropagation();

????? }

}

mousewheel(document,function(){},function(){})//函數(shù)調用

[if !supportLists]12.????? [endif]定位右下角廣告

答：使用css position:fixed

[if !supportLists]13.????? [endif]鼠標經(jīng)過A? A變大其他的位置不動

答：A絕對定位咏删，脫離文檔流即可

[if !supportLists]14.????? [endif]JS中避免命名沖突的三個方法（有些同學或許會想不到這些概念）

答：命名空間，閉包问词，匿名函數(shù)

[if !supportLists]15.????? [endif]JS在HTML中的引入方式有哪些督函？又有什么優(yōu)缺點？

答：a外部引入 b內(nèi)部嵌套 c行內(nèi)代碼? 例：按鈕對比css引入

[if !supportLists]16.????? [endif]寫出5條標識符的命名規(guī)范（）

答：1.區(qū)分大小寫激挪；

2.第一個字符必須是一個字母辰狡、下劃線（_）或一個美元符號（$）

3..不能含有空格

4.不能以關鍵字或保留字命名,不能以數(shù)字開頭

[if !supportLists]17.????? [endif]從JS的角度，寫出8條以上優(yōu)化代碼的方法垄分？

答：參考 http://www.haorooms.com/post/web_xnyh_jscss

[if !supportLists]18.????? [endif]按優(yōu)先級宛篇，對這幾種運算符進行排序：！ &&? *?=? >

答：薄湿！&&

*> =

[if !supportLists]19.????? [endif]在循環(huán)中些己，break和continue語句的功能有何不同

答：break 終止整個循環(huán)，continue終止當次循環(huán)

[if !supportLists]20.????? [endif]解釋事件冒泡嘿般、事件捕獲的區(qū)別

答：事件流解釋即可

[if !supportLists]21.????? [endif]說說什么叫做事件委托

答：利用事件冒泡的原理段标，子元素的事件會冒泡到父元素，可以只給父元素添加事件炉奴，通過事件目標判斷元素逼庞。優(yōu)點：節(jié)省內(nèi)存，動態(tài)添加的子元素也包含事件

[if !supportLists]22.????? [endif]列舉不少于6條的IE與FF腳本兼容性問題瞻赶，需要寫出命令（也許同學們?nèi)狈偨Y赛糟，看著簡單派任，實際很難答全）

(1) window.event：

表示當前的事件對象，IE有這個對象璧南，F(xiàn)F沒有掌逛，F(xiàn)F通過給事件處理函數(shù)傳遞事件對象

(2) 獲取事件源

IE用srcElement獲取事件源，而FF用target獲取事件源

(3) 添加司倚，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”,

function, true) element.removeEventListener(“click”, function, true)

(4) 獲取標簽的自定義屬性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

(5) document.getElementByName()和document.all[name]

IE豆混；document.getElementByName()和document.all[name]均不能獲取div元素

FF：可以

(6) input.type的屬性

IE：input.type只讀

FF：input.type可讀寫

(7) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

(8) 是否可用id代替HTML元素

IE：可以用id來代替HTML元素

FF：不可以

[if !supportLists]23.????? [endif]構造函數(shù)有何優(yōu)缺點？

答：構造函數(shù)可以創(chuàng)建多個對象动知，

缺點：容易跟普通函數(shù)一樣調用

[if !supportLists]24.????? [endif]用自己的話描述一下“閉包“

答：函數(shù)內(nèi)部又定義了一個函數(shù)皿伺，內(nèi)部函數(shù)引用外部函數(shù)的變量，就構成了閉包

[if !supportLists]25.????? [endif]用自己的話描述一下對“異步“和”同步“的理解

同步：按順序執(zhí)行盒粮，同一時刻只能執(zhí)行一個事件

異步：不按順序執(zhí)行鸵鸥，同一時刻可以執(zhí)行多個任務

[if !supportLists]26.????? [endif]寫倒計時距離2018年還有多少天多少小時多少分鐘多少秒

var time =

document.getElementById("time");

????? function clock() {

?????????????? //設置目標日期

?????????????? var targetDate = newDate(2018,0,1);

?????????????? var currentDate = new Date();

?????????????? var remainTime = targetDate -currentDate;

?????????????? //天數(shù)

?????????????? remainDay =parseInt(remainTime/1000/60/60/24);

?????????????? //小時數(shù)

?????????????? remainHours =parseInt(remainTime/1000/60/60%24);

?????????????? //分鐘

?????????????? remainMinutes =parseInt(remainTime/1000/60%60);

?????????????? //秒

?????????????? remainSeconds =parseInt(remainTime/1000%60);

?????????????? time.innerHTML = remainDay +"天"+remainHours+"小時"+remainMinutes+"分鐘"+remainSeconds+"秒";

????? }

????? setInterval(clock,1000);

[if !supportLists]27.????? [endif]alert怎樣換行

答：轉義字符,換行符\n

alert("大家好\n大家好")

[if !supportLists]28.????? [endif]左側內(nèi)容可上下滾動，右側是滾動條丹皱，如何實現(xiàn)布局

答：固定高度妒穴，overflow-y:scroll

[if !supportLists]29.????? [endif]向上滾動動畫如何實現(xiàn)

document.body.scrollTop

= "xxx";

document.documentElement.scrollTop

= "xxx";

[if !supportLists]30.????? [endif]form表單提交

答：默認提交，form.onsubmit = function(){}可在表單數(shù)據(jù)提交之前驗證

[if !supportLists]31.????? [endif]javaScript與ECMAScript的區(qū)別摊崭？

答：javascript是具體實現(xiàn)讼油，ECMAScript是標準，大綱

[if !supportLists]32.????? [endif]==與===的區(qū)別爽室？

==等于汁讼，判斷值是否相等，會有類型轉換

===全等阔墩，判斷類型跟值是否相等嘿架，類型不會轉換

[if !supportLists]33.????? [endif]什么是DOM？

答：文檔對象模型

[if !supportLists]34.????? [endif]Undefined與null的區(qū)別啸箫？

答：Undefined無定義耸彪，null空

[if !supportLists]35.????? [endif]有兩個對象，var o =

{num:1};var p = {num:2};要求書寫一段代碼忘苛，使得o+p===3為true蝉娜。

Object.prototype.toString

= function(){

?????????????? return this.num;

????? }

[if !supportLists]36.????? [endif]如果給你這么一個頁面：頂部有logo什么的，下來是導航條扎唾，中上部有圖片切換召川，右邊是登錄注冊，左邊有簡單的信息展示胸遇，中下部是一些新聞荧呐，底部是一般的那些聯(lián)系我們呀什么的傳統(tǒng)頁尾。這樣一個布局加上所有的js效果和新聞鏈接包括所有的兼容，你大概能多久完成（新鴻儒）倍阐；

[if !supportLists]37.????? [endif]講解一下this （作用域）

this的指向：普通函數(shù)內(nèi)的this指向全局變量

構造函數(shù)內(nèi)部this指向新創(chuàng)建出來的對象

對象方法內(nèi)的this指向的是調用該方法的對象

call,apply,bind可以改變this的指向

[if !supportLists]38.????? [endif]構造函數(shù)

答：new關鍵字后緊接的函數(shù)即為構造函數(shù)敛苇，約定首字母大寫

[if !supportLists]39.????? [endif]原型雀久，原型鏈的理解

答：ECMA5之前沒有類的概念东羹，js的繼承是基于原型鏈的

[if !supportLists]40.????? [endif]說說前端優(yōu)化從哪方面著手个榕，具體說明有哪些？

html 語義化概耻，符合標準使套，減少嵌套層數(shù)，加快瀏覽器DOM解析速度

css 合并咐蚯，壓縮少寫冗余css代碼童漩，使用精靈圖 ...

js 減少DOM操作弄贿，使用變量緩存數(shù)據(jù)春锋，少用全局變量，做動畫的元素都絕對定位...

[if !supportLists]41.????? [endif]代碼說明call和apply方法的區(qū)別 (咱們這方面講解的少差凹，這樣的題有變式期奔，需要舉例講解一下)

答：這兩個都是函數(shù)的方法，可以改變this的指向危尿，fn.call(obj,param1,param2,…)

call傳入單個參數(shù)

fn.apply(obj,[param1,param2,...])

apply傳入一個數(shù)組

[if !supportLists]42.????? [endif]function

f(x){

alert(x);(1)

?????????????? arguments[0]=null;

?????????????? alert(x);(2)

????? }

????? f(5);

___(2)___

答案：5呐萌，null

[if !supportLists]43.????? [endif]????? var a=new Array(3);（實際上是閉包的用法）

a[0]=function(x){return

x*x;}

a[1]=20;

a[2]=a[0](a[1]);

a[2]的結果___400___

[if !supportLists]44.????? [endif]var fn = function(i){

return

function(){

???????????????????????? return? i++;

?????????????? }

????? }(10);

????? var a = fn();

????? varb = fn();

????? alert(a);(1)

alert(b);(2)

????? (1)_10__(2)__11_

[if !supportLists]45.????? [endif]對于js語言，下列說法中（ C）是正確的谊娇？

?????? A.一種標記語言規(guī)范的版本名????????????? B.前端編程中肺孤，新增特性的一種泛指和統(tǒng)稱

???????? C.一種腳本語言?????????????????????????? D.可以實現(xiàn)跨平臺開發(fā)的技術

[if !supportLists]46.????? [endif]用兩種方法，將第上題中的第一個p標簽里的內(nèi)容的顏色設置為紅色

element.style.color

= “red”

element.className

= “red” .red{color:red}

[if !supportLists]47.????? [endif]如何測算數(shù)組的長度济欢？

答：array.length

[if !supportLists]48.????? [endif]滾動類效果中赠堵，會涉及到的定位屬性有哪些，同時寫出每個命令的含義法褥。

答：left,top,right,bottom,scrollLeft,scrollTop

[if !supportLists]49.????? [endif]在放大鏡效果中茫叭，獲取鼠標位置的方法，同時說明鼠標位置是針對誰獲取的半等？

答：e.clientX,e.clientY 相對于窗口坐標

[if !supportLists]50.????? [endif]事件種類有哪些揍愁？分別舉出不少于4個的例子？

答：鼠標事件杀饵，鍵盤事件莽囤，觸屏事件

[if !supportLists]51.????? [endif]訪問到tween算法中的Bounce的easeInOut方法？

var startPos =

0;//確定起點位置

var endPos =

500;//確定終點位置

var

everyPos = 20;//確定每步移動距離

var step

= 0;//確定當前步數(shù)

var stepMax =

25;//確定總步數(shù)

var tween

= {

????? Bounce:{

?????????????? easeIn:xxxxx;

?????????????? easeOut:xxxxx;

?????????????? easeInOut:xxxx;

????? }

}

tween.Bounce.easeInOut(step,startPos,(endPos-startPos),stepMax)

[if !supportLists]52.????? [endif]Date對象中getDay()和getDate()分別是什么含義切距？取值范圍是多少朽缎？

getDay()獲取星期幾 0~6

getDate() 獲取日期 1~31

[if !supportLists]53.????? [endif]設置當前時間為2004年12月12日的代碼書寫方法？（分寫合寫兩種方式）

new

Date(2004,11,12)

var d =

new Date(); d.setFullYear(2004),d.setMonth(11);d.setDate(12);

[if !supportLists]54.????? [endif]寫出不少于5種Math對象的方法，分別說明含義以及語法

Math.random()隨機數(shù)0~1之間

Math.abs()絕對值

Math.floor()向下取整

Math.ceil()向上取整

Math.min();Math.max().....

[if !supportLists]55.????? [endif]使用任意一種方法隨機生成一個從100-300的整數(shù)饵沧。

function

rnd(min, max) {return parseInt(Math.random() * (max - min)) + min} //不包含300

rnd(100,300)

[if !supportLists]56.????? [endif]tab切換效果代碼填空

type="text/css">

?????????????? .show{display:block;}

?????????????? .select{background:#fcc;}

div {display:none}

?????

?????????????? 標題1

?????????????? 標題2

?????????????? 標題3

?????

內(nèi)容1

?????

內(nèi)容2

?????

內(nèi)容3

????? var cons =document.getElementsByTagName('div');

????? var spans =document.getElementsByTagName('span')

????? for (var i=0; i<???spans.length??? ; i++) {

?????????????? ???spans[i]??? .onclick=function () {

???????????????????????? for (var j=0; j<??? cons.length??? ; j++) {

????????????????????????????????? if(??? this????==????spans[j]???) {

?????????????????????????????????????????? cons[j].???className??? = ????“show”??? ;

?????????????????????????????????????????? spans[j].???className??? = ????“select”??? ;??????

????????????????????????????????? }

????????????????????????????????? else{

?????????????????????????????????????????? cons[j].???className??? ?=????“”??? ;

?????????????????????????????????????????? spans[j].??? className??? ?=????“”??? ;

?????????????? ?????????????????? }

???????????????????????? }

?????????????? }

????? }

[if !supportLists]57.????? [endif]用JS截取標簽中的abc

?????

abcdef

type="text/javascript">

????? var con = document.getElementById('con');

????? var string = con.?????innerText?????? ;

????? var result = string.?????substring(0,3)????? ;

????? alert(result);

[if !supportLists]58.????? [endif]用js如何獲取一個上傳文件的擴展名

type="file" id="file";

var file =

document.getElementById(“file”)

alert(file.files[0].name)

[if !supportLists]59.????? [endif]用js實現(xiàn)類锨络、繼承（繼承構造函數(shù)內(nèi)部的屬性方法及原型的屬性和方法）、私有變量

function Car() {

?????????????? //構造函數(shù)

?????????????? this.name= "benz"; //屬性

?????????????? varprice = "1000000"; //私有變量狼牺，外部不能訪問羡儿，只能通過下面的getPrice方法調用

?????????????? this.getPrice= function() {

???????????????????????? returnprice;

?????????????? }

????? }

????? Car.prototype.drive= function() {console.log("drive")}//給原型添加drive方法，創(chuàng)建出來的實例都有該方法

var c = new Car();//創(chuàng)建實例對象

[if !supportLists]60.????? [endif]寫一個trim函數(shù)是钥，兼容IE firefox chrome（正則）（怕部分學生想不到正則）

if(typeof String.prototype.trim !==

"function") {

?????????????? String.prototype.trim= function() {

???????????????????????? returnthis.replace(/^\s* | \s*$/g,"");

?????????????? }

????? }

直接調用即可掠归，例：var str = “??????????? sdf? ”;str.trim();

如何提升網(wǎng)頁加載速度

前端角度：合并壓縮css,js減少http請求數(shù)以及大小，使用精靈圖悄泥，減少dom操作...

[if !supportLists]61.????? [endif]列舉事件綁定的方法（原生+JQ?addEventlistener與attachEvent的區(qū)別）addEventlistener現(xiàn)代瀏覽器都支持虏冻，ie從ie9開始支持，可以綁定多個事件

attachEvent ie專有弹囚，可以綁定多個事件厨相，但this指向全局對象

setInterval 與 setTimeout 的區(qū)別 (略)

split() join() 的區(qū)別

split()字符串方法，將字符串轉換成數(shù)組

join()數(shù)組方法鸥鹉，將數(shù)組合并成字符串

[if !supportLists]62.????? [endif]addEventlistener和通過on這種方式綁定的事件（例：ele.onclick = funciton(){}）有什么區(qū)別

addEventlistener可以綁定多個事件

on這種方式只能綁定一次蛮穿，之后綁定的事件會覆蓋前面綁定的，實質是對象屬性重新賦值

DOM事件流

事件捕獲毁渗，事件目標践磅，事件冒泡

[if !supportLists]63.????? [endif]ajax請求時，如何解析json數(shù)據(jù)

三種方式 1.JSON.parse(string)

new Function(“return ” +

string)()

eval(“(”+string+”)”)

[if !supportLists]64.????? [endif]寫一個獲取非行間樣式的函數(shù)

//獲取非行間樣式灸异，兼容現(xiàn)代瀏覽器跟低版本ie

????? functiongetStyle(element,property) {

?????????????? if(window.getComputedStyle){

???????????????????????? returnwindow.getComputedStyle(element,null)[property];

?????????????? }else{

???????????????????????? returnelement.currentStyle[property];

?????????????? }

????? }

[if !supportLists]65.????? [endif]閉包是什么府适，有什么特性，對頁面有什么影響

答：閉包簡單理解就是：函數(shù)內(nèi)部有嵌套定義里一個函數(shù)肺樟，內(nèi)部函數(shù)調用外部函數(shù)的局部變量的時候就構成閉包檐春。能保存局部變量，函數(shù)執(zhí)行完不銷毀儡嘶。消耗內(nèi)存資源

[if !supportLists]66.????? [endif]解釋jsonp的原理喇聊，以及為什么不是真正的ajax （jsonp有些同學可能不知道）

原理：通過script標簽的跨域功能，而非XMLHttpRequest

window load 和document ready的區(qū)別

document ready 實質是DOMContentLoaded事件

所有的節(jié)點渲染完畢蹦狂，就執(zhí)行

load事件要等到所有的資源加載完畢誓篱，如圖片，視頻凯楔，js腳本等

[if !supportLists]67.????? [endif]如何使用原生 Javascript代碼深度克隆一個對象（注意區(qū)分對象類型）//對象的深復制

????? function deepCode(oldObj,newObj) {

?????????????? var newObj = newObj || {};//如果存在newObj 就newObj,否則用空對象

?????????????? for(var i in oldObj) {

???????????????????????? if(oldObj.hasOwnProperty(i)){

????????????????????????????????? if(typeofoldObj[i] === "object") {//判斷屬性是否引用類型的

?????????????????????????????????????????? var c= (oldObj[i].constructor === Array)?[]:{};//如果判斷值是否是數(shù)組

?????????????????????????????????????????? newObj[i]= deepCode(oldObj[i],c);

?????????????????????????????????????????? //遞歸

????????????????????????????????? }else {

?????????????????????????????????????????? newObj[i]= oldObj[i];

????????????????????????????????? }

???????????????????????? }

?????????????? }

?????????????? return newObj;

????? }

[if !supportLists]68.????? [endif]截取字符串abcdefg的efg

答：alert(‘a(chǎn)bcdefg’.substring(4));

[if !supportLists]69.????? [endif]判斷一個字符串中出現(xiàn)次數(shù)最多的字符窜骄，統(tǒng)計這個次數(shù)

var str = 'asdfssaaasasasasaa';var json = {};

for (var i = 0; i <

str.length; i++) {? ? ?

? if(!json[str.charAt(i)]){? ? ?

? ? ? ? ? json[str.charAt(i)] = 1;? ? ?

? }else{? ? ?

? ? ? ? ? json[str.charAt(i)]++;? ? ?

? }};var iMax = 0;var iIndex = '';for(var i in json){? ? ?

? if(json[i]>iMax){? ? ?

? ? ? ? ? iMax = json[i];? ? ?

? ? ? ? ? iIndex = i;? ? ?

? }}alert(‘出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');

參考答案：a出現(xiàn)9次

[if !supportLists]70.????? [endif]IE與FF腳本兼容性問題

obj.addEventListener(sEv, fn, false);

obj.attachEvent(‘on’+sEv,fn);

obj.getCurrentStyle[attr]

getComputedStyle(obj,false)[attr]

XMLHttpRequest

ActiveXObject(‘Mircorsoft.XMLHttp')

FF本地能設置讀取cookie 其他不行

event??ev

事件源

srcElement||target

toElement||relatedTarget

obj.setCapture();只有ie認

obj.releaseCapture();

[if !supportLists]71.????? [endif]規(guī)避javascript多人開發(fā)函數(shù)重名問題

命名空間

封閉空間

js模塊化mvc（數(shù)據(jù)層、表現(xiàn)層摆屯、控制層）

seajs（如果了解的呢邻遏，可以說）

變量轉換成對象的屬性

對象化

[if !supportLists]72.????? [endif]javascript面向對象中繼承實現(xiàn)

function Person(name){

? ? this.name =

name;

}

Person.prototype.showName = function(){

? ? alert(this.name);

}

function Worker(name, job){

? ? Person.apply(this,arguments)

? ? this.job =

job;

}

for(var i in Person.prototype){

? ? ? ? Worker.prototype =

Person.prototype;

}

new Worker('easy', ‘coders').showName();

[if !supportLists]73.????? [endif]outerHTML和innerHTML區(qū)別

使用innerHTML的時候將找著元素的內(nèi)容（不包含元素本身）

使用outerHTML的時候將找著元素的內(nèi)容（包含元素本身）

[if !supportLineBreakNewLine]

[endif]

注意:

W3C 只支持innerHTML. 其他都是微軟的規(guī)定.(outerHTML,outerText,innerText只有微軟的IE 好使, 其他瀏覽器不好用(firefox,

mozilla等),必須用其他方法實現(xiàn))

innerHTML & outerHTML：獲取/設置的內(nèi)容是包含標簽的

兩者已經(jīng)被HTML5納入規(guī)范糠亩。

innerText & outerText：獲取/設置的內(nèi)容是文本內(nèi)容

innerHTML在獲取的時候：

IE和Opera會將獲取到的標簽全部轉換為大寫形式。而蘋果准验、谷歌赎线、火狐會將內(nèi)容按照原來的格式返回HTML，包括空格和縮進糊饱。（這也就意味著返回后的不同內(nèi)容的DOM樹結構截然不同）

outerHTML：新建的DOM子樹會替代掉“調用元素”

IE4+垂寥、Safari4+、Chrome另锋、Opera8+支持滞项，F(xiàn)F7-不支持

[if !supportLists]74.????? [endif]編寫一個方法求一個字符串的字節(jié)長度（假設一個中文占兩個字節(jié)）

var str = ‘22兩是’;

alert(getStrlen(str))

function getStrlen(str){

? ? ? ? var json = {len:0};

? ? ? ? var re =

/[\u4e00-\u9fa5]/;

? ? ? ? for (var i = 0; i <

str.length; i++) {

? if(re.test(str.charAt(i))){

? ? ? ? ? json[‘len']++;

? }

? ? ? ? };

? ? ? ? return json[‘len']+str.length;

}

[if !supportLists]75.????? [endif]寫出3個使用this的典型應用

答：事件：如onclick??this->發(fā)生事件的對象

構造函數(shù)? ?? ?? ? this->new 出來的object

call/apply? ?? ???改變this

[if !supportLists]76.????? [endif]如何深度克隆

var arr = [1,2,43];

var json = {a:6,b:4,c:[1,2,3]};

var str = ‘sdfsdf';

var json2 = clone(json);

alert(json[‘c'])

function clone(obj){

? ? ? ? var oNew = new

obj.constructor(obj.valueOf());

? ? ? ? if(obj.constructor ==

Object){

? for(var i in

obj){

? ? ? ? ? oNew[i] = obj[i];

? ? ? ? ? if(typeof(oNew[i]) == ‘object'){

? ? ? ? ? ? ? ? ? clone(oNew[i]);

? ? ? ? ? }

? }

? ? ? ? }

? ? ? ? return oNew;

}

[if !supportLists]77.????? [endif]JavaScript中如何檢測一個變量是一個String類型？請寫出函數(shù)實現(xiàn)

typeof(obj) == ‘string'

obj.constructor == String;

[if !supportLists]78.????? [endif]閉包

答：子函數(shù)能被外部調用到夭坪，則該作用連上的所有變量都會被保存下來文判。

[if !supportLists]79.????? [endif]請解釋什么是Javascript的模塊模式，并舉出實用實例室梅。

js模塊化mvc（數(shù)據(jù)層挽拂、表現(xiàn)層桃序、控制層）

seajs

[if !supportLists]80.????? [endif]你如何組織自己的代碼掺栅？是使用模塊模式页眯，還是使用經(jīng)典繼承的方法

對內(nèi)：模塊模式

對外：繼承

[if !supportLists]81.????? [endif]你如何優(yōu)化自己的代碼须肆？

代碼重用

避免全局變量（命名空間节仿，封閉空間确封，模塊化mvc..）

拆分函數(shù)避免函數(shù)過于臃腫

加注釋

[if !supportLineBreakNewLine]

[endif]

[if !supportLists]82.????? [endif]你能解釋一下JavaScript中的繼承是如何工作的嗎键袱？

子構造函數(shù)中執(zhí)行父構造函數(shù)讼撒，并用call\apply改變this

克隆父構造函數(shù)原型上的方法

[if !supportLineBreakNewLine]

[endif]

[if !supportLists]83.????? [endif]請說明navigator 常用屬性浑厚？

navigator.userAgent 檢查用戶代理（設備信息、平臺）

????? mac下的FF瀏覽器返回的信息：

?????????????? "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11;

rv:47.0) Gecko/20100101 Firefox/47.0”

????? 檢查cooke是否可用：

?????????????? navigator.cookieEnabled 返回true為可用根盒，false不可用

更多信息使用瀏覽器調試工具查看钳幅，進行總結

[if !supportLists]84.????? [endif]瀏覽器調試快捷鍵是什么？

F12? 或者???? Ctrl+Shift+J兩種方法炎滞。

ctrl+shift+m 調用FF瀏覽器的響應視圖

ctrl+shift+i 調用chrome瀏覽器的調試工具

[if !supportLists]85.????? [endif]數(shù)組怎么去重敢艰？

先將原數(shù)組進行排序；檢查原數(shù)組中的第i個元素與結果數(shù)組中的最后一個元素是否相同册赛，因為已經(jīng)排序钠导，所以重復元素會在相鄰位置；如果不相同森瘪，則將該元素存入結果數(shù)組中牡属。

利用對象的原型方法，代碼為：

Array.prototype.unique2 = function(){

?this.sort(); //先排序

?var res =[this[0]];

?for(var i = 1;i < this.length; i++){

? if(this[i] !==res[res.length - 1]){

??res.push(this[i]);

? }

?return res;

}

var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]

alert(arr.unique2());

//結果：0,1,a,b,d,e

[if !supportLists]86.????? [endif]數(shù)組排序扼睬。

數(shù)組排序方法還有冒泡排序：

注意：主要說清楚冒泡排序的執(zhí)行順序以及原理逮栅，編寫代碼其實是次要的

var arr = [3,7,9,1,5,10];

var temp = 0;

for (var i = 0; i < arr.length; i++){

??? for (var j =0; j < arr.length - i; j++){

??????? if(arr[j] > arr[j + 1]){

??????????? temp= arr[j + 1];

??????????? arr[j +1] = arr[j];

??????????? arr[j]= temp;

??????? }

??? }

}

alert(arr);

[if !supportLists]87.????? [endif]常用變量聲明規(guī)則？

匈牙利命名：開頭字母用變量類型的縮寫，其余部分用變量的英文或英文的縮寫措伐，要求單詞第一個字母大寫

小駝峰式：(little camel-case)：第一個單詞首字母小寫特纤，后面其他單詞首字母大寫

大駝峰式：(big camel-case)：每個單詞的第一個字母都大寫;

[if !supportLists]88.????? [endif]call和apply的區(qū)別（動手驗證）

call和apply，這兩個方法基本上是一個意思侥加，區(qū)別在于 call 的第二個參數(shù)可以是任意類型叫潦，而apply的第二個參數(shù)必須是數(shù)組，也可以是arguments官硝。

[if !supportLists]89.????? [endif]什么是閉包矗蕊，在js中的作用是什么？

答：閉包就是講函數(shù)內(nèi)部生成的變量保存到內(nèi)存中氢架，進行下次調用傻咖；也可以說函數(shù)外不可以調用函數(shù)內(nèi)部的變量；

當函數(shù)內(nèi)部返回一個函數(shù)時岖研，閉包搭建了方法內(nèi)部與方法外部的橋梁卿操，使得外部也可以任意的獲取到方法內(nèi)部的資源，但是閉包會造成變量在內(nèi)存中持久占用孙援，因此會有一定的性能問題害淤，不要輕易使用，即便使用拓售，也要在恰當?shù)臅r機進行釋放窥摄。

[if !supportLists]90.????? [endif]請描述一下cookies、sessionStorage與localStorage的區(qū)別础淤。(百度搜索)

答：共同點：都是保存在瀏覽器端崭放，且同源的。

區(qū)別：cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要）鸽凶，即cookie在瀏覽器和服務器間來回傳遞币砂。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務器，僅在本地保存玻侥。cookie數(shù)據(jù)還有路徑（path）的概念决摧，可以限制cookie只屬于某個路徑下。存儲大小限制也不同凑兰，cookie數(shù)據(jù)不能超過4k掌桩，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)票摇，如會話標識拘鞋。

????? sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多矢门，可以達到5M或更大盆色。數(shù)據(jù)有效期不同灰蛙，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持隔躲；localStorage：始終有效摩梧，窗口或瀏覽器關閉也一直保存，因此用作持久數(shù)據(jù)宣旱；cookie只在設置的cookie過期時間之前一直有效仅父，即使窗口或瀏覽器關閉。作用域不同浑吟，sessionStorage不在不同的瀏覽器窗口中共享笙纤，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的组力；cookie也是在所有同源窗口中都是共享的省容。Web Storage 支持事件通知機制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者燎字。Web Storage 的 api 接口使用更方便腥椒。

注意：（這里面考慮到安全因素，必要突出安全性方面的信息候衍，比如：敏感信息如用戶信息—銀行賬戶笼蛛、其它登錄賬戶或密碼）

[if !supportLists]91.????? [endif]JavaScript的數(shù)據(jù)類型都有什么？

基本數(shù)據(jù)類型：

?????????????? 字符串 String??? 數(shù)字 Number??? 布爾Boolean

????? 復合數(shù)據(jù)類型：

?????????????? 數(shù)組 Array??? 對象 Object

????? 特殊數(shù)據(jù)類型：

?????????????? Null 空對象???? Undefined 未定義

[if !supportLists]92.????? [endif]本地存儲和事務存儲之間的區(qū)別是什么蛉鹿？

答：本地存儲數(shù)據(jù)持續(xù)永久滨砍，但是會話在瀏覽器打開時有效知道瀏覽器關閉時會話變量重置。

[if !supportLists]93.????? [endif]什么是事務存儲榨为？我們?nèi)绾蝿?chuàng)建一個事務存儲惨好？

會話存儲和本地存儲類似，但是數(shù)據(jù)在會話中有效随闺，簡而言之數(shù)據(jù)在你關閉瀏覽器的時候就被刪除了。

????? 為了創(chuàng)建一個會話存儲你需要使用“sessionStorage.variablename.”在以下的代碼我們創(chuàng)建了一個名為”clickcount”的變量蔓腐；

如果你刷新瀏覽器則數(shù)目增加，但是如果你關閉瀏覽器，“clickcount”變量又會從0開始勋桶。

實例：

if(sessionStorage.clickcount){

????? sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;

}else{

????? sessionStorage.clickcount = 0;

}

[if !supportLists]94.????? [endif]本地存儲的生命周期是什么挑随？

????? 答：本地存儲沒有生命周期，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除傀蓉。

[if !supportLists]95.????? [endif]HTML5中的本地存儲概念是什么欧漱？

本地存儲是把網(wǎng)頁上的某些數(shù)據(jù)按照鍵值對的方式存放在瀏覽器里面一個域最多可以存5M數(shù)據(jù) 不區(qū)分離線還是在線這些被存的數(shù)據(jù)都會一直在瀏覽器里面除非手動清除數(shù)據(jù)。

（小心有陷阱）面試官會問做過項目里面哪些地方用過葬燎？

[if !supportLists]96.????? [endif]我們?nèi)绾螐谋镜卮鎯χ刑砑雍鸵瞥龜?shù)據(jù)误甚？

數(shù)據(jù)添加到本地存儲采用鍵值對缚甩，以下示例顯示了城市數(shù)據(jù)”北京”添加了鍵”test”

????? localStorage.setItem("test","北京");

????? 從本地存儲中檢索數(shù)據(jù)我們可以提供鍵名并使用”getItem”方法

????? localStorage.getItem(“test");

????? 如果你想存儲Json格式，你可以使用“JSON.stringify”方法窑邦，如下所示：

?????????????? 通過瀏覽器可以查看

var country = {};

????? country.name = "中國";

????? country.code = "I001";

????? //localStorage.setItem("I001", country);

????? //var country1 = localStorage.getItem("I001");

????? localStorage.setItem("I001",JSON.stringify(country));

????? localStorage.getItem(“I001");

????? 移除本地存儲：localStorage.removeItem(指定鍵)

?????????????? localStorage.removeItem(“I001");

[if !supportLists]97.????? [endif]如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信? (阿里)

調用localstorge擅威、cookies等本地存儲方式

[if !supportLists]98.????? [endif]介紹JavaScript的基本數(shù)據(jù)類型。

基本數(shù)據(jù)類型5種：字符串（string）冈钦、數(shù)字（number）郊丛、布爾（Boolean）、空（Null）瞧筛、未定義（Undefined）

????? ?? 復雜數(shù)據(jù)類型：數(shù)組厉熟、對象（跟本題沒有多大關系，如果面試官換一種問法较幌，就需要注意了庆猫，問JavaScript數(shù)據(jù)類型都有哪些呢？）

[if !supportLists]99.????? [endif]說幾條寫JavaScript的基本規(guī)范绅络？

（1）不要在同一行聲明多個變量

（2）如果你不知道數(shù)組的長度月培，使用push

（3）請使用 ===/!==來比較 true/false 或者數(shù)值

（4）對字符串使用單引號''(因為大多時候我們的字符串。特別html會出現(xiàn)")

（5）使用對象字面量替代new Array 這種形式

（6）絕對不要在一個非函數(shù)塊里聲明一個函數(shù)恩急，把那個函數(shù)賦給一個變量杉畜。瀏覽器允許你這么做，但是它們解析不同

（7）不要使用全局函數(shù)

（8）總是使用 var 來聲明變量衷恭，如果不這么做將導致產(chǎn)生全局變量此叠，我們要避免污染全局命名空間

（9）Switch 語句必須帶有 default 分支

（10）使用 /**...*/ 進行多行注釋，包括描述随珠，指定類型以及參數(shù)值和返回值

（11）函數(shù)不應該有時候有返回值灭袁，有時候沒有返回值

（12）語句結束一定要加分號

（13）for 循環(huán)必須使用大括號

（14）if 語句必須使用大括號

（15）for-in 循環(huán)中的變量應該使用 var 關鍵字明確限定作用域，從而避免作用域污染

（16）避免單個字符名窗看，讓你的變量名有描述意義

（17）當命名對象茸歧、函數(shù)和實例時使用駝峰命名規(guī)則

（18）給對象原型分配方法，而不是用一個新的對象覆蓋原型显沈，覆蓋原型會使繼承出現(xiàn)問題

（19）當給事件附加數(shù)據(jù)時软瞎，傳入一個哈希而不是原始值，這可以讓后面的貢獻者加入更多數(shù)據(jù)到事件數(shù)據(jù)里拉讯，而不用找出并更新那個事件的事件處理器

參考文檔：http://www.jb51.net/article/24579.htm

[if !supportLists]100. [endif]JavaScript有幾種類型值涤浇？（堆：原始值和棧：引用值），你能畫一下他們的內(nèi)存圖嗎魔慷？

棧：原始數(shù)據(jù)類型（Undefined只锭，Null，Boolean院尔，Number蜻展，String）

堆：引用數(shù)據(jù)類型（對象喉誊、數(shù)組、函數(shù)）

兩種類型的區(qū)別：存儲位置不同

原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段铺呵，占據(jù)空間小裹驰、大小固定，屬于被頻繁使用數(shù)據(jù)片挂，所以放入棧中存儲幻林；

引用數(shù)據(jù)類型存儲在堆(heap)中的對象,占據(jù)空間大、大小不固定,如果存儲在棧中音念，將會影響程序運行的性能沪饺；引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實體的起始地址闷愤。當解釋器尋找引用值時整葡，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體讥脐。

[if !supportLists]101. [endif]Javascript如何實現(xiàn)繼承遭居？

(1)構造繼承

(2)原型繼承

(3)實例繼承

(4)拷貝繼承

原型prototype機制或apply和call方法去實現(xiàn)較簡單，建議使用構造函數(shù)與原型混合方式旬渠。

function Parent() {

? this.name ='song';

}

function Child() {

? this.age = 28;

}

Child.prototype = new Parent(); //通過原型,繼承了Parent

var demo = new Child()l;

alert(demo.age);

alert(demo.name); //得到被繼承的屬性

[if !supportLists]102. [endif]如何創(chuàng)建一個對象? （畫出此對象的內(nèi)存圖）

javascript創(chuàng)建對象簡單的說,無非就是使用內(nèi)置對象或各種自定義對象俱萍，當然還可以用JSON；但寫法有很多種告丢，也能混合使用枪蘑。

(1)對象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

(2)用function來模擬無參的構造函數(shù)

function Person(){}

var person = new Person(); //定義一個function，如果使用new"實例化",該function可以看作是一個Class

person.name = "Xiaosong";

person.age = "23";

person.work = function() {

? alert("Hello" + person.name);

}

person.work();

(3)用function來模擬參構造函數(shù)來實現(xiàn)（用this關鍵字定義構造的上下文屬性）

function Person(name,age,hobby) {

? this.name =name; //this作用域：當前對象

? this.age =age;

? this.work =work;

? this.info =function() {

?????alert("我叫" + this.name + "岖免，今年" + this.age + "歲岳颇，是個" + this.work);

? }

}

var Xiaosong = new Person("WooKong",23,"程序猿"); //實例化、創(chuàng)建對象

Xiaosong.info(); //調用info()方法

(4)用工廠方式來創(chuàng)建（內(nèi)置對象）

var jsCreater = new Object();

jsCreater.name = "Brendan Eich"; //JavaScript的發(fā)明者

jsCreater.work = "JavaScript";

jsCreater.info = function() {

? alert("我是"+this.work+"的發(fā)明者"+this.name);

}

jsCreater.info();

(5)用原型方式來創(chuàng)建

function Standard(){}

Standard.prototype.name = "ECMAScript";

Standard.prototype.event = function() {

?alert(this.name+"是腳本語言標準規(guī)范");

}

var jiaoben = new Standard();

jiaoben.event();

(6)用混合方式來創(chuàng)建

function iPhone(name,event) {

? this.name =name;

? this.event =event;

}

iPhone.prototype.sell = function() {

? alert("我是"+this.name+"颅湘，我是iPhone5s的"+this.event+"~

haha!");

}

var SE = new iPhone("iPhone SE","官方翻新機");

SE.sell();

[if !supportLists]103. [endif]談談This對象的理解话侧。

this總是指向函數(shù)的直接調用者（而非間接調用者）；

如果有new關鍵字栅炒，this指向new出來的那個對象掂摔；

在事件中，this指向觸發(fā)這個事件的對象赢赊，特殊的是，IE中的attachEvent中的this總是指向全局對象Window级历；

[if !supportLists]104. [endif]eval是做什么的释移？

它的功能是把對應的字符串解析成JS代碼并運行；

應該避免使用eval寥殖，因為不安全玩讳，非常耗性能（2次涩蜘，一次解析成js語句，一次執(zhí)行）熏纯。

（注意：在項目里面寫js代碼的時候同诫，禁止使用的，因為有安全因素）

[if !supportLists]105. [endif]null樟澜，undefined的區(qū)別误窖？

null??????? 表示一個對象被定義了，值為“空值”秩贰；

undefined?? 表示不存在這個值霹俺。

typeof undefined

?//"undefined"

? undefined :是一個表示"無"的原始值或者說表示"缺少值"窑滞，就是此處應該有一個值拍屑，但是還沒有定義。當嘗試讀取時會返回undefined辣之；

? 例如變量被聲明了觅玻，但沒有賦值時想际，就等于undefined。

typeof null

?//"object"

? null :是一個對象(空對象, 沒有任何屬性和方法)溪厘；

? 例如作為函數(shù)的參數(shù)胡本，表示該函數(shù)的參數(shù)不是對象；

注意：

? 在驗證null時桩匪，一定要使用　===打瘪，因為 ==無法分別 null和　undefined

[if !supportLists]106. [endif]["1", "2",

"3"].map(parseInt) 答案是多少？

[1,NaN,NaN]

因為 parseInt 需要兩個參數(shù)(val,radix)傻昙，其中 radix 表示解析時用的基數(shù)闺骚。

map 傳了3個(element,index,array)，對應的 radix 不合法導致解析失敗妆档。

parseInt(轉換數(shù)字,轉換進制2僻爽、8、10贾惦、16)

一般般使用parseInt(“010”,10) //10???? parseInt(“010”,8) //8

[if !supportLists]107. [endif]事件胸梆、IE與火狐的事件機制有什么區(qū)別？如何阻止冒泡须板？

(1)我們在網(wǎng)頁中的某個操作（有的操作對應多個事件）碰镜。例如：當我們點擊一個按鈕就會產(chǎn)生一個事件。是可以被JavaScript 偵測到的行為习瑰。

(2)事件處理機制：IE是事件冒泡绪颖、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件甜奄；

(3)ev.stopPropagation();（舊ie的方法 ev.cancelBubble =

true;）

[if !supportLists]108. [endif]什么是閉包（closure）柠横，為什么要用它窃款？

閉包是指有權訪問另一個函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)牍氛，通過另一個函數(shù)訪問這個函數(shù)的局部變量晨继，利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部搬俊。

閉包特性：

(1)函數(shù)內(nèi)再嵌套函數(shù)

(2)內(nèi)部函數(shù)可以引用外層的參數(shù)和變量

(3)參數(shù)和變量不會被垃圾回收機制回收

//li節(jié)點的onclick事件都能正確的彈出當前被點擊的li索引

index = 0

index = 1

index = 2

index = 3

? var nodes =document.getElementsByTagName('li');

? for(i =0;i

?????nodes[i].onclick = function() {

????????? console.log(i+1); //不使用閉包的話紊扬，值每次都是4

????? }(4);

? }

[if !supportLists]109. [endif]"use

strict";是什么意思 ? 使用它的有什么好處或壞處？

use strict是一種ECMAscript 5添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理悠抹、不嚴謹之處珠月，減少一些怪異行為。

默認支持的糟糕特性都會被禁用楔敌，比如不能用with啤挎，也不能在意外的情況下給全局變量賦值;

全局變量的顯示聲明,函數(shù)必須聲明在頂層，不允許在非函數(shù)代碼塊內(nèi)聲明函數(shù),arguments.callee也不允許使用卵凑；

消除代碼運行的一些不安全之處庆聘，保證代碼運行的安全,限制函數(shù)中的arguments修改，嚴格模式下的eval函數(shù)的行為和非嚴格模式的也不相同;

提高編譯器效率勺卢，增加運行速度伙判；

為未來新版本的Javascript標準化做鋪墊。

[if !supportLists]110. [endif]new操作符具體干了什么呢?

(1)創(chuàng)建一個空對象黑忱，并且this 變量引用該對象宴抚，同時還繼承了該函數(shù)的原型。

(2)屬性和方法被加入到this 引用的對象中甫煞。

(3)新創(chuàng)建的對象由 this 所引用菇曲，并且最后隱式的返回this 。

var obj = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

[if !supportLists]111. [endif]Javascript中抚吠，有一個函數(shù)常潮，執(zhí)行時對象查找時，永遠不會去查找原型楷力，這個函數(shù)是喊式？

hasOwnProperty

JavaScript 中 hasOwnProperty 函數(shù)方法是返回一個布爾值，指出一個對象是否具有指定名稱的屬性萧朝。此方法無法檢查該對象的原型鏈中是否具有該屬性岔留；該屬性必須是對象本身的一個成員。

使用方法：

object.hasOwnProperty(proName)

其中參數(shù)object是必選項检柬，一個對象的實例贸诚。

proName是必選項，一個屬性名稱的字符串值厕吉。

如果 object 具有指定名稱的屬性酱固，那么JavaScript中hasOwnProperty函數(shù)方法返回true，反之則返回 false头朱。

[if !supportLists]112. [endif]對JSON的了解运悲？

JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。

它是基于JavaScript的一個子集项钮。數(shù)據(jù)格式簡單班眯，易于讀寫，占用帶寬小烁巫。

如：

{"age":"12",

"name":"back"}

(注意：強調一下之前做的項目里面通過ajax請求署隘，后端返回數(shù)據(jù)常用的格式)

[if !supportLists]113. [endif]解釋一下Math常用哪些方法？

?//x為傳入?yún)?shù)

??? Math.abs(x); //返回數(shù)的絕對值亚隙。

??? Math.ceil(x);//對數(shù)進行上舍入或向上取整

???Math.floor(x); //對數(shù)進行下舍入或向下取整

???Math.max(x,y)? //返回 x 和 y 中的最大值磁餐。

???Math.min(x,y)? //返回 x 和 y 中的最小值。

???Math.random()? //返回 0 ~ 1 之間的隨機數(shù)阿弃。

???Math.round(x)? //把數(shù)四舍五入為最接近的整數(shù)诊霹。

??? Math.PI? //返回圓周率（約等于3.14159）。

[if !supportLists]114. [endif]js延遲加載的方式有哪些渣淳？

Defer(只支持 IE)和async脾还、動態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js

[if !supportLists]115. [endif]知道ECMAScript

6里怎么寫class么?

ES6的class可以看作只是一個語法糖入愧，它的絕大部分功能鄙漏，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰棺蛛、更像面向對象編程的語法而已怔蚌。

//定義類

class Point {

? constructor(x,y) {? //構造方法

????? this.x =x;? //this關鍵字代表實例對象

????? this.y =y;

? }

? toString() {

????? return '('+ this.x + ',' + this.y + ')';

? }

}

[if !supportLists]116. [endif]AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規(guī)范區(qū)別鞠值？

AMD 規(guī)范在這里：https://github.com/amdjs/amdjs-api/wiki/AMD

CMD 規(guī)范在這里：https://github.com/seajs/seajs/issues/242

[if !supportLists]117. [endif]call()和 .apply()的區(qū)別媚创？

一、方法的定義?

call方法:?

語法：call(thisObj彤恶，Object)

定義：調用一個對象的一個方法钞钙，以另一個對象替換當前對象。

說明：

call 方法可以用來代替另一個對象調用一個方法声离。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛蓆hisObj 指定的新對象芒炼。?

如果沒有提供 thisObj 參數(shù)，那么 Global 對象被用作 thisObj术徊。?

apply方法：?

語法：apply(thisObj本刽，[argArray])

定義：應用某一對象的一個方法挪拟，用另一個對象替換當前對象懈糯。?

說明：?

如果 argArray 不是一個有效的數(shù)組或者不是arguments 對象，那么將導致一個 TypeError。?

如果沒有提供 argArray 和 thisObj 任何一個參數(shù)劈猿，那么 Global對象將被用作 thisObj听隐，并且無法被傳遞任何參數(shù)贰谣。

[if !supportLists]118. [endif]JavaScript中的作用域與變量聲明提升八秃？

參考地址：http://blog.csdn.net/sunxing007/article/details/9034253

?????????????? http://www.cnblogs.com/silentjesse/p/4024536.html

[if !supportLists]119. [endif]如何編寫高性能的Javascript？

參考地址：http://developer.51cto.com/art/200906/131335.htm

[if !supportLists]120. [endif]那些操作會造成內(nèi)存泄漏鲜屏？

內(nèi)存泄漏是指任何對象在您不再擁有或需要它之后任然存在烹看。

垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數(shù)量洛史，如果一個對象的引用數(shù)量為0（沒有其他對象引用過該對象）惯殊，或對該對象的惟一引用是循環(huán)的，那么該對象的內(nèi)存即可回收也殖。

setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話土思，會引發(fā)內(nèi)存泄漏。

閉包毕源、控制臺日志浪漠、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）

[if !supportLists]121. [endif]知道什么是webkit么? 知道怎么用瀏覽器的各種工具來調試和debug代碼么?

Chrome霎褐、safari瀏覽器的內(nèi)核址愿。

?????????????? 其中chrome的模板引擎使用的是Gecko

Gecko在互聯(lián)網(wǎng)中是最流行的排版引擎之一，其流行程度僅次于Trident（用于Windows版的Internet Explorer4.0版本開始）冻璃，其后尚有WebKit（用于Safari以及Google Chrome）以及Presto（用于Opera）响谓。

?????????????? 可以通過js檢查當前所使用瀏覽器的內(nèi)核以及模版引擎

?????????????? alert(navigator.userAgent);

[if !supportLists]122. [endif]如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎么測試你的前端工程么(mocha,

sinon, jasmin, qUnit..)?

如何測試前端代碼么?

PC端瀏覽器：市場份額：http://#baidu.com/data/browser

1.?? 編寫完前端靜態(tài)html+css(注意不包括js)

2.?? 加上js代碼以及邏輯處理（再進行測試）

在各個瀏覽器里面做兼容測試：1）.ietest—ie6-ie11（ie模擬瀏覽器）、真正的windows版本自帶的IE瀏覽器F12可以看見下圖,可以切換不同的瀏覽器模式省艳，后面跟著把文檔模式也改成瀏覽器模式一樣

2).FF(火狐瀏覽器) 娘纷、chrome（谷歌瀏覽器）、opera（歐朋瀏覽器）跋炕、maxthon（遨游瀏覽器）赖晶、safari(蘋果的瀏覽器)、獵豹安全瀏覽器

比較流氓的瀏覽器：（不知不覺電腦上就給安裝上了）

360瀏覽器（可以切換瀏覽器模式）辐烂、搜狗高速瀏覽器遏插、騰訊QQ瀏覽器、百度瀏覽器

還有其它用戶量不大的瀏覽器就不用一一列舉了纠修。

http://liulanqixiazai2016.lofter.com/

移動端瀏覽器：移動份額

????? uc瀏覽器（知道為啥要第一個寫嗎胳嘲？在移動端用戶量最多）、騰訊qq瀏覽器扣草、百度瀏覽器了牛、360瀏覽器颜屠、獵豹瀏覽器、safari鹰祸、chrome甫窟、opera、maxthon福荸、ff蕴坪、搜狗瀏覽器、海豚瀏覽器

2016年網(wǎng)頁瀏覽器發(fā)展現(xiàn)狀分析

http://www.chinabgao.com/k/liulanqi/22495.html

移動設備品牌占比

http://#baidu.com/data/mobile/brand

知道BDD, TDD,

Unit Test么?

TDD：測試驅動開發(fā)（Test-Driven Development）

BDD：行為驅動開發(fā)（Behavior Driven Development）

ATDD：驗收測試驅動開發(fā)（Acceptance Test Driven Development）

參考地址：http://www.testwo.com/article/414

知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?

參考地址：

http://www.tuicool.com/articles/yuMvQz

sinon 參考地址：http://www.maobashi.com/1366.html

參考地址：http://www.w3cmark.com/2016/446.html

[if !supportLists]123. [endif]前端templating(Mustache,

underscore, handlebars)是干嘛的, 怎么用?

前端js模板引擎

?????????????? Mustache：

???????????????????????? 參考地址：http://www.open-open.com/lib/view/open1416792564461.html

?????????????? http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html

underscore

Underscore 是一個 JavaScript 工具庫敬锐，它提供了一整套函數(shù)式編程的實用功能，但是沒有擴展任何 JavaScript 內(nèi)置對象呆瞻。他解決了這個問題：“如果我面對一個空白的HTML 頁面台夺，并希望立即開始工作，我需要什么痴脾？”他彌補了 jQuery 沒有實現(xiàn)的功能颤介，同時又是Backbone 必不可少的部分。

參考地址：http://www.bootcss.com/p/underscore/

簡單做個了解就可以（真實用在仔細學習）

[if !supportLists]124. [endif]簡述一下 Handlebars 的基本用法赞赖？

參考地址：http://baike.baidu.com/link?url=OF4LwdRf8jbdYZt8w1Yig7Q7dSCRA2jvpfxRISOE91l6kQzl1wZwmHnJb1CEJZ4Ov7IE5wHVPvQbBam8B-O0E_

http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html

[if !supportLists]125. [endif]ie各版本和chrome可以并行下載多少個資源

IE6兩個并發(fā)滚朵，iE7升級之后的6個并發(fā)，之后版本也是6個

Firefox前域，chrome也是6個

[if !supportLists]126. [endif]談一談你對 ECMAScript6 的了解辕近？

ECMAScript 6 是JavaScript語言的下一代標準，已經(jīng)在2015年6月正式發(fā)布了匿垄。它的目標移宅，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言椿疗。

標準的制定者有計劃漏峰，以后每年發(fā)布一次標準，使用年份作為標準的版本届榄。因為當前版本的ES6是在2015年發(fā)布的浅乔，所以又稱ECMAScript 2015。也就是說铝条，ES6就是ES2015

[if !supportLists]127. [endif]說說最近最流行的一些東西吧靖苇？常去哪些網(wǎng)站？

Node.js攻晒、Mongodb顾复、npm、MVVM鲁捏、MEAN芯砸、three.js,React 萧芙。

網(wǎng)站：w3cfuns,sf,hacknews,CSDN,慕課，博客園假丧，InfoQ,w3cplus等

[if !supportLists]128. [endif]前端安全問題双揪？

sql注入原理

??????????? 就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執(zhí)行惡意的SQL命令包帚。

??????????? 總的來說有以下幾點：

1.永遠不要信任用戶的輸入渔期，要對用戶的輸入進行校驗，可以通過正則表達式渴邦，或限制長度疯趟，對單引號和雙"-"進行轉換等。

2.永遠不要使用動態(tài)拼裝SQL谋梭，可以使用參數(shù)化的SQL或者直接使用存儲過程進行數(shù)據(jù)查詢存取信峻。

3.永遠不要使用管理員權限的數(shù)據(jù)庫連接，為每個應用使用單獨的權限有限的數(shù)據(jù)庫連接瓮床。

4.不要把機密信息明文存放盹舞，請加密或者hash掉密碼和敏感的信息。

??????????? XSS原理及防范

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標簽或者javascript代碼隘庄。比如：攻擊者在論壇中放一個看似安全的鏈接踢步，騙取用戶點擊后，竊取cookie中的用戶私密信息丑掺；或者攻擊者在論壇中加一個惡意表單获印，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中吼鱼，而不是用戶原本以為的信任站點蓬豁。

XSS防范方法

1.代碼里對用戶輸入的地方和變量都需要仔細檢查長度和對”<”,”>”,”;”,”’”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode菇肃，避免不小心把html tag 弄出來地粪。這一個層面做好，至少可以堵住超過一半的XSS攻擊琐谤。

2.避免直接在cookie 中泄露用戶隱私戴卜，例如email稠屠、密碼等等霹娄。3.通過使cookie 和系統(tǒng)ip 綁定來降低cookie 泄露后的危險市栗。這樣攻擊者得到的cookie 沒有實際價值，不可能拿來重放织阳。

4.盡量采用POST 而非GET 提交表單

XSS與CSRF有什么區(qū)別嗎眶蕉？

XSS是獲取信息，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包唧躲。CSRF是代替用戶完成指定的動作造挽，需要知道其他用戶頁面的代碼和數(shù)據(jù)包碱璃。

要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：

　　1.登錄受信任網(wǎng)站A饭入，并在本地生成Cookie嵌器。　　2.在不登出A的情況下谐丢，訪問危險網(wǎng)站B爽航。

CSRF的防御

1.???????? 服務端的CSRF方式方法很多樣，但總的思想都是一致的乾忱，就是在客戶端頁面增加偽隨機數(shù)讥珍。

2.???????? 使用驗證碼

[if !supportLists]129. [endif]如何判斷當前腳本運行在瀏覽器還是node環(huán)境中？（阿里）

通過判斷Global對象是否為window饭耳，如果不為window串述，當前腳本沒有運行在瀏覽器中

[if !supportLists]130. [endif]把 Script 標簽放在頁面的最底部的body封閉之前和封閉之后有什么區(qū)別？瀏覽器會如何解析它們寞肖？

參考資料：

https://segmentfault.com/a/1190000004292479?_ea=560235

http://www.zhihu.com/question/20027966

[if !supportLists]131. [endif]移動端的點擊事件的有延遲，時間是多久衰腌，為什么會有新蟆？怎么解決這個延時？

參考資料：http://www.mamicode.com/info-detail-666685.html

[if !supportLists]132. [endif]Node.js的適用場景右蕊？

高并發(fā)琼稻、聊天、實時消息推送饶囚、服務器做前端資源壓縮

第三部分 jQuery 框架

[if !supportLists]1.?????????[endif]jQuery綁定事件的方法書寫至少兩種帕翻？

答：bind(),on(),click()

[if !supportLists]2.?????????[endif]jQuery對象和Dom對象相互轉換

答：jQuery對象轉原生Dom對象? $(“div”).get(0)

原生Dom對象轉jQuery對象? $(ele)

[if !supportLists]3.?????????[endif]Js用過的插件

答：tween.js,swiper.js,touch.js,zepto.js

[if !supportLists]4.?????????[endif]jQuery如何獲取元素？

答：$(selector)

[if !supportLists]5.?????????[endif]JQuery鏈式寫法原理

答：jQuery里的方法調用完畢返回return this

[if !supportLists]6.?????????[endif]用jQuery如何獲取標簽的id

答：$(element).attr(“id”)

[if !supportLists]7.?????????[endif]用jQuery如何獲取標簽

答：$(“div”)

[if !supportLists]8.?????????[endif]用jQuery如何獲取標簽內(nèi)容

答：$(element).text()/$(element).html();

[if !supportLists]9.?????????[endif]用jQuery如何更換背景色

答：$(element).css({backgroundColor:”red”})

[if !supportLists]10.????? [endif]jQuery中萝风，如何阻止事件冒泡和瀏覽器默認行為嘀掸？

答：e.preventDefault();e.stopPropagation();

[if !supportLists]11.????? [endif]$(document).ready與window.onload有何區(qū)別？

答：$(document).ready 對于支持DOMContentLoaded事件的瀏覽器规惰，會使用該事件睬塌，所有的節(jié)點渲染完畢，就執(zhí)行,可以調用多次歇万，不支持的就使用 onload事件

window.onload事件要等到所有的資源加載完畢揩晴，如圖片，視頻贪磺，js腳本等,只能綁定一次硫兰，后面綁定的覆蓋前面所綁定的事件

[if !supportLists]12.????? [endif]列舉jQuery的優(yōu)勢

答：兼容性處理，dom操作寒锚，獲取元素簡單劫映，封裝了ajax......

[if !supportLists]13.????? [endif]jQuery中:odd :gt 這兩種選擇器的含義以及用法舉例

:odd 匹配所有索引值為奇數(shù)的元素违孝，從 0開始計數(shù)?? $(“div:odd”)

:gt(index) 匹配所有大于給定索引值的元素? $(“div:gt(2)”)

[if !supportLists]14.????? [endif]jQuery中，使用nth-child(3n+2)所選中的是以下哪些

nth-child（）匹配其父元素下的第N個子或奇偶元素

':eq(index)' 只匹配一個元素苏研，而這個將為每一個父元素匹配子元素等浊。:nth-child從1開始的，而:eq()是從0算起的

2摹蘑，5筹燕，8

[if !supportLists]15.????? [endif]使用jQuery中的鏈式書寫方法書寫如下代碼

答：$(“#test”).css(“color”,”red”).width(20)

[if !supportLists]16.????? [endif]jQuery中對動畫的操作命令有哪些？舉出不少于8種衅鹿，并說明含義

答：animate(),fadeIn(),fadeOut(),slideDown(),slideUp(),hide(),show(),toggle()

[if !supportLists]17.????? [endif]jQuery中綁定事件的方法是什么撒踪，嘗試書寫例子：為id名為con的div綁定一個事件，事件為彈出一個數(shù)字0大渤。獲取標簽時不要使用原生javascript方法制妄。

答：$(“#con”).click(function(){alert(0)})

[if !supportLists]18.????? [endif]jQuery中獲取相對文檔的坐標的方法是什么？

答：offset(),獲取匹配元素在當前視口的相對偏移泵三。返回的對象包含兩個整型屬性：top 和 left耕捞，以像素計。此方法只對可見元素有效烫幕。

position()獲取匹配元素相對定位父級的偏移俺抽。沒有定位父級即為文檔坐標

返回的對象包含兩個整型屬性：top 和 left。為精確計算結果较曼，請在補白磷斧、邊框和填充屬性上使用像素單位。此方法只對可見元素有效捷犹。

[if !supportLists]19.????? [endif]jQuery中對于節(jié)點的操作有哪些（舉出不少于8種）弛饭？寫出含義以及用法。

[if !supportLists]20.????? [endif]jQuery動畫效果的實現(xiàn)

答：$ele().animate({top:100},500)

[if !supportLists]21.????? [endif]jQuery中的兩個合成事件是_________和__________

答：toggle萍歉、hover

[if !supportLists]22.????? [endif]用jQuery獲取標簽“

div內(nèi)部的信息

”當中的內(nèi)容的代碼為______侣颂？

答：$(“#con”).text()

[if !supportLists]23.????? [endif]舉出不少于6種的jQuery中對動畫的操作命令，并說明其含義：_________翠桦、_________横蜒、_________、_________销凑、_________丛晌、_________

[if !supportLists]24.????? [endif]編寫一個jQuery的擴展方法（插件），讓調用的對象設置寬度為200像素

jQuery.fn.extend({

setWidth:function() {

$(this).width(200);

return this;

}

})

[if !supportLists]25.????? [endif]你使用過哪些Javascript庫斗幼？

答：jQuery Zepto（注意了：面試官可能問你這2個庫都什么區(qū)別）

jQuery是在Web上應用很廣泛的JavaScript庫澎蛛，它提供了大量的工具和API函數(shù)，使用它的人相當普遍蜕窿，使用的門檻也比較低谋逻。

Zepto最初是為移動端開發(fā)的庫呆馁，是jQuery的輕量級替代品，因為它的API和jQuery相似毁兆，而文件更小浙滤，對任何項目都是個不錯的選擇，Zepto是不支持IE瀏覽器气堕。

針對移動端程序纺腊，Zepto還有一些基本的觸摸事件可以用來做觸摸屏交互，如：tap事件——tap茎芭，singleTap揖膜，doubleTap，longTap;

Swipe事件——swipe梅桩，swipeLeft壹粟，swipeRight，swipeUp宿百，swipeDown趁仙。

更多區(qū)別詳情參考地址：http://blog.csdn.net/kongjiea/article/details/42522305

[if !supportLists]26.????? [endif]jQuery從哪個版本開始不兼容IE低版本，你項目中用的哪個版本垦页，為什么用這個版本幸撕，其它版本的jQuery與你用的版本有什么區(qū)別？

注意了面試官不想單獨問的是對版本的認識外臂，出題的目的是考驗咋們對jquery源碼是否仔細讀過或了解過

版本1.12將成為針對指定的微軟Windows默認瀏覽器版本的最后一個官方支持,就是說版本1.13將只會支持IE8及其之后的版本，丟棄了IE6余IE7。

例如1.9版本丟棄了live()方法。其它可以去官網(wǎng)查看儿惫。

例如 $.browser()蒲牧，jQuery 1.9 還是支持 IE 6/7/8，但是 2.0版本將不再支持這三個版本

參考地址：http://www.alixixi.com/web/a/2013052788951.shtml

[if !supportLists]27.????? [endif]我們?nèi)绾问褂?/a>Canvas來畫一條簡單的線杯道？手寫出代碼（注意：不是讓你敲鍵盤，而是手寫）

1.定義Canvas區(qū)域

2.獲取訪問canvas上下文區(qū)域

3.繪制圖形

width="600" height="500">當前瀏覽器不支持canvas，請升級瀏覽器或者使用高版本的其它瀏覽器

??? var cvs =document.getElementById("mycanvas");

??? //獲取上下文（繪制環(huán)境）

??? var ctx = cvs.getContext("2d");

??? //注意如果畫多條線的時候需要使用beginPath和closePath

??? //開始繪制

???ctx.beginPath();

??? //設置起點

???ctx.moveTo(10,10);

??? //設置下一個點

??? ctx.lineTo(200,100);

[if !supportLists]28.????? [endif]針對 jQuery性能的優(yōu)化方法赘艳？

基于Class的選擇性的性能相對于Id選擇器開銷很大，因為需遍歷所有DOM元素克握。

頻繁操作的DOM蕾管，先緩存起來再操作。用Jquery的鏈式調用更好菩暗。

比如：var

str=$("a").attr("href");

for (var i = size; i < arr.length; i++) {}

for 循環(huán)每一次循環(huán)都查找了數(shù)組(arr)的.length 屬性掰曾，在開始循環(huán)的時候設置一個變量來存儲這個數(shù)字，可以讓循環(huán)跑得更快：

for (var i = size, length = arr.length; i < length;

i++) {}

[if !supportLists]29.????? [endif]jQuery與jQuery

UI有啥區(qū)別停团？

`jQuery`是一個js庫旷坦，主要提供的功能是選擇器掏熬，屬性修改和事件綁定等等。

`jQuery UI`則是在jQuery的基礎上秒梅，利用jQuery的擴展性旗芬，設計的插件。提供了一些常用的界面元素捆蜀，諸如對話框疮丛、拖動行為、改變大小行為等等

[if !supportLists]30.????? [endif]jQuery和Zepto的區(qū)別漱办？各自的使用場景这刷？

參考答案：http://blog.csdn.net/kongjiea/article/details/42522305

jQuery偏向于pc端

Zepto偏向于移動端

[if !supportLists]31.????? [endif]Zepto的點透問題如何解決？

e.preventDefault();?//?阻止“默認行為”

參考地址：

http://www.bubuko.com/infodetail-649496.html

http://my.oschina.net/chainlong/blog/225702

第四部分 AJAX

[if !supportLists]1.?????????[endif]如何實現(xiàn)局部內(nèi)容和后臺交互時的變化

答：使用ajax

[if !supportLists]2.?????????[endif]什么是AJAX 娩井，AJAX原理

答：AJAX即“Asynchronous?Javascript?And?XML”（異步JavaScript和XML）通過在后臺與服務器進行少量數(shù)據(jù)交換暇屋，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下洞辣，對網(wǎng)頁的某部分進行更新咐刨。傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁頁面扬霜。

原理：XMLHttpRequest

[if !supportLists]3.?????????[endif]使用異步加載獲取JS數(shù)據(jù)至少兩種方法定鸟？

答：post，get

[if !supportLists]4.?????????[endif]什么是JSON著瓶，JSON的格式

答：JSON(JavaScript?Object

Notation) 是一種輕量級的數(shù)據(jù)交換格式联予。JSON 語法是 JavaScript 對象表示語法的子集。

數(shù)據(jù)在鍵值對中

數(shù)據(jù)由逗號分隔

花括號保存對象

方括號保存數(shù)組

[if !supportLists]5.?????????[endif]除了AJAX還有什么模板可以與后臺交互

答：jsonp

[if !supportLists]6.?????????[endif]AJAX中的跨域問題：什么是跨域材原？如何解決跨域問題沸久？

答：域不一樣的，即為跨域余蟹，包括（協(xié)議卷胯，域名，端口號）

1.// 指定允許其他域名訪問

??????? header('Access-Control-Allow-Origin:*');

2.使用jsonp

[if !supportLists]7.?????????[endif]AJAX的流程是什么威酒？

1.客戶端產(chǎn)生js的事件

2.創(chuàng)建XMLHttpRequest對象

3.對XMLHttpRequest進行配置

4.通過AJAX引擎發(fā)送異步請求

5.服務器端接收請求并且處理請求窑睁，返回html或者xml內(nèi)容

6.XML調用一個callback()處理響應回來的內(nèi)容

7.頁面局部刷新

[if !supportLists]8.?????????[endif]AJAX如何調用JSON數(shù)據(jù)

答：xml.responseText

[if !supportLists]9.?????????[endif]AJAX能夠處理哪些格式的文件

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

XMLHttpRequest

2.0 新增了多種類型

支持txt,json,js,圖片，文檔等等...

[if !supportLists]10.????? [endif]AJAX實現(xiàn)表單驗證用戶注冊流程

用戶觸發(fā)ajax請求葵孤，后臺接口返回json格式字符串

[if !supportLists]11.????? [endif]JSON數(shù)據(jù)的解析方法

1.JSON.parse(json)?

2.new Function(“return ” + json) ();?????

3.eval(“(”+json+”)”)

[if !supportLists]12.????? [endif]如何轉化成JSON字符串

答：JSON.stringify(json)

[if !supportLists]13.????? [endif]說明異步請求的get和post方法的區(qū)別

1.使用Get請求時,參數(shù)在URL中顯示,而使用Post方式,則不會顯示出來

2.使用Get請求發(fā)送數(shù)據(jù)量小,Post請求發(fā)送數(shù)據(jù)量大

get 請求：

post 請求：

[if !supportLists]14.????? [endif]列舉AJAX的優(yōu)勢

答：傳統(tǒng)的Web應用交互由用戶觸發(fā)一個HTTP請求到服務器,服務器對其進行處理后再返回一個新的HTHL頁到客戶端, 每當服務器處理客戶端提交的請求時,客戶都只能空閑等待,并且哪怕只是一次很小的交互担钮、只需從服務器端得到很簡單的一個數(shù)據(jù),都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。這個做法浪費了許多帶寬佛呻，由于每次應用的交互都需要向服務器發(fā)送請求裳朋，應用的響應時間就依賴于服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。

與此不同鲤嫡，AJAX應用可以僅向服務器發(fā)送并取回必需的數(shù)據(jù)送挑，它使用SOAP或其它一些基于XML的Web Service接口，并在客戶端采用JavaScript處理來自服務器的響應暖眼。因為在服務器和瀏覽器之間交換的數(shù)據(jù)大量減少惕耕，結果我們就能看到響應更快的應用。同時很多的處理工作可以在發(fā)出請求的客戶端機器上完成诫肠，所以Web服務器的處理時間也減少了司澎。

[if !supportLists]15.????? [endif]AJAX中創(chuàng)建請求的兼容性處理

答：var xmlHttp = window.XMLHttpRequest ? new

XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

[if !supportLists]16.????? [endif]對于request.status的http狀態(tài)碼? 用于表示網(wǎng)頁服務器HTTP響應狀態(tài)的3位數(shù)字代碼。1,2,3,4,5開頭的狀態(tài)碼分別代表什么（提示：404頁面表示禁止訪問等）

1xx（臨時響應）表示臨時響應并需要請求者繼續(xù)執(zhí)行操作的狀態(tài)代碼栋豫。

2xx （成功）表示成功處理了請求的狀態(tài)代碼挤安。

3xx （重定向）?表示要完成請求，需要進一步操作丧鸯。通常蛤铜，這些狀態(tài)代碼用來重定向。

4xx（請求錯誤）?這些狀態(tài)代碼表示請求可能出錯丛肢，妨礙了服務器的處理围肥。

5xx（服務器錯誤）這些狀態(tài)代碼表示服務器在嘗試處理請求時發(fā)生內(nèi)部錯誤。這些錯誤可能是服務器本身的錯誤蜂怎，而不是請求出錯穆刻。

[if !supportLists]17.????? [endif]下列對get和post的區(qū)別描述錯誤的是（??）

A、get比post更常用?????????????????????????????? B杠步、get發(fā)送信息為明文發(fā)送氢伟，安全性較差

C、get的性能只有post的1/3??????????????????????? D幽歼、get傳輸數(shù)據(jù)是通過URL進行的

答案：C

[if !supportLists]18.????? [endif]如何將js對象轉化成JSON字符串（?? ）

A腐芍、JSON.parseInt()????????????????????????? B、JSON.parse()

C试躏、JSON.string ()???????????????????? D、JSON.stringify

()

答案：D

[if !supportLists]19.????? [endif]AJAX流程代碼填空???

var xml =?????window.XMLHttpRequest ?

??????? new XMLHttpRequest() : newActiveXObject("Microsoft.XMLHTTP")?????;????????????????????????????????????????????? ??? /*創(chuàng)建一個AJAX對象*/

var url ='a.html';????????????????????????????????????????????????? ??? /*設置要訪問的url地址*/

xml.??? open???(??? “get”?? ,??? url??? ,??? true??? ) ;?? /*確定即將連接的網(wǎng)址及方式,發(fā)起同步請求*/

xml.??? send(null)??? ?;????????????????????????? ???????????????????????????????????? ??? /*發(fā)送請求*/

xml.??? onload????= function (){??????????????????????????????????? ??? /*當AJAX請求成功后執(zhí)行這個函數(shù)*/

???? con.innerHTML =?????JSON.parse(xml.responseText)?? ?;???????????????? /*對服務器返回的數(shù)據(jù)進行處理*/

}????????????

[if !supportLists]20.????? [endif]AJAX調用JSON數(shù)據(jù) 代碼填空

json內(nèi)容如下：

[

????? {

????? "pic":"spring.jpg",

????? "dis":"天街小雨潤如酥设褐，草色遙看近卻無颠蕴。最是一年春好處，絕勝煙柳滿皇都助析。"

????? },

????? {

????? "pic":"summer.jpg",

????? "dis":"泉眼無聲惜細流犀被，樹陰照水愛晴柔。小荷才露尖尖角外冀，早有蜻蜓立上頭寡键。"

????? },

????? {

????? "pic":"fall.jpg",

????? "dis":"自古逢秋悲寂寥，我言秋日勝春朝雪隧。晴空一鶴排云上西轩，便引詩情到碧霄员舵。"

????? },

????? {

????? "pic":"winter.jpg",

????? "dis":"墻角數(shù)枝梅，凌寒獨自開藕畔。遙知不是雪马僻，為有暗香來。"

????? }

]

如何獲取到"自古逢秋悲寂寥注服，我言秋日勝春朝韭邓。晴空一鶴排云上，便引詩情到碧霄溶弟。"這段文字女淑？

........................../*前面代碼省略*/

xml.onload=function(){

??? var obj =??????JSON.parse(xml.reponseText)????? ????

??? var con =?????obj[2].dis?????? ??

}

[if !supportLists]21. [endif]AJAX的意義，用法辜御，優(yōu)點和原理

1.什么是AJAX?

AJAX全稱為“Asynchronous

JavaScript and XML”（異步JavaScript和XML）鸭你，是一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。它使用：

使用XHTML+CSS來標準化呈現(xiàn)我抠；

使用XML和XSLT進行數(shù)據(jù)交換及相關操作苇本；

使用XMLHttpRequest對象與Web服務器進行異步數(shù)據(jù)通信；?使用Javascript操作Document Object

Model進行動態(tài)顯示及交互菜拓；?使用JavaScript綁定和處理所有數(shù)據(jù)瓣窄。

2.與傳統(tǒng)的web應用比較

傳統(tǒng)的Web應用交互由用戶觸發(fā)一個HTTP請求到服務器,服務器對其進行處理后再返回一個新的HTHL頁到客戶端, 每當服務器處理客戶端提交的請求時,客戶都只能空閑等待,并且哪怕只是一次很小的交互联喘、只需從服務器端得到很簡單的一個數(shù)據(jù),都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面从诲。這個做法浪費了許多帶寬，由于每次應用的交互都需要向服務器發(fā)送請求椒惨，應用的響應時間就依賴于服務器的響應時間贱鄙。這導致了用戶界面的響應比本地應用慢得多劝贸。

與此不同，AJAX應用可以僅向服務器發(fā)送并取回必需的數(shù)據(jù)逗宁，它使用SOAP或其它一些基于XML的Web Service接口映九，并在客戶端采用JavaScript處理來自服務器的響應。因為在服務器和瀏覽器之間交換的數(shù)據(jù)大量減少瞎颗，結果我們就能看到響應更快的應用件甥。同時很多的處理工作可以在發(fā)出請求的客戶端機器上完成，所以Web服務器的處理時間也減少了哼拔。

3.AJAX的工作原理

Ajax的工作原理相當于在用戶和服務器之間加了—個中間層(AJAX引擎),使用戶操作與服務器響應異步化引有。并不是所有的用戶請求都提交給服務器,像—些數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務器提交請求。

Ajax其核心有JavaScript倦逐、XMLHTTPRequest譬正、DOM對象組成，通過XmlHttpRequest對象來向服務器發(fā)異步請求，從服務器獲得數(shù)據(jù)曾我，然后用JavaScript來操作DOM而更新頁面粉怕。這其中最關鍵的一步就是從服務器獲得請求數(shù)據(jù)。

[if !supportLists]22. [endif]Jsonp的意義您单，用法斋荞，優(yōu)點和原理

JSONP的優(yōu)點是：它不像XMLHttpRequest對象實現(xiàn)的Ajax請求那樣受到同源策略的限制；它的兼容性更好虐秦，在更加古老的瀏覽器中都可以運行平酿，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調用callback的方式回傳結果悦陋。

JSONP的缺點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求蜈彼；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題俺驶。

JSONP原理

JSONP的最基本的原理是：動態(tài)添加一個標簽幸逆，而script標簽的src屬性是沒有跨域的限制的。這樣說來暮现，這種跨域方式其實與ajax XmlHttpRequest協(xié)議無關了还绘。

這樣其實"jQuery?AJAX跨域問題"就成了個偽命題，jquery $.ajax方法名有誤導人之嫌栖袋。

如果設為dataType: 'jsonp'拍顷，這個$.ajax方法就和ajax XmlHttpRequest沒什么關系了，取而代之的則是JSONP協(xié)議塘幅。JSONP是一個非官方的協(xié)議昔案，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現(xiàn)跨域訪問电媳。

JSONP即JSON with Padding踏揣。由于同源策略的限制，XmlHttpRequest只允許請求當前源（域名匾乓、協(xié)議捞稿、端口）的資源。如果要進行跨域請求拼缝，我們可以通過使用html的script標記來進行跨域請求括享，并在響應中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對象珍促。這種跨域的通訊方式稱為JSONP。

jsonCallback 函數(shù)jsonp1236827957501(....)：是瀏覽器客戶端注冊的剩愧，獲取跨域服務器上的json數(shù)據(jù)后猪叙，回調的函數(shù)

Jsonp的執(zhí)行過程如下：

首先在客戶端注冊一個callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務器。注意：服務端得到callback的數(shù)值后，要用jsonp1236827957501(......)把將要輸出的json內(nèi)容包括起來穴翩，此時犬第，服務器生成 json 數(shù)據(jù)才能被客戶端正確接收。

然后以 javascript 語法的方式芒帕，生成一個function歉嗓， function 名字就是傳遞上來的參數(shù) 'jsoncallback'的值 jsonp1236827957501 .

最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中背蟆，這樣就生成了一段 js 語法的文檔鉴分，返回給客戶端。

客戶端瀏覽器带膀，解析script標簽志珍，并執(zhí)行返回的 javascript 文檔，此時javascript文檔數(shù)據(jù)垛叨，作為參數(shù)伦糯，傳入到了客戶端預先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里。

可以說jsonp的方式原理上和

src="http://跨域/...xx.js">是一致的(qq空間就是大量采用這種方式來實現(xiàn)跨域數(shù)據(jù)交換的)嗽元。JSONP是一種腳本注入(Script Injection)行為敛纲，所以有一定的安全隱患。

[if !supportLists]23.????? [endif]請盡可能詳盡的解釋AJAX的工作原理剂癌。

第一步：創(chuàng)建ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

第二步：判斷數(shù)據(jù)傳輸方式(GET/POST)

第三步：打開鏈接 open()

第四步：發(fā)送 send()

當ajax對象完成第四步（onreadystatechange）數(shù)據(jù)接收完成淤翔，判斷http響應狀態(tài)（status）200-300之間或者304（緩存）執(zhí)行回調函數(shù)

?? 注意：檢測XMLHttpRequest對象的readyState屬性，該屬性表示請求／響應過程的當前活動階段珍手，屬性值如下：

0：未初始化办铡。尚未調用open()方法

1：啟動。已經(jīng)調用open()方法琳要，但尚未調用send()方法

2：發(fā)送寡具。已經(jīng)調用send()方法，但尚未接收到響應

3：接收稚补。已經(jīng)接收到部分響應數(shù)據(jù)

4:?? 完成童叠。已經(jīng)接收到全部響應數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了（如果寫原生的js ajax請求需要等到 readyState==4的時候再做處理）其他的js庫已經(jīng)做好處理了课幕，放心使用

[if !supportLists]24.????? [endif]你對Ajax的理解厦坛。

1.AJAX 是一種用于創(chuàng)建更好更快以及交互性更強的Web應用程序的技術；

2.通過Ajax你的 JavaScript 可在不重載頁面的情況與 Web服務器交換數(shù)據(jù)乍惊；

3.AJAX 在瀏覽器與Web服務器之間使用異步數(shù)據(jù)傳輸（HTTP請求）杜秸，這樣就可使網(wǎng)頁從服務器請求少量的信息，而不是整個頁面润绎；

4.AJAX 可使因特網(wǎng)應用程序更小撬碟、更快诞挨，更友好；

5.AJAX 是一種獨立于Web服務器軟件的瀏覽器技術呢蛤。

[if !supportLists]25.????? [endif]get與post兩種方式的優(yōu)缺點惶傻。

get:

get是從服務器上獲取數(shù)據(jù)，post是向服務器傳送數(shù)據(jù)其障；

get傳送的數(shù)據(jù)量較小银室，不能大于2KB。post傳送的數(shù)據(jù)量較大励翼，一般被默認為不受限制蜈敢。但理論上，IIS4中最大量為80KB抚笔，IIS5中為100KB扶认；

get安全性非常低，post安全性較高殊橙。但是執(zhí)行效率卻比Post方法好辐宾；

get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應膨蛮，在URL中可以看到叠纹；

在做數(shù)據(jù)查詢時，建議用Get方式敞葛；

post:

post是通過HTTP post機制誉察，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址见秽，用戶看不到這個過程稚铣；

所以：包含機密信息的話，建議用Post數(shù)據(jù)提交方式痹筛；而在做數(shù)據(jù)添加氨肌、修改或刪除時鸿秆，建議用Post方式。

[if !supportLists]26.????? [endif]一次完整的HTTP事務是怎樣一個過程怎囚？

a.域名解析

b.發(fā)起TCP的三次握手

c.建立TCP連接后發(fā)起http請求

d.服務器端響應http請求卿叽，瀏覽器得到html碼

e.瀏覽器解析html代碼，并請求html代碼中的資源

f.瀏覽器對頁面進行渲染并呈現(xiàn)給客戶

[if !supportLists]27.?????[endif]CORS是什么恳守？對于跨域請求考婴，如何將附帶憑證（HTTP Cookie及HTTP認證信息）的請求發(fā)送至服務器？（提示：后續(xù)真實工作中可能會用到）

答：跨域請求一直是網(wǎng)頁編程中的一個難題催烘，在過去沥阱，絕大多數(shù)人都傾向于使用JSONP來解決這一問題。不過現(xiàn)在伊群，我們可以考慮一下W3C中一項新的特性——CORS（Cross-Origin Resource Sharing）了考杉。CORS是現(xiàn)代瀏覽器支持跨域資源請求的一種方式屁使。

解決方法：???????????

當你使用XMLHttpRequest發(fā)送請求時，瀏覽器發(fā)現(xiàn)該請求不符合同源策略奔则，會給該請求加一個請求頭：Origin，后臺（php或者其它接收數(shù)據(jù)方）進行一系列處理蔽午，如果確定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin;瀏覽器判斷該相應頭中是否包含Origin的值易茬，如果有則瀏覽器會處理響應，我們就可以拿到響應數(shù)據(jù)及老，如果不包含瀏覽器直接駁回抽莱，這時我們無法拿到響應數(shù)據(jù)。

更多參考地址：www.cnblogs.com/dojo-lzz/p/4265637.html

?????????????? http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

[if !supportLists]28.????? [endif]什么是Ajax和JSON骄恶，它們的優(yōu)缺點

什么是Ajax食铐？？僧鲁？

術語Ajax用來描述一組技術虐呻，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗。

Ajax它是“Asynchronous JavaScript + XML的簡寫”

定義Ajax：

?????????????? Ajax不是一種技術寞秃。實際上斟叼，它由幾種蓬勃發(fā)展的技術以新的強大方式組合而成。Ajax包含：

?????????????? * 基于XHTML和CSS標準的表示春寿；

?????????????? * 使用Document Object Model進行動態(tài)顯示和交互朗涩；

?????????????? * 使用XMLHttpRequest與服務器進行異步通信；

?????????????? * 使用JavaScript綁定一切绑改。

Ajax的工作原理（一定要掌握）

一共4步谢床，每一步代表什么意思以及什么作用？面試題1里面有提到

對于JSON厘线，首先要明白JSON和XML一樣也是一種簡單文本格式识腿。

JSON來自于javascript，但是應用上面遠遠不止是javascript的json皆的，它相當于xml覆履，是一種比較流行的標準格式，是數(shù)據(jù)的載體

javascript

json 是用于javascript程序的费薄，它可以支持對象引用以及函數(shù)硝全；ajax

json只是最簡單的字符串和數(shù)字，它不可能完全支持javascript里面的數(shù)據(jù)類型楞抡。

相對于XML伟众，JSON更加易讀、更便于肉眼檢查召廷。在語法的層面上凳厢，JSON與其他格式的區(qū)別是在于分隔數(shù)據(jù)的字符

[if !supportLists]29.????? [endif]淺談一下如何避免用戶多次點擊造成的多次請求账胧。

答：我們在訪問有的網(wǎng)站，輸入表單完成以后先紫，單擊提交按鈕進行提交以后治泥，提交按鈕就會變?yōu)榛疑脩舨荒茉賳螕舻诙握诰钡街匦录虞d頁面或者跳轉居夹。這樣，可以一定程度上防止用戶重復提交導致應用程序上邏輯錯誤本冲。

還有很多其他的方式進行防止重復點擊提交准脂，如

1> 定義標志位：

　點擊觸發(fā)請求后，標志位為false量檬洞；請求（或者包括請求后具體的業(yè)務流程處理）后狸膏，標志位為true量。通過標志位來判斷用戶點擊是否具備應有的響應添怔。

2> 卸載及重載綁定事件：

?? 點擊觸發(fā)請求后湾戳，卸載點擊事件；請求（或者包括請求后具體的業(yè)務流程處理）后澎灸，重新載入綁定事件院塞。

3> 替換（移除）按鈕DOM

?? 點擊觸發(fā)請求后，將按鈕DOM對象替換掉（或者將之移除）性昭，自然而然此時不在具備點擊事件拦止；請求（或者包括請求后具體的業(yè)務流程處理）后，給新的按鈕DOM定義點擊事件糜颠。

更多講解參考：http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html

[if !supportLists]30.????? [endif]ajax是什么?ajax的全稱：Asynchronous

Javascript And XML汹族。

異步傳輸+js+xml。所謂異步其兴，在這里簡單地解釋就是：向服務器發(fā)送請求的時候顶瞒，我們不必等待結果，而是可以同時做其他的事情元旬，等到有了結果它自己會根據(jù)設定進行后續(xù)操作榴徐，與此同時，頁面是不會發(fā)生整頁刷新的匀归，提高了用戶體驗坑资。

(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調用對象

(2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息

(3)設置響應HTTP請求狀態(tài)變化的函數(shù)

(4)發(fā)送HTTP請求

(5)獲取異步調用返回的數(shù)據(jù)

(6)使用JavaScript和DOM實現(xiàn)局部刷新

[if !supportLists]31.????? [endif]同步和異步的區(qū)別?

同步的概念應該是來自于操作系統(tǒng)中關于同步的概念:

不同進程為協(xié)同完成某項工作而在先后次序上調整(通過阻塞,喚醒等方式)穆端。同步強調的是順序性袱贮，誰先誰后；異步則不存在這種順序性体啰。

同步：瀏覽器訪問服務器請求攒巍，用戶看得到頁面刷新嗽仪，重新發(fā)請求,等請求完，頁面刷新柒莉，新內(nèi)容出現(xiàn)闻坚，用戶看到新內(nèi)容,進行下一步操作。

異步：瀏覽器訪問服務器請求兢孝，用戶正常操作鲤氢，瀏覽器后端進行請求。等請求完西潘，頁面不刷新，新內(nèi)容也會出現(xiàn)哨颂，用戶看到新內(nèi)容喷市。

[if !supportLists]32.????? [endif]如何解決跨域問題?

答：jsonp、iframe威恼、window.name品姓、window.postMessage、服務器上設置代理頁面

[if !supportLists]33.????? [endif]異步加載的方式有哪些箫措？

(1)defer腹备，只支持 IE

(2)async:

(3)創(chuàng)建 script，插入到DOM 中斤蔓，加載完畢后callBack

最后編輯于：2018.07.02 21:52:42

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末植酥，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子弦牡，更是在濱河造成了極大的恐慌友驮，老刑警劉巖，帶你破解...
沈念sama閱讀 206,013評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件驾锰，死亡現(xiàn)場離奇詭異卸留，居然都是意外死亡，警方通過查閱死者的電腦和手機椭豫，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,205評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門耻瑟，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人赏酥，你說我怎么就攤上這事喳整。” “怎么了今缚？”我有些...
開封第一講書人閱讀 152,370評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵算柳，是天一觀的道長。經(jīng)常有香客問我姓言，道長瞬项，這世上最難降的妖魔是什么摄狱？我笑而不...
開封第一講書人閱讀 55,168評論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任脆荷，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘墓律。我一直安慰自己，他們只是感情好赘阀，可當我...
茶點故事閱讀 64,153評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布筋夏。她就那樣靜靜地躺著，像睡著了一般税手。火紅的嫁衣襯著肌膚如雪蜂筹。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 48,954評論 1贊 283
城市分裂傳說
那天芦倒，我揣著相機與錄音艺挪，去河邊找鬼。笑死兵扬，一個胖子當著我的面吹牛麻裳，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播器钟，決...
沈念sama閱讀 38,271評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼津坑，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了傲霸？” 一聲冷哼從身側響起疆瑰，我...
開封第一講書人閱讀 36,916評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎昙啄，沒想到半個月后乃摹，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,382評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡跟衅，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,877評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年孵睬，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伶跷。...
茶點故事閱讀 37,989評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡掰读，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出叭莫，到底是詐尸還是另有隱情蹈集，我是刑警寧澤，帶...
沈念sama閱讀 33,624評論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布雇初，位于F島的核電站拢肆，受9級特大地震影響，放射性物質發(fā)生泄漏。R本人自食惡果不足惜郭怪，卻給世界環(huán)境...
茶點故事閱讀 39,209評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一支示、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧鄙才，春花似錦颂鸿、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,199評論 0贊 19
一樁弒父案嘴纺，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至浓冒，卻和暖如春栽渴，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背稳懒。一陣腳步聲響...
開封第一講書人閱讀 31,418評論 1贊 260
情欲美人皮
我被黑心中介騙來泰國打工熔萧，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人僚祷。一個月前我還...
沈念sama閱讀 45,401評論 2贊 352
代替公主和親
正文我出身青樓，卻偏偏與公主長得像贮缕，于是被迫代替她去往敵國和親辙谜。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 42,700評論 2贊 345

h5常見的面試題

推薦閱讀更多精彩內(nèi)容