家好，我是拾光；感謝大家閱讀本文。如果大家覺得寫的不錯，希望大家能夠點贊，收藏，轉發以及關注我的頭條號：全棧開發者。在此感謝大家的支持。

隨著前端的需求增多，前端開發者也相繼的增加，碼農多的是，現在很多不管是線上還是線下的培訓機構都招收了大量的學員，什么熱門教什么，但是出去的程序猿到公司之后表現并不是很好，并且又一些部分程序猿到了那里過了沒多久就有因為很多原因而被辭。我們有的時候可以想一想，思考一下自身需要提高一些哪些技能；

對于程序猿本身來說，就是想求得一份高薪的工作。當然了，應屆生或者畢業不久的人來說，薪資不是特別高，需要熬一段時間，需求高薪的旅途上，面試是一個途徑，如果面試很不錯，可以有一個好的談判資本。當然了，這需要量力而行。話不說的太多了，下面開始了。

首先給大家介紹的是開發規范，內容比較多，大家可以先行收藏之后進行查看，也可以經常去搜集源碼以及看API，看一看經驗老道的開發人員是怎樣進行開發的。再次發布一些根據自己的經驗以及搜集的資料來給大家整理的一些規范，如果有誤，請大家在評論中給予指正，我會馬上進行修改錯誤并及時更新，在此先行感謝大家進行的反饋。

前端命名規范：

1、HTML文件命名規范：

1）統一用小寫的英文字母、數字和下劃線，不得使用漢字、空格以及特殊字符；

2）使用index進行文件命名，索引文件名

3）各頁面命名的規則：

1、統一使用翻譯的英文命名，或英文簡寫

2、統一使用拼音命名，或拼音簡寫

3、注意：不要英文拼音混合使用

2、圖片命名規則：

1）圖片的命名分為頭尾兩部分，用下劃線隔開，前半部分使用圖片的大類性質，例如：廣告，標志，菜單，按鈕等

2）放置在頁面頂部的廣告，裝飾圖案等長方形的圖片取名：banner

3）標志性的圖片取名為logo

4）在頁面上位置不固定并且帶有鏈接的小圖片取名為：button

5）在頁面上某一個位置連續出現，性質相同的鏈接欄目的圖片我們取名為：menu

3、腳本文件命名規則：

1）實際模塊：例如：廣告-->ad.js，彈框-->pop.js

2）公用模塊：英文名，如：common.js，basic.js

4、動態語言命名規則：

1）以性質_描述可以有多個單詞，性質一般是頁面的概要，

2）示例：register_form.jsp,show_userlist.jsp

5、文件位置存放規范：

1）flash存放flash文件

2）images存放圖片文件

3）inc存放include文件

4）library存放DW庫文件

5）media存放多媒體文件

6）script存放外部JQuery文件

7）js存放手寫js文件

8）css存放css文件

6、CSS屬性設置：

1）字體顏色值：類似#000000可以使用簡寫#000;

2）backgraund-img : *;background-color: *;可以使用簡寫：background:#000 url("images/logo.png");

7、Class命名規則：

1）頁面結構：

1)容器：container/warp

2)整體寬度：wapper

3)頁頭：header

4)內容：content

5)頁面主體：main

6)頁尾：footer

7)側欄：sidebar

8)l欄目：column

9)中間內容：center

2）導航：

1)導航：nav

2)主導航：mainnav，globalnav

3)子導航：subnav

4)頂導航：topnav

5)邊導航：sidebar

6)左導航：leftsidebar

7)右導航：rightsidebar

8)邊導航圖標：sidebaricon

9)菜單：menu

10)子菜單：submenu

11)標題：titile

3）功能：

1)標志：logo

2)登陸：login

3)登錄條：loginbar

4)注冊：registe

5)產品：products

6)產品價格：products_prices

7)產品評論：products_review

8)編輯評論：editor_review

9)廣告/標語：banner

10)摘要：summary

11)生產商：publisher

12)縮略圖：screenshot

13)常見問題：fags

14)關鍵字：keyword

15)博客：blog

16)論壇：forum

17)搜索：search

18)搜索輸入框：search_input

19)搜索輸出：search_output

20)搜索結果：search_results

21)加入我們：joinus

22)狀態：status

23)按鈕：btn

24)滾動:scroll

25)標簽頁：tab

26)文章列表：list

27)提示信息：msg/message

28)當前的：current

