第一篇: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無(wú)效
6.CSS的盒模型由什么組成?
內(nèi)容,border ,margin,padding
7.說(shuō)說(shuō)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.前端頁(yè)面由哪三層構(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.什么是語(yǔ)義化的HTML?
標(biāo)簽使用的合理性,對(duì)于搜索引擎的抓取有好處。
16.b標(biāo)簽和strong標(biāo)簽,i標(biāo)簽和em標(biāo)簽的區(qū)別?
后者有語(yǔ)義,前者則無(wú)。
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),增加無(wú)意義的標(biāo)簽)
2.使用overflow:auto(使用zoom:1用于兼容IE)
3.是用afert偽元素清除浮動(dòng)(用于非IE瀏覽器)
19.display:none和visibility:hidden的區(qū)別是什么?
visibility: hidden----將元素隱藏,但是還占著位置。
display: none----將元素的顯示設(shè)為無(wú),不占任何的位置。
20.說(shuō)出幾種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)求有語(yǔ)法錯(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)頁(yè)加載速度?
1.減少css,js文件數(shù)量及大小(減少重復(fù)性代碼,代碼重復(fù)利用),壓縮CSS和Js代碼
2.圖片的大小
3.把css樣式表放置頂部,把js放置頁(yè)面底部
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ù)使用場(chǎng)合不同,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è)方法
第二篇:最新web前端學(xué)習(xí)路線
最新web前端的學(xué)習(xí)路線
程序設(shè)計(jì)之道無(wú)遠(yuǎn)弗屆,御晨風(fēng)而返?!?杰佛瑞 · 詹姆士 很多前端初學(xué)者總會(huì)問以下兩個(gè)問題: 第一種一直在問:如何學(xué)習(xí)前端?
第二種總說(shuō):前端很簡(jiǎn)單,就那么一點(diǎn)東西。
我從沒有聽到有人問:如何做一名優(yōu)秀、甚至卓越的WEB前端工程師。詳細(xì)了解成為一個(gè)優(yōu)秀的前端工程師,都需要具備哪些特質(zhì)? 何為前端工程師
前端工程師,也叫Web前端開發(fā)工程師。他是隨著web發(fā)展,細(xì)分出來(lái)的行業(yè)。Web前端開發(fā)技術(shù)主要包括三個(gè)要素:HTML、CSS和JavaScript!
HTML 甚至不是一門語(yǔ)言,他僅僅是簡(jiǎn)單的標(biāo)記語(yǔ)言!
CSS 只是無(wú)類型的樣式修飾語(yǔ)言。當(dāng)然可以勉強(qiáng)算作弱類型語(yǔ)言。
Javascript 的基礎(chǔ)部分相對(duì)來(lái)說(shuō)不難,入手還算快。
此篇文章中就HTML、CSS、JS都有哪些區(qū)別?進(jìn)行了全面的解讀!
前端開發(fā)的入門門檻其實(shí)很低,與服務(wù)器端語(yǔ)言先慢后快的學(xué)習(xí)曲線相比,前端開發(fā)的學(xué)習(xí)曲線是先快后慢。也正因?yàn)槿绱?,前端開發(fā)領(lǐng)域有很多自學(xué)成“才”的同行,但大多數(shù)人都停留在會(huì)用的階段,因?yàn)楹竺娴膶W(xué)習(xí)曲線越來(lái)越陡峭,每前進(jìn)一步都很難。
現(xiàn)在市場(chǎng)很需要優(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)起來(lái),了解學(xué)習(xí)更多在學(xué)校學(xué)不到的技術(shù)干貨。如何學(xué)習(xí)前端知識(shí)
我們生活在一個(gè)充滿規(guī)則的宇宙里面。社會(huì)秩序按照規(guī)則運(yùn)行,計(jì)算機(jī)語(yǔ)言幾乎全部是規(guī)則的集合。計(jì)算機(jī)前輩們定義規(guī)則,規(guī)則約束我們,我們用規(guī)則控制數(shù)據(jù)。大部分時(shí)候,對(duì)數(shù)據(jù)的合理控制,來(lái)自于你對(duì)規(guī)則的掌握。
學(xué)習(xí)HTML,CSS 應(yīng)該先跟著書仔細(xì)、扎實(shí)的學(xué)一遍。然后就需要做大量的練習(xí),做各種常規(guī)的、奇怪的、大量的布局練習(xí)來(lái)捆固、理解自己的知識(shí)。
而學(xué)習(xí)Javascript 首先要知道這門語(yǔ)言可以做什么,不能做什么,擅長(zhǎng)做什么,不擅長(zhǎng)做什么!
如果你只想當(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)頁(yè)。成為一個(gè)優(yōu)秀的前端工程師,都需要具備哪些特質(zhì)?
現(xiàn)在,只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無(wú)論是開發(fā)難度上,還是開發(fā)方式上,現(xiàn)在的網(wǎng)頁(yè)制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā),所以現(xiàn)在不再叫網(wǎng)頁(yè)制作,而是叫Web前端開發(fā)。
Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來(lái)越重要,而且需要專業(yè)的前端工程師才能做好,它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。
優(yōu)秀的Web前端開發(fā)工程師應(yīng)該具備快速學(xué)習(xí)能力
Web發(fā)展的很快,甚至可以說(shuō)這些技術(shù)幾乎每天都在變化!如果沒有快速學(xué)習(xí)能力,就跟不上 Web發(fā)展的步伐。前端工程師必須不斷提升自己,不斷學(xué)習(xí)新技術(shù)、新模式;僅僅依靠今天的知識(shí)無(wú)法適應(yīng)未來(lái)。Web的明天與今天必將有天壤之別,而前端工程師的工作就是要搞清楚如何通過(guò)自己的Web應(yīng)用程序來(lái)體現(xiàn)這種翻天覆地的變化。
說(shuō)到這里,我想起了一個(gè)大師說(shuō)過(guò)的一句話:對(duì)于新手來(lái)說(shuō),新技術(shù)就是新技術(shù)。
對(duì)于一個(gè)高手來(lái)說(shuō),新技術(shù)不過(guò)是就技術(shù)的延伸。優(yōu)秀的前端工程師需要具備良好的溝通能力
因?yàn)榍岸斯こ處熤辽俣家獫M足四類客戶的需求:
1、產(chǎn)品經(jīng)理。這些是負(fù)責(zé)策劃應(yīng)用程序的一群人。他們會(huì)想出很多新鮮的、奇怪的、甚至是不可是實(shí)現(xiàn)的應(yīng)用。一般來(lái)說(shuō),產(chǎn)品經(jīng)理都追求豐富的功能。
2、UI設(shè)計(jì)師。這些人負(fù)責(zé)應(yīng)用程序的視覺設(shè)計(jì)和交互模擬。他們關(guān)心的是用戶對(duì)什么敏感、交互的一貫性以及整體的好用性。一般來(lái)說(shuō),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),無(wú)外乎正常運(yùn)行時(shí)間、應(yīng)用程序始終正常可用的時(shí)間、性能和截止日期。項(xiàng)目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡(jiǎn)單化,以及不在升級(jí)更新時(shí)引入新問題。
4、最終用戶。指的是應(yīng)用程序的主要消費(fèi)者。盡管前端工程師不會(huì)經(jīng)常與最終用戶打交道,但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對(duì)個(gè)人有用的功能,以及競(jìng)爭(zhēng)性產(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 庫(kù)”、“前端框架”、“HTML5”、“CSS3” 這些都要深入研究!
萬(wàn)事開頭難!如果你能到這個(gè)境界,剩下的路自己就可以走下去了。
人們常說(shuō):不想當(dāng)裁縫的司機(jī),不是個(gè)好廚師。
在成為一個(gè)優(yōu)秀的前端工程師的道路上,充滿了汗水和辛勞,如果你對(duì)前端開發(fā)有更多的見解以及不同的意見,歡迎留言將您的見解分享給所有web前端開發(fā)愛好者。
程序設(shè)計(jì)之道無(wú)遠(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ú)立出來(lái)一個(gè)新的崗位來(lái)處理。發(fā)展前景我是看好的,對(duì)于一個(gè)技術(shù)行業(yè),我認(rèn)為首先如何提升自己的個(gè)人能力是保持行業(yè)發(fā)展的源動(dòng)力。沒有真是過(guò)硬的技術(shù),前景發(fā)展都是免談。
那么很多情況又是這樣: 第一種一直在問:如何學(xué)習(xí)前端?
第二種總說(shuō):前端很簡(jiǎn)單,就那么一點(diǎn)東西。
我從沒有聽到有人問:如何做一名優(yōu)秀、甚至卓越的WEB前端工程師。詳細(xì)了解成為一個(gè)優(yōu)秀的前端工程師,都需要具備哪些特質(zhì)? 何為前端工程師
前端工程師,也叫Web前端開發(fā)工程師。他是隨著web發(fā)展,細(xì)分出來(lái)的行業(yè)。Web前端開發(fā)技術(shù)主要包括三個(gè)要素:HTML、CSS和JavaScript!
HTML 甚至不是一門語(yǔ)言,他僅僅是簡(jiǎn)單的標(biāo)記語(yǔ)言!
CSS 只是無(wú)類型的樣式修飾語(yǔ)言。當(dāng)然可以勉強(qiáng)算作弱類型語(yǔ)言。
Javascript 的基礎(chǔ)部分相對(duì)來(lái)說(shuō)不難,入手還算快。此篇文章中就HTML、CSS、JS都有哪些區(qū)別?進(jìn)行了全面的解讀!
前端開發(fā)的入門門檻其實(shí)很低,與服務(wù)器端語(yǔ)言先慢后快的學(xué)習(xí)曲線相比,前端開發(fā)的學(xué)習(xí)曲線是先快后慢。也正因?yàn)槿绱?,前端開發(fā)領(lǐng)域有很多自學(xué)成“才”的同行,但大多數(shù)人都停留在會(huì)用的階段,因?yàn)楹竺娴膶W(xué)習(xí)曲線越來(lái)越陡峭,每前進(jìn)一步都很難。
現(xiàn)在市場(chǎng)很需要優(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)起來(lái),了解學(xué)習(xí)更多在學(xué)校學(xué)不到的技術(shù)干貨。
如何學(xué)習(xí)前端知識(shí)
我們生活在一個(gè)充滿規(guī)則的宇宙里面。社會(huì)秩序按照規(guī)則運(yùn)行,計(jì)算機(jī)語(yǔ)言幾乎全部是規(guī)則的集合。計(jì)算機(jī)前輩們定義規(guī)則,規(guī)則約束我們,我們用規(guī)則控制數(shù)據(jù)。大部分時(shí)候,對(duì)數(shù)據(jù)的合理控制,來(lái)自于你對(duì)規(guī)則的掌握。
學(xué)習(xí)HTML,CSS 應(yīng)該先跟著書仔細(xì)、扎實(shí)的學(xué)一遍。然后就需要做大量的練習(xí),做各種常規(guī)的、奇怪的、大量的布局練習(xí)來(lái)捆固、理解自己的知識(shí)。
而學(xué)習(xí)Javascript 首先要知道這門語(yǔ)言可以做什么,不能做什么,擅長(zhǎng)做什么,不擅長(zhǎng)做什么!
如果你只想當(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)頁(yè)。成為一個(gè)優(yōu)秀的前端工程師,都需要具備哪些特質(zhì)?
現(xiàn)在,只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無(wú)論是開發(fā)難度上,還是開發(fā)方式上,現(xiàn)在的網(wǎng)頁(yè)制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā),所以現(xiàn)在不再叫網(wǎng)頁(yè)制作,而是叫Web前端開發(fā)。
Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來(lái)越重要,而且需要專業(yè)的前端工程師才能做好,它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。
優(yōu)秀的Web前端開發(fā)工程師應(yīng)該具備快速學(xué)習(xí)能力
Web發(fā)展的很快,甚至可以說(shuō)這些技術(shù)幾乎每天都在變化!如果沒有快速學(xué)習(xí)能力,就跟不上 Web發(fā)展的步伐。前端工程師必須不斷提升自己,不斷學(xué)習(xí)新技術(shù)、新模式;僅僅依靠今天的知識(shí)無(wú)法適應(yīng)未來(lái)。Web的明天與今天必將有天壤之別,而前端工程師的工作就是要搞清楚如何通過(guò)自己的Web應(yīng)用程序來(lái)體現(xiàn)這種翻天覆地的變化。
說(shuō)到這里,我想起了一個(gè)大師說(shuō)過(guò)的一句話:對(duì)于新手來(lái)說(shuō),新技術(shù)就是新技術(shù)。
對(duì)于一個(gè)高手來(lái)說(shuō),新技術(shù)不過(guò)是就技術(shù)的延伸。優(yōu)秀的前端工程師需要具備良好的溝通能力 因?yàn)榍岸斯こ處熤辽俣家獫M足四類客戶的需求:
1、產(chǎn)品經(jīng)理。這些是負(fù)責(zé)策劃應(yīng)用程序的一群人。他們會(huì)想出很多新鮮的、奇怪的、甚至是不可是實(shí)現(xiàn)的應(yīng)用。一般來(lái)說(shuō),產(chǎn)品經(jīng)理都追求豐富的功能。
2、UI設(shè)計(jì)師。這些人負(fù)責(zé)應(yīng)用程序的視覺設(shè)計(jì)和交互模擬。他們關(guān)心的是用戶對(duì)什么敏感、交互的一貫性以及整體的好用性。一般來(lái)說(shuō),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),無(wú)外乎正常運(yùn)行時(shí)間、應(yīng)用程序始終正??捎玫臅r(shí)間、性能和截止日期。項(xiàng)目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡(jiǎn)單化,以及不在升級(jí)更新時(shí)引入新問題。
4、最終用戶。指的是應(yīng)用程序的主要消費(fèi)者。盡管前端工程師不會(huì)經(jīng)常與最終用戶打交道,但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對(duì)個(gè)人有用的功能,以及競(jìng)爭(zhēng)性產(chǎn)品所具備的功能。
總結(jié)
要做優(yōu)秀的前端工程師,還需要繼續(xù)努力:《高性能網(wǎng)站建設(shè)指南》、《Yahoo工程師的網(wǎng)站性能優(yōu)化的建議》、“YSLOW”性能優(yōu)化建議、《網(wǎng)站重構(gòu)》、《Web開發(fā)敏捷之道》、“ jQuery 庫(kù)”、“前端框架”、“HTML5”、“CSS3” 這些都要深入研究!
萬(wàn)事開頭難!如果你能到這個(gè)境界,剩下的路自己就可以走下去了。
人們常說(shuō):不想當(dāng)裁縫的司機(jī),不是個(gè)好廚師。
在成為一個(gè)優(yōu)秀的前端工程師的道路上,充滿了汗水和辛勞。
第三篇:web前端面試總結(jié)
1.常用那幾種瀏覽器測(cè)試?有哪些內(nèi)核(Layout Engine)?(Q1)瀏覽器:IE,Chrome,F(xiàn)ireFox,Safari,Opera。(Q2)內(nèi)核:Trident,Gecko,Presto,Webkit。
2.說(shuō)下行內(nèi)元素和塊級(jí)元素的區(qū)別?行內(nèi)塊元素的兼容性使用?(IE8 以下)
(Q1)行內(nèi)元素:會(huì)在水平方向排列,不能包含塊級(jí)元素,設(shè)置width無(wú)效,height無(wú)效(可以設(shè)置line-height),margin上下無(wú)效,padding上下無(wú)效。
塊級(jí)元素:各占據(jù)一行,垂直方向排列。從新行開始結(jié)束接著一個(gè)斷行。(Q2)兼容性:display:inline-block;*display:inline;*zoom:1;
3.清除浮動(dòng)有哪些方式?比較好的方式是哪一種?(Q1)(1)父級(jí)div定義height。
(2)結(jié)尾處加空div標(biāo)簽clear:both。(3)父級(jí)div定義偽類:after和zoom。(4)父級(jí)div定義overflow:hidden。(5)父級(jí)div定義overflow:auto。(6)父級(jí)div也浮動(dòng),需要定義寬度。(7)父級(jí)div定義display:table。(8)結(jié)尾處加br標(biāo)簽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)邊距和邊框(元素默認(rèn)效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
5.Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?(Q1)告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
(Q2)標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中,頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
6.HTML5 為什么只需要寫 ?
HTML5不基于 SGML,因此不需要對(duì)DTD進(jìn)行引用,但是需要doctype來(lái)規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行)。
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用,才能告知瀏覽器文檔所使用的文檔類型。
7.頁(yè)面導(dǎo)入樣式時(shí),使用link和@import有什么區(qū)別?
(1)link屬于XHTML標(biāo)簽,除了加載CSS外,還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的,只能用于加載CSS;(2)頁(yè)面被加載的時(shí),link會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;(3)import是CSS2.1 提出的,只在IE5以上才能被識(shí)別,而link是XHTML標(biāo)簽,無(wú)兼容問題。
8.介紹一下你對(duì)瀏覽器內(nèi)核的理解?
主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎:負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、我們組建一大牛裙前面是4七一,整理訊息(例如加入CSS等),中間是零2七,以及計(jì)算網(wǎng)頁(yè)的顯示方式,后面是壹武四,是學(xué)習(xí)的就加,不是學(xué)習(xí)的請(qǐng)勿打擾。然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同,所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS引擎則:解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確,后來(lái)JS引擎越來(lái)越獨(dú)立,內(nèi)核就傾向于只指渲染引擎。
9.html5有哪些新特性?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和 HTML5?(Q1)HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲(chǔ),多任務(wù)等功能的增加。
(1)繪畫 canvas;(2)用于媒介回放的 video 和 audio 元素;(3)本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;(5)語(yǔ)意化更好的內(nèi)容元素,比如 article、footer、header、nav、section;(6)表單控件,calendar、date、time、email、url、search;(7)新的技術(shù)webworker, websocket, Geolocation;(Q2)IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽,可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽,瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用成熟的框架、比如html5shim,
10.簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解? 用正確的標(biāo)簽做正確的事情。
html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化,結(jié)構(gòu)更清晰,便于對(duì)瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示,并且是容易閱讀的;搜索引擎的爬蟲也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于SEO;使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護(hù)理解。
JavaScript----------------------------
1.介紹js的基本數(shù)據(jù)類型
Undefined、Null、Boolean、Number、String
2.js有哪些內(nèi)置對(duì)象?
數(shù)據(jù)封裝類對(duì)象:Object、Array、Boolean、Number 和 String 其他對(duì)象:Function、Arguments、Math、Date、RegExp、Error
3.this對(duì)象的理解
this總是指向函數(shù)的直接調(diào)用者(而非間接調(diào)用者); 如果有new關(guān)鍵字,this指向new出來(lái)的那個(gè)對(duì)象;
在事件中,this指向觸發(fā)這個(gè)事件的對(duì)象,特殊的是,IE中的attachEvent中的this總是指向全局對(duì)象Window。
4.eval是做什么的?
它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行;
應(yīng)該避免使用eval,不安全,非常耗性能(2次,一次解析成js語(yǔ)句,一次執(zhí)行)。由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval,var obj =eval('('+ str +')')。
5.DOM怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn) // 創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment()//創(chuàng)建一個(gè)DOM片段 createElement()//創(chuàng)建一個(gè)具體的元素 createTextNode()//創(chuàng)建一個(gè)文本節(jié)點(diǎn) // 添加、移除、替換、插入 appendChild()removeChild()replaceChild()insertBefore()//在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn) // 查找
getElementsByTagName()//通過(guò)標(biāo)簽名稱
getElementsByName()//通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng),會(huì)得到一個(gè)數(shù)組,其中包括id等于name值的)getElementById()//通過(guò)元素Id,唯一性
6.null和undefined的區(qū)別?
null是一個(gè)表示“無(wú)”的對(duì)象,轉(zhuǎn)為數(shù)值時(shí)為0;undefined是一個(gè)表示“無(wú)”的原始值,轉(zhuǎn)為數(shù)值時(shí)為NaN。undefined:
(1)變量被聲明了,但沒有賦值時(shí),就等于undefined。
(2)調(diào)用函數(shù)時(shí),應(yīng)該提供的參數(shù)沒有提供,該參數(shù)等于undefined。(3)對(duì)象沒有賦值的屬性,該屬性的值為undefined。(4)函數(shù)沒有返回值時(shí),默認(rèn)返回undefined。null:
(1)作為函數(shù)的參數(shù),表示該函數(shù)的參數(shù)不是對(duì)象。(2)作為對(duì)象原型鏈的終點(diǎn)。
7.new操作符具體干了什么呢?(1)創(chuàng)建一個(gè)空對(duì)象,并且 this 變量引用該對(duì)象,同時(shí)還繼承了該函數(shù)的原型。(2)屬性和方法被加入到 this 引用的對(duì)象中。
(3)新創(chuàng)建的對(duì)象由 this 所引用,并且最后隱式的返回 this。
8.JSON 的了解?
JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式。它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫, 占用帶寬小。格式:采用鍵值對(duì),例如:{'age':'12', 'name':'back'}
9.call()和 apply()的區(qū)別和作用?
apply()函數(shù)有兩個(gè)參數(shù):第一個(gè)參數(shù)是上下文,第二個(gè)參數(shù)是參數(shù)組成的數(shù)組。如果上下文是null,則使用全局對(duì)象代替。如:function.apply(this,[1,2,3]);call()的第一個(gè)參數(shù)是上下文,后續(xù)是實(shí)例傳入的參數(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請(qǐng)求時(shí),已發(fā)送了http header之后服務(wù)端將返回此信息,表示確認(rèn),之后發(fā)送具體參數(shù)信息 200 OK 正常返回信息
201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源 202 Accepted 服務(wù)器已接受請(qǐng)求,但尚未處理
301 Moved Permanently 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。302 Found 臨時(shí)性重定向。
303 See Other 臨時(shí)性重定向,且總是使用 GET 請(qǐng)求新的 URI。304 Not Modified 自從上次請(qǐng)求后,請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)。400 Bad Request 服務(wù)器無(wú)法理解請(qǐng)求的格式,客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。
401 Unauthorized 請(qǐng)求未授權(quán)。403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤。
503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求(可能是過(guò)載或維護(hù))。
2.你有哪些性能優(yōu)化的方法?
(1)減少http請(qǐng)求次數(shù):CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適;網(wǎng)頁(yè)Gzip,CDN托管,data緩存,圖片服務(wù)器。
(2)前端模板 JS+數(shù)據(jù),減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi),前端用變量保存AJAX請(qǐng)求結(jié)果,每次操作本地變量,不用請(qǐng)求,減少請(qǐng)求次數(shù)
(3)用innerHTML代替DOM操作,減少DOM操作次數(shù),優(yōu)化javascript性能。(4)當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。(5)少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。
(6)避免使用CSS Expression(css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。(7)圖片預(yù)加載,將樣式表放在頂部,將腳本放在底部 加上時(shí)間戳。
3.什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)?
優(yōu)雅降級(jí):Web站點(diǎn)在所有新式瀏覽器中都能正常工作,如果用戶使用的是老式瀏覽器,則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題,針對(duì)不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級(jí)了,為那些無(wú)法支持功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效。漸進(jìn)增強(qiáng):從被所有瀏覽器支持的基本功能開始,逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí),它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用。
4.哪些常見操作會(huì)造成內(nèi)存泄漏?
內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對(duì)象,并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0(沒有其他對(duì)象引用過(guò)該對(duì)象),或?qū)υ搶?duì)象的惟一引用是循環(huán)的,那么該對(duì)象的內(nèi)存即可回收。
setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話,會(huì)引發(fā)內(nèi)存泄漏。
閉包、控制臺(tái)日志、循環(huán)(在兩個(gè)對(duì)象彼此引用且彼此保留時(shí),就會(huì)產(chǎn)生一個(gè)循環(huán))。
5.線程與進(jìn)程的區(qū)別
一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程。線程的劃分尺度小于進(jìn)程,使得多線程程序的并發(fā)性高。
另外,進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元,而多個(gè)線程共享內(nèi)存,從而極大地提高了程序的運(yùn)行效率。
線程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行,必須依存在應(yīng)用程序中,由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。從邏輯角度來(lái)看,多線程的意義在于一個(gè)應(yīng)用程序中,有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用,來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別。
第四篇:web前端個(gè)人簡(jiǎn)歷
個(gè)人簡(jiǎn)歷
個(gè)人信息
姓名:xxxx 性別:男
出生日期:1993.03 婚姻狀況:未婚 工作所在地:北京 家庭所在地:湖北
聯(lián)系電話:18xxxxxx
電子郵箱:xxxxxx@qq.com
專業(yè)技能
1、熟練使用Sublime、Photoshop等軟件,掌握網(wǎng)站效果圖的制作、切片以及HTML頁(yè)面代碼優(yōu)化等技術(shù);
2、精通HTML5+CSS3、DIV+CSS等網(wǎng)站前端技術(shù);
3、能夠熟練編寫標(biāo)準(zhǔn)前端代碼,熟悉瀏覽器兼容問題解決方案;
4、熟練掌握javascript語(yǔ)言,精通jQuery庫(kù)、bootstrap庫(kù),能夠?qū)崿F(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果與頁(yè)面交互;
5、熟練掌握響應(yīng)式設(shè)計(jì),能夠開發(fā)移動(dòng)端頁(yè)面;熟練使用swiper手機(jī)端應(yīng)用庫(kù);
6、了解node后臺(tái),熟練掌握Ajax技術(shù);
7、了解gulp自動(dòng)化構(gòu)建工具,了解less,echarts圖表庫(kù);
工作經(jīng)驗(yàn)
2015.07– 至今 工作職責(zé): 北京第嘉傳媒文化有限公司 職位名稱:前端開發(fā)工程師
負(fù)責(zé)公司產(chǎn)品或項(xiàng)目Web前端開發(fā),根據(jù)產(chǎn)品需求和UI效果圖利用sublime編程軟件進(jìn)行div/css標(biāo)準(zhǔn)網(wǎng)頁(yè)制作,Js邏輯設(shè)計(jì)與開發(fā)、jQuery特效編寫以及使用插件實(shí)現(xiàn)特效,解決主流瀏覽器兼容性問題,對(duì)網(wǎng)站用戶體驗(yàn)性能進(jìn)行優(yōu)化,完成產(chǎn)品前端展示效果和交互功能。
2014.09– 2015.6
工作職責(zé): 秦皇島市金鑾之巔科技開發(fā)有限公司
職位名稱:前端開發(fā)工程師
負(fù)責(zé)公司項(xiàng)目的前端修改調(diào)試和開發(fā)工作,精確的將網(wǎng)站設(shè)計(jì)圖重構(gòu)成html 頁(yè)面。從ps切圖到div/css標(biāo)準(zhǔn)網(wǎng)頁(yè)制作及主流瀏覽器兼容問題的解決,并與后臺(tái)緊密配合,確保代碼有效鏈接。
項(xiàng)目經(jīng)歷: PC端 中國(guó)智力運(yùn)動(dòng)網(wǎng)
http://www.tmdps.cn)是由泰康人壽保險(xiǎn)股份有限公司全資發(fā)起成立的大型互聯(lián)網(wǎng)保險(xiǎn)公司,產(chǎn)品涵蓋意外險(xiǎn)、理財(cái)險(xiǎn)、健康險(xiǎn)、旅游險(xiǎn)等多種保險(xiǎn)。
個(gè)人站
kafeihaoka.github.io
教育背景
2011.09-2015.06 燕山大學(xué)里仁學(xué)院 電子信息工程 本科 求職意向
職位:Web 前端開發(fā) 工作地點(diǎn):北京
第五篇:Web前端工作總結(jié)
Web前端學(xué)習(xí)總結(jié)
一.名詞解釋 1.橫切
在固定頁(yè)面的寬度(按柵格化進(jìn)行)并且對(duì)高度沒有限制的容器稱為一個(gè)標(biāo)準(zhǔn)橫切 2.留白 兩個(gè)容器或碎片之間的上、下、左、右的空白距離 3.繼承
元素可以從其父級(jí)元素中獲得一些可為自己使用的屬性或值。4.圖片定位
把圖片元素放置到一個(gè)靜態(tài)的、相對(duì)的、絕對(duì)的、或固定的位置中,利用CSS中對(duì)圖片進(jìn)行遮罩屬性,多用于頁(yè)面中的修飾圖 5.底圖
頁(yè)面中在標(biāo)簽中使用的背景圖 6.齊底(圖)線 用于區(qū)分橫切或碎片結(jié)束的線或圖 7.頁(yè)面結(jié)構(gòu)
頁(yè)面的基礎(chǔ)框架,由橫切、布局元素組成 8.焦點(diǎn)區(qū)(圖)最易注意的區(qū)域 9.導(dǎo)航
在頁(yè)面中具有導(dǎo)向性的鏈接集合 10.頭圖 頁(yè)面主題圖片 11.間距
碎片或文字間的距離 12.行高
文字段落中行與行之間的距離 13.首行縮進(jìn) 文字段落首行縮進(jìn) 14.浮動(dòng)
使被定義的區(qū)域脫離正常的頁(yè)面文檔流 15.碎片 由文字、圖片組合成的內(nèi)容區(qū)域 16.通欄廣告 與頁(yè)面內(nèi)容區(qū)同寬的廣告區(qū)域 17.功能按鈕 具有交互屬性的按鈕 18.私有樣式
當(dāng)前頁(yè)面獨(dú)立使用的樣式,不具備公用性 19.水平(垂直)居中
在頁(yè)面中的某個(gè)元素處于父級(jí)的上下或左右的相同距離 20.標(biāo)準(zhǔn)頭(尾)定義相同的頁(yè)面頭或尾元素集合 二.文本格式化 1.段落:p 2.斜體:address(聯(lián)系信息)em(強(qiáng)調(diào))i(突出不同)cite(引用)dfn(首次定義術(shù)語(yǔ))3.粗體:strong(重要)b(提醒)4.圖片塊:figure 5.引述文段,段落縮進(jìn):blockquote 6.背景顏色:mark 7.虛線下劃線:abbr 8.上標(biāo)下標(biāo):sub/sup 9.下劃線:ins 10.刪除線:del(標(biāo)記已刪除內(nèi)容)s(標(biāo)記不準(zhǔn)確內(nèi)容)11.等寬字體:code 12.預(yù)格式化:pre 13.字號(hào)減小,表注釋:small 14.時(shí)間: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:為了讓對(duì)應(yīng)的標(biāo)簽識(shí)別,添加CSS Name:為了讓服務(wù)器和腳本識(shí)別,通常與id設(shè)為一樣 Size:文本框大小 Maxlength:能輸入的最大字符數(shù) Pattern:正則表達(dá)式4.添加標(biāo)簽: 5.單(多)選按鈕:
注:id各自唯一,name必須相同。checked:默認(rèn)選擇 6.下拉框:
注:size:選擇框的高度 multiple:允許多選 selected:默認(rèn)選擇 用
10.文本區(qū)域:
1.width:不包括padding,border,margin;max-width設(shè)置外圍限制; 2.浮動(dòng):float:left;清除浮動(dòng):clear:both;3.設(shè)置邊框: border:dotted 4px red;(dotted點(diǎn)狀、dashed虛線、solid實(shí)線)4.使元素對(duì)齊:vertical-align:baseline/middle/text-bottom..5.顯示:display:black/inline/inline-block;6.顯示:visibility:visible/hiddle;7.相對(duì)定位:{position:relative;top:5px;} 相對(duì)于該元素的原始位置 8.絕對(duì)定位:{position:absolute;top:5px;} 相對(duì)于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;}(所有角簡(jiǎn)寫)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 :漸變線沿逆時(shí)針方向轉(zhuǎn)至水平線的角度)六.html5視頻音頻
1.html5支持3種視頻:.ogg/.ogv.mp4/.m4v.webm 2.添加視頻: 視頻屬性:src autoplay controls muted loop poster width height preload 3.為視頻添加多個(gè)來(lái)源: 4.html5支持5中音頻:.ogg.mp3.wav.aac.mp4 5.添加音頻: 音頻屬性:src autoplay controls muted loop preload。多個(gè)來(lái)源同video。七.一些約定
我們結(jié)合常用的一些命名習(xí)慣,再結(jié)合CSS的實(shí)際應(yīng)用,整理出一些較好的命名習(xí)慣。1.樣式名稱首字母統(tǒng)一為小寫字母,不能為數(shù)字,下劃線及特殊字符;
3.設(shè)置邊框: border:dotted 4px red;(dotted點(diǎn)狀、dashed虛線、solid實(shí)線)4.使元素對(duì)齊:vertical-align:baseline/middle/text-bottom..5.顯示:display:black/inline/inline-block;6.顯示:visibility:visible/hiddle;7.相對(duì)定位:{position:relative;top:5px;} 相對(duì)于該元素的原始位置 8.絕對(duì)定位:{position:absolute;top:5px;} 相對(duì)于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;}(所有角簡(jiǎn)寫)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 :漸變線沿逆時(shí)針方向轉(zhuǎn)至水平線的角度)六.html5視頻音頻
1.html5支持3種視頻:.ogg/.ogv.mp4/.m4v.webm 2.添加視頻: 視頻屬性:src autoplay controls muted loop poster width height preload 3.為視頻添加多個(gè)來(lái)源: 4.html5支持5中音頻:.ogg.mp3.wav.aac.mp4 5.添加音頻: 音頻屬性:src autoplay controls muted loop preload。多個(gè)來(lái)源同video。七.一些約定
我們結(jié)合常用的一些命名習(xí)慣,再結(jié)合CSS的實(shí)際應(yīng)用,整理出一些較好的命名習(xí)慣。1.樣式名稱首字母統(tǒng)一為小寫字母,不能為數(shù)字,下劃線及特殊字符; 2.樣式名盡量語(yǔ)義化或簡(jiǎn)寫; 3.樣式名需要組合拼寫時(shí),采用全部小寫拼寫并使用下劃線連接,即:all_keyword; 4.使用px(像素)為基本計(jì)量單位; 5.頁(yè)面中空格的使用:全角:中文空格 半角;? 6.項(xiàng)目完成包中,文件夾及文件名稱全部采用小寫字母,不使用中文文件名; 7.減少DIV的嵌套層數(shù);
8.給重要圖片加上alt屬性;給重要的元素和截?cái)嗟脑丶由蟭itle; 9.使用正確的注釋方法(詳見“注釋”章節(jié)); 10.特殊情況下要求表現(xiàn)和內(nèi)容分離,代碼中不要涉及任何表現(xiàn)的元素,例如:style、font 等;
11.雙標(biāo)記簽都要有開始和結(jié)束標(biāo)簽,單標(biāo)記標(biāo)簽的后面一定要加“ /”,例如:
等,并且有正確的層次; 12.其它特殊符號(hào): 1)<(<)2)>(>)八.命名空間
8.1外掛樣式名稱 全局:public.css 全局樣式為全站公用,為頁(yè)面樣式基礎(chǔ),頁(yè)面中必須包含。結(jié)構(gòu):layout.css 頁(yè)面結(jié)構(gòu)類型復(fù)雜,并且公用類型較多時(shí)使用。多用在首頁(yè)級(jí)頁(yè)面和產(chǎn)品類頁(yè)面中。私有:style.css 獨(dú)立頁(yè)面所使用的樣式文件,頁(yè)面中必須包含。模塊 module.css 產(chǎn)品類頁(yè)面應(yīng)用,將可復(fù)用類模塊進(jìn)行剝離后,可與其它樣式配合使用。默認(rèn) default.css 文章 article.css 圖片 photo.css 下載 soft.css 主題 themes.css 實(shí)現(xiàn)換膚功能時(shí)應(yīng)用。補(bǔ)丁 mend.css 基于以上樣式進(jìn)行的私有化修補(bǔ)。8.2 常用名稱(1)頁(yè)面結(jié)構(gòu) 容器: container 頁(yè)頭:header 內(nèi)容:content/container/content(A)頁(yè)面主體:main 頁(yè)尾:footer 導(dǎo)航:nav 側(cè)欄:sidebar 欄目:column 頁(yè)面外圍控制整體布局寬度:wrapper 左右中:left right center 浮左浮右:fl fr 清除浮動(dòng) 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 標(biāo)題:title 摘要:summary 路徑:path(3)模塊化命名 模塊頭部:hd 模塊內(nèi)容部分:bd 模塊底部:ft(4)各內(nèi)容頁(yè)對(duì)應(yīng) 標(biāo)題:title 副標(biāo)題:subtitle 屬性:properties 簡(jiǎn)介:infor 內(nèi)容:content 分頁(yè):page 插入廣告:insert_ad 表情:expression 功能選項(xiàng):options 上下篇:up_down 評(píng)論:comments 相關(guān)內(nèi)容:related 下載地址:download 播放地址:play_add(5)功能 標(biāo)志:logo 廣告:banner 登陸:login 登錄條:loginbar 注冊(cè):regsiter 搜索:search 日期:date 功能區(qū):shop 標(biāo)題:title 加入:joinus 狀態(tài):status 按鈕:btn 滾動(dòng):scroll 標(biāo)簽頁(yè):tab 文章列表:list 提示信息:msg 當(dāng)前的:current 小技巧:tips 圖標(biāo):icon 注釋:note 指南:guild 服務(wù):service 熱點(diǎn):hot 新聞:news 下載:download 投票:vote 合作伙伴:partner 友情鏈接:link 版權(quán):copyright 九.基本設(shè)置-public.css 9.1 全局設(shè)置
上下邊距(margin、padding):0(px)左右邊距(margin):auto(自動(dòng))底色(background):#FFF(白色)字體(font-family)、字號(hào)(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 頁(yè)面標(biāo)簽初始化設(shè)置 1.常用基本標(biāo)div,form,ul,ol,li,span,p,dl,dt,dd,img 設(shè)置基本標(biāo)簽的間距、邊框默認(rèn)值為0。2.h1~h6標(biāo)題
默認(rèn)標(biāo)題內(nèi)字號(hào)12px,內(nèi)外間距為0px,文字不加粗。3.ul,ol,li 列表 默認(rèn)不顯示項(xiàng)目符號(hào)。4.h2 欄目標(biāo)題
說(shuō)明:h2標(biāo)簽被定義為欄目標(biāo)題特殊使用,在標(biāo)簽中非標(biāo)題文字默認(rèn)居右顯示,主標(biāo)題文字使用span標(biāo)簽包含,居左顯示。5.默認(rèn)鏈接顏色
常態(tài)下不顯示文字下劃線,顏色為灰(#333),鼠標(biāo)懸浮時(shí):顯示文字下劃線,顏色變?yōu)榘导t(#ccc)。6.狀態(tài):a:link{未點(diǎn)} a:visited{已點(diǎn)} a:focus{鍵盤選中} a:hover{指針停留} a:active{正在點(diǎn)} 9.3 頁(yè)面寬度 默認(rèn)頁(yè)面寬(命名規(guī)范):按柵格化進(jìn)行 9.4.clear 結(jié)束容器內(nèi)各元素的浮動(dòng)屬性,使相鄰容器或元素節(jié)點(diǎn)正常顯示。以下是清除浮動(dòng)的幾種方法 方法一.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 } 使用方法:


文檔為doc格式
聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)自行上傳,本網(wǎng)站不擁有所有權(quán),未作人工編輯處理,也不承擔(dān)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)有涉嫌版權(quán)的內(nèi)容,歡迎發(fā)送郵件至:645879355@qq.com 進(jìn)行舉報(bào),并提供相關(guān)證據(jù),工作人員會(huì)在5個(gè)工作日內(nèi)聯(lián)系你,一經(jīng)查實(shí),本站將立刻刪除涉嫌侵權(quán)內(nèi)容。
Web前端開發(fā)學(xué)習(xí)筆記分享
www.tmdps.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......
web前端開發(fā)知識(shí)點(diǎn)總結(jié)
HTML知識(shí)總結(jié) span行級(jí)元素,多個(gè)同行塊級(jí)元素,獨(dú)占一行塊級(jí)元素,前后保留一行標(biāo)題標(biāo)簽,h1~h6表6個(gè)等級(jí),加粗,前后保留一行width:設(shè)置寬度height:設(shè)置高度alt:圖片加載失敗顯示的文本d......
web前端學(xué)習(xí)計(jì)劃[優(yōu)秀范文五篇]
web前端學(xué)習(xí)計(jì)劃時(shí)光飛逝,時(shí)間在慢慢推演,我們的學(xué)習(xí)目標(biāo)和學(xué)習(xí)任務(wù)同時(shí)也不斷變化,是時(shí)候?qū)憣W(xué)習(xí)計(jì)劃了哦。估計(jì)許多人是想得很多,但不會(huì)寫,以下是小編收集整理的web前端學(xué)習(xí)計(jì)劃......
Web前端程序員簡(jiǎn)
個(gè)人簡(jiǎn)歷 姓 名:張三性 別:男出生年月:*** 學(xué) 歷:本科畢業(yè)學(xué)校:鄭州大學(xué)專 業(yè):互聯(lián)網(wǎng)·電子商務(wù) 民 族:漢工作經(jīng)驗(yàn): 3年 郵箱:*****@**.com電話:*********** 自我簡(jiǎn)介: 1.有良好的大局......
WEB前端開發(fā)經(jīng)驗(yàn)總結(jié)
ASP.NET前端開發(fā)經(jīng)驗(yàn)總結(jié) 通過(guò)此次大作業(yè)的設(shè)計(jì)到完成,我負(fù)責(zé)的是web前端的開發(fā),經(jīng)過(guò)此次作業(yè)和結(jié)合W3C上的自學(xué),我漸漸有了一些對(duì)前端開發(fā)的小小經(jīng)驗(yàn)(僅為個(gè)人意見)。 WEB標(biāo)準(zhǔn)是......
web前端實(shí)習(xí)經(jīng)驗(yàn)
經(jīng)驗(yàn) 2014年7月11日 11:20自我介紹時(shí):千萬(wàn)不要忘記介紹名字代碼: 1.標(biāo)記為done表示已經(jīng)調(diào)試好,完全測(cè)試過(guò)了 2.代碼規(guī)范。phpstrom,統(tǒng)一格式化 3.借鑒代碼時(shí)注意liscence 4.項(xiàng)目......
web前端培訓(xùn)學(xué)習(xí)心得
華清遠(yuǎn)見Web全棧培訓(xùn)官網(wǎng):html5.3g-edu.org Web前端培訓(xùn)學(xué)習(xí)心得 目前web前端最火的莫過(guò)于html5了,HTML指的是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language),標(biāo)記語(yǔ)言是一套標(biāo)記......
Web前端代碼規(guī)范
龍圖教育,全球游戲50強(qiáng)教育品牌www.tmdps.cn Web前端代碼規(guī)范 此項(xiàng)目用于記錄規(guī)范的、高可維護(hù)性的前端代碼,這是通過(guò)分析 Github 眾多前端代碼庫(kù),總結(jié)出來(lái)的前端代碼書......