WEB前端怎麼入門

WEB前端包括HTML / CSS / Javascript等，高級WEB前端還包括SEO優化等

操作方法

（01）WEB前端的基本概述圖

（02）web前端的基本學習思路

（03）第一階段——HTML標籤的學習超文本標記語言(HyperText Mark-up Language 簡稱HTML)，“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。html是一個網頁的骨架，就好比是蓋房子的結構~這也是前端頁面的基礎。試着想一下，如果一個房子連磚頭和水泥都沒有，後面的步驟又有什麼意義呢？所以我們必須完全掌握HTML的基本結構和常見的標籤，屬性。有了一個好的開始，距離成功已經一小半啦~關於HTML怎麼記憶、學習？可能一上來死記硬背，也不會有太好的預期。而且還有可能被嚇到？“我去！這麼多標籤！怎麼記得玩？”個人感覺有兩點可以嘗試：語義化的去記憶。比如ul li這個就是列表，button就是按鈕，table就是表格。其實這也是html5所倡導的，語義化標籤。2，試着寫一個一個小的demo，也許就只是一個列表，一個表格，或者一個按鈕。也許寫着寫着你就懂了呢？學習HTML就是要自己不斷的去寫，去嘗試。看着自己的代碼能跑起來，有了心目中的效果，這種心情還是很開心的！給大家推薦一個網站，w3cSchool，這裏面有在線的代碼編輯器。第二階段——CSS的學習CSS層疊樣式表—— （Cascading Style Sheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對 網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文 本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人羣，有較強的易讀性。CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面佈局，就基本上掌握了大半啦~這時我們就以及能夠對網頁中各個元素進行精準的排版，做出符合我們意願的網頁啦！關於CSS的各種屬 性，我們還是可以參考學習HTML那樣。可以説CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改 變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色—— border-right-color”等等等，諸如此類第三階段——JavaScriptJavaScript一種直譯式腳本語言，是一種動態 類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客户端的腳本語言，最早是在 HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。簡單來 説，javascript是一個可以運行在瀏覽器上面的語言（當然現在基於一些庫/框架已經遠不只是在瀏覽器上了），它可以操控瀏覽器，讓瀏覽器聽從我們 的命令。這有點像一個電視劇和遙控器，而javascript就是我們的遙控器。瀏覽器根據javascript的指令，做出相應的反饋。比如操作 DOM（也可以理解成為操作HTML），可以操作CSS。有了javascript就可以讓我更加靈活&amp;動態的操控HTML,CSS.嚴格來説、HTML和CSS還算不上真正的“語言”，而javascript卻是如假包換的腳本型語言，既然是語言，那就會有字符串，數組，對象等等。而我們的javascript可以處理這些與數據有關的工作，比如給數組排個序，去個重等等。</p><p>而我們依靠javascript可以做些什麼呢？網頁上常見的輪播圖，網站的註冊功能，提交我們的留言，刷新獲取新聞等等。當然，我們強大的javascript遠不止此。

（04）然而因為歷史原因，比如我們灰常“尊敬”的 IE 瀏覽器~出了一套自己的javascript標準，沒有和主流javascript標準兼容啊！！作為一個前端er是不是應該把更多精力用在有意義的地方呢，而不是解決兼容。第四個階段——jQueryjQuery是一個兼容多瀏覽器的 javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人 John Resig在紐約的barcamp發佈，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開 發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。jQuery的優點我就不挨個説啦，一句話，jQuery是你更上一層樓的利器，也是我們前端er一大利器！Web前端學習小建議這裏跟大家扯一扯學習前端的小方法，是我自己的學習方法，大家湊合看看，倒也不一定對在寫css前，其實html的結構要是比較合理的，這樣寫css也會比較順手。在寫一個網頁之前，建議先琢磨幾分鐘，不要上來就寫。多去看看別人是怎麼寫的，然後結合自己的項目，心中有一個大致規劃。可以先把最外層輪廓寫好，先不着急去寫某一個具體的部分。這裏給大家分享一些小技巧：1、使用火狐和IE這兩種不同的瀏覽器，在繪製CSS樣式方法上截然不同。這種情況下，使用重置所有的基本樣式會讓你得到一個全新的空樣式表。（可以去網上找一下，很多的）2、CSS縮寫</p><p>CSS縮寫簡化了你的CSS代碼，更重要的是，它讓你的代碼更加整潔易懂。不是像這樣創建er {  background-color: #fff;background-image: url(image.gif); background-repeat: no-repeat;</p><p>  background-position: top left;而是像這樣創建er  background: #fff url(image.gif) no-repeat top left3、理解class和id這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來説id就是用來標識那些單獨不重複的樣式，而class是可以重複使用的。4、實用的也叫鏈接列表，是用在導航菜單樣式上。5、少用&lt;table&gt;多用&lt;div&gt;CSS最大的優勢之 一是使用達到樣式上的靈活多變。不同於裏的&lt;td&gt;中內容不會 被鎖在單元 格。可以説幾乎所有的表格佈局都可以在&lt;div&gt;和樣式的正確使用下完成。當然，有大量表格內容時，還是 用 &lt;table&gt;吧。6、CSS調試工具在設計CSS時，能夠得到頁面佈局的預覽對於優化CSS樣式和糾錯是很有幫助的。這裏有一些免費的CSS調試工具推薦給你，你可以把它裝在瀏覽器上：比如FireFox Web Developer、DOM Inspector、Firebug等7、!Important</p><p>所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也只會採用被標記的那條。 {  background-color:blue !important; background-color:red;</p><p>}比如上面的例子，因為background-color:blue 被標記為!important ，即使後來有把背景改成紅色的語句，也只採用被標記的那條。!important 用來強制使一個樣式避免在之後的編碼中被修改，遺憾的是IE不支持。

（05）牢記以上小技巧，也許你的css技能突然就起飛了呢？關於javascript的一些小技巧，下次我再整理給大家~一次性看太多，大家是不是也有點暈？學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什麼苦。。。既然學習這麼痛苦，為什麼不快樂一點學呢？anyway~希望大家可以成為一個優秀的前端er！

特別提示

耐心，信心，恆心

堅持，堅持，堅持