web前端開(kāi)發(fā)看什么書(shū)

HTML、CSS方面比較經(jīng)典的書(shū)是《CSS禪意花園》，但是這本書(shū)出版比較早了（有點(diǎn)老）。當(dāng)前比較推薦的是2021年6月新出版的一本叫做《HTML5布局之路》的書(shū)，書(shū)籍從PC端和移動(dòng)端分別講解了布局的整體思路和方法，和其它書(shū)不太一樣的地方在于，它采用的是非字典式的講述模式，是按照實(shí)戰(zhàn)開(kāi)發(fā)的流程進(jìn)行知識(shí)的拆分和講解。500多頁(yè)，除了基本技術(shù)還有面試真題、開(kāi)發(fā)經(jīng)驗(yàn)的分享。
HTML和CSS學(xué)完之后可以入手，比較經(jīng)典書(shū)籍是犀牛書(shū)（封面是一只犀牛，百度搜“JS 犀?！蹦苁盏剑€有一本是《高級(jí)程序設(shè)計(jì)》（行業(yè)里叫紅皮書(shū)），兩本書(shū)都比較經(jīng)典，涵蓋面比較廣，學(xué)起來(lái)會(huì)比較難一些。JS入門(mén)書(shū)還可以選擇 HeadFirst系列。個(gè)人感覺(jué)HeadFirst系列會(huì)比較容易讀懂，很多抽象概念都比較好的解釋了出來(lái)，我學(xué)習(xí)Ajax方面時(shí)就用的是這個(gè)系列入的門(mén)。

Web前端開(kāi)發(fā)初級(jí)需要學(xué)習(xí)哪些知識(shí)些

Web前端不僅薪資比較高，而且發(fā)展前景也很可觀，越來(lái)越多的年輕人紛紛選擇web前端作為未來(lái)的職業(yè)發(fā)展方向，但是就怎么選擇學(xué)習(xí)方法而言，但是很多都是零基礎(chǔ)來(lái)學(xué)習(xí)web前端的，對(duì)于這個(gè)行業(yè)可能一概不知，該怎么去學(xué)習(xí)呢？什么樣的學(xué)習(xí)方法更適合學(xué)。，那么這份最詳細(xì)的web前端學(xué)習(xí)路線分享給大家。
*階段：前端頁(yè)面重構(gòu)
內(nèi)容包含了：（PC端網(wǎng)站布局項(xiàng)目、HTML+CSS基礎(chǔ)項(xiàng)目、WebApp頁(yè)面布局項(xiàng)目）
第二階段：高級(jí)程序設(shè)計(jì)
內(nèi)容包含：）原生 交互功能開(kāi)發(fā)項(xiàng)目、面向?qū)ο筮M(jìn)階與 ES/ES應(yīng)用項(xiàng)目、工具庫(kù)自主研發(fā)項(xiàng)目）
第三階段：PC端全棧項(xiàng)目開(kāi)發(fā)
內(nèi)容包含：（jQuery經(jīng)典交互特效開(kāi)發(fā)、HTTP協(xié)議、Ajax進(jìn)階與PHP/JAVA開(kāi)發(fā)項(xiàng)目、前端工程化與模塊化應(yīng)用項(xiàng)目、PC端網(wǎng)站開(kāi)發(fā)項(xiàng)目、PC端管理信息系統(tǒng)前端開(kāi)發(fā)項(xiàng)目）
第四階段：移動(dòng)端項(xiàng)目開(kāi)發(fā)
內(nèi)容包含：（Touch端項(xiàng)目、微信場(chǎng)景項(xiàng)目、應(yīng)用 Angular+Ionic開(kāi)發(fā) WebApp項(xiàng)目、應(yīng)用 Vue.js開(kāi)發(fā) WebApp項(xiàng)目、應(yīng)用 React.js開(kāi)發(fā) WebApp項(xiàng)目）
第五階段：混合（Hybrid,）開(kāi)發(fā)
內(nèi)容包含：（微信小程序開(kāi)發(fā)、React Native、各類(lèi)混合應(yīng)用開(kāi)發(fā)）
第六階段：NodeJS全棧開(kāi)發(fā)
內(nèi)容包括：（WebApp后端系統(tǒng)開(kāi)發(fā)、一、NodeJS基礎(chǔ)與NodeJS核心模塊二、Express三、noSQL數(shù)據(jù)庫(kù)）
第七階段：大數(shù)據(jù)可視化
內(nèi)容包含：（大數(shù)據(jù)可視化化基礎(chǔ)與實(shí)戰(zhàn)、一、數(shù)據(jù)可視化入門(mén)、二、D.js詳解、三、其他JS庫(kù)）
對(duì)于想學(xué)習(xí)web前端的同學(xué)來(lái)說(shuō)：首先是自學(xué)，其實(shí)自學(xué)也不是不可以，只要有毅力能堅(jiān)持，自己學(xué)習(xí)是完全沒(méi)有問(wèn)題的，現(xiàn)在有很多同學(xué)也是自己找資料視頻來(lái)學(xué)習(xí)。*技術(shù)也學(xué)的挺牛的，得看個(gè)人興趣和悟性，軟件開(kāi)發(fā)本來(lái)就是一項(xiàng)比較枯燥的工作，如果只是單純的覺(jué)得這項(xiàng)行業(yè)工資高而進(jìn)來(lái)的話，可能學(xué)習(xí)中遇到技術(shù)難題，就會(huì)知難而退了，難以堅(jiān)持下去，而真正愛(ài)這行的會(huì)迎難而上，不解決不罷休，這也是為什么有些能自學(xué)下來(lái)有些卻不行的原因。
如果選擇培訓(xùn)機(jī)構(gòu)的話，對(duì)于沒(méi)有基礎(chǔ)或者毅力堅(jiān)持下去的同學(xué)是比較好的學(xué)習(xí)方式，首先培訓(xùn)機(jī)構(gòu)課程比較完善，沒(méi)有基礎(chǔ)的同學(xué)往往不知道從哪個(gè)方向去學(xué)習(xí)，而培訓(xùn)機(jī)構(gòu)能更好的滿足這部分學(xué)員，一般培訓(xùn)機(jī)構(gòu)的老師都是經(jīng)驗(yàn)比較豐富的，講課的時(shí)候重點(diǎn)和難點(diǎn)會(huì)詳細(xì)講解，及時(shí)解決，這樣學(xué)習(xí)的能保障每個(gè)學(xué)員都能弄懂，而且不用自己苦思冥想找答案。這樣也大大的提升了學(xué)習(xí)的熱情。最重要的是培訓(xùn)機(jī)構(gòu)有階段性的項(xiàng)目練習(xí)，這個(gè)對(duì)于自學(xué)的同學(xué)來(lái)說(shuō)是沒(méi)有的，現(xiàn)在的企業(yè)都是看著每個(gè)求職者的動(dòng)手能力，如果有項(xiàng)目的實(shí)踐操作，在應(yīng)聘中也更有競(jìng)爭(zhēng)力。
其實(shí)不管自學(xué)還是培訓(xùn)機(jī)構(gòu)也好，最重要的是看自己的熱情，還有能不能吃苦和努力，web前端開(kāi)發(fā)確實(shí)是高薪職業(yè)，市場(chǎng)需求也很大，只要你有本事，你就是企業(yè)需求的人才，那么想快速達(dá)到這個(gè)技術(shù)能力，自己該怎么做怎么學(xué)就看你自己的選擇了。