29)小技巧：tips

30)皮膚：skin

31)活動：activities

32)推廣：promotion

33)公告：announcement

34)排行：raking

35)公司簡介：company_profile

36)公司設備：equipment

37)公司榮譽：glories

38)企業文化：culture

39)企業規模：scale

40)營銷網絡：sales_network

41)組織機構：organization

42)技術力量：technology

43)分支機構：branches

44)企業資質：enterprise_qualification

45)公司實力：strength_strength

46)經營理念：operation_principle

47)經理致辭：manager_oration

48)分類瀏覽：browse_by_category

49)分類瀏覽：browse_by_category

50)人力資源：human_resource_hr

51)領導致辭： leader_oration

52)客戶留言：customer_message

53)客戶服務：customer_service

54)您的要求：your_requirements

55)銷售信息：sales_information

56)招商：enterprise_establishing

57)教育培訓：education_training

58)在線交流：online_communication

59)質量認證：quality_certification

60)合作加盟：joinIn_cooperation

61)產品描述：products_description

62)業務范圍：business_scope

63)產品銷售：product_sales

64)聯系我們：contact_us

65)信息發布：information

66)返回首頁：homepage

67)產品定購：order

68)電子商務：e_business

69)版權所有：copy _right

70)友情連結：hot_link

71)行業新聞：trade_news

72)行業動態：trends

73)郵編：postal_code_zipcode

74)新聞動態：news_trends

75)公司名稱：company_name

76)銷售熱線：sales_hotline

77)聯系人：contact_person

78)建設中：in_construction

79)證書：certificate

80)地址：add

81)電話：tel

82)傳真：fax

83)產品名稱：product_name

84)產品說明：description

85)價格：price

86)品牌：brand

87)規格：specification

88)尺寸：size

89)生產廠家：manufacuturer

90)型號：model

91)產品標號：item_no

92)技術指標：technique_data

93)產品描述：description

94)產地：production_place

95)用途：application

96)論壇：forum

97)在線訂購：on_line_order

98)招標：bidInviting

99)綜述：general

100)業績：achievements

101)大事：great_event

102)動態：trends

103)服務：service

104)投資：investment

105)行業：industry

106)規劃：programming

107)環境：environment

108)發送：delivery

109)提交：submit

110)重寫：reset

111)社區：community

112)業務：business

113)在線調查：online_inquiry

114)下載中心：download

115)意見反饋：feedback

116)常見問題：faq

117)中心概況：general_profile

118)游樂園：amusement_park

119)專題報道：special_report

120)圖標: icon

121)注釋：note

122)指南：guild

123)服務：service

124)熱點：hot

125)新聞：news

126)下載：download

127)投票：vote

128)商標：label/branding

129)：breadcrumb/loc

130)購物車：shop

131)標簽：tag

132)信譽：siteinfo_credits

133)網站信息：siteinfo

134)法律聲明：siteinfo_legal

135)合作伙伴：partner

136)友情鏈接：friendlink

137)版權：copyright

8、head區域代碼規范：

1）關鍵字：<meta name="keyword" content="this is key words"/>

2）外部引入css層疊樣式表：<link href="css/style.css" rel = "stylesheet" type="text/css"/>

3）網頁字符集設置：<meta http equiv ="Content Type" content ="text/html;charset=utf-8">

4）網頁標題：title的設置

5）公司版權注釋

5）網頁制作者信息

6）網站簡介

7）網頁機器人搜索，蜘蛛抓取，告訴 它，哪些是需要抓取的，哪些是不需要抓取的；

9、字體規范：

1）在設定字體樣式時對于文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。

2）字體大小：在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial兩種字體。一般使用中文宋體的9pt和11pt或12px

和14.7px這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。

3）為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工干預分段。

4）不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外， 漢字之間的標點要用全角標點，英文字母和

數字周圍的括號應該使用半角括號。

5）請不要在網頁中連續出現多于一個的空格，也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用

text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。

6）行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.

7）排版中我們經常會遇到需要進行首行縮進的處理，不要使用 或者全角空格來達到效果，規范的做法是在樣式表中定義 p {

text-indent: 2em; } 然后給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束標記

10、鏈接和表格的使用規范：

1）鏈接使用規范：

1）網站中的鏈接路徑全部采用相對路徑

2）一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名：例如：<a href=”aboutus/index.htm”> 而應該這樣

：<a href=”aboutus/”>

