第一篇：web前端學(xué)習(xí)總結(jié)2

1.WEB標準以及W3C標準是什么？

標簽閉合、標簽小寫、不亂嵌套、使用外鏈css和js、結(jié)構(gòu)行為表現(xiàn)的分離。

1.xhtml和html有什么區(qū)別

XHTML 元素必須被正確地嵌套，閉合，區(qū)分大小寫，文檔必須擁有根元素。

3.行內(nèi)元素有哪些？塊級元素有哪些？

行內(nèi)元素: a b img em br i span input select strong textarea

塊級元素：div p h1-h6 form ul dl ol table 4.行內(nèi)元素和塊級元素有什么區(qū)別？

行內(nèi)元素不可以設(shè)置寬高，不獨占一行;

塊級元素可以設(shè)置寬高，獨占一行。

5.我想讓行內(nèi)元素跟上面的元素距離10px，加margin-top和padding-top可以嗎？

margin-top,padding-top無效

6.CSS的盒模型由什么組成？

內(nèi)容，border ,margin，padding

7.說說display屬性有哪些？可以做什么？

display:block行內(nèi)元素轉(zhuǎn)換為塊級元素

display:inline塊級元素轉(zhuǎn)換為行內(nèi)元素

display:inline-block轉(zhuǎn)為內(nèi)聯(lián)元素

8.CSS 選擇符有哪些？

1.id選擇器（# myid）

2.類選擇器（.myclassname）

3.標簽選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul < li）

6.后代選擇器（li a）

7.通配符選擇器（*）

8.屬性選擇器（a[rel = “external”]）

9.偽類選擇器（a: hover, li: nth-child）

9.哪些css屬性可以繼承？

可繼承： font-size font-family color, ul li dl dd dt;

不可繼承 ：border padding margin width height;

10.css優(yōu)先級算法如何計算？

!important > id > class > 標簽

!important 比 內(nèi)聯(lián)優(yōu)先級高

*

優(yōu)先級就近原則，樣式定義最近者為準;

*

以最后載入的樣式為準;

11.text-align:center和line-height有什么區(qū)別？

text-align是水平對齊，line-height是行間。

12.前端頁面由哪三層構(gòu)成，分別是什么？作用是什么？

結(jié)構(gòu)層 Html 表示層 CSS 行為層 js

13.標簽上title與alt屬性的區(qū)別是什么？

Alt是圖片屬性，讓搜索引擎認識你的圖片。當圖片不顯示的時候顯示。

title是網(wǎng)站標題，是seo中最重要的屬性。(seo:做關(guān)鍵詞給百度搜索用的)

14.使用css 精靈有什么好處？

Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕HTTP的請求數(shù)量。

15.什么是語義化的HTML？

標簽使用的合理性，對于搜索引擎的抓取有好處。

16.b標簽和strong標簽,i標簽和em標簽的區(qū)別？

后者有語義，前者則無。

17.tite與h1的區(qū)別。

title側(cè)重于網(wǎng)站信息標題

從文章而言，h1側(cè)重于文章主題

站在seo的角度看，好網(wǎng)站少不了title，好文章少不了h1標題，title權(quán)重高于h1。

18.清除浮動的幾種方式，各自的優(yōu)缺點

1.使用空標簽清除浮動clear:both（缺點，增加無意義的標簽）

2.使用overflow:auto（使用zoom:1用于兼容IE）

3.是用afert偽元素清除浮動(用于非IE瀏覽器)

19.display:none和visibility:hidden的區(qū)別是什么？

visibility: hidden----將元素隱藏，但是還占著位置。

display: none----將元素的顯示設(shè)為無，不占任何的位置。

20.說出幾種IE6 BUG的解決方法

1.雙邊距BUG float引起的 解決：使用display：inline , 取消元素的塊級屬性。

2.3像素問題 使用float引起的 解決：使用dislpay:inline;margin：-3px

3.超鏈接hover 點擊后失效 解決：使用正確的書寫順序 link visited hover active

4.Ie z-index問題 解決：給父級添加position:relative

5.Png 透明 解決：使用js代碼

6.Min-height 最小高度！Important 解決

7.img出現(xiàn)邊框

8.為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的overflow:hidden,zoom:0.08 line-height:1px可以解決）

21.域名和服務(wù)器相關(guān)知識？

22.HTTP狀態(tài)碼都有那些。

200 OK

//客戶端請求成功

400 Bad Request //客戶端請求有語法錯誤，不能被服務(wù)器所理解

403 Forbidden //服務(wù)器收到請求，但是拒絕提供服務(wù)

404 Not Found //請求資源不存在，輸入了錯誤的URL

500 Internal Server Error //服務(wù)器發(fā)生不可預(yù)期的錯誤

503 Server Unavailable //服務(wù)器當前不能處理客戶端的請求，一段時間后可能恢復(fù)正常

23.如何優(yōu)化網(wǎng)頁加載速度？

1.減少css，js文件數(shù)量及大小(減少重復(fù)性代碼，代碼重復(fù)利用)，壓縮CSS和Js代碼

2.圖片的大小

3.把css樣式表放置頂部，把js放置頁面底部

4.減少http請求數(shù)

5.使用外部 Js 和 CSS

24.position屬性absolute與relative的區(qū)別？

