tml、css和js屬于前端的基礎(chǔ)知識(shí)部分，不過想要靠這點(diǎn)知識(shí)找份工作可以說是難于上青天，當(dāng)然如果你只是想找個(gè)實(shí)習(xí)工作去工作中學(xué)技能那當(dāng)我沒說。所以想找工作的話還是需要繼續(xù)學(xué)習(xí)的，具體學(xué)什么技能可以看下招聘網(wǎng)站上企業(yè)對(duì)前端人員的技術(shù)要求有哪些。以下圖為例：

從招聘啟事中可以看到，Web前端高級(jí)工程師需要掌握HTML、CSS、JS等前端基礎(chǔ)知識(shí)，并熟練掌握react、vue、AJAX等前端主流框架，還要熟悉JQuery技術(shù),最好還要對(duì)小程序開發(fā)、數(shù)據(jù)可視化有一定的了解。當(dāng)然重要的是有相關(guān)工作經(jīng)驗(yàn)或者一定的項(xiàng)目經(jīng)驗(yàn)會(huì)更吃香。

vue：新手學(xué)vue框架是個(gè)不錯(cuò)的選擇，國內(nèi)很多中小型公司都會(huì)用到這個(gè)框架，學(xué)好這個(gè)再學(xué)react理解起來會(huì)更容易。(Vue的官網(wǎng)為：https://cn.vuejs.org/)

react:React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫。(react的官網(wǎng)為：https://react.docschina.org/)

AJAX：數(shù)據(jù)交互的模塊，讓你的前端頁面和服務(wù)器可以進(jìn)行數(shù)據(jù)交互。(AJAX官網(wǎng)：https://api.jquery.com/category/ajax/)

JQuery：讓你更加快捷的使用JS和AJAX這兩個(gè)模塊，而且有些自帶的動(dòng)畫，可以讓你寫網(wǎng)頁更絲滑(jQuery官網(wǎng)：https://jquery.com/)。推薦三本jQuery的書：《jQuery基礎(chǔ)教程》、《鋒利的jQuery》、《jQuery實(shí)戰(zhàn)》

《jQuery基礎(chǔ)教程》是全球第一部jQuery著作,jQuery 官方網(wǎng)站推薦。本書以通俗易懂的方式介紹了jQuery的基本概念，主要包括jQuery的選擇符、事件、特效、DOM操作、AJAX、表格操作、表單函數(shù)、拖曳與旋轉(zhuǎn)和插件等內(nèi)容，最后幾章以實(shí)例操作為主，在前面內(nèi)容的基礎(chǔ)上，提出了常見的客戶端實(shí)際問題并給出了其解決方案。

《鋒利的jQuery》一書循序漸進(jìn)地對(duì)jQuery的各種函數(shù)和方法調(diào)用進(jìn)行了介紹，讀者可以系統(tǒng)地掌握jQuery的選擇器、DOM操作、事件和動(dòng)畫、AJAX應(yīng)用、插件、jQuery Mobile、jQuery各個(gè)版本變化、jQuery性能優(yōu)化和技巧等知識(shí)點(diǎn)，并結(jié)合每個(gè)章節(jié)后面的案例演示進(jìn)行練習(xí)，達(dá)到掌握核心知識(shí)點(diǎn)的目的。

《jQuery實(shí)戰(zhàn)》適用于想深入學(xué)習(xí)jQuery的Web開發(fā)人員。本書深入介紹了整個(gè)jQuery框架，此外還專門深入講解插件編程，以及一些擴(kuò)展開發(fā)工具和框架，比如Bower和QUnit，當(dāng)然還有經(jīng)典的開發(fā)實(shí)戰(zhàn)原則。每個(gè)API方法都使用了簡明扼要的語法塊描述參數(shù)和返回值。

同時(shí)在學(xué)習(xí)知識(shí)學(xué)習(xí)到差不多的情況下，自己可以嘗試指做一些完整的網(wǎng)頁或者仿幾個(gè)知名的網(wǎng)站，注意不要只做一部分，而是要全部都做出來，這樣才能檢測自己的學(xué)習(xí)程度。

對(duì)于自學(xué)時(shí)的方法和經(jīng)驗(yàn)，我分享下自己的經(jīng)驗(yàn)：

1.找一套體系完整的學(xué)習(xí)資料，網(wǎng)上前端的資料有很多，但是不成體系，東一榔頭，西一棒槌的，很多人盲目下載大量的資料來學(xué)習(xí)只會(huì)導(dǎo)致學(xué)習(xí)的知識(shí)不會(huì)形成知識(shí)體系，沒有自己的知識(shí)框架，所以體系完整的學(xué)習(xí)資料可以使學(xué)習(xí)事半功倍。

2.組織一些人一起學(xué)習(xí)，志同道合的人一起學(xué)習(xí)會(huì)更有氣氛，學(xué)習(xí)起來也要比一個(gè)人更有動(dòng)力，大家可以在群里互相分享學(xué)習(xí)經(jīng)驗(yàn)，分享學(xué)習(xí)方法，遇到難題也可以在群里尋求幫助。

3.要定期進(jìn)行項(xiàng)目實(shí)踐，所話說“紙上得來終覺淺，絕知此事要躬行。”只是學(xué)習(xí)知識(shí)不動(dòng)手是不行的，很多企業(yè)在招聘時(shí)都要求有項(xiàng)目經(jīng)驗(yàn)，所以在學(xué)習(xí)到積累到一定程度時(shí)就要進(jìn)行實(shí)踐，在實(shí)踐中找出自己的不足，總結(jié)出經(jīng)驗(yàn)。

通過學(xué)習(xí)以上知識(shí)點(diǎn)你可以很快找到一份工作，不過如果你想更系統(tǒng)的學(xué)習(xí)，那么可以看看這份更具體的學(xué)習(xí)路線哦!

其他后端語言相比，HTML、CSS和JavaScript無論從閱讀角度還是編寫的角度來說都更加容易一點(diǎn)。所以新手在學(xué)習(xí)前端知識(shí)的時(shí)候不必有太大的心理壓力 ，心態(tài)擺正后，大部分人都可以將前端學(xué)好。下面聊聊Html、CSS、JavaScript的最佳學(xué)習(xí)方法，希望可以幫助到各位小白。

首先，需要明確這三門語法的先后學(xué)習(xí)順序，依次是：HTML、CSS、JavaScript。

每門語言與前端都有密不可分的關(guān)系，要成為一名優(yōu)秀的前端工程師，需要三門語言都要掌握得很扎實(shí)，不可有僥幸心理。下面一一來介紹這三門語言一些好的學(xué)習(xí)技巧：

HTML

1）首先專注學(xué)習(xí)的是基本標(biāo)簽的用法，以及它們與語義和Web標(biāo)準(zhǔn)的關(guān)系，這部分學(xué)習(xí)內(nèi)容可以在W3Cschool中找到，如果你有編程基礎(chǔ)，也可以直接看開發(fā)文檔。

2）尋找?guī)讉€(gè)經(jīng)典的網(wǎng)站，學(xué)習(xí)了解它的網(wǎng)絡(luò)通信原理，比如：如何從本地計(jì)算機(jī)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，服務(wù)器如何向計(jì)算器返回信息。這是兩個(gè)客戶端之間進(jìn)行信息交換的重要部分。

3）在完成基本語法以及網(wǎng)絡(luò)通信的相關(guān)知識(shí)后，嘗試制作一個(gè)動(dòng)態(tài)頁面，完成從服務(wù)器操作和獲取內(nèi)容，在這個(gè)過程中了解映像如何從計(jì)算機(jī)發(fā)送信息到服務(wù)器，以及服務(wù)器如何處理這些信息，過程中使用了什么邏輯。對(duì)于這些知識(shí)應(yīng)該牢記在心。

4）完成上面三部之后，你的HTML算是小有所成了，如果還想進(jìn)階，那我推薦你可以將Apache-Web Server等等工具東西集成到IDE中，然后嘗試一些復(fù)雜的Web開發(fā)。

CSS

1）CSS的學(xué)習(xí)是三個(gè)模塊中最容易的，你只需要在設(shè)計(jì)網(wǎng)頁樣式時(shí)，學(xué)會(huì)靈活運(yùn)用CSS指南就足夠了。注意的是在學(xué)習(xí)的過程中學(xué)會(huì)發(fā)散思維，比如在設(shè)計(jì)一個(gè)樣式時(shí)，盡量思考如何使用不同的類和ID實(shí)現(xiàn)這個(gè)樣式。

2）了解如何進(jìn)行各種布局（浮動(dòng) 、內(nèi)聯(lián)塊、flexbox、網(wǎng)格等），以及如何從小模塊到整頁的所有內(nèi)容上實(shí)現(xiàn)這些布局，這是構(gòu)建網(wǎng)站所需的核心。

JavaScript

在學(xué)習(xí)完HTML和CSS后，大家應(yīng)該都了解了如何在不使用JS的情況下，構(gòu)建一個(gè)網(wǎng)站。JS的作用就是解決HTML交互難的問題，在初期，將JS基本語法學(xué)習(xí)好，學(xué)會(huì)自主利用JS來完成一些動(dòng)態(tài)功能，用戶交互（懸停、點(diǎn)擊等）。

完成基本語言使用后，開始學(xué)習(xí)框架，通過Angular、React、Vue等框架構(gòu)建整個(gè)網(wǎng)站。

在自己構(gòu)建網(wǎng)站的過程中，要注意幾個(gè)點(diǎn)：我們編寫JavaScript代碼的原因之一是為了優(yōu)化網(wǎng)頁，不過可以用JS代碼進(jìn)行基本計(jì)算，那就盡量不要進(jìn)行服務(wù)器的交互任務(wù)；編寫網(wǎng)站也要考慮其質(zhì)量，首要的是擁有“可維護(hù)性”，當(dāng)然這對(duì)初學(xué)者來說非常困難，這一點(diǎn)可以在今后的工作中慢慢學(xué)習(xí)。

學(xué)習(xí)不同的技術(shù)（不同的框架），在構(gòu)建網(wǎng)站的過程中使用不同的技術(shù)，比如在react中使用angular在ref里面搞事情，在angular里面使用element上做文章。

以上就是三種前端語言的學(xué)習(xí)技巧，另外還需要注意的是：在這三門語言中，HTML是容錯(cuò)率最高的，即使把標(biāo)簽完全弄亂，瀏覽器仍會(huì)正確顯示其內(nèi)容。CSS容錯(cuò)率次之，但仍然可以接受，比如錯(cuò)過一些分號(hào)，以及語法錯(cuò)誤，大部分情況下網(wǎng)站仍然可以正常顯示。JS容錯(cuò)率最低，一個(gè)分號(hào)，或者語法錯(cuò)誤就會(huì)導(dǎo)致所有JS中斷，有時(shí)候網(wǎng)絡(luò)出現(xiàn)問題，也會(huì)導(dǎo)致JS文件無法按預(yù)期加載。知道其缺點(diǎn)后選取正確的方式進(jìn)行編碼。

還有一些關(guān)于前端學(xué)習(xí)過程中的感悟。在構(gòu)建網(wǎng)站時(shí)，雖然可以隨時(shí)查找文檔，但一些常用的標(biāo)簽、樣式、邏輯代碼、框架功能等等都需要去記憶一下，這樣可以大大提升自己的編碼效率。遇到特定問題時(shí)，學(xué)會(huì)Google，百度尋找?guī)椭皇强偸钦掖罄校蛘叻艞墶＝?jīng)常去一些論壇和博客看看同行的人寫的感悟以及技術(shù)文章，日積月累地汲取對(duì)提升自己非常有幫助。

希望這篇文章可以幫助到每個(gè)學(xué)習(xí)前端的學(xué)員，希望學(xué)習(xí)的過程中一切順利。

啥說“再”呢？

因?yàn)榇_實(shí)是再，之前學(xué)習(xí)過。這個(gè)blog是2009年就開始寫的了。剛開始那會(huì)兒，為了折騰模板，學(xué)習(xí)過一陣子HTML和CSS。

