第一篇：前端學(xué)習(xí)技能需求

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

一、首先需要學(xué)會(huì)的是html和css

推薦編碼工具：notepad，記事本，dreamwere，sublime。

推薦學(xué)習(xí)方法：先參考有關(guān)書籍，跟著案例走一遍。然后去w3school上學(xué)習(xí)。然后進(jìn)行基礎(chǔ)的鞏固，模仿一些網(wǎng)頁，盡最大能力去編寫。

注意：前期學(xué)習(xí)時(shí)就要養(yǎng)成代碼的規(guī)范性，最簡單的就是標(biāo)簽的對(duì)齊,和簡單的注解。

代碼演示：

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

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

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

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

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

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

HTML 甚至不是一門語言，他僅僅是簡單的標(biāo)記語言!

CSS 只是無類型的樣式修飾語言。當(dāng)然可以勉強(qiáng)算作弱類型語言。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在，只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(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ù)、新模式;僅僅依靠今天的知識(shí)無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。

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

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

因?yàn)榍岸斯こ處熤辽俣家獫M足四類客戶的需求：

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

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

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

4、最終用戶。指的是應(yīng)用程序的主要消費(fèi)者。盡管前端工程師不會(huì)經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對(duì)個(gè)人有用的功能，以及競爭性產(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” 這些都要深入研究!

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

人們常說：不想當(dāng)裁縫的司機(jī)，不是個(gè)好廚師。

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

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

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

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

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

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

HTML 甚至不是一門語言，他僅僅是簡單的標(biāo)記語言!

CSS 只是無類型的樣式修飾語言。當(dāng)然可以勉強(qiáng)算作弱類型語言。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在，只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(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ù)、新模式;僅僅依靠今天的知識(shí)無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。

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

對(duì)于一個(gè)高手來說，新技術(shù)不過是就技術(shù)的延伸。優(yōu)秀的前端工程師需要具備良好的溝通能力 因?yàn)榍岸斯こ處熤辽俣家獫M足四類客戶的需求：

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

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

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

4、最終用戶。指的是應(yīng)用程序的主要消費(fèi)者。盡管前端工程師不會(huì)經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對(duì)個(gè)人有用的功能，以及競爭性產(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” 這些都要深入研究!

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

人們常說：不想當(dāng)裁縫的司機(jī)，不是個(gè)好廚師。

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

第三篇：Web前端開發(fā)學(xué)習(xí)筆記分享

www.004km.cn免費(fèi)試學(xué)/ 一對(duì)一輔導(dǎo)/項(xiàng)目實(shí)訓(xùn)/就業(yè)保障

Web前端開發(fā)學(xué)習(xí)筆記

對(duì)于Web前端初學(xué)者而言，前人的學(xué)習(xí)經(jīng)驗(yàn)及總結(jié)，能讓自己的學(xué)習(xí)事半功倍；我在泛藝學(xué)苑學(xué)習(xí)Web前端開發(fā)已經(jīng)有一段日子了，課程內(nèi)容個(gè)人覺得很全面、專業(yè)；下面是我通過這段時(shí)間學(xué)習(xí)，總結(jié)的一些Web前端開發(fā)學(xué)習(xí)筆記【前端開發(fā)需要學(xué)哪些？>>】，一是為了給自己加深印象，二是希望能幫助其他Web前端學(xué)習(xí)者們；以后內(nèi)容會(huì)持續(xù)更新，也歡迎大家進(jìn)行補(bǔ)充。【獲取全套學(xué)習(xí)資料>>】

HTML篇總結(jié)

非可視化標(biāo)簽：head meta style scrpit...可視化標(biāo)簽：img div span a ul li… 只有可視化標(biāo)簽，才能用css改變它 單標(biāo)簽：meta link base img input br hr 雙標(biāo)簽：html head body div a p span..ul li ol dl ….常用可視化標(biāo)簽 div：一般用它來布局 a 超鏈接標(biāo)簽

href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁地址 target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)

結(jié)論：凡事頁面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽 img：src*屬性用來設(shè)置圖片的url數(shù)據(jù)、alt提供給搜索引擎搜索的 ul li：列表；結(jié)論：只要將來設(shè)計(jì)頁面中有固定樣式的列表，就用ul和li table caption tr td(th)：慢慢已經(jīng)被淘汰了 被ul li代替 如果是合并豎排的就是合并行（rowspan）www.004km.cn免費(fèi)試學(xué)/ 一對(duì)一輔導(dǎo)/項(xiàng)目實(shí)訓(xùn)/就業(yè)保障

如果是合并橫排的就是合并列（colspan）HTML部分導(dǎo)圖總結(jié) 標(biāo)簽集合

www.004km.cn免費(fèi)試學(xué)/ 一對(duì)一輔導(dǎo)/項(xiàng)目實(shí)訓(xùn)/就業(yè)保障

www.004km.cn免費(fèi)試學(xué)/ 一對(duì)一輔導(dǎo)/項(xiàng)目實(shí)訓(xùn)/就業(yè)保障