absolute絕對定位 //相對于瀏覽器定位

relative相對定位 //相對于前面的容器定位

25.HTML5 的有那些新標簽？

26.CSS3新增偽類有那些？

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素。

p:last-of-type 選擇屬于其父元素的最后

元素的每個

元素。

p:only-of-type 選擇屬于其父元素唯一的

元素的每個

元素。

p:only-child

選擇屬于其父元素的唯一子元素的每個

元素。

p:nth-child(2)選擇屬于其父元素的第二個子元素的每個

元素。

:enabled、:disabled 控制表單控件的禁用狀態(tài)。

:checked，單選框或復(fù)選框被選中。

27.全局變量和局部變量有什么區(qū)別？

28.談?wù)凾his對象的理解。

this是js的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象。

this一般情況下：是全局對象Global。作為方法調(diào)用，那么this就是指這個對象

29.documen.write和 innerHTML有什么區(qū)別？

DOM的innerHTML是DOM元素對象的一個屬性

而write是document對象的一個方法

第二篇：最新web前端學(xué)習(xí)路線

最新web前端的學(xué)習(xí)路線

程序設(shè)計之道無遠弗屆，御晨風(fēng)而返。———— 杰佛瑞 · 詹姆士 很多前端初學(xué)者總會問以下兩個問題： 第一種一直在問：如何學(xué)習(xí)前端？

第二種總說：前端很簡單，就那么一點東西。

我從沒有聽到有人問：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師。詳細了解成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？ 何為前端工程師

前端工程師，也叫Web前端開發(fā)工程師。他是隨著web發(fā)展，細分出來的行業(yè)。Web前端開發(fā)技術(shù)主要包括三個要素：HTML、CSS和JavaScript!

HTML 甚至不是一門語言，他僅僅是簡單的標記語言!

CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。

Javascript 的基礎(chǔ)部分相對來說不難，入手還算快。

此篇文章中就HTML、CSS、JS都有哪些區(qū)別？進行了全面的解讀！

前端開發(fā)的入門門檻其實很低，與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。也正因為如此，前端開發(fā)領(lǐng)域有很多自學(xué)成“才”的同行，但大多數(shù)人都停留在會用的階段，因為后面的學(xué)習(xí)曲線越來越陡峭，每前進一步都很難。

現(xiàn)在市場很需要優(yōu)秀的、高級的前端工程師。

一方面是因為這是一個比較新的細分行業(yè)，而且前端程序員大都自學(xué)一部分，知識結(jié)構(gòu)不系統(tǒng);另一方面，大學(xué)里面沒有這種課程，可以加入web前端學(xué)習(xí)君羊：前面數(shù)字是五一四，中間數(shù)字是一六七，后面三位數(shù)字是六七八，將數(shù)字串聯(lián)起來，了解學(xué)習(xí)更多在學(xué)校學(xué)不到的技術(shù)干貨。如何學(xué)習(xí)前端知識

我們生活在一個充滿規(guī)則的宇宙里面。社會秩序按照規(guī)則運行，計算機語言幾乎全部是規(guī)則的集合。計算機前輩們定義規(guī)則，規(guī)則約束我們，我們用規(guī)則控制數(shù)據(jù)。大部分時候，對數(shù)據(jù)的合理控制，來自于你對規(guī)則的掌握。

學(xué)習(xí)HTML，CSS 應(yīng)該先跟著書仔細、扎實的學(xué)一遍。然后就需要做大量的練習(xí)，做各種常規(guī)的、奇怪的、大量的布局練習(xí)來捆固、理解自己的知識。

而學(xué)習(xí)Javascript 首先要知道這門語言可以做什么，不能做什么，擅長做什么，不擅長做什么!

如果你只想當一個普通的前端程序員，你只需要記住大部分 Javascript 函數(shù)，做一些練習(xí)就可以了。

如果你想當深入了解Javascript，你需要了解 Javascript 的原理、機制。需要知道他們的本源，需要深刻了解 Javascript 基于對象的本質(zhì)。

還需要深刻了解瀏覽器宿主下的 Javascript 的行為、特性。

初學(xué)者全面了解JavaScript，用心讀這篇文章 掌握六大JavaScript框架，薪水就是比同級別高！

作為一個優(yōu)秀的前端工程師還需要深入了解、以及學(xué)會處理 Javascript 的這些缺陷。

優(yōu)秀的前端工程師應(yīng)具備什么條件

首先，優(yōu)秀的Web前端開發(fā)工程師要在知識體系上既要有廣度和深度!做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發(fā)工程師。技術(shù)非黑即白，只有對和錯，而技巧則見仁見智。

在以前，會一點Photoshop和Dreamweaver的操作，就可以制作網(wǎng)頁。成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？

現(xiàn)在，只掌握這些已經(jīng)遠遠不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。

Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。

優(yōu)秀的Web前端開發(fā)工程師應(yīng)該具備快速學(xué)習(xí)能力

Web發(fā)展的很快，甚至可以說這些技術(shù)幾乎每天都在變化!如果沒有快速學(xué)習(xí)能力，就跟不上 Web發(fā)展的步伐。前端工程師必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式;僅僅依靠今天的知識無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。

說到這里，我想起了一個大師說過的一句話：對于新手來說，新技術(shù)就是新技術(shù)。