前幾年，為了美化巖土工具箱，又折騰過一陣子。這一回，用了框架，當(dāng)時(shí)用的是bootstrap，美化的效果差強(qiáng)人意。

這兩段之間，其實(shí)還有很多很多次的折騰，不說也罷。

再學(xué)習(xí)的最大感受，就是HTML5比之前的復(fù)雜多了。之前使用bootstrap已經(jīng)領(lǐng)教過其復(fù)雜性，當(dāng)時(shí)還以為是bootstrap帶來的。這一次多花了一點(diǎn)時(shí)間專門看HTML的資料和教程，才發(fā)現(xiàn)是HTML5的鍋，面對(duì)這種復(fù)雜性，前端開發(fā)確實(shí)能當(dāng)?shù)闷稹伴_發(fā)”二字，拿HTML作為主打技能也沒啥說不過去的。

這種復(fù)雜性，就我這種菜鳥來說，都是隨便就能舉幾個(gè)例子出來的。

比如，語義化標(biāo)簽。HTML5之前，是沒有語義化標(biāo)簽這種東西的。有一段時(shí)間，如何使用table搞排版都能算得上奇技淫巧，能駕馭div的都能算是高手了。

再比如，給input加label。之前看bootstrap的教程，沒有深究，以為是bootstrap自身為了實(shí)現(xiàn)一些效果才添加的label。這回看了mozilla的文檔，發(fā)現(xiàn)加label已經(jīng)是HTML的規(guī)范的一部分了，目的似乎是為了配合屏幕閱讀器實(shí)現(xiàn)閱讀功能。屏幕閱讀器是干啥的呢？自然是為那些不方便或者沒辦法觀看屏幕內(nèi)容的人群服務(wù)的，這種功能當(dāng)然是十分有意義的，這一點(diǎn)也是符合www的開放共享的初衷的。