初學(xué)前端有什么推薦的書(shū)籍

一、《Web前端開(kāi)發(fā)*實(shí)踐》

這本書(shū)是前端開(kāi)發(fā)領(lǐng)域的經(jīng)典之作，是一本扎實(shí)前端基本功，規(guī)范我們前端代碼的實(shí)踐性書(shū)籍。本書(shū)主要講解了HTML、CSS、以及移動(dòng)端開(kāi)發(fā)的*實(shí)踐方案，能夠?qū)θ狈α己弥笇?dǎo)的開(kāi)發(fā)者產(chǎn)生很大的幫助。通過(guò)閱讀本書(shū)我們可以掌握如何編寫(xiě)高可讀性、高維護(hù)性、高性能的HTML、CSS以及。

二、《CSS那些事兒》

內(nèi)容介紹：《CSS那些事兒》是2009年電子工業(yè)出版社出版的圖書(shū)，作者是林小志。該書(shū)通過(guò)對(duì)CSS技巧實(shí)例進(jìn)行講解，淺入深地分析了CSS相關(guān)知識(shí)。

通過(guò)頁(yè)面中的文字、圖片、表格、表單等常見(jiàn)元素的處理及各種頁(yè)面布局方式的使用，使讀者能深入了解到如何在頁(yè)面中更好地運(yùn)用CSS布局。尤其是在頁(yè)面布局的部分中，全面分析了多種布局方式，著重分解了兩列等高和三列等高的幾種方式，并相應(yīng)說(shuō)明了等高布局的優(yōu)缺點(diǎn)。

三、《CSS權(quán)威指南》

內(nèi)容介紹：《CSS權(quán)威指南》通過(guò)諸多示例，詳細(xì)講解了如何做到僅在一處建立樣式表就能創(chuàng)建或修改整個(gè)網(wǎng)站的外觀，以及如何得到html力不能及的更豐富的表現(xiàn)效果。同時(shí)展示了如何遵循css*規(guī)范（css2和css2.1）將層疊樣式表的方方面面應(yīng)用于實(shí)踐。

四、《 標(biāo)準(zhǔn)參考教程》阮一峰

內(nèi)容介紹：阮一峰 本書(shū)全面介紹 核心語(yǔ)法，從最簡(jiǎn)單的開(kāi)始講起，循序漸進(jìn)、由淺入深，力求清晰易懂。所有章節(jié)都帶有大量的代碼實(shí)例，便于理解和模仿，可以用到實(shí)際項(xiàng)目中，即學(xué)即用。 本書(shū)適合初學(xué)者當(dāng)作語(yǔ)言的入門(mén)教程，也適合當(dāng)作日常使用的參考手冊(cè)。

五、高級(jí)程序設(shè)計(jì)第三版

內(nèi)容介紹：《全書(shū)從 語(yǔ)言實(shí)現(xiàn)的各個(gè)組成部分——語(yǔ)言核心、DOM、BOM、事件模型講起，深入淺出地探討了面向?qū)ο缶幊獭jax 與Comet 服務(wù)器端通信，HTML5 表單、媒體、Canvas（包括WebGL）及Web Workers、地理定位、跨文檔傳遞消息、客戶端存儲(chǔ)（包括IndexedDB）等新API，還介紹了離線應(yīng)用和與維護(hù)、性能、部署相關(guān)的*開(kāi)發(fā)實(shí)踐。

六、鋒利的jquery

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

七、HTTP權(quán)威指南