對于一個高手來說，新技術(shù)不過是就技術(shù)的延伸。優(yōu)秀的前端工程師需要具備良好的溝通能力

因為前端工程師至少都要滿足四類客戶的需求：

1、產(chǎn)品經(jīng)理。這些是負責(zé)策劃應(yīng)用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現(xiàn)的應(yīng)用。一般來說，產(chǎn)品經(jīng)理都追求豐富的功能。

2、UI設(shè)計師。這些人負責(zé)應(yīng)用程序的視覺設(shè)計和交互模擬。他們關(guān)心的是用戶對什么敏感、交互的一貫性以及整體的好用性。一般來說，UI設(shè)計師于流暢靚麗、但并不容易實現(xiàn)的用戶界面，而且他們經(jīng)常不滿前端工程師造成 1px 的誤差。

3、項目經(jīng)理。這些人負責(zé)實際地運行和維護應(yīng)用程序。項目管理的主要關(guān)注點，無外乎正常運行時間、應(yīng)用程序始終正?？捎玫臅r間、性能和截止日期。項目經(jīng)理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。

4、最終用戶。指的是應(yīng)用程序的主要消費者。盡管前端工程師不會經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產(chǎn)品所具備的功能?？偨Y(jié)

要做優(yōu)秀的前端工程師，還需要繼續(xù)努力：《高性能網(wǎng)站建設(shè)指南》、《Yahoo工程師的網(wǎng)站性能優(yōu)化的建議》、“YSLOW”性能優(yōu)化建議、《網(wǎng)站重構(gòu)》、《Web開發(fā)敏捷之道》、“ jQuery 庫”、“前端框架”、“HTML5”、“CSS3” 這些都要深入研究!

萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。

人們常說：不想當裁縫的司機，不是個好廚師。

在成為一個優(yōu)秀的前端工程師的道路上，充滿了汗水和辛勞，如果你對前端開發(fā)有更多的見解以及不同的意見，歡迎留言將您的見解分享給所有web前端開發(fā)愛好者。

程序設(shè)計之道無遠弗屆，御晨風(fēng)而返。———— 杰佛瑞 · 詹姆士 現(xiàn)在互聯(lián)網(wǎng)的大環(huán)境的發(fā)展如日中天，網(wǎng)絡(luò)已經(jīng)深入到每個人生活的的各個方面，各種項目層出不窮，以及各種定制化的ui風(fēng)格神馬的，PC端、手機端、mobile端，各種兼容問題真的很浪費時間，大家在不斷的摸索中發(fā)現(xiàn)，把html+css+js這部分工作獨立出來一個新的崗位來處理。發(fā)展前景我是看好的，對于一個技術(shù)行業(yè)，我認為首先如何提升自己的個人能力是保持行業(yè)發(fā)展的源動力。沒有真是過硬的技術(shù)，前景發(fā)展都是免談。

那么很多情況又是這樣： 第一種一直在問：如何學(xué)習(xí)前端？

第二種總說：前端很簡單，就那么一點東西。

我從沒有聽到有人問：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師。詳細了解成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？ 何為前端工程師

前端工程師，也叫Web前端開發(fā)工程師。他是隨著web發(fā)展，細分出來的行業(yè)。Web前端開發(fā)技術(shù)主要包括三個要素：HTML、CSS和JavaScript!

HTML 甚至不是一門語言，他僅僅是簡單的標記語言!

CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。

Javascript 的基礎(chǔ)部分相對來說不難，入手還算快。此篇文章中就HTML、CSS、JS都有哪些區(qū)別？進行了全面的解讀！

前端開發(fā)的入門門檻其實很低，與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。也正因為如此，前端開發(fā)領(lǐng)域有很多自學(xué)成“才”的同行，但大多數(shù)人都停留在會用的階段，因為后面的學(xué)習(xí)曲線越來越陡峭，每前進一步都很難。

現(xiàn)在市場很需要優(yōu)秀的、高級的前端工程師。

一方面是因為這是一個比較新的細分行業(yè)，而且前端程序員大都自學(xué)一部分，知識結(jié)構(gòu)不系統(tǒng);另一方面，大學(xué)里面沒有這種課程，可以加入web前端學(xué)習(xí)君羊：前面數(shù)字是五一四，中間數(shù)字是一六七，后面三位數(shù)字是六七八，將數(shù)字串聯(lián)起來，了解學(xué)習(xí)更多在學(xué)校學(xué)不到的技術(shù)干貨。

如何學(xué)習(xí)前端知識

我們生活在一個充滿規(guī)則的宇宙里面。社會秩序按照規(guī)則運行，計算機語言幾乎全部是規(guī)則的集合。計算機前輩們定義規(guī)則，規(guī)則約束我們，我們用規(guī)則控制數(shù)據(jù)。大部分時候，對數(shù)據(jù)的合理控制，來自于你對規(guī)則的掌握。

學(xué)習(xí)HTML，CSS 應(yīng)該先跟著書仔細、扎實的學(xué)一遍。然后就需要做大量的練習(xí)，做各種常規(guī)的、奇怪的、大量的布局練習(xí)來捆固、理解自己的知識。

而學(xué)習(xí)Javascript 首先要知道這門語言可以做什么，不能做什么，擅長做什么，不擅長做什么!