3）在瀏覽器里，當我們點擊空鏈接時，它會自動將當前頁面重置到首端， 從而影響用戶正常的閱讀內容， 我們用

代碼“javascript：void(null)”代替原來的“#”標記

2）表格使用規范：

1）盡量避免表格嵌套過多--->后果會對瀏覽器加載延長時間， 帶來不友好的用戶體驗

2）在寫 <table> 互相嵌套時，嚴格按照的規范，對于單獨的一個<table>來說，<table><tr>對齊，<td> 縮進兩個

半角空格，<td>中如果還有嵌套的表格，<table>也縮進兩個半角空格， 如果<td>中沒有任何嵌套的表格，</td> 結束標記應該與<td>處于同一行，不要

換行

11、下載和瀏覽速度規范：

1）文件下載可以通過 a標簽href指向路徑直接實現

2）首頁Flash網頁大小應限定在200K以下， 盡可能的使用矢量圖形和Action來減小動畫大小。

3）非首頁靜態頁面含圖片大小應限定在70K 左右，盡可能的使用背景顏色替換大塊同色圖片。

4）能夠用背景色替代圖片，盡量使用背景色

5）盡量切小圖片，進行平鋪

12、alt以及titile的使用規范：

1）alt一般對圖片進行提示

2）titile一般對文字進行提示

13、緩存：

1）缺點：

1）對于一些涉及用戶重要信息的頁面如果頁面被緩存則很危險

2）占用大量硬盤資源

2）優點：

1）可以提高瀏覽器瀏覽頁面的效率

3）相關設置：

1）<META HTTP-EQUIV="pragma" CONTENT="no-cache">

2）<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

3）<META HTTP-EQUIV="expires" CONTENT="0">

14、瀏覽器兼容：

1）所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析， 造成頁面顯示效果不統一的情況。

2）不同瀏覽器的標簽默認的外補丁和內補丁不同

1）問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。碰到頻率:100%，解決

方案：CSS里 *{margin:0;padding:0;}，備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設

置各個標簽的內外補丁是0。

3）瀏覽器兼容問題二：塊屬性標簽float后， 又有橫行的margin情況下，在IE6顯示margin比設置的大:

1）問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行，碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局

最常見的瀏覽器兼容問題），解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性，備注：我們最常用的就是div+CSS布局了

，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼

容性問題。

4）設置較小高度標簽（一般小于10px）， 在IE6，IE7，遨游中高度超出自己設置高度：

1）問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度，碰到頻率：60%，解決方案：給超出

高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。備注：這種情況一般出現在我們設置小圓角背景的標簽里。 出現這個

問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。 即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。

5）元素水平居中問題：

1）1. FF: margin:0 auto;IE: 父級{ text-align:center; }

6）const問題：

1）說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;IE下,只能使用var關鍵字來定義常量.解決方法：

統一使用var關鍵字來定義常量.

7）模態和非模態窗口問題：

1）說明:IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能. 解決方法

：直接使用window.open(pageURL,name,parameters)方式打開新窗口。如果需要將子窗口中的參數傳遞回父窗口,可以在子窗口中使用window.opener來訪

問父窗口，例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

8）float的延續性：

1）說明：在i.e.瀏覽器中，如果使用float設置元素浮動對齊。如果不關閉浮動，將會對后面的元素標簽延續浮動。

解決方法：在設置float的元素后面加上clear:both，關閉浮動。

15、LOGO設計：

1）其中關于網站的LOGO，目前有三種規格：

1）88*31 這是互聯網上最普遍的LOGO規格。

2）120*60 這種規格用于一般大小的LOGO。

3）120*90 這種規格用于大型LOGO。

16、JavaScript使用規范：

1）書寫：書寫過程中,每行代碼結束必須有分號; 原則上所有功能均根據XXX項目需求原生開發, 以避免網上down下來的代碼造成的代

碼污染(沉冗代碼 || 與現有代碼沖突 ||...);

2）變量命名格式：變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字

符為'_', 其他與原生JavaScript規則相同, 如: _iTaoLun; 另,要求變量集中聲明,避免全局變量.

3）函數命名： 首字母小寫駝峰式命名. 如iTaoLun();

4）代碼結構明了,加適量注釋.提高函數重用率；注重與html分離,減小reflow, 注重性能

5）文件書寫：JavaScript程序應獨立保存在后綴名為.js的文件中。應盡量減少在HTML 中的JavaScript代碼，因為存在與HTML中的

