零基礎(chǔ)如何快速入「]前端?這個(gè)問(wèn)題往往是沒(méi)有基礎(chǔ)會(huì)遇到的，想要快速入「門前端開發(fā)，簡(jiǎn)單來(lái)說(shuō)就是要把基礎(chǔ)的知識(shí)點(diǎn)掌握熟練，然后由淺入深的去學(xué)習(xí)，在這里根據(jù)我過(guò)來(lái)的經(jīng)驗(yàn)，為大家簡(jiǎn)單介紹一下零基礎(chǔ)如何快速入門前端。



舉個(gè)可能不太恰當(dāng)?shù)睦?前端就好比如蓋房子，html就充當(dāng) 了房子結(jié)構(gòu)這部分，也是房子的基礎(chǔ)。css呢， 就好比咱們房子的裝修,墻面什么顏色，什么風(fēng)格，什么地板等等，這些給房子改變風(fēng)格,樣式的就是css。而Java呢，就好比這個(gè)房子的功能，房子需要制冷吧，需要暖氣吧，也需要上下水吧。這些功能性的就相當(dāng)于是Java。



一、前端工具（dreamwear/sublime/Photoshop/SVN等）

二、零基礎(chǔ)入門（HTML，CSS）

1、前端開發(fā)概況、代碼入門



頁(yè)面基本結(jié)構(gòu)、文檔聲明、編碼聲明、css語(yǔ)法、style屬性、link和style標(biāo)簽、id屬性、基本樣式、Border 、Background、 Font、盒模型、文本設(shè)置等等。



2、常用標(biāo)簽集合



header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…絕對(duì)路徑、相對(duì)路徑、標(biāo)簽語(yǔ)義化、標(biāo)簽嵌套規(guī)范、SEO…



3、常用選擇器&標(biāo)簽類型劃分



d、class、類型選擇、包含選擇、群組選擇、通配符、選擇器優(yōu)先級(jí)、標(biāo)簽樣式初始化訂制方案、超鏈接及偽類劃分、標(biāo)簽類型劃分及特性、inline、inline-block、block…



4、浮動(dòng)進(jìn)階



浮動(dòng)的作用、浮動(dòng)的特性、文檔流、浮動(dòng)的各種問(wèn)題、clear、BFC(塊級(jí)格式化上下文)、觸發(fā)BFC的條件、Haslayout、Haslayout的觸發(fā)條件…



5、定位



relative相對(duì)定位、Absolute絕對(duì)定位、Absolute絕對(duì)定位、Fixed 固定定位、inherit 繼承、static靜態(tài)定位、默認(rèn)值、zIndex層級(jí)問(wèn)題、margin負(fù)值、透明度…



6、表格和表單



表格標(biāo)簽、表格樣式重置、單元格合并、表單元素、表單相關(guān)的屬性操作、表單默認(rèn)樣式初始…



7、兼容性問(wèn)題處理



兼容性問(wèn)題總結(jié)、浮動(dòng)在IE6，7下的各種問(wèn)題、表單在低版本IE的問(wèn)題、處理低版本IE對(duì)新增標(biāo)簽的支持、CssHack、條件注釋語(yǔ)句、PNG問(wèn)題、透明度的問(wèn)題、固定定位在IE低版本的處理方式…



8、整站進(jìn)階



樣式規(guī)劃、favicon、Css Sprite、Data URI、隱藏元素、測(cè)試工具使用、滑動(dòng)門、等高布局、三列布局、未知寬高圖片在容器內(nèi)水平垂直居中、文本水平垂直居中、多行文本水平垂直居中…



9、css3入門



transition、屬性選擇器、nth-of-type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高級(jí)、H5表單新增屬性、E:not(s)、E:target、E::selection、



10、移動(dòng)端布局



測(cè)試環(huán)境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移動(dòng)端布局相關(guān)問(wèn)題、window.deviceorientationevent、橫豎屏判斷…



11、Animation和Transform



瀏覽器前綴、keyFrames、Animation調(diào)用、播放次數(shù)設(shè)置、動(dòng)畫偶數(shù)次調(diào)用順序、Animation的問(wèn)題、無(wú)縫滾動(dòng)、動(dòng)畫播放|暫停、rotate旋轉(zhuǎn)、deg、skew斜切、scale縮放、translate位移、transform-origin、transform的執(zhí)行順序問(wèn)題…



12、Bootstrap前端開發(fā)框架



Html語(yǔ)法規(guī)范、CSS語(yǔ)法規(guī)范、Less 和 Sass 中的嵌套、class 命名、選擇器、Normalize.css、柵格系統(tǒng)、排版、代碼、響應(yīng)式工具…

另外關(guān)于零基礎(chǔ)如何快速入門前端的問(wèn)題，項(xiàng)目實(shí)戰(zhàn)這一點(diǎn)很重要，一定要學(xué)以致用，我的建議是，只有在實(shí)戰(zhàn)項(xiàng)目中多加練習(xí)才能真正的掌握這門技術(shù)！

轉(zhuǎn)自：csdn； 作者：hugo233

藍(lán)藍(lán)設(shè)計(jì)( www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)