如果你只想當一個普通的前端程序員，你只需要記住大部分 Javascript 函數(shù)，做一些練習(xí)就可以了。

如果你想當深入了解Javascript，你需要了解 Javascript 的原理、機制。需要知道他們的本源，需要深刻了解 Javascript 基于對象的本質(zhì)。

還需要深刻了解瀏覽器宿主下的 Javascript 的行為、特性。初學(xué)者全面了解JavaScript，用心讀這篇文章 掌握六大JavaScript框架，薪水就是比同級別高！

作為一個優(yōu)秀的前端工程師還需要深入了解、以及學(xué)會處理 Javascript 的這些缺陷。

優(yōu)秀的前端工程師應(yīng)具備什么條件

首先，優(yōu)秀的Web前端開發(fā)工程師要在知識體系上既要有廣度和深度!做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發(fā)工程師。技術(shù)非黑即白，只有對和錯，而技巧則見仁見智。

在以前，會一點Photoshop和Dreamweaver的操作，就可以制作網(wǎng)頁。成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？

現(xiàn)在，只掌握這些已經(jīng)遠遠不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。

Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。

優(yōu)秀的Web前端開發(fā)工程師應(yīng)該具備快速學(xué)習(xí)能力

Web發(fā)展的很快，甚至可以說這些技術(shù)幾乎每天都在變化!如果沒有快速學(xué)習(xí)能力，就跟不上 Web發(fā)展的步伐。前端工程師必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式;僅僅依靠今天的知識無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。

說到這里，我想起了一個大師說過的一句話：對于新手來說，新技術(shù)就是新技術(shù)。

對于一個高手來說，新技術(shù)不過是就技術(shù)的延伸。優(yōu)秀的前端工程師需要具備良好的溝通能力 因為前端工程師至少都要滿足四類客戶的需求：

1、產(chǎn)品經(jīng)理。這些是負責(zé)策劃應(yīng)用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現(xiàn)的應(yīng)用。一般來說，產(chǎn)品經(jīng)理都追求豐富的功能。

2、UI設(shè)計師。這些人負責(zé)應(yīng)用程序的視覺設(shè)計和交互模擬。他們關(guān)心的是用戶對什么敏感、交互的一貫性以及整體的好用性。一般來說，UI設(shè)計師于流暢靚麗、但并不容易實現(xiàn)的用戶界面，而且他們經(jīng)常不滿前端工程師造成 1px 的誤差。

3、項目經(jīng)理。這些人負責(zé)實際地運行和維護應(yīng)用程序。項目管理的主要關(guān)注點，無外乎正常運行時間、應(yīng)用程序始終正?？捎玫臅r間、性能和截止日期。項目經(jīng)理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。

4、最終用戶。指的是應(yīng)用程序的主要消費者。盡管前端工程師不會經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產(chǎn)品所具備的功能。

總結(jié)

要做優(yōu)秀的前端工程師，還需要繼續(xù)努力：《高性能網(wǎng)站建設(shè)指南》、《Yahoo工程師的網(wǎng)站性能優(yōu)化的建議》、“YSLOW”性能優(yōu)化建議、《網(wǎng)站重構(gòu)》、《Web開發(fā)敏捷之道》、“ jQuery 庫”、“前端框架”、“HTML5”、“CSS3” 這些都要深入研究!

萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。

人們常說：不想當裁縫的司機，不是個好廚師。

在成為一個優(yōu)秀的前端工程師的道路上，充滿了汗水和辛勞。

第三篇：web前端面試總結(jié)

1.常用那幾種瀏覽器測試？有哪些內(nèi)核(Layout Engine)?(Q1)瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。(Q2)內(nèi)核：Trident，Gecko，Presto，Webkit。

2.說下行內(nèi)元素和塊級元素的區(qū)別？行內(nèi)塊元素的兼容性使用？（IE8 以下）

(Q1)行內(nèi)元素：會在水平方向排列，不能包含塊級元素，設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效。

塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個斷行。(Q2)兼容性：display:inline-block;*display:inline;*zoom:1;

3.清除浮動有哪些方式？比較好的方式是哪一種？(Q1)（1）父級div定義height。

（2）結(jié)尾處加空div標簽clear:both。（3）父級div定義偽類:after和zoom。（4）父級div定義overflow:hidden。（5）父級div定義overflow:auto。（6）父級div也浮動，需要定義寬度。（7）父級div定義display:table。（8）結(jié)尾處加br標簽clear:both。

(Q2)比較好的是第3種方式，好多網(wǎng)站都這么用。

4.box-sizing常用的屬性有哪些？分別有什么作用？(Q1)box-sizing: content-box|border-box|inherit;(Q2)content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認效果)。

border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

5.Doctype作用？標準模式與兼容模式各有什么區(qū)別?(Q1)告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。

(Q2)標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

6.HTML5 為什么只需要寫 ？

HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）。

而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

7.頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。

8.介紹一下你對瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：負責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、我們組建一大牛裙前面是4七一，整理訊息（例如加入CSS等），中間是零2七，以及計算網(wǎng)頁的顯示方式，后面是壹武四，是學(xué)習(xí)的就加，不是學(xué)習(xí)的請勿打擾。然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。