JavaScript代碼會明顯增加文件大小，且不能對其進行緩存和壓縮。filename.js或JavaScript的代碼應盡量放到body的后面。 這樣可以減少因為載入腳

本而造成其他頁面內容載入也被延遲的問題。

6）縮進：縮進的單位為四個空格。避免使用Tab鍵來縮進。 因為始終沒有個統一的Tab長短標準。雖然使用空格會增加文件的大小，

但在局域網中幾乎可以忽略，且在最小化過程中也可被消除掉。

7）避免每行超過 80 個字符。當一條語句一行寫不下時，請考慮折行。在運算符號，最好是逗號后換行。 在運算符后換行可以減少因

為復制粘貼產生的錯誤被分號掩蓋的幾率。

8）所有的變量必須在使用前通過var進行聲明。JavaScript并不強制必須這么做， 但這么做可以讓程序易于閱讀，且也容易發現那些

沒聲明的變量(它們會被編譯成全局變量)。 將var語句放在函數的首部。最好把每個變量的聲明語句單獨放到一行，并加上注釋說明。 var

currentEntry;//當前選擇項 var　level;//縮進程度　 var size; // 表格大小，盡量減少全局變量的使用。不要讓局部變量覆蓋全局變量。

9）函數聲明：所有的函數在使用前進行聲明。內函數的聲明跟在var語句的后面. 這樣可以幫助判斷哪些變量是在函數范圍內的。

10）使用{}代替new　Object()。使用[]代替new　Array()。這樣便于書寫且能提高一點執行效率。當成員名是一組有序的數字時使用

數組來保存數據。當成員名是無規律的字符串或其他時使用對象來保存數據。

11） event.srcElement問題：問題說明：I.E.下，even對象有srcElement屬性，但是沒有target屬性； Firefox下，even對象有

target屬性，但是沒有srcElement屬性。解決方法：使用 var obj=event.target||window.event.srcElement;

12）parentElement問題：firefox與I.E.的父元素(parentElement)的區別，IE：obj.parentElement，firefox：obj.parentNode，解

決方法: 因為firefox與I.E.都支持DOM,因此使用obj.parentNode是不錯選擇.

17、圖片的使用規范：

1）存放位置：所有頁面元素類圖片均放入images文件夾, 測試用圖片放于img/demoimg文件夾

2）格式：圖片格式僅限于gif || png || jpg；

3）命名：命名全部用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；盡量用易懂的詞匯, 便于團隊

其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;

4）在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少加載時間；

5）運用css sprite技術集中小的背景圖或圖標, 減小頁面http請求,但注意,請務必在對應的spritepsd源圖中劃參考線, 并保存至

img/images目錄下.

18、注釋的規范：

1）html--------->注釋格式 <!--這兒是注釋-->, '--'只能在注釋的始末位置,不可置入注釋文字區域;

2）css--------->注釋格式 /*這兒是注釋*/;

3）javascript

1）單行：單行注釋使用//這兒是單行注釋 ,

2）多行：多行注釋使用 /* 這兒有多行注釋 */;

19）瀏覽器兼容css：

1）CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的

CSS效果。

2）

div{background-color:green;*background-color:red;(bothIE6%%IE7)}

上面的css在firefox中，它是認識不了后面的那個帶星號的東西是什么的， 于是將它過濾掉，不予理睬，解析得到

的結果是:div{background:green}, 于是理所當然這個div的背景是綠色的。 在IE6中呢，它兩個background都能識別出來， 它解析得到的結果是:div

{background:green;*background:red;} ,于是根據優先級別，處在后面的red的優先級高，于是當然這個div的背景顏色就是紅色的了。

3）區別不同瀏覽器，CSS hack寫法：

1）IE6與FF：background:orange;*background:blue;

2）區別IE6與IE7：background:green!important;background:blue;

3）區別IE7與FF：background:orange;*background:green;

4）區別FF，IE7，IE6：background:orange;*background:green;_background:blue;

background:orange;*background:green!important;*background:blue;

5）IE都能識別*，標準瀏覽器不能識別（如 FF）；IE6能識別*，不能識別!import；IE7能識別*，能識別!import；

FF不能識別*，單能識別!import；

------------華麗的分割線---------------

下面就是整理過后的面試題了，下面獻給客官們。

html部分

說說你對語義化的理解？