內(nèi)容介紹：《HTTP權(quán)威指南》由古爾利所著，《HTTP權(quán)威指南》詳細(xì)解釋了如何用HTTP來(lái)開(kāi)發(fā)基于Web的應(yīng)用程序，核心的[因特網(wǎng)協(xié)議，如何與架構(gòu)構(gòu)建塊交互，如何正確實(shí)現(xiàn)因特網(wǎng)客戶和服務(wù)器等。

《HTTP權(quán)威指南》的中心內(nèi)容是HTTP，本質(zhì)是理解Web的工作原理，以及如何將這些知識(shí)應(yīng)用到Web編程和管理之中，主要涵蓋HTTP的技術(shù)運(yùn)作方式、產(chǎn)生動(dòng)機(jī)、性能和目標(biāo)以及一些相關(guān)技術(shù)問(wèn)題。 《HTTP權(quán)威指南》適合所有想了解HTTP和Web底層結(jié)構(gòu)的人閱讀。

八、高性能網(wǎng)站建設(shè)指南

內(nèi)容介紹：《高性能網(wǎng)站建設(shè)指南》結(jié)合Web2.0以來(lái)Web開(kāi)發(fā)領(lǐng)域的*形勢(shì)和特點(diǎn)，介紹了網(wǎng)站性能問(wèn)題的現(xiàn)狀、產(chǎn)生的原因，以及改善或解決性能問(wèn)題的原則、技術(shù)技巧和*實(shí)踐。重點(diǎn)關(guān)注網(wǎng)頁(yè)的行為特征，闡釋優(yōu)化Ajax、CSS、、Flash和圖片處理等要素的技術(shù)，全面涵蓋瀏覽器端性能問(wèn)題的方方面面。

如何學(xué)習(xí)WEB前端開(kāi)發(fā)

先看視頻入門(mén)，然后看相關(guān)書(shū)籍在鞏固知識(shí)。打印一份HTML CSS 的參考手冊(cè)，這個(gè)要經(jīng)?？矗贾肋@是最基礎(chǔ)的，掌握之后在去學(xué)一下jQuery，也不能說(shuō)算學(xué)，花2個(gè)小時(shí)看一遍教程估計(jì)就懂50%了，剩下的寫(xiě)幾個(gè)項(xiàng)目再熟悉熟悉。然后學(xué)和相關(guān)的技術(shù) 如canvas,這個(gè)就有點(diǎn)考驗(yàn)數(shù)據(jù)結(jié)構(gòu)和算法了，有點(diǎn)熟悉之后再學(xué)一下數(shù)據(jù)結(jié)構(gòu)的知識(shí)。學(xué)會(huì)了這些在繼續(xù)進(jìn)階，然后考慮瀏覽器兼容問(wèn)題等等，然后再學(xué)習(xí)一些CSS預(yù)處理器的知識(shí)如LESS SASS等（掌握一個(gè)就好了），然后還有一些比較重要的js框架，requireJS AngularJS等。?！，F(xiàn)在覺(jué)得其中最難的還是CSS
作者：Kylin Chang

【網(wǎng)絡(luò)學(xué)習(xí)中心】如何用 CSS 隱藏超出顯示寬度的內(nèi)容 -html

提供兩個(gè)方案給你： 1、在頁(yè)面的腳本語(yǔ)言里面用類(lèi)似于left的函數(shù)； 2、找個(gè)js或jq代碼來(lái)實(shí)現(xiàn)，css是需要很大的耐心去調(diào)整謙容性的，而且有一些bug是解決不了的； overflow:hidden;強(qiáng)制居中 width:200px; white-space:nowrap;強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br對(duì)象 text-overflow:ellipsis;這才是超出后用省略代替 下面給個(gè)例子給你

• clip: 直接將溢出的文字裁剪

  測(cè)試用文字測(cè)試用文字測(cè)試用文字測(cè)試用文字測(cè)試用文字測(cè)試用文字

• ellipsis: 將溢出的文字顯示省略標(biāo)記（...）

  測(cè)試用文字測(cè)試用文字測(cè)試用文字測(cè)試用文字測(cè)試用文字測(cè)試用文字

CSS 透明度怎么設(shè)置。 filter:alpha(opacity=10); 我這句話在IE中有效 在其它的瀏覽器中就沒(méi)效（Opera）

css中
filter僅支持ie6以及以上版本，
其余瀏覽器，包括firefox，chrome，opera，Safari都不支持。
要在這些版本設(shè)置透明度，可用opacity屬性，
支持的瀏覽器包括IE 9.0，F(xiàn)irefox，Safari，Chrome，opera。
opacity取值在0到1之間浮動(dòng)
以下是示例代碼

下例是一個(gè)半透明的效果：

北京web前端培訓(xùn)機(jī)構(gòu)，出來(lái)好找工作嗎，需要學(xué)哪些內(nèi)容？

大部分人學(xué)習(xí)一項(xiàng)技術(shù)肯定是以就業(yè)為目標(biāo)，那么學(xué)習(xí)web前端哪些知識(shí)才能找到一份工作？小蝸這里根據(jù)行業(yè)的變化以及企業(yè)的用人需求，整理了一份web前端的學(xué)習(xí)路線，只要掌握了以下內(nèi)容，找到一份工作基本不難。

*階段：專業(yè)核心基礎(chǔ)

階段目標(biāo)：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應(yīng)書(shū)布局、移動(dòng)端開(kāi)發(fā)。

2. 熟練運(yùn)用HTML+CSS特性完成頁(yè)面布局。

4. 熟練應(yīng)用CSS3技術(shù)，動(dòng)畫(huà)、彈性盒模型設(shè)計(jì)。

5. 熟練完成移動(dòng)端頁(yè)面的設(shè)計(jì)。

6. 熟練運(yùn)用所學(xué)知識(shí)仿制任意Web網(wǎng)站。

7. 能綜合運(yùn)用所學(xué)知識(shí)完成網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)。

知識(shí)點(diǎn)：

1、Web前端開(kāi)發(fā)環(huán)境，HTML常用標(biāo)簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運(yùn)用HTML和CSS樣式屬性完成頁(yè)面的布局和美化，能夠仿制任意網(wǎng)站的前端頁(yè)面實(shí)現(xiàn)。

2、CSS3選擇器、偽類(lèi)、過(guò)渡、變換、動(dòng)畫(huà)、字體圖標(biāo)、彈性盒模型、響應(yīng)式布局、移動(dòng)端。熟練運(yùn)用CSS3來(lái)開(kāi)發(fā)網(wǎng)頁(yè)、熟練開(kāi)發(fā)移動(dòng)端，整理網(wǎng)頁(yè)開(kāi)發(fā)技巧。

3、預(yù)編譯css技術(shù)：less、sass基礎(chǔ)知識(shí)、以及插件的運(yùn)用、BootStrap源碼分析。能夠熟練使用 less、sass完成項(xiàng)目開(kāi)發(fā)，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術(shù)完成網(wǎng)頁(yè)項(xiàng)目實(shí)戰(zhàn)。通過(guò)項(xiàng)目掌握*階段html、css的內(nèi)容、完成PC端頁(yè)面設(shè)計(jì)和移動(dòng)端頁(yè)面設(shè)計(jì)。

第二階段：Web后臺(tái)技術(shù)

階段目標(biāo):

1. 了解的發(fā)展歷史、掌握Node環(huán)境搭建及npm使用。