最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。

9.html5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？(Q1)HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。

(1)繪畫 canvas;(2)用于媒介回放的 video 和 audio 元素;(3)本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;(5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;(6)表單控件，calendar、date、time、email、url、search;(7)新的技術(shù)webworker, websocket, Geolocation;(Q2)IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式。當然也可以直接使用成熟的框架、比如html5shim，

10.簡述一下你對HTML語義化的理解？ 用正確的標簽做正確的事情。

html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

JavaScript----------------------------

1.介紹js的基本數(shù)據(jù)類型

Undefined、Null、Boolean、Number、String

2.js有哪些內(nèi)置對象？

數(shù)據(jù)封裝類對象：Object、Array、Boolean、Number 和 String 其他對象：Function、Arguments、Math、Date、RegExp、Error

3.this對象的理解

this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）； 如果有new關(guān)鍵字，this指向new出來的那個對象；

在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。

4.eval是做什么的？

它的功能是把對應(yīng)的字符串解析成JS代碼并運行；

應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval，var obj =eval('('+ str +')')。

5.DOM怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點 // 創(chuàng)建新節(jié)點

createDocumentFragment()//創(chuàng)建一個DOM片段 createElement()//創(chuàng)建一個具體的元素 createTextNode()//創(chuàng)建一個文本節(jié)點 // 添加、移除、替換、插入 appendChild()removeChild()replaceChild()insertBefore()//在已有的子節(jié)點前插入一個新的子節(jié)點 // 查找

getElementsByTagName()//通過標簽名稱

getElementsByName()//通過元素的Name屬性的值(IE容錯能力較強，會得到一個數(shù)組，其中包括id等于name值的)getElementById()//通過元素Id，唯一性

6.null和undefined的區(qū)別？

null是一個表示“無”的對象，轉(zhuǎn)為數(shù)值時為0；undefined是一個表示“無”的原始值，轉(zhuǎn)為數(shù)值時為NaN。undefined：

（1）變量被聲明了，但沒有賦值時，就等于undefined。

（2)調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。（3）對象沒有賦值的屬性，該屬性的值為undefined。（4）函數(shù)沒有返回值時，默認返回undefined。null：

（1）作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。（2）作為對象原型鏈的終點。

7.new操作符具體干了什么呢?（1）創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。（2）屬性和方法被加入到 this 引用的對象中。

（3）新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this。

8.JSON 的了解？

JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小。格式：采用鍵值對，例如：{'age':'12', 'name':'back'}

9.call()和 apply()的區(qū)別和作用？

apply()函數(shù)有兩個參數(shù)：第一個參數(shù)是上下文，第二個參數(shù)是參數(shù)組成的數(shù)組。如果上下文是null，則使用全局對象代替。如：function.apply(this,[1,2,3]);call()的第一個參數(shù)是上下文，后續(xù)是實例傳入的參數(shù)序列。如：function.call(this,1,2,3);

10.如何獲取UA？

function whatBrowser(){

document.Browser.Name.value=navigator.appName;

document.Browser.Version.value=navigator.appVersion;

document.Browser.Code.value=navigator.appCodeName;

document.Browser.Agent.value=navigator.userAgent;

} 其他

----------------------------

1.HTTP狀態(tài)碼知道哪些？

Continue 繼續(xù)，一般在發(fā)送post請求時，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認，之后發(fā)送具體參數(shù)信息 200 OK 正常返回信息

201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源 202 Accepted 服務(wù)器已接受請求，但尚未處理

301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。302 Found 臨時性重定向。

303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。304 Not Modified 自從上次請求后，請求的網(wǎng)頁未修改過。400 Bad Request 服務(wù)器無法理解請求的格式，客戶端不應(yīng)當嘗試再次使用相同的內(nèi)容發(fā)起請求。

401 Unauthorized 請求未授權(quán)。403 Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。500 Internal Server Error 最常見的服務(wù)器端錯誤。

503 Service Unavailable 服務(wù)器端暫時無法處理請求（可能是過載或維護）。

2.你有哪些性能優(yōu)化的方法？

（1）減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存，圖片服務(wù)器。

（2）前端模板 JS+數(shù)據(jù)，減少由于HTML標簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

（3）用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。（4）當需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。（5）少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。

（6）避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)。（7）圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

3.什么叫優(yōu)雅降級和漸進增強？

優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

4.哪些常見操作會造成內(nèi)存泄漏？

內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。

setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。

閉包、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）。

5.線程與進程的區(qū)別

一個程序至少有一個進程,一個進程至少有一個線程。線程的劃分尺度小于進程，使得多線程程序的并發(fā)性高。

另外，進程在執(zhí)行過程中擁有獨立的內(nèi)存單元，而多個線程共享內(nèi)存，從而極大地提高了程序的運行效率。

線程在執(zhí)行過程中與進程還是有區(qū)別的。每個獨立的線程有一個程序運行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個線程執(zhí)行控制。從邏輯角度來看，多線程的意義在于一個應(yīng)用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應(yīng)用，來實現(xiàn)進程的調(diào)度和管理以及資源分配。這就是進程和線程的重要區(qū)別。

第四篇：web前端個人簡歷

個人簡歷

個人信息

姓名：xxxx 性別：男