以上即為我在泛藝學(xué)苑這一階段學(xué)習(xí)關(guān)于Web前端開發(fā)的總結(jié)以及筆記，接下來將要學(xué)習(xí)CSS；后續(xù)我會(huì)將Web前端開發(fā)學(xué)習(xí)總結(jié)陸續(xù)進(jìn)行更新。

泛藝學(xué)苑采用的在線教育，對(duì)于身處三線城市的我而言提供了很大的便利，平時(shí)有經(jīng)驗(yàn)豐富的老師直播授課，課后有專業(yè)的老師進(jìn)行一對(duì)一輔導(dǎo)，還給我提供了大量的學(xué)習(xí)資料，雖然現(xiàn)在才剛開始學(xué)習(xí)，但是我有信心學(xué)完后，能夠找到一份滿意的工作。情>>】

【了解課程詳

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

1.WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么？

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

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

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

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

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

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

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

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

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)換為塊級(jí)元素

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

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

8.CSS 選擇符有哪些？

1.id選擇器（# myid）

2.類選擇器（.myclassname）

3.標(biāo)簽選擇器（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)先級(jí)算法如何計(jì)算？

!important > id > class > 標(biāo)簽

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

*

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

*

以最后載入的樣式為準(zhǔn);

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

text-align是水平對(duì)齊，line-height是行間。

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

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

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

Alt是圖片屬性，讓搜索引擎認(rèn)識(shí)你的圖片。當(dāng)圖片不顯示的時(shí)候顯示。

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

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

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

15.什么是語義化的HTML？

標(biāo)簽使用的合理性，對(duì)于搜索引擎的抓取有好處。

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

后者有語義，前者則無。

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

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

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

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

18.清除浮動(dòng)的幾種方式，各自的優(yōu)缺點(diǎn)

1.使用空標(biāo)簽清除浮動(dòng)clear:both（缺點(diǎn)，增加無意義的標(biāo)簽）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

200 OK

//客戶端請(qǐng)求成功

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

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

404 Not Found //請(qǐng)求資源不存在，輸入了錯(cuò)誤的URL

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

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

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

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

2.圖片的大小

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

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

5.使用外部 Js 和 CSS

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

absolute絕對(duì)定位 //相對(duì)于瀏覽器定位

relative相對(duì)定位 //相對(duì)于前面的容器定位

25.HTML5 的有那些新標(biāo)簽？

26.CSS3新增偽類有那些？

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

元素的每個(gè)

元素。

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

元素的每個(gè)

元素。

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

元素的每個(gè)

元素。

p:only-child

選擇屬于其父元素的唯一子元素的每個(gè)

元素。

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

元素。

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

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

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

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

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

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

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

DOM的innerHTML是DOM元素對(duì)象的一個(gè)屬性

而write是document對(duì)象的一個(gè)方法

第五篇：前端面試題

1.自我評(píng)價(jià)一下HTML/CSS/JS的掌握情況

2.簡述HTML經(jīng)常使用的標(biāo)簽和作用。

Div/a/p/span/li/ul/ol/table/tr/td

3.你認(rèn)為最常遇到的兼容Bug有哪些?有哪些問題是你認(rèn)為解決起來最麻煩的?

IE6 PNG

IE6 Fixed

4.塊級(jí)元素和行內(nèi)元素都有哪些? 行內(nèi)元素有哪些特點(diǎn)?

5.介紹所知道的CSS hack技巧(如：_，*，+，9，!important 之類)

6.CSS定位方式有哪些?position屬性的值有哪些?他們之間的區(qū)別是什么?

在CSS中關(guān)于定位的內(nèi)容是：position:relative | absolute | static | fixed

? static 沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過z-index進(jìn)行層次分級(jí)。? relative 不脫離文檔流，參考自身靜態(tài)位置通過 top,bottom,left,right 定位，并且可以通過z-index進(jìn)行層次分級(jí)。

? absolute 脫離文檔流，通過 top,bottom,left,right 定位。選53D6其最近的父級(jí)定位元素，當(dāng)父級(jí) position 為 static 時(shí)，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，可以通過z-index進(jìn)行層次分級(jí)。

? fixed 固定定位，這里他所固定的對(duì)像是可視窗口而并非是body或是父級(jí)元素?？赏ㄟ^z-index進(jìn)行層次分級(jí)。

7.函數(shù)的幾種定義方法

function a(){},var a = function(){}

8.對(duì)象的定義方法

a = new Object(), a = {}

9.類的定義方法（prototype）（繼承）

Var a = function(){}

a.prototype = {}

new a();

10.this 關(guān)鍵字的指向

obj.foo()== obj

foo()== window;

new obj.foo()== obj //方法調(diào)用模式,this指向obj //函數(shù)調(diào)用模式,this指向window //構(gòu)造器調(diào)用模式, this指向新建立對(duì)象

foo.call(obj)== obj;//APPLY調(diào)用模式,this指向obj

11.DOM操作

在

將Body的innerHTML重寫和將