2. 熟練掌握的基本數(shù)據(jù)類(lèi)型和變量的概念。

3. 熟練掌握中的運(yùn)算符使用。

4. 深入理解分之結(jié)構(gòu)語(yǔ)句和循環(huán)語(yǔ)句。

5. 熟練使用數(shù)組來(lái)完成各種練習(xí)。

6.熟悉es6的語(yǔ)法、熟練掌握面向?qū)ο缶幊獭?/p>

7.DOM和BOM實(shí)戰(zhàn)練習(xí)和H5新特性和協(xié)議的學(xué)習(xí)。

知識(shí)點(diǎn)：

1、軟件開(kāi)發(fā)流程、算法、變量、數(shù)據(jù)類(lèi)型、分之語(yǔ)句、循環(huán)語(yǔ)句、數(shù)組和函數(shù)。熟練運(yùn)用的知識(shí)完成各種練習(xí)。

2、面向?qū)ο蠡A(chǔ)、異常處理機(jī)制、常見(jiàn)對(duì)象api，js的兼容性、ES6新特性。熟練掌握面向?qū)ο蟮拈_(kāi)發(fā)以及掌握es6中的重要內(nèi)容。

3、BOM操作和DOM操作。熟練使用BOM的各種對(duì)象、熟練操作DOM的對(duì)象。

4、h5相關(guān)api、canvas、ajax、數(shù)據(jù)模擬、touch事件、mockjs。熟練使用所學(xué)知識(shí)來(lái)完成網(wǎng)站項(xiàng)目開(kāi)發(fā)。

第三階段：數(shù)據(jù)庫(kù)和框架實(shí)戰(zhàn)

階段目標(biāo)：

1. 綜合運(yùn)用Web前端技術(shù)進(jìn)行頁(yè)面布局與美化。

2. 綜合運(yùn)用Web前端開(kāi)發(fā)框架進(jìn)行Web系統(tǒng)開(kāi)發(fā)。

3. 熟練掌握Mysql、Mongodb數(shù)據(jù)庫(kù)的發(fā)開(kāi)。

4. 熟練掌握vue.js、webpack、elementui等前端框技術(shù)。

5. 熟練運(yùn)用Node.js開(kāi)發(fā)后臺(tái)應(yīng)用程序。

6. 對(duì)Restful，Ajax，JSON，開(kāi)發(fā)過(guò)程有深入的理解,掌握git的基本技能。

知識(shí)點(diǎn)：

1、數(shù)據(jù)庫(kù)知識(shí)，范式，MySQL配置，命令，建庫(kù)建表，數(shù)據(jù)的增刪改查，mongodb數(shù)據(jù)庫(kù)。深入理解數(shù)據(jù)庫(kù)管理系統(tǒng)通用知識(shí)及MySQL數(shù)據(jù)庫(kù)的使用與管理，為Node.js后臺(tái)開(kāi)發(fā)打下堅(jiān)實(shí)基礎(chǔ)。

2、模塊系統(tǒng)，函數(shù)，路由，全局對(duì)象，文件系統(tǒng)，請(qǐng)求處理，Web模塊，Express框架，MySQL數(shù)據(jù)庫(kù)處理，，文件上傳等。熟練運(yùn)用Node.js運(yùn)行環(huán)境和后臺(tái)開(kāi)發(fā)框架完成Web系統(tǒng)的后臺(tái)開(kāi)發(fā)。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運(yùn)用Vue.js完成基礎(chǔ)前端開(kāi)發(fā)、熟練運(yùn)用Vue.js框架的高級(jí)功能完成Web前端開(kāi)發(fā)和組件開(kāi)發(fā)，對(duì)MVVM模式有深刻理解。

4、需求分析，數(shù)據(jù)庫(kù)設(shè)計(jì)，后臺(tái)開(kāi)發(fā)，使用vue、node完成pc和移動(dòng)端整站開(kāi)發(fā)。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實(shí)現(xiàn)整站項(xiàng)目完整功能并上線發(fā)布。

第四階段：移動(dòng)端和微信實(shí)戰(zhàn)

階段目標(biāo)：

1.熟練掌握React.js框架，熟練使用React.js完成開(kāi)發(fā)。

2.掌握移動(dòng)端開(kāi)發(fā)原理，理解原生開(kāi)發(fā)和混合開(kāi)發(fā)。

3.熟練使用react-native和Flutter框架完成移動(dòng)端開(kāi)發(fā)。

4.掌握微信小程序以及了解支付寶小程序的開(kāi)發(fā)。

5.完成大型電商項(xiàng)目開(kāi)發(fā)。

知識(shí)點(diǎn)：

1、React面向組件編程、表單數(shù)據(jù)、組件通信、監(jiān)聽(tīng)、聲明周期、路由、Redux基本概念。練使用react完成項(xiàng)目開(kāi)發(fā)、掌握Redux中的異步解決方案Saga。

2、react-native、開(kāi)發(fā)工具、視圖與渲染、api操作、Flutter環(huán)境搭建、路由、ListView組件、網(wǎng)絡(luò)請(qǐng)求、打包。練掌握react-native和Flutter框架，并分別使用react-native和Flutter分別能開(kāi)發(fā)移動(dòng)端項(xiàng)目。

3、微信小程序基本介紹、開(kāi)發(fā)工具、視圖與渲染、api操作、支付寶小程序的入門(mén)和api學(xué)習(xí)。掌握微信小程序開(kāi)發(fā)了解支付寶小程序。

4、大型購(gòu)物網(wǎng)站實(shí)戰(zhàn)，整個(gè)項(xiàng)目前后端分離開(kāi)發(fā)；整個(gè)項(xiàng)目分為四部分：PC端網(wǎng)頁(yè)、移動(dòng)端APP、小程序、后臺(tái)管理。團(tuán)隊(duì)協(xié)作開(kāi)發(fā)，使用git進(jìn)行版本控制。目期間可以擴(kuò)展Three.js 、。

web前端學(xué)習(xí)路線思維導(dǎo)圖

Web前端工程師初級(jí)階段需要掌握的內(nèi)容