出生日期：1993.03 婚姻狀況：未婚 工作所在地：北京 家庭所在地：湖北

聯(lián)系電話：18xxxxxx

電子郵箱：xxxxxx@qq.com

專業(yè)技能

1、熟練使用Sublime、Photoshop等軟件，掌握網(wǎng)站效果圖的制作、切片以及HTML頁面代碼優(yōu)化等技術(shù)；

2、精通HTML5+CSS3、DIV+CSS等網(wǎng)站前端技術(shù)；

3、能夠熟練編寫標準前端代碼，熟悉瀏覽器兼容問題解決方案；

4、熟練掌握javascript語言，精通jQuery庫、bootstrap庫，能夠?qū)崿F(xiàn)網(wǎng)頁的動態(tài)效果與頁面交互；

5、熟練掌握響應(yīng)式設(shè)計，能夠開發(fā)移動端頁面；熟練使用swiper手機端應(yīng)用庫；

6、了解node后臺，熟練掌握Ajax技術(shù)；

7、了解gulp自動化構(gòu)建工具，了解less，echarts圖表庫；

工作經(jīng)驗

2015.07– 至今 工作職責(zé)： 北京第嘉傳媒文化有限公司 職位名稱：前端開發(fā)工程師

負責(zé)公司產(chǎn)品或項目Web前端開發(fā),根據(jù)產(chǎn)品需求和UI效果圖利用sublime編程軟件進行div/css標準網(wǎng)頁制作，Js邏輯設(shè)計與開發(fā)、jQuery特效編寫以及使用插件實現(xiàn)特效，解決主流瀏覽器兼容性問題，對網(wǎng)站用戶體驗性能進行優(yōu)化，完成產(chǎn)品前端展示效果和交互功能。

2014.09– 2015.6

工作職責(zé)： 秦皇島市金鑾之巔科技開發(fā)有限公司

職位名稱：前端開發(fā)工程師

負責(zé)公司項目的前端修改調(diào)試和開發(fā)工作，精確的將網(wǎng)站設(shè)計圖重構(gòu)成html 頁面。從ps切圖到div/css標準網(wǎng)頁制作及主流瀏覽器兼容問題的解決，并與后臺緊密配合，確保代碼有效鏈接。

項目經(jīng)歷： PC端 中國智力運動網(wǎng)

http://004km.cn）是由泰康人壽保險股份有限公司全資發(fā)起成立的大型互聯(lián)網(wǎng)保險公司，產(chǎn)品涵蓋意外險、理財險、健康險、旅游險等多種保險。

個人站

kafeihaoka.github.io

教育背景

2011.09-2015.06 燕山大學(xué)里仁學(xué)院 電子信息工程 本科 求職意向

職位:Web 前端開發(fā) 工作地點:北京

第五篇：Web前端工作總結(jié)

Web前端學(xué)習(xí)總結(jié)

一.名詞解釋 1.橫切

在固定頁面的寬度(按柵格化進行)并且對高度沒有限制的容器稱為一個標準橫切 2.留白 兩個容器或碎片之間的上、下、左、右的空白距離 3.繼承

元素可以從其父級元素中獲得一些可為自己使用的屬性或值。4.圖片定位

把圖片元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中，利用CSS中對圖片進行遮罩屬性，多用于頁面中的修飾圖 5.底圖

頁面中在標簽中使用的背景圖 6.齊底(圖)線 用于區(qū)分橫切或碎片結(jié)束的線或圖 7.頁面結(jié)構(gòu)

頁面的基礎(chǔ)框架，由橫切、布局元素組成 8.焦點區(qū)(圖)最易注意的區(qū)域 9.導(dǎo)航

在頁面中具有導(dǎo)向性的鏈接集合 10.頭圖 頁面主題圖片 11.間距

碎片或文字間的距離 12.行高

文字段落中行與行之間的距離 13.首行縮進 文字段落首行縮進 14.浮動

使被定義的區(qū)域脫離正常的頁面文檔流 15.碎片 由文字、圖片組合成的內(nèi)容區(qū)域 16.通欄廣告 與頁面內(nèi)容區(qū)同寬的廣告區(qū)域 17.功能按鈕 具有交互屬性的按鈕 18.私有樣式

當前頁面獨立使用的樣式，不具備公用性 19.水平(垂直)居中

在頁面中的某個元素處于父級的上下或左右的相同距離 20.標準頭(尾)定義相同的頁面頭或尾元素集合 二.文本格式化 1.段落：p 2.斜體：address（聯(lián)系信息）em（強調(diào)）i（突出不同）cite（引用）dfn（首次定義術(shù)語）3.粗體：strong（重要）b（提醒）4.圖片塊：figure 5.引述文段，段落縮進：blockquote 6.背景顏色：mark 7.虛線下劃線：abbr 8.上標下標：sub/sup 9.下劃線：ins 10.刪除線：del（標記已刪除內(nèi)容）s（標記不準確內(nèi)容）11.等寬字體：code 12.預(yù)格式化：pre 13.字號減小，表注釋：small 14.時間：time 15.換行：br 16.html5定義區(qū)塊：header nav article section aside footer div span 三.表單表格

1.

...

2.表單元素的組織：

...

...

