因?yàn)橄矚g前端，所以毅然辭掉了以前工資待遇還不錯(cuò)的工作，來(lái)學(xué)習(xí)有關(guān)前端的知識(shí)，希望自己除了能在經(jīng)濟(jì)上獲得一定的回報(bào)之外，還能在互聯(lián)網(wǎng)這個(gè)行業(yè)做出一定的成績(jī)。今天就開(kāi)始分享我學(xué)習(xí)前端的一些理解與認(rèn)識(shí)，希望能給喜歡前端和有意向從事前端開(kāi)發(fā)的小伙伴有一定的幫助。

學(xué)習(xí)任何東西都要有一個(gè)正確的方向，不然事倍功半，所以正確的方向勝過(guò)無(wú)謂的努力。

第一階段：HTML的學(xué)習(xí)

HTML用中文來(lái)說(shuō)就是超文本標(biāo)記語(yǔ)言，是一種網(wǎng)頁(yè)標(biāo)簽語(yǔ)言。如果我們把整個(gè)前端項(xiàng)目比作蓋樓房的話，那么學(xué)習(xí)HTML就相當(dāng)于了解了蓋樓房所需要的原材料的制作方法。首先我們拿到需要的鋼筋、水泥、混凝土等原材料，才能去搭建基本的樓房框架，在前端中這些“原材料”就是HTML元素，我們可以從最基本的標(biāo)題標(biāo)簽<h1>-</h6>來(lái)了解，在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中間加上一些內(nèi)容，就形成了元素，我們逐一了解這些元素以及他們的屬性，那么我們就掌握了蓋前端這棟大樓的基本原材料的制作方法。至于他們的屬性，就比如蓋樓的原材料鋼筋，它多硬，多長(zhǎng)，多粗等一些自身所具有的一些性質(zhì)。要蓋一棟樓房，還需要把這些原材料按照我們的方案組合布局在一起并進(jìn)行樣式的美化才行。

第二階段：CSS的學(xué)習(xí)

在上一階段樓房的原材料有了，我們將樓房蓋起來(lái)后需要進(jìn)行裝修，CSS就是裝修它的利器。對(duì)于CSS的出現(xiàn)，它不僅降低了我們維護(hù)成本，而且提升了我們的開(kāi)發(fā)效率。CSS中的盒子模型，浮動(dòng)，定位等為我們對(duì)網(wǎng)頁(yè)中對(duì)象的控制提供了有效方法，為樓房的建設(shè)提供了汗馬功勞，讓我們順利的完成了“一棟大樓”的建設(shè)。

為了讓用戶得到更好的交互效果和最佳體驗(yàn)，我們需要對(duì)樓房進(jìn)行“精裝修”，讓它看起來(lái)更加的豪華，更加舒適。

第三階段：Javascript

Javascript能實(shí)現(xiàn)網(wǎng)頁(yè)中的動(dòng)效，它是一種解釋性的腳本語(yǔ)言。其提供的內(nèi)置函數(shù)、對(duì)象、DOM操作等為我們提供了交互效果、驗(yàn)證功能等的實(shí)現(xiàn)手段。但是它的兼容性和復(fù)雜性令我們很是頭疼，還好大神替我們做了封裝，站在巨人的肩膀上就是好！

第四階段：JQuery

JQuery是一個(gè)js庫(kù)，它是免費(fèi)、開(kāi)源的，并且兼容各種的瀏覽器，同時(shí)有很多方便的插件可以選擇。至此，我們豪華的大樓是蓋起了，但是日復(fù)一日的蓋樓很繁瑣，也很浪費(fèi)時(shí)間，能不能將我們蓋樓的部件模塊化，就像小時(shí)候玩的“積木”游戲一樣，用的時(shí)候根據(jù)不同的需求組合就行了呢？

Bootstrap是一個(gè)HTML/CSS框架庫(kù)，它是twitter公司推出的免費(fèi)開(kāi)源的工具包。在實(shí)際開(kāi)發(fā)中我們可以借助它提供的css樣式包，還有js插件快速的完成頁(yè)面的布局和樣式的設(shè)置，最后根據(jù)需求微調(diào)一下，這樣基于框架開(kāi)發(fā)大大縮短了開(kāi)發(fā)周期。

最后說(shuō)明一下，我們寫(xiě)的HTML/css以及js他們電腦怎么識(shí)別呢？這就說(shuō)到瀏覽器的內(nèi)核了，它就是負(fù)責(zé)內(nèi)容頁(yè)面的渲染的，分為內(nèi)容排版引擎和腳本解釋引擎，html和css是由內(nèi)容排版引擎負(fù)責(zé)解析的，js是腳本解釋引擎解析的。

上面就是本次分享的全部?jī)?nèi)容了，對(duì)編程感興趣的小伙伴們可以前往六星云課堂看看，開(kāi)啟編程之旅哦~