今天小編給大家整理出來(lái)了Web前端工程師初級(jí)階段需要掌握的內(nèi)容，很全面，希望大家好好閱讀，看看自己掌握的知識(shí)點(diǎn)和文章里面寫(xiě)的還相差多少。下面來(lái)和小編一起看一看吧！





一、什么是初級(jí)Web前端工程師?


按照我的想法，我把前端工程師分為了入門(mén)、初級(jí)、中級(jí)、高級(jí)這四個(gè)級(jí)別，


入門(mén)級(jí)別指的是了解什么是前端(前端到底是什么其實(shí)很多人還是不清楚的)，了解基本的html、css和語(yǔ)法(這些語(yǔ)方面的東西網(wǎng)上隨便搜一下就有很多很多，基本的語(yǔ)法是整個(gè)技術(shù)體系最重要的東西了，領(lǐng)先的
Web技術(shù)教程)，可以根據(jù)設(shè)計(jì)師的設(shè)計(jì)圖在不考慮兼容性的情況下把頁(yè)面做出來(lái)，了解過(guò)一些框架的使用(例如爛大街但是依然牛逼的jQuery、zepto、
bootstrap等等)。


在經(jīng)歷過(guò)入門(mén)的階段，已經(jīng)了解了前端要做什么，并且把基本的語(yǔ)法學(xué)習(xí)過(guò)了可以獨(dú)立做一些簡(jiǎn)單的頁(yè)面了，那么就要繼續(xù)學(xué)習(xí)達(dá)到初級(jí)前端工程師的水平，對(duì)于初級(jí)的前端工程師需要了解的就特別多了，需要對(duì)整個(gè)前端有一個(gè)清晰的認(rèn)識(shí)，并且熟練使用各種技術(shù)，我感覺(jué)在校的學(xué)生達(dá)到初級(jí)水平就可以通過(guò)bat的校招筆試
面試了。


初級(jí)前端工程師：首先要知道的就是如何處理各種瀏覽器的兼容處理(比如說(shuō)在IE瀏覽器中的有什么不同等等內(nèi)容)，現(xiàn)在基本上每個(gè)公司在招聘的時(shí)候都會(huì)要求熟練html5,
css3,，這個(gè)熟練的意思就是信手拈來(lái)。


在下面會(huì)說(shuō)初級(jí)前端工程師應(yīng)該具體的學(xué)習(xí)哪些知識(shí)，然后就是要了解各種css的預(yù)處理器和后處理器，還有會(huì)使用常見(jiàn)前端的MV*框架(angularjs,
backbone，reactjs等等)并知道這些框架的原理，另外就是要熟練使用nodejs，要會(huì)使用基于node的各種前端構(gòu)建工具
(grunt，gulp等等)，熟練使用github或gitlab，對(duì)模塊化、組件化、工程化、語(yǔ)義化有一個(gè)比較深入的了解，*要知道如何開(kāi)發(fā)移動(dòng)端
的頁(yè)面，如何去優(yōu)化一個(gè)頁(yè)面的性能。


二、初級(jí)Web前端工程師的技術(shù)體系


(一)HTML部分


首先是要掌握一些常用標(biāo)簽的使用和他們的各個(gè)屬性，這些常用的標(biāo)簽我總結(jié)了一下有以下這些：


html：頁(yè)面的根元素。head：頁(yè)面的頭部標(biāo)簽，是所有頭部元素的容器。body：頁(yè)面的主體標(biāo)簽，頁(yè)面展現(xiàn)的內(nèi)容就放置在這里面。title：頁(yè)面的標(biāo)題。meta：位于文檔的頭部，提供頁(yè)面的元信息，包括關(guān)鍵字、描述等等。link：定義文檔與外部資源的關(guān)系，最常用的用途就是引入樣式表。script：腳本標(biāo)簽，可以把js腳本代碼放置在這個(gè)標(biāo)簽內(nèi)，也可以使用這個(gè)標(biāo)簽的src屬性引入一個(gè)外部標(biāo)簽。style：樣式標(biāo)簽，可以把css代碼寫(xiě)在這個(gè)標(biāo)簽中。a：超鏈接，href屬性代表要鏈接到的地方，target屬性代表打開(kāi)方式。img：圖像標(biāo)簽，src屬性表示圖片的位置。form：表單元素，它內(nèi)部的input、select、textarea等標(biāo)簽都是比較重要的。div：定義文檔中的分區(qū)或節(jié)，可以使用div來(lái)進(jìn)行頁(yè)面的布局等操作。另外還有ul、li、p、button、iframe、p、table等標(biāo)簽也很常用，nav、section、article、header、aside、footer等語(yǔ)義化標(biāo)簽也需要了解一下。


除了要了解上面這一些標(biāo)簽之外，還需要對(duì)一些新的HTML5的API有一定的了解：


·audio、video標(biāo)簽。


·Canvas：定義圖形，比如圖表和其他圖像。


·input標(biāo)簽的accept屬性，email、phone、url等類(lèi)型。


·根據(jù)class名來(lái)獲取一個(gè)元素結(jié)點(diǎn)。


·多文件選擇屬性。


·html的import、template


·process標(biāo)簽，WebGL等內(nèi)容。


還有一些要知道的知識(shí)點(diǎn)：


1.
doctype的作用。2.unicode、utf8等編碼的原理和區(qū)別。3.如何進(jìn)行頁(yè)面性能優(yōu)化。4.png、jpg、Webp、gif等圖片格式的不同的優(yōu)勢(shì)。5.HTML行內(nèi)元素與塊級(jí)元素的區(qū)別。6.移動(dòng)Web端開(kāi)發(fā)常用head標(biāo)簽。7.Web語(yǔ)義化。8.瀏覽器中的緩存原理


(二)CSS部分


關(guān)于css這一塊，我的看法就是網(wǎng)上下載一個(gè)chm格式的css的參考手冊(cè)，然后根據(jù)手冊(cè)里面寫(xiě)的一個(gè)個(gè)的都敲一下。


css大體分為下面這幾塊知識(shí)點(diǎn)：


①定位布局