3.創(chuàng)建各種框: 注：text→password/url/tel/email Id:為了讓對應(yīng)的標簽識別，添加CSS Name：為了讓服務(wù)器和腳本識別，通常與id設(shè)為一樣 Size：文本框大小 Maxlength：能輸入的最大字符數(shù) Pattern：正則表達式

4.添加標簽： ? 5.單(多)選按鈕：

北京 上海 注：id各自唯一，name必須相同。checked：默認選擇 6.下拉框：

北京 上海 成都 注：size:選擇框的高度 multiple：允許多選 selected：默認選擇 用?對選擇框進行分組 7.上傳文件： 注：size：輸入路徑和文件名的字段的寬度 8.禁用表單元素： 9.創(chuàng)建提交按鈕： 創(chuàng)建帶圖像的提交按鈕：點擊這里 創(chuàng)建圖像按鈕： Submit→reset重置

10.文本區(qū)域：請在此輸入字符 11.表格 :

..	..
..	..	..

四.文本格式化 1.{font：（斜體 粗體 小型大寫字母）字體大小(必有)行距 字體集（必有）;} 2.文本背景：{ background：#foc url（1.jpg）repeat-x scroll 0 0；} 3.字間距：word-spacing:12px;4.字偶距：letter-spacing:12px;5.縮進增加：text-indent:12px;6.小型大寫字母: font-variant:small-caps;7.文本對齊：text-align:left；適用于block，inline-block 8.單詞大小寫: text-transform:capitalize(單詞首字母大寫)/uppercase(大寫)/lowercase(小寫)9.文本上的線：text-decoraion:underline/overline/line-through;11.空格：white-space:pre(顯示所有空格回車)/nowrap（非斷行空格）； 12.h3—16px;h5—12px;verdana,Geneva,sans-serif;13.列表屬性： li{list-style:url(1.jpg)inside square;} 五.CSS布局

1.width：不包括padding，border，margin；max-width設(shè)置外圍限制； 2.浮動：float:left;清除浮動：clear:both;3.設(shè)置邊框： border:dotted 4px red;(dotted點狀、dashed虛線、solid實線)4.使元素對齊：vertical-align:baseline/middle/text-bottom..5.顯示：display:black/inline/inline-block;6.顯示：visibility:visible/hiddle;7.相對定位：{position:relative;top:5px;} 相對于該元素的原始位置 8.絕對定位：{position:absolute;top:5px;} 相對于body或離他最近定位的祖先元素 9.三維位置：{z-index:50;} 越大的在最上面

10.廠商前綴：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.創(chuàng)建圓角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半徑是50px){border-radius:50px;}(所有角簡寫)12.創(chuàng)建橢圓角：{? ? border-radius:40px/20px;}（x半徑/y半徑）13.創(chuàng)建圓形：{? ? border-radius:50px;} 50px為元素半徑大小 14.文本加陰影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半徑