1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構 2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重； 3，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁； 4，便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標簽之前。告知瀏覽器以何種模式來渲染文檔。 （2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。 （3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 （4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

你知道多少種Doctype文檔類型？

該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。 HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。 XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。 Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而 Quirks （包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

HTML與XHTML——二者有什么區別

區別： 1.所有的標記都必須要有一個相應的結束標記 2.所有標簽的元素和屬性的名字都必須使用小寫 3.所有的XML標記都必須合理嵌套 4.所有的屬性必須用引號""括起來 5.把所有<和&特殊符號用編碼表示 6.給所有屬性賦一個值 7.不要在注釋內容中使“--” 8.圖片必須有說明文字

常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理. * 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。 * IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。 * 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別) * 漸進識別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“”這一標記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 css .bb{ background-color:#f1ee18;/*所有識別*/ .background-color:#00deff; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ } * IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性. * IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性. * 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。 * Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決. * 超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} * 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>` * 上下margin重合問題 ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。 解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。 * ie6對png圖片格式支持不好(引用一段腳本處理)

解釋下浮動和它的工作原理？清除浮動的技巧

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。 1.使用空標簽清除浮動。 這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。 2.使用overflow。 給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after偽對象清除浮動。 該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；

浮動元素引起的問題和解決辦法？

浮動元素引起的問題： （1）父元素的高度無法被撐開，影響與父元素同級的元素 （2）與浮動元素同級的非浮動元素會跟隨其后 （3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對于問題1，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

1，額外標簽法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。） 2，使用after偽類 #parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 3,浮動外部元素 4,設置`overflow`為`hidden`或者auto

IE 8以下版本的瀏覽器中的盒模型有什么不同

IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框

DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。

（1）創建新節點 createDocumentFragment() //創建一個DOM片段 createElement() //創建一個具體的元素 createTextNode() //創建一個文本節點 （2）添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子節點前插入一個新的子節點 （3）查找 getElementsByTagName() //通過標簽名稱 getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的) getElementById() //通過元素Id，唯一性

html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。 * 拖拽釋放(Drag and drop) API 語義化更好的內容標簽（header,nav,footer,aside,article,section） 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失； sessionStorage 的數據在瀏覽器關閉后自動刪除 表單控件，calendar、date、time、email、url、search 新的技術webworker, websocket, Geolocation * 移除的元素 純表現的元素：basefont，big，center，font, s，strike，tt，u； 對可用性產生負面影響的元素：frame，frameset，noframes； 支持HTML5新標簽： * IE8/IE7/IE6支持通過document.createElement方法產生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽， 瀏覽器支持新標簽后，還需要添加標簽默認的樣式： * 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 如何區分： DOCTYPE聲明\新增的結構元素\功能元素

iframe的優缺點？

1.<iframe>優點： 解決加載緩慢的第三方內容如圖標和廣告等的加載問題 Security sandbox 并行加載腳本 2.<iframe>的缺點： *iframe會阻塞主頁面的Onload事件； *即時內容為空，加載也需要時間 *沒有語意

如何實現瀏覽器內多個標簽頁之間的通信?

調用localstorge、cookies等本地存儲方式

webSocket如何兼容低瀏覽器？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發送 XHR 、 基于長輪詢的 XHR

今天的內容很多，大家看的是否有些累呢？

下面就是慣例——讓大家樂呵的時間了。

1、丑小鴨生來就很丑，誰都不喜歡它，它從小被其他鴨子欺負。

它無奈離開了媽媽，獨自流浪，遇到狂風、暴雨、獵狗……

但丑小鴨沒有畏懼，它頑強拼搏，努力學習，最終，人們發現，它雖然不好看，但還挺好吃的

2、又一次被老婆打破頭住院了！朋友們來看我時都在勸我，臨床的一病友大爺也跟著勸我：小伙子，你這已經不錯了！上個月一小伙子被她老婆打的渾身被繃帶包的跟木乃伊似的！聽完大爺的話我當時就哭了！：大爺，上個月的那個人也是我！

3、剛網管給我發了一個信息： 大哥，你把鞋穿上我多給你加 一個小時……

4、有個妹紙的個性簽名是我是一個不高，不瘦，行蹤不定的小神經。……尼瑪…我頭一次見到有人把又矮又粗，還喜歡瞎跑亂逛說的這么清新脫俗的！。。

今天的內容就到這里了，希望得到大家的支持。