1.position屬性的7個(gè)值(static|relative|absolute|fixed|center|page|
sticky)分別有什么作用和不同?


2.實(shí)現(xiàn)品字形布局或者是三欄布局(左右寬度固定，中間適應(yīng)屏幕)。


3.浮動(dòng)與清除浮動(dòng)的方法，flex布局，grid布局。


②盒子模型


1.margin、padding、border這三個(gè)屬性。


2.伸縮盒相關(guān)內(nèi)容。


3.Multi-多列布局模型。


③文本字體


1.強(qiáng)制換行與不換行，清除空白。


2.文本對(duì)齊、大小(如何設(shè)置chrome小于12px的字體)、縮進(jìn)、轉(zhuǎn)換。


3.單位(em、rem、px等)，顏色(rgb、rgba，hls)。


④變換、過(guò)渡和動(dòng)畫(huà)


1.transform的各種取值的作用與兼容性。


2.過(guò)渡的動(dòng)畫(huà)類(lèi)型，貝塞爾曲線的原理。


3.animation動(dòng)畫(huà)的各種設(shè)置，@keyframes規(guī)則。


4.瀏覽器的重繪與重排。


⑤選擇器


1.選擇器的分類(lèi)，權(quán)值和優(yōu)先級(jí)。


2.有哪些屬性可以被繼承，哪些屬性沒(méi)法繼承。


3.偽類(lèi)和偽元素分別是什么，有什么作用。


上面這些都是基礎(chǔ)的東西，除了這些基礎(chǔ)的內(nèi)容之外需要了解Less、Sass、stylus等css預(yù)處理器，這將會(huì)大幅度提升你的css開(kāi)發(fā)效率，也需要了解一下、PostCSS等css后處理器。


(三)部分


在這里就不說(shuō)js的基礎(chǔ)知識(shí)了，我把js按照語(yǔ)法的層次和使用的層次分為了兩大塊。


按照語(yǔ)法的層次來(lái)說(shuō)：


首先是的面向?qū)ο蠓矫娴膬?nèi)容：在中實(shí)現(xiàn)封裝、繼承和多態(tài)。


①封裝：在js中可以通過(guò)閉包、作用域和作用域鏈來(lái)實(shí)現(xiàn)封裝，ES6的const、let的作用。②
繼承：基于原型鏈的繼承、基于構(gòu)造函數(shù)的繼承、組合式繼承、寄生式繼承等，外加ES6的class關(guān)鍵字，prototype和__proto__。③
多態(tài)：在中多態(tài)是使用arguments來(lái)實(shí)現(xiàn)的，關(guān)于arguments會(huì)引申出來(lái)很多內(nèi)容：1.arguments的caller、callee等方法的作用。2.方法的apply和call的作用和不同。3.使用Array.prototype.slice.call來(lái)把一個(gè)數(shù)組對(duì)象轉(zhuǎn)化為數(shù)組。4.array的各種方法，如shift、splice、push、filter、map、reduce、forEach等等。


然后是Js的設(shè)計(jì)模式，比如說(shuō)那三種工廠模式啊，建造者模式啊等等。


*是在不同情況下的this分別都代表什么。


按照使用的層次來(lái)說(shuō)：


首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、、Websocket、服務(wù)器代理等等。


然后是tcp協(xié)議、udt協(xié)議以及http協(xié)議的協(xié)議頭、狀態(tài)碼等內(nèi)容。瀏覽器的緩存，客戶端存儲(chǔ)方面的內(nèi)容：、、indexDB、cookie等等。


*是一些新的js的API，例如文件讀取()、fetch、Promise、Web
Sockets等等內(nèi)容，可以去caniuse上面看一下有哪些新的東西。


上面我所說(shuō)的這些只是一些比較籠統(tǒng)的概念，把前端html、css和所需要掌握的部分內(nèi)容列舉了一下，在前端領(lǐng)域還有很多需要我們知道的知識(shí)，這需要大家在學(xué)習(xí)工作的過(guò)程中去自己總結(jié)。


以上就是小編今天為大家分享的關(guān)于Web前端工程師初級(jí)階段需要掌握的內(nèi)容的文章，希望本篇文章能夠?qū)φ趶氖耊eb前端工作的小伙伴們有所幫助，想要了解更多Web前端相關(guān)知識(shí)記得關(guān)注北大青鳥(niǎo)Web培訓(xùn)官網(wǎng)。*祝愿小伙伴們工作順利！

前端必看的書(shū)籍

了解更多的前段知識(shí)請(qǐng)看下面我精心為您整理的前端必看的書(shū)籍，希望您喜歡!

十本學(xué)習(xí)前端必看書(shū)籍

*本，入門(mén)

《Head first HTML&CSS》

*的入門(mén)書(shū)?？磧杀榫蛯?duì)HTML & CSS 有個(gè)大概印象了。

此時(shí)把w3cschool作為備查手冊(cè)收藏起來(lái)

第二本《CSS權(quán)威指南(第三版)》

最權(quán)威的CSS書(shū)籍，除了閱讀W3C的文檔外的不二選擇(就是翻譯有點(diǎn)操蛋，遇到感到難理解的地方可能還是要求助于網(wǎng)絡(luò)資源)。有時(shí)間(無(wú)論是現(xiàn)在還是將來(lái))可以反復(fù)看，并當(dāng)做字典隨時(shí)查。

第三本《精通CSS》

廣受前輩推薦的一本書(shū)。上一本書(shū)是字典的話，這本書(shū)相當(dāng)于《中學(xué)生作文大全》，匯集了一些CSS的*實(shí)踐。

第四本《圖解CSS3：核心技術(shù)與案例實(shí)踐》

這本書(shū)比較新，講解的是*的CSS3(前三本書(shū)停留在CSS2.1時(shí)代)，CSS3也是必學(xué)的，不是什么可學(xué)可不學(xué)的*技術(shù)。

HTML CSS值得看的書(shū)就這些(之后會(huì)有一本《CSS秘密花園》，尚在翻譯中，也很值得期待)，剩下的就是自己寫(xiě)還有看技術(shù)博客了。接下來(lái)是，HTML和CSS都是沒(méi)有邏輯的標(biāo)記型語(yǔ)言，JS才是真正的編程語(yǔ)言，評(píng)價(jià)前端工程師的水平就看這個(gè)了。

第五本《 DOM編程藝術(shù)》

*的JS入門(mén)書(shū)籍，一目了然地告訴你如何用JS操作DOM(這是瀏覽器端編程的基本功)，還灌輸了*標(biāo)準(zhǔn)的編程理念。可惜有點(diǎn)老，*一版是2010年的，以至于部分內(nèi)容有點(diǎn)過(guò)期，例如本書(shū)內(nèi)經(jīng)常提到“某某方法瀏覽器不一定支持，需要小心使用”，而這些歷史遺留問(wèn)題當(dāng)今已經(jīng)不存在了，閱讀過(guò)程中無(wú)視就好。

第六本《高級(jí)程序設(shè)計(jì)》

每個(gè)前端必看的書(shū)，此書(shū)是前端工程師科技樹(shù)的關(guān)鍵一環(huán)。看完此書(shū)后再看看之后各類(lèi)進(jìn)階書(shū)籍會(huì)比較好。

俗稱紅寶書(shū)，也算入門(mén)書(shū)籍，雖然是大部頭(七百多頁(yè))，但至少通讀一遍。

全部掌握了，你可以在網(wǎng)絡(luò)社區(qū)里談笑風(fēng)生了，經(jīng)過(guò)實(shí)踐的鍛煉后，面試個(gè)前端工程師的崗位應(yīng)該都沒(méi)問(wèn)題了。

第七本《語(yǔ)言精粹》

也是前端必看。薄薄一百來(lái)頁(yè)，對(duì)JS的去粗取精。

第八本《你不知道的》

這是一套叢書(shū)， 目前為止僅翻譯了*卷。每本都挺薄，深入介紹了JS中的重要概念。

第九本《設(shè)計(jì)模式》

“設(shè)計(jì)模式”是軟件工程的重要課題，相當(dāng)于高考時(shí)候的答題套路。前人總結(jié)出來(lái)的應(yīng)對(duì)各種問(wèn)題的模板。也算是必看書(shū)籍。關(guān)于設(shè)計(jì)模式的書(shū)籍目前也有好幾本，也有國(guó)人寫(xiě)的，挑一兩本看看就好。

第十本《高性能網(wǎng)站建設(shè)指南》(及其續(xù)篇《高性能網(wǎng)站進(jìn)階》)

告訴你真正的商業(yè)公司的前端是怎么優(yōu)化一個(gè)網(wǎng)站的。當(dāng)然優(yōu)化的問(wèn)題不是看看書(shū)就能解決的，*時(shí)刻了解你的同行們的經(jīng)驗(yàn)。

*階段：HTML和CSS的學(xué)習(xí)

HTML就不多說(shuō)了，基礎(chǔ)中的基礎(chǔ)，這個(gè)都不會(huì)的小伙伴請(qǐng)參見(jiàn)HTML手冊(cè)，認(rèn)真學(xué)習(xí)W3C課程，稍有基礎(chǔ)之后可以跟著視頻學(xué)習(xí)《HTML+CSS基礎(chǔ)課程》。

　 　前端開(kāi)發(fā)必看的14本書(shū)

1、《CSS權(quán)威指南》第三版

這本書(shū)實(shí)在太適合小白用戶了，是一本為初學(xué)者清掃障礙的書(shū)籍。同行一致認(rèn)為這本書(shū)是學(xué)習(xí)CSS基礎(chǔ)的*。CSS界權(quán)威Meyer大師的作品，翻譯水平也灰常贊!

2、《CSS那些事兒》

不用于一般技術(shù)類(lèi)書(shū)籍的枯燥乏味，這本書(shū)很有意思。作者是藍(lán)色理想經(jīng)典論壇標(biāo)準(zhǔn)版榮譽(yù)版主林小志，具有多年網(wǎng)站設(shè)計(jì)和網(wǎng)站重構(gòu)經(jīng)驗(yàn)，在CSS、XHTML等前臺(tái)技術(shù)方面有著深厚功底。

全書(shū)以傳達(dá)CSS布局思維為中心，通過(guò)頁(yè)面中的文字、圖片、表格、表單等常見(jiàn)元素的處理及各種頁(yè)面布局方式的使用，使讀者能深入了解到如何在頁(yè)面中更好地運(yùn)用CSS布局。閱讀本書(shū)之后將會(huì)發(fā)現(xiàn)，原來(lái)CSS樣式居然是這么好玩的東西。

3、《精通CSS：高級(jí)Web標(biāo)準(zhǔn)解決方案》第二版

前段學(xué)習(xí)必備書(shū)籍，作者Andy Budd是國(guó)際頂尖的網(wǎng)頁(yè)設(shè)計(jì)師，著名的Web標(biāo)準(zhǔn)倡導(dǎo)者，網(wǎng)頁(yè)咨詢公司Clearleft的創(chuàng)始人之一。

本書(shū)將最有用的CSS技術(shù)匯總在一起，總結(jié)了CSS設(shè)計(jì)中的*實(shí)踐，討論了解決各種實(shí)際問(wèn)題的技術(shù)，重點(diǎn)講解了一系列的css開(kāi)發(fā)技巧，是前端開(kāi)發(fā)人員必備的手冊(cè)。

4、《CSS禪意花園》

這是一本令人驚嘆的書(shū)!必須用一個(gè)字形容的話，那就是：美!內(nèi)容編排合理,文字生動(dòng)有趣引人入勝,通過(guò)一個(gè)個(gè)實(shí)例引導(dǎo)讀者閱讀，強(qiáng)烈推薦!

作者是世界著名的網(wǎng)站設(shè)計(jì)師，書(shū)中的范例來(lái)自網(wǎng)站設(shè)計(jì)領(lǐng)域最著名的網(wǎng)站——CSS Zen Garden(CSS禪意花園)。童鞋們自己去領(lǐng)略吧。

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

的書(shū)籍當(dāng)然還是要看老外的，你懂得~

5、《編程藝術(shù)》

此書(shū)絕對(duì)是入門(mén)好書(shū)，簡(jiǎn)潔優(yōu)美的文筆簡(jiǎn)直是工具書(shū)中的典范啊有木有!

這本書(shū)講述了和DOM的基礎(chǔ)知識(shí)，但重點(diǎn)放在DOM編程技術(shù)背后的思路和原則，然后將這些概念貫穿在書(shū)中的所有代碼示例中，使你看到用來(lái)創(chuàng)建圖片庫(kù)頁(yè)面的腳本、用來(lái)創(chuàng)建動(dòng)畫(huà)效果的腳本和用來(lái)豐富頁(yè)面元素呈現(xiàn)效果的腳本，*結(jié)合所講述的內(nèi)容創(chuàng)建了一個(gè)實(shí)際的網(wǎng)站。

6、《權(quán)威指南》第6版

這本書(shū)非常適合初級(jí)、中級(jí)程序員，是學(xué)習(xí)核心語(yǔ)言和由Web瀏覽器定義的 API的指南和綜合參考手冊(cè)。

第6版涵蓋HTML 5和 5。很多章節(jié)完全重寫(xiě)，緊跟當(dāng)今*Web開(kāi)發(fā)實(shí)踐。本書(shū)新增章節(jié)描述了jQuery和服務(wù)器端。

7、《高級(jí)程序設(shè)計(jì)》第三版

《權(quán)威指南》比較像一本字典，而這本《高級(jí)程序設(shè)計(jì)》可以算是一本由淺入深的好讀物。這兩本書(shū)看完后，對(duì)一定會(huì)有較為深入的了解。

作者Nicholas C. Zakas是世界頂級(jí)Web技術(shù)專家，現(xiàn)為雅虎公司界面呈現(xiàn)架構(gòu)師，負(fù)責(zé)My Yahoo!和雅虎首頁(yè)等大訪問(wèn)量站點(diǎn)的設(shè)計(jì)。這本書(shū)，看一遍不能算看過(guò)，至少讀兩三遍，每一遍都會(huì)讓你有新的收獲。

8、《高性能》

本書(shū)從性能角度全面分析js，含金量非常大，很多知識(shí)都是作者通過(guò)實(shí)踐總結(jié)出來(lái)的，都是經(jīng)驗(yàn)的積累，強(qiáng)烈推薦!

同是Nicholas C. Zakas所寫(xiě)，如果看《JS高級(jí)程序設(shè)計(jì)》覺(jué)得理解不太透徹，學(xué)習(xí)較為吃力，那么我強(qiáng)烈建議你看看這本書(shū)，真的是極好的一本實(shí)踐類(lèi)書(shū)籍，言簡(jiǎn)意賅，灰常實(shí)用!

9、《王者歸來(lái)》

這本《王者歸來(lái)》不僅是一本傳播知識(shí)的書(shū)，更是一本求道的書(shū)。O(∩_∩)O 有追求的程序員一定不要錯(cuò)過(guò)!愿神力與你同在!

它揭開(kāi)了的面紗，繞過(guò)誤解和虛幻的表象，引領(lǐng)你探索程序王國(guó)的奧妙。這是一本探尋程序設(shè)計(jì)思想本源的“魔法典籍”，也是一本W(wǎng)eb開(kāi)發(fā)工程師們需要的案頭參考書(shū)。

10、《模式》

它絕對(duì)不是一本入門(mén)級(jí)別的書(shū)，適用于希望將自身的技巧提高到一個(gè)新層次的專業(yè)的開(kāi)發(fā)人員和程序員。

《模式》包含了實(shí)現(xiàn)每個(gè)討論的模式的實(shí)踐建議，并附有數(shù)個(gè)可以立即上手的范例;同時(shí)還可以學(xué)到一些反模式。短小精悍，進(jìn)階必讀!

11、《設(shè)計(jì)模式》

進(jìn)階教程，得有一定功底才能看懂。反之，如果你輕而易舉就能拿下此書(shū)，說(shuō)明你已非等閑之輩~

本書(shū)共有兩部分。*部分給出了實(shí)現(xiàn)具體設(shè)計(jì)模式所需要的面向?qū)ο筇匦缘幕A(chǔ)知識(shí)，第二部分則專注于各種具體的設(shè)計(jì)模式及其在語(yǔ)言中的應(yīng)用，主要介紹了工廠模式、橋接模式、組合模式、門(mén)面模式等幾種常見(jiàn)的模式。

第三階段——jQUery的學(xué)習(xí)

12、《鋒利的jQuery》第二版

入門(mén)*，簡(jiǎn)單易懂，非常實(shí)在?！朵h利的jQuery(第2版)》循序漸進(jìn)地對(duì)jQuery的各種函數(shù)和方法調(diào)用進(jìn)行了介紹，對(duì)jQuery分析的邏輯非常值得學(xué)習(xí)。

第四階段—學(xué)無(wú)止境!

如果以上書(shū)籍你全都搞定了，那么，恭喜你，你真的很厲害!到這種程度，相信你也不太需要?jiǎng)e人推薦書(shū)籍了，不過(guò)我還是厚著臉皮推薦兩本吧。

13、《高性能網(wǎng)站建設(shè)指南》

前端開(kāi)發(fā)可以優(yōu)化網(wǎng)站剩余70%~80%性能，這本書(shū)不算厚，幾個(gè)小時(shí)就能看完，推薦前端開(kāi)發(fā)工程師看看。在《高性能網(wǎng)站建設(shè)指南》中，作者給出了14條具體的優(yōu)化原則，每一條原則都配以范例佐證，并提供了在線支持。

14、《Web開(kāi)發(fā)敏捷之道》第二版

Web開(kāi)發(fā)敏捷之道》曾榮獲Jolt大獎(jiǎng)“*技術(shù)圖書(shū)”獎(jiǎng)。在第1版的內(nèi)容架構(gòu)基礎(chǔ)上，第2版增加了對(duì)Rails 1.2中新特性和*實(shí)踐的介紹。此書(shū)覆蓋了rails1.2的方方面面，其本身也很"敏捷"，翻譯也非常好。