15.元素加陰影：{(-moz-/-webkit-)box-shadow:(inset內(nèi)陰影)2px 5px 5px #999;5px 10px 2px #555(多重陰影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明

18.漸變背景：{background:linear-gradient(left,#000,#999);}(left ：漸變線沿逆時針方向轉(zhuǎn)至水平線的角度)六.html5視頻音頻

1.html5支持3種視頻：.ogg/.ogv.mp4/.m4v.webm 2.添加視頻： 視頻屬性：src autoplay controls muted loop poster width height preload 3.為視頻添加多個來源： 4.html5支持5中音頻：.ogg.mp3.wav.aac.mp4 5.添加音頻： 音頻屬性：src autoplay controls muted loop preload。多個來源同video。七.一些約定

我們結(jié)合常用的一些命名習(xí)慣，再結(jié)合CSS的實際應(yīng)用，整理出一些較好的命名習(xí)慣。1.樣式名稱首字母統(tǒng)一為小寫字母，不能為數(shù)字，下劃線及特殊字符；

3.設(shè)置邊框： border:dotted 4px red;(dotted點狀、dashed虛線、solid實線)4.使元素對齊：vertical-align:baseline/middle/text-bottom..5.顯示：display:black/inline/inline-block;6.顯示：visibility:visible/hiddle;7.相對定位：{position:relative;top:5px;} 相對于該元素的原始位置 8.絕對定位：{position:absolute;top:5px;} 相對于body或離他最近定位的祖先元素 9.三維位置：{z-index:50;} 越大的在最上面

10.廠商前綴：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.創(chuàng)建圓角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半徑是50px){border-radius:50px;}(所有角簡寫)12.創(chuàng)建橢圓角：{? ? border-radius:40px/20px;}（x半徑/y半徑）13.創(chuàng)建圓形：{? ? border-radius:50px;} 50px為元素半徑大小 14.文本加陰影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半徑

15.元素加陰影：{(-moz-/-webkit-)box-shadow:(inset內(nèi)陰影)2px 5px 5px #999;5px 10px 2px #555(多重陰影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明

18.漸變背景：{background:linear-gradient(left,#000,#999);}(left ：漸變線沿逆時針方向轉(zhuǎn)至水平線的角度)六.html5視頻音頻

1.html5支持3種視頻：.ogg/.ogv.mp4/.m4v.webm 2.添加視頻： 視頻屬性：src autoplay controls muted loop poster width height preload 3.為視頻添加多個來源： 4.html5支持5中音頻：.ogg.mp3.wav.aac.mp4 5.添加音頻： 音頻屬性：src autoplay controls muted loop preload。多個來源同video。七.一些約定

我們結(jié)合常用的一些命名習(xí)慣，再結(jié)合CSS的實際應(yīng)用，整理出一些較好的命名習(xí)慣。1.樣式名稱首字母統(tǒng)一為小寫字母，不能為數(shù)字，下劃線及特殊字符； 2.樣式名盡量語義化或簡寫； 3.樣式名需要組合拼寫時，采用全部小寫拼寫并使用下劃線連接，即：all_keyword； 4.使用px(像素)為基本計量單位； 5.頁面中空格的使用：全角：中文空格 半角；? 6.項目完成包中，文件夾及文件名稱全部采用小寫字母，不使用中文文件名； 7.減少DIV的嵌套層數(shù)；

8.給重要圖片加上alt屬性；給重要的元素和截斷的元素加上title； 9.使用正確的注釋方法（詳見“注釋”章節(jié)）； 10.特殊情況下要求表現(xiàn)和內(nèi)容分離，代碼中不要涉及任何表現(xiàn)的元素，例如：style、font 等；

11.雙標記簽都要有開始和結(jié)束標簽，單標記標簽的后面一定要加“ /”,例如：
等，并且有正確的層次； 12.其它特殊符號： 1)<(<)2)>(>)八.命名空間

8.1外掛樣式名稱 全局：public.css 全局樣式為全站公用，為頁面樣式基礎(chǔ)，頁面中必須包含。結(jié)構(gòu)：layout.css 頁面結(jié)構(gòu)類型復(fù)雜，并且公用類型較多時使用。多用在首頁級頁面和產(chǎn)品類頁面中。私有：style.css 獨立頁面所使用的樣式文件，頁面中必須包含。模塊 module.css 產(chǎn)品類頁面應(yīng)用，將可復(fù)用類模塊進行剝離后，可與其它樣式配合使用。默認 default.css 文章 article.css 圖片 photo.css 下載 soft.css 主題 themes.css 實現(xiàn)換膚功能時應(yīng)用。補丁 mend.css 基于以上樣式進行的私有化修補。8.2 常用名稱(1)頁面結(jié)構(gòu) 容器: container 頁頭：header 內(nèi)容：content/container/content(A)頁面主體：main 頁尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁面外圍控制整體布局寬度：wrapper 左右中：left right center 浮左浮右：fl fr 清除浮動 clear(2)導(dǎo)航 導(dǎo)航：nav 主導(dǎo)航：mainbav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar 菜單：menu 子菜單：submenu 標題：title 摘要：summary 路徑：path(3)模塊化命名 模塊頭部：hd 模塊內(nèi)容部分：bd 模塊底部：ft(4)各內(nèi)容頁對應(yīng) 標題：title 副標題：subtitle 屬性：properties 簡介：infor 內(nèi)容：content 分頁：page 插入廣告：insert_ad 表情：expression 功能選項：options 上下篇：up_down 評論：comments 相關(guān)內(nèi)容：related 下載地址：download 播放地址：play_add(5)功能 標志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊：regsiter 搜索：search 日期：date 功能區(qū)：shop 標題：title 加入：joinus 狀態(tài)：status 按鈕：btn 滾動：scroll 標簽頁：tab 文章列表：list 提示信息：msg 當前的：current 小技巧：tips 圖標：icon 注釋：note 指南：guild 服務(wù)：service 熱點：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權(quán)：copyright 九.基本設(shè)置-public.css 9.1 全局設(shè)置

上下邊距(margin、padding)：0(px)左右邊距(margin)：auto(自動)底色(background):#FFF(白色)字體(font-family)、字號(font-szie)、字色(color)：”宋體” 12px #666 代碼： /* 全局CSS定義 */ body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋體';} div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input,textarea{font-size:12px} 9.2 頁面標簽初始化設(shè)置 1.常用基本標div,form,ul,ol,li,span,p,dl,dt,dd,img 設(shè)置基本標簽的間距、邊框默認值為0。2.h1～h6標題

默認標題內(nèi)字號12px，內(nèi)外間距為0px，文字不加粗。3.ul,ol,li 列表 默認不顯示項目符號。4.h2 欄目標題

說明：h2標簽被定義為欄目標題特殊使用，在標簽中非標題文字默認居右顯示，主標題文字使用span標簽包含，居左顯示。5.默認鏈接顏色

常態(tài)下不顯示文字下劃線，顏色為灰(#333)，鼠標懸浮時：顯示文字下劃線，顏色變?yōu)榘导t(#ccc)。6.狀態(tài)：a:link{未點} a:visited{已點} a:focus{鍵盤選中} a:hover{指針停留} a:active{正在點} 9.3 頁面寬度 默認頁面寬(命名規(guī)范)：按柵格化進行 9.4.clear 結(jié)束容器內(nèi)各元素的浮動屬性，使相鄰容器或元素節(jié)點正常顯示。以下是清除浮動的幾種方法 方法一.clear { clear:both;height:0;font-size:0;line-height:0 } 或.clear { border-top: 1px solid transparent!important;margin-top:-1px!important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;} 或.clear{ clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0 } 使用方法: