web前端開(kāi)發(fā)看什么書(shū)
HTML、CSS方面比較經(jīng)典的書(shū)是《CSS禪意花園》，但是這本書(shū)出版比較早了（有點(diǎn)老）。當前比較推薦的是2021年6月新出版的一本叫做《HTML5布局之路》的書(shū)，書(shū)籍從PC端和移動(dòng)端分別講解了布局的整體思路和方法，和其它書(shū)不太一樣的地方在于，它采用的是非字典式的講述模式，是按照實(shí)戰開(kāi)發(fā)的流程進(jìn)行知識的拆分和講解。500多頁(yè)，除了基本技術(shù)還有面試真題、開(kāi)發(fā)經(jīng)驗的分享。HTML和CSS學(xué)完之后可以入手，比較經(jīng)典書(shū)籍是犀牛書(shū)（封面是一只犀牛，百度搜“JS 犀?！蹦苁盏剑?，還有一本是《高級程序設計》（行業(yè)里叫紅皮書(shū)），兩本書(shū)都比較經(jīng)典，涵蓋面比較廣，學(xué)起來(lái)會(huì )比較難一些。JS入門(mén)書(shū)還可以選擇 HeadFirst系列。個(gè)人感覺(jué)HeadFirst系列會(huì )比較容易讀懂，很多抽象概念都比較好的解釋了出來(lái)，我學(xué)習Ajax方面時(shí)就用的是這個(gè)系列入的門(mén)。
Web前端開(kāi)發(fā)初級需要學(xué)習哪些知識些
Web前端不僅薪資比較高，而且發(fā)展前景也很可觀(guān)，越來(lái)越多的年輕人紛紛選擇web前端作為未來(lái)的職業(yè)發(fā)展方向，但是就怎么選擇學(xué)習方法而言，但是很多都是零基礎來(lái)學(xué)習web前端的，對于這個(gè)行業(yè)可能一概不知，該怎么去學(xué)習呢？什么樣的學(xué)習方法更適合學(xué)。，那么這份最詳細的web前端學(xué)習路線(xiàn)分享給大家。*階段：前端頁(yè)面重構
內容包含了：（PC端網(wǎng)站布局項目、HTML+CSS基礎項目、WebApp頁(yè)面布局項目）
第二階段：高級程序設計
內容包含：）原生 交互功能開(kāi)發(fā)項目、面向對象進(jìn)階與 ES/ES應用項目、工具庫自主研發(fā)項目）
第三階段：PC端全棧項目開(kāi)發(fā)
內容包含：（jQuery經(jīng)典交互特效開(kāi)發(fā)、HTTP協(xié)議、Ajax進(jìn)階與PHP/JAVA開(kāi)發(fā)項目、前端工程化與模塊化應用項目、PC端網(wǎng)站開(kāi)發(fā)項目、PC端管理信息系統前端開(kāi)發(fā)項目）
第四階段：移動(dòng)端項目開(kāi)發(fā)
內容包含：（Touch端項目、微信場(chǎng)景項目、應用 Angular+Ionic開(kāi)發(fā) WebApp項目、應用 Vue.js開(kāi)發(fā) WebApp項目、應用 React.js開(kāi)發(fā) WebApp項目）
第五階段：混合（Hybrid,）開(kāi)發(fā)
內容包含：（微信小程序開(kāi)發(fā)、React Native、各類(lèi)混合應用開(kāi)發(fā)）
第六階段：NodeJS全棧開(kāi)發(fā)
內容包括：（WebApp后端系統開(kāi)發(fā)、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL數據庫）
第七階段：大數據可視化
內容包含：（大數據可視化化基礎與實(shí)戰、一、數據可視化入門(mén)、二、D.js詳解、三、其他JS庫）
對于想學(xué)習web前端的同學(xué)來(lái)說(shuō)：首先是自學(xué)，其實(shí)自學(xué)也不是不可以，只要有毅力能堅持，自己學(xué)習是完全沒(méi)有問(wèn)題的，現在有很多同學(xué)也是自己找資料視頻來(lái)學(xué)習。*技術(shù)也學(xué)的挺牛的，得看個(gè)人興趣和悟性，軟件開(kāi)發(fā)本來(lái)就是一項比較枯燥的工作，如果只是單純的覺(jué)得這項行業(yè)工資高而進(jìn)來(lái)的話(huà)，可能學(xué)習中遇到技術(shù)難題，就會(huì )知難而退了，難以堅持下去，而真正愛(ài)這行的會(huì )迎難而上，不解決不罷休，這也是為什么有些能自學(xué)下來(lái)有些卻不行的原因。
如果選擇培訓機構的話(huà)，對于沒(méi)有基礎或者毅力堅持下去的同學(xué)是比較好的學(xué)習方式，首先培訓機構課程比較完善，沒(méi)有基礎的同學(xué)往往不知道從哪個(gè)方向去學(xué)習，而培訓機構能更好的滿(mǎn)足這部分學(xué)員，一般培訓機構的老師都是經(jīng)驗比較豐富的，講課的時(shí)候重點(diǎn)和難點(diǎn)會(huì )詳細講解，及時(shí)解決，這樣學(xué)習的能保障每個(gè)學(xué)員都能弄懂，而且不用自己苦思冥想找答案。這樣也大大的提升了學(xué)習的熱情。最重要的是培訓機構有階段性的項目練習，這個(gè)對于自學(xué)的同學(xué)來(lái)說(shuō)是沒(méi)有的，現在的企業(yè)都是看著(zhù)每個(gè)求職者的動(dòng)手能力，如果有項目的實(shí)踐操作，在應聘中也更有競爭力。
其實(shí)不管自學(xué)還是培訓機構也好，最重要的是看自己的熱情，還有能不能吃苦和努力，web前端開(kāi)發(fā)確實(shí)是高薪職業(yè)，市場(chǎng)需求也很大，只要你有本事，你就是企業(yè)需求的人才，那么想快速達到這個(gè)技術(shù)能力，自己該怎么做怎么學(xué)就看你自己的選擇了。
初學(xué)前端有什么推薦的書(shū)籍
一、《Web前端開(kāi)發(fā)*實(shí)踐》
這本書(shū)是前端開(kāi)發(fā)領(lǐng)域的經(jīng)典之作，是一本扎實(shí)前端基本功，規范我們前端代碼的實(shí)踐性書(shū)籍。本書(shū)主要講解了HTML、CSS、以及移動(dòng)端開(kāi)發(fā)的*實(shí)踐方案，能夠對缺乏良好指導的開(kāi)發(fā)者產(chǎn)生很大的幫助。通過(guò)閱讀本書(shū)我們可以掌握如何編寫(xiě)高可讀性、高維護性、高性能的HTML、CSS以及。
二、《CSS那些事兒》
內容介紹：《CSS那些事兒》是2009年電子工業(yè)出版社出版的圖書(shū)，作者是林小志。該書(shū)通過(guò)對CSS技巧實(shí)例進(jìn)行講解，淺入深地分析了CSS相關(guān)知識。
通過(guò)頁(yè)面中的文字、圖片、表格、表單等常見(jiàn)元素的處理及各種頁(yè)面布局方式的使用，使讀者能深入了解到如何在頁(yè)面中更好地運用CSS布局。尤其是在頁(yè)面布局的部分中，全面分析了多種布局方式，著(zhù)重分解了兩列等高和三列等高的幾種方式，并相應說(shuō)明了等高布局的優(yōu)缺點(diǎn)。
三、《CSS權威指南》
內容介紹：《CSS權威指南》通過(guò)諸多示例，詳細講解了如何做到僅在一處建立樣式表就能創(chuàng )建或修改整個(gè)網(wǎng)站的外觀(guān)，以及如何得到html力不能及的更豐富的表現效果。同時(shí)展示了如何遵循css*規范（css2和css2.1）將層疊樣式表的方方面面應用于實(shí)踐。
四、《 標準參考教程》阮一峰
內容介紹：阮一峰 本書(shū)全面介紹 核心語(yǔ)法，從最簡(jiǎn)單的開(kāi)始講起，循序漸進(jìn)、由淺入深，力求清晰易懂。所有章節都帶有大量的代碼實(shí)例，便于理解和模仿，可以用到實(shí)際項目中，即學(xué)即用。 本書(shū)適合初學(xué)者當作語(yǔ)言的入門(mén)教程，也適合當作日常使用的參考手冊。
五、高級程序設計第三版
內容介紹：《全書(shū)從 語(yǔ)言實(shí)現的各個(gè)組成部分——語(yǔ)言核心、DOM、BOM、事件模型講起，深入淺出地探討了面向對象編程、Ajax 與Comet 服務(wù)器端通信，HTML5 表單、媒體、Canvas（包括WebGL）及Web Workers、地理定位、跨文檔傳遞消息、客戶(hù)端存儲（包括IndexedDB）等新API，還介紹了離線(xiàn)應用和與維護、性能、部署相關(guān)的*開(kāi)發(fā)實(shí)踐。
六、鋒利的jquery
內容介紹：《鋒利的jQuery(第2版)》循序漸進(jìn)地對jQuery的各種函數和方法調用進(jìn)行了介紹，讀者可以系統地掌握jQuery的選擇器、DOM操作、事件和動(dòng)畫(huà)、AJAX應用、插件、jQuery Mobile、jQuery各個(gè)版本變化、jQuery性能優(yōu)化和技巧等知識點(diǎn)，并結合每個(gè)章節后面的案例演示進(jìn)行練習，達到掌握核心知識點(diǎn)的目的。
七、HTTP權威指南
內容介紹：《HTTP權威指南》由古爾利所著(zhù)，《HTTP權威指南》詳細解釋了如何用HTTP來(lái)開(kāi)發(fā)基于Web的應用程序，核心的[因特網(wǎng)協(xié)議，如何與架構構建塊交互，如何正確實(shí)現因特網(wǎng)客戶(hù)和服務(wù)器等。
《HTTP權威指南》的中心內容是HTTP，本質(zhì)是理解Web的工作原理，以及如何將這些知識應用到Web編程和管理之中，主要涵蓋HTTP的技術(shù)運作方式、產(chǎn)生動(dòng)機、性能和目標以及一些相關(guān)技術(shù)問(wèn)題。 《HTTP權威指南》適合所有想了解HTTP和Web底層結構的人閱讀。
八、高性能網(wǎng)站建設指南
內容介紹：《高性能網(wǎng)站建設指南》結合Web2.0以來(lái)Web開(kāi)發(fā)領(lǐng)域的*形勢和特點(diǎn)，介紹了網(wǎng)站性能問(wèn)題的現狀、產(chǎn)生的原因，以及改善或解決性能問(wèn)題的原則、技術(shù)技巧和*實(shí)踐。重點(diǎn)關(guān)注網(wǎng)頁(yè)的行為特征，闡釋優(yōu)化Ajax、CSS、、Flash和圖片處理等要素的技術(shù)，全面涵蓋瀏覽器端性能問(wèn)題的方方面面。
如何學(xué)習WEB前端開(kāi)發(fā)
先看視頻入門(mén)，然后看相關(guān)書(shū)籍在鞏固知識。打印一份HTML CSS 的參考手冊，這個(gè)要經(jīng)?？?，都知道這是最基礎的，掌握之后在去學(xué)一下jQuery，也不能說(shuō)算學(xué)，花2個(gè)小時(shí)看一遍教程估計就懂50%了，剩下的寫(xiě)幾個(gè)項目再熟悉熟悉。然后學(xué)和相關(guān)的技術(shù) 如canvas,這個(gè)就有點(diǎn)考驗數據結構和算法了，有點(diǎn)熟悉之后再學(xué)一下數據結構的知識。學(xué)會(huì )了這些在繼續進(jìn)階，然后考慮瀏覽器兼容問(wèn)題等等，然后再學(xué)習一些CSS預處理器的知識如LESS SASS等（掌握一個(gè)就好了），然后還有一些比較重要的js框架，requireJS AngularJS等。?！，F在覺(jué)得其中最難的還是CSS作者：Kylin Chang
【網(wǎng)絡(luò )學(xué)習中心】如何用 CSS 隱藏超出顯示寬度的內容 -html
提供兩個(gè)方案給你： 1、在頁(yè)面的腳本語(yǔ)言里面用類(lèi)似于left的函數； 2、找個(gè)js或jq代碼來(lái)實(shí)現，css是需要很大的耐心去調整謙容性的，而且有一些bug是解決不了的； overflow:hidden;強制居中 width:200px; white-space:nowrap;強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象 text-overflow:ellipsis;這才是超出后用省略代替 下面給個(gè)例子給你- clip: 直接將溢出的文字裁剪
測試用文字測試用文字測試用文字測試用文字測試用文字測試用文字
- ellipsis: 將溢出的文字顯示省略標記（...）
測試用文字測試用文字測試用文字測試用文字測試用文字測試用文字
CSS 透明度怎么設置。 filter:alpha(opacity=10); 我這句話(huà)在IE中有效 在其它的瀏覽器中就沒(méi)效（Opera）
css中filter僅支持ie6以及以上版本，
其余瀏覽器，包括firefox，chrome，opera，Safari都不支持。
要在這些版本設置透明度，可用opacity屬性，
支持的瀏覽器包括IE 9.0，Firefox，Safari，Chrome，opera。
opacity取值在0到1之間浮動(dòng)
以下是示例代碼
下例是一個(gè)半透明的效果：
北京web前端培訓機構，出來(lái)好找工作嗎，需要學(xué)哪些內容？
大部分人學(xué)習一項技術(shù)肯定是以就業(yè)為目標，那么學(xué)習web前端哪些知識才能找到一份工作？小蝸這里根據行業(yè)的變化以及企業(yè)的用人需求，整理了一份web前端的學(xué)習路線(xiàn)，只要掌握了以下內容，找到一份工作基本不難。
*階段：專(zhuān)業(yè)核心基礎
階段目標：
1. 熟練掌握HTML5、CSS3、Less、Sass、響應書(shū)布局、移動(dòng)端開(kāi)發(fā)。
2. 熟練運用HTML+CSS特性完成頁(yè)面布局。
4. 熟練應用CSS3技術(shù)，動(dòng)畫(huà)、彈性盒模型設計。
5. 熟練完成移動(dòng)端頁(yè)面的設計。
6. 熟練運用所學(xué)知識仿制任意Web網(wǎng)站。
7. 能綜合運用所學(xué)知識完成網(wǎng)頁(yè)設計實(shí)戰。
知識點(diǎn)：
1、Web前端開(kāi)發(fā)環(huán)境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁(yè)面的布局和美化，能夠仿制任意網(wǎng)站的前端頁(yè)面實(shí)現。
2、CSS3選擇器、偽類(lèi)、過(guò)渡、變換、動(dòng)畫(huà)、字體圖標、彈性盒模型、響應式布局、移動(dòng)端。熟練運用CSS3來(lái)開(kāi)發(fā)網(wǎng)頁(yè)、熟練開(kāi)發(fā)移動(dòng)端，整理網(wǎng)頁(yè)開(kāi)發(fā)技巧。
3、預編譯css技術(shù)：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開(kāi)發(fā)，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技術(shù)完成網(wǎng)頁(yè)項目實(shí)戰。通過(guò)項目掌握*階段html、css的內容、完成PC端頁(yè)面設計和移動(dòng)端頁(yè)面設計。
第二階段：Web后臺技術(shù)
階段目標:
1. 了解的發(fā)展歷史、掌握Node環(huán)境搭建及npm使用。
2. 熟練掌握的基本數據類(lèi)型和變量的概念。
3. 熟練掌握中的運算符使用。
4. 深入理解分之結構語(yǔ)句和循環(huán)語(yǔ)句。
5. 熟練使用數組來(lái)完成各種練習。
6.熟悉es6的語(yǔ)法、熟練掌握面向對象編程。
7.DOM和BOM實(shí)戰練習和H5新特性和協(xié)議的學(xué)習。
知識點(diǎn)：
1、軟件開(kāi)發(fā)流程、算法、變量、數據類(lèi)型、分之語(yǔ)句、循環(huán)語(yǔ)句、數組和函數。熟練運用的知識完成各種練習。
2、面向對象基礎、異常處理機制、常見(jiàn)對象api，js的兼容性、ES6新特性。熟練掌握面向對象的開(kāi)發(fā)以及掌握es6中的重要內容。
3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。
4、h5相關(guān)api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學(xué)知識來(lái)完成網(wǎng)站項目開(kāi)發(fā)。
第三階段：數據庫和框架實(shí)戰
階段目標：
1. 綜合運用Web前端技術(shù)進(jìn)行頁(yè)面布局與美化。
2. 綜合運用Web前端開(kāi)發(fā)框架進(jìn)行Web系統開(kāi)發(fā)。
3. 熟練掌握Mysql、Mongodb數據庫的發(fā)開(kāi)。
4. 熟練掌握vue.js、webpack、elementui等前端框技術(shù)。
5. 熟練運用Node.js開(kāi)發(fā)后臺應用程序。
6. 對Restful，Ajax，JSON，開(kāi)發(fā)過(guò)程有深入的理解,掌握git的基本技能。
知識點(diǎn)：
1、數據庫知識，范式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb數據庫。深入理解數據庫管理系統通用知識及MySQL數據庫的使用與管理，為Node.js后臺開(kāi)發(fā)打下堅實(shí)基礎。
2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL數據庫處理，，文件上傳等。熟練運用Node.js運行環(huán)境和后臺開(kāi)發(fā)框架完成Web系統的后臺開(kāi)發(fā)。
3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開(kāi)發(fā)、熟練運用Vue.js框架的高級功能完成Web前端開(kāi)發(fā)和組件開(kāi)發(fā)，對MVVM模式有深刻理解。
4、需求分析，數據庫設計，后臺開(kāi)發(fā)，使用vue、node完成pc和移動(dòng)端整站開(kāi)發(fā)。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實(shí)現整站項目完整功能并上線(xiàn)發(fā)布。
第四階段：移動(dòng)端和微信實(shí)戰
階段目標：
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.完成大型電商項目開(kāi)發(fā)。
知識點(diǎn)：
1、React面向組件編程、表單數據、組件通信、監聽(tīng)、聲明周期、路由、Redux基本概念。練使用react完成項目開(kāi)發(fā)、掌握Redux中的異步解決方案Saga。
2、react-native、開(kāi)發(fā)工具、視圖與渲染、api操作、Flutter環(huán)境搭建、路由、ListView組件、網(wǎng)絡(luò )請求、打包。練掌握react-native和Flutter框架，并分別使用react-native和Flutter分別能開(kāi)發(fā)移動(dòng)端項目。
3、微信小程序基本介紹、開(kāi)發(fā)工具、視圖與渲染、api操作、支付寶小程序的入門(mén)和api學(xué)習。掌握微信小程序開(kāi)發(fā)了解支付寶小程序。
4、大型購物網(wǎng)站實(shí)戰，整個(gè)項目前后端分離開(kāi)發(fā)；整個(gè)項目分為四部分：PC端網(wǎng)頁(yè)、移動(dòng)端APP、小程序、后臺管理。團隊協(xié)作開(kāi)發(fā)，使用git進(jìn)行版本控制。目期間可以擴展Three.js 、。
web前端學(xué)習路線(xiàn)思維導圖
Web前端工程師初級階段需要掌握的內容
今天小編給大家整理出來(lái)了Web前端工程師初級階段需要掌握的內容，很全面，希望大家好好閱讀，看看自己掌握的知識點(diǎn)和文章里面寫(xiě)的還相差多少。下面來(lái)和小編一起看一看吧！一、什么是初級Web前端工程師?
按照我的想法，我把前端工程師分為了入門(mén)、初級、中級、高級這四個(gè)級別，
入門(mén)級別指的是了解什么是前端(前端到底是什么其實(shí)很多人還是不清楚的)，了解基本的html、css和語(yǔ)法(這些語(yǔ)方面的東西網(wǎng)上隨便搜一下就有很多很多，基本的語(yǔ)法是整個(gè)技術(shù)體系最重要的東西了，領(lǐng)先的
Web技術(shù)教程)，可以根據設計師的設計圖在不考慮兼容性的情況下把頁(yè)面做出來(lái)，了解過(guò)一些框架的使用(例如爛大街但是依然牛逼的jQuery、zepto、
bootstrap等等)。
在經(jīng)歷過(guò)入門(mén)的階段，已經(jīng)了解了前端要做什么，并且把基本的語(yǔ)法學(xué)習過(guò)了可以獨立做一些簡(jiǎn)單的頁(yè)面了，那么就要繼續學(xué)習達到初級前端工程師的水平，對于初級的前端工程師需要了解的就特別多了，需要對整個(gè)前端有一個(gè)清晰的認識，并且熟練使用各種技術(shù)，我感覺(jué)在校的學(xué)生達到初級水平就可以通過(guò)bat的校招筆試
面試了。
初級前端工程師：首先要知道的就是如何處理各種瀏覽器的兼容處理(比如說(shuō)在IE瀏覽器中的有什么不同等等內容)，現在基本上每個(gè)公司在招聘的時(shí)候都會(huì )要求熟練html5,
css3,，這個(gè)熟練的意思就是信手拈來(lái)。
在下面會(huì )說(shuō)初級前端工程師應該具體的學(xué)習哪些知識，然后就是要了解各種css的預處理器和后處理器，還有會(huì )使用常見(jiàn)前端的MV*框架(angularjs,
backbone，reactjs等等)并知道這些框架的原理，另外就是要熟練使用nodejs，要會(huì )使用基于node的各種前端構建工具
(grunt，gulp等等)，熟練使用github或gitlab，對模塊化、組件化、工程化、語(yǔ)義化有一個(gè)比較深入的了解，*要知道如何開(kāi)發(fā)移動(dòng)端
的頁(yè)面，如何去優(yōu)化一個(gè)頁(yè)面的性能。
二、初級Web前端工程師的技術(shù)體系
(一)HTML部分
首先是要掌握一些常用標簽的使用和他們的各個(gè)屬性，這些常用的標簽我總結了一下有以下這些：
html：頁(yè)面的根元素。head：頁(yè)面的頭部標簽，是所有頭部元素的容器。body：頁(yè)面的主體標簽，頁(yè)面展現的內容就放置在這里面。title：頁(yè)面的標題。meta：位于文檔的頭部，提供頁(yè)面的元信息，包括關(guān)鍵字、描述等等。link：定義文檔與外部資源的關(guān)系，最常用的用途就是引入樣式表。script：腳本標簽，可以把js腳本代碼放置在這個(gè)標簽內，也可以使用這個(gè)標簽的src屬性引入一個(gè)外部標簽。style：樣式標簽，可以把css代碼寫(xiě)在這個(gè)標簽中。a：超鏈接，href屬性代表要鏈接到的地方，target屬性代表打開(kāi)方式。img：圖像標簽，src屬性表示圖片的位置。form：表單元素，它內部的input、select、textarea等標簽都是比較重要的。div：定義文檔中的分區或節，可以使用div來(lái)進(jìn)行頁(yè)面的布局等操作。另外還有ul、li、p、button、iframe、p、table等標簽也很常用，nav、section、article、header、aside、footer等語(yǔ)義化標簽也需要了解一下。
除了要了解上面這一些標簽之外，還需要對一些新的HTML5的API有一定的了解：
·audio、video標簽。
·Canvas：定義圖形，比如圖表和其他圖像。
·input標簽的accept屬性，email、phone、url等類(lèi)型。
·根據class名來(lái)獲取一個(gè)元素結點(diǎn)。
·多文件選擇屬性。
·html的import、template
·process標簽，WebGL等內容。
還有一些要知道的知識點(diǎn)：
1.
doctype的作用。2.unicode、utf8等編碼的原理和區別。3.如何進(jìn)行頁(yè)面性能優(yōu)化。4.png、jpg、Webp、gif等圖片格式的不同的優(yōu)勢。5.HTML行內元素與塊級元素的區別。6.移動(dòng)Web端開(kāi)發(fā)常用head標簽。7.Web語(yǔ)義化。8.瀏覽器中的緩存原理
(二)CSS部分
關(guān)于css這一塊，我的看法就是網(wǎng)上下載一個(gè)chm格式的css的參考手冊，然后根據手冊里面寫(xiě)的一個(gè)個(gè)的都敲一下。
css大體分為下面這幾塊知識點(diǎn)：
①定位布局
1.position屬性的7個(gè)值(static|relative|absolute|fixed|center|page|
sticky)分別有什么作用和不同?
2.實(shí)現品字形布局或者是三欄布局(左右寬度固定，中間適應屏幕)。
3.浮動(dòng)與清除浮動(dòng)的方法，flex布局，grid布局。
②盒子模型
1.margin、padding、border這三個(gè)屬性。
2.伸縮盒相關(guān)內容。
3.Multi-多列布局模型。
③文本字體
1.強制換行與不換行，清除空白。
2.文本對齊、大小(如何設置chrome小于12px的字體)、縮進(jìn)、轉換。
3.單位(em、rem、px等)，顏色(rgb、rgba，hls)。
④變換、過(guò)渡和動(dòng)畫(huà)
1.transform的各種取值的作用與兼容性。
2.過(guò)渡的動(dòng)畫(huà)類(lèi)型，貝塞爾曲線(xiàn)的原理。
3.animation動(dòng)畫(huà)的各種設置，@keyframes規則。
4.瀏覽器的重繪與重排。
⑤選擇器
1.選擇器的分類(lèi)，權值和優(yōu)先級。
2.有哪些屬性可以被繼承，哪些屬性沒(méi)法繼承。
3.偽類(lèi)和偽元素分別是什么，有什么作用。
上面這些都是基礎的東西，除了這些基礎的內容之外需要了解Less、Sass、stylus等css預處理器，這將會(huì )大幅度提升你的css開(kāi)發(fā)效率，也需要了解一下、PostCSS等css后處理器。
(三)部分
在這里就不說(shuō)js的基礎知識了，我把js按照語(yǔ)法的層次和使用的層次分為了兩大塊。
按照語(yǔ)法的層次來(lái)說(shuō)：
首先是的面向對象方面的內容：在中實(shí)現封裝、繼承和多態(tài)。
①封裝：在js中可以通過(guò)閉包、作用域和作用域鏈來(lái)實(shí)現封裝，ES6的const、let的作用。②
繼承：基于原型鏈的繼承、基于構造函數的繼承、組合式繼承、寄生式繼承等，外加ES6的class關(guān)鍵字，prototype和__proto__。③
多態(tài)：在中多態(tài)是使用arguments來(lái)實(shí)現的，關(guān)于arguments會(huì )引申出來(lái)很多內容：1.arguments的caller、callee等方法的作用。2.方法的apply和call的作用和不同。3.使用Array.prototype.slice.call來(lái)把一個(gè)數組對象轉化為數組。4.array的各種方法，如shift、splice、push、filter、map、reduce、forEach等等。
然后是Js的設計模式，比如說(shuō)那三種工廠(chǎng)模式啊，建造者模式啊等等。
*是在不同情況下的this分別都代表什么。
按照使用的層次來(lái)說(shuō)：
首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、、Websocket、服務(wù)器代理等等。
然后是tcp協(xié)議、udt協(xié)議以及http協(xié)議的協(xié)議頭、狀態(tài)碼等內容。瀏覽器的緩存，客戶(hù)端存儲方面的內容：、、indexDB、cookie等等。
*是一些新的js的API，例如文件讀取()、fetch、Promise、Web
Sockets等等內容，可以去caniuse上面看一下有哪些新的東西。
上面我所說(shuō)的這些只是一些比較籠統的概念，把前端html、css和所需要掌握的部分內容列舉了一下，在前端領(lǐng)域還有很多需要我們知道的知識，這需要大家在學(xué)習工作的過(guò)程中去自己總結。
以上就是小編今天為大家分享的關(guān)于Web前端工程師初級階段需要掌握的內容的文章，希望本篇文章能夠對正在從事Web前端工作的小伙伴們有所幫助，想要了解更多Web前端相關(guān)知識記得關(guān)注北大青鳥(niǎo)Web培訓官網(wǎng)。*祝愿小伙伴們工作順利！
前端必看的書(shū)籍
了解更多的前段知識請看下面我精心為您整理的前端必看的書(shū)籍，希望您喜歡!
十本學(xué)習前端必看書(shū)籍
*本，入門(mén)
《Head first HTML&CSS》
*的入門(mén)書(shū)?？磧杀榫蛯TML & CSS 有個(gè)大概印象了。
此時(shí)把w3cschool作為備查手冊收藏起來(lái)
第二本《CSS權威指南(第三版)》
最權威的CSS書(shū)籍，除了閱讀W3C的文檔外的不二選擇(就是翻譯有點(diǎn)操蛋，遇到感到難理解的地方可能還是要求助于網(wǎng)絡(luò )資源)。有時(shí)間(無(wú)論是現在還是將來(lái))可以反復看，并當做字典隨時(shí)查。
第三本《精通CSS》
廣受前輩推薦的一本書(shū)。上一本書(shū)是字典的話(huà)，這本書(shū)相當于《中學(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)有邏輯的標記型語(yǔ)言，JS才是真正的編程語(yǔ)言，評價(jià)前端工程師的水平就看這個(gè)了。
第五本《 DOM編程藝術(shù)》
*的JS入門(mén)書(shū)籍，一目了然地告訴你如何用JS操作DOM(這是瀏覽器端編程的基本功)，還灌輸了*標準的編程理念?？上в悬c(diǎn)老，*一版是2010年的，以至于部分內容有點(diǎn)過(guò)期，例如本書(shū)內經(jīng)常提到“某某方法瀏覽器不一定支持，需要小心使用”，而這些歷史遺留問(wèn)題當今已經(jīng)不存在了，閱讀過(guò)程中無(wú)視就好。
第六本《高級程序設計》
每個(gè)前端必看的書(shū)，此書(shū)是前端工程師科技樹(shù)的關(guān)鍵一環(huán)?？赐甏藭?shū)后再看看之后各類(lèi)進(jìn)階書(shū)籍會(huì )比較好。
俗稱(chēng)紅寶書(shū)，也算入門(mén)書(shū)籍，雖然是大部頭(七百多頁(yè))，但至少通讀一遍。
全部掌握了，你可以在網(wǎng)絡(luò )社區里談笑風(fēng)生了，經(jīng)過(guò)實(shí)踐的鍛煉后，面試個(gè)前端工程師的崗位應該都沒(méi)問(wèn)題了。
第七本《語(yǔ)言精粹》
也是前端必看。薄薄一百來(lái)頁(yè)，對JS的去粗取精。
第八本《你不知道的》
這是一套叢書(shū)， 目前為止僅翻譯了*卷。每本都挺薄，深入介紹了JS中的重要概念。
第九本《設計模式》
“設計模式”是軟件工程的重要課題，相當于高考時(shí)候的答題套路。前人總結出來(lái)的應對各種問(wèn)題的模板。也算是必看書(shū)籍。關(guān)于設計模式的書(shū)籍目前也有好幾本，也有國人寫(xiě)的，挑一兩本看看就好。
第十本《高性能網(wǎng)站建設指南》(及其續篇《高性能網(wǎng)站進(jìn)階》)
告訴你真正的商業(yè)公司的前端是怎么優(yōu)化一個(gè)網(wǎng)站的。當然優(yōu)化的問(wèn)題不是看看書(shū)就能解決的，*時(shí)刻了解你的同行們的經(jīng)驗。
*階段：HTML和CSS的學(xué)習
HTML就不多說(shuō)了，基礎中的基礎，這個(gè)都不會(huì )的小伙伴請參見(jiàn)HTML手冊，認真學(xué)習W3C課程，稍有基礎之后可以跟著(zhù)視頻學(xué)習《HTML+CSS基礎課程》。
前端開(kāi)發(fā)必看的14本書(shū)
1、《CSS權威指南》第三版
這本書(shū)實(shí)在太適合小白用戶(hù)了，是一本為初學(xué)者清掃障礙的書(shū)籍。同行一致認為這本書(shū)是學(xué)習CSS基礎的*。CSS界權威Meyer大師的作品，翻譯水平也灰常贊!
2、《CSS那些事兒》
不用于一般技術(shù)類(lèi)書(shū)籍的枯燥乏味，這本書(shū)很有意思。作者是藍色理想經(jīng)典論壇標準版榮譽(yù)版主林小志，具有多年網(wǎng)站設計和網(wǎng)站重構經(jīng)驗，在CSS、XHTML等前臺技術(shù)方面有著(zhù)深厚功底。
全書(shū)以傳達CSS布局思維為中心，通過(guò)頁(yè)面中的文字、圖片、表格、表單等常見(jiàn)元素的處理及各種頁(yè)面布局方式的使用，使讀者能深入了解到如何在頁(yè)面中更好地運用CSS布局。閱讀本書(shū)之后將會(huì )發(fā)現，原來(lái)CSS樣式居然是這么好玩的東西。
3、《精通CSS：高級Web標準解決方案》第二版
前段學(xué)習必備書(shū)籍，作者Andy Budd是國際頂尖的網(wǎng)頁(yè)設計師，著(zhù)名的Web標準倡導者，網(wǎng)頁(yè)咨詢(xún)公司Clearleft的創(chuàng )始人之一。
本書(shū)將最有用的CSS技術(shù)匯總在一起，總結了CSS設計中的*實(shí)踐，討論了解決各種實(shí)際問(wèn)題的技術(shù)，重點(diǎn)講解了一系列的css開(kāi)發(fā)技巧，是前端開(kāi)發(fā)人員必備的手冊。
4、《CSS禪意花園》
這是一本令人驚嘆的書(shū)!必須用一個(gè)字形容的話(huà)，那就是：美!內容編排合理,文字生動(dòng)有趣引人入勝,通過(guò)一個(gè)個(gè)實(shí)例引導讀者閱讀，強烈推薦!
作者是世界著(zhù)名的網(wǎng)站設計師，書(shū)中的范例來(lái)自網(wǎng)站設計領(lǐng)域最著(zhù)名的網(wǎng)站——CSS Zen Garden(CSS禪意花園)。童鞋們自己去領(lǐng)略吧。
第二階段——的學(xué)習
的書(shū)籍當然還是要看老外的，你懂得~
5、《編程藝術(shù)》
此書(shū)絕對是入門(mén)好書(shū)，簡(jiǎn)潔優(yōu)美的文筆簡(jiǎn)直是工具書(shū)中的典范啊有木有!
這本書(shū)講述了和DOM的基礎知識，但重點(diǎn)放在DOM編程技術(shù)背后的思路和原則，然后將這些概念貫穿在書(shū)中的所有代碼示例中，使你看到用來(lái)創(chuàng )建圖片庫頁(yè)面的腳本、用來(lái)創(chuàng )建動(dòng)畫(huà)效果的腳本和用來(lái)豐富頁(yè)面元素呈現效果的腳本，*結合所講述的內容創(chuàng )建了一個(gè)實(shí)際的網(wǎng)站。
6、《權威指南》第6版
這本書(shū)非常適合初級、中級程序員，是學(xué)習核心語(yǔ)言和由Web瀏覽器定義的 API的指南和綜合參考手冊。
第6版涵蓋HTML 5和 5。很多章節完全重寫(xiě)，緊跟當今*Web開(kāi)發(fā)實(shí)踐。本書(shū)新增章節描述了jQuery和服務(wù)器端。
7、《高級程序設計》第三版
《權威指南》比較像一本字典，而這本《高級程序設計》可以算是一本由淺入深的好讀物。這兩本書(shū)看完后，對一定會(huì )有較為深入的了解。
作者Nicholas C. Zakas是世界頂級Web技術(shù)專(zhuān)家，現為雅虎公司界面呈現架構師，負責My Yahoo!和雅虎首頁(yè)等大訪(fǎng)問(wèn)量站點(diǎn)的設計。這本書(shū)，看一遍不能算看過(guò)，至少讀兩三遍，每一遍都會(huì )讓你有新的收獲。
8、《高性能》
本書(shū)從性能角度全面分析js，含金量非常大，很多知識都是作者通過(guò)實(shí)踐總結出來(lái)的，都是經(jīng)驗的積累，強烈推薦!
同是Nicholas C. Zakas所寫(xiě)，如果看《JS高級程序設計》覺(jué)得理解不太透徹，學(xué)習較為吃力，那么我強烈建議你看看這本書(shū)，真的是極好的一本實(shí)踐類(lèi)書(shū)籍，言簡(jiǎn)意賅，灰常實(shí)用!
9、《王者歸來(lái)》
這本《王者歸來(lái)》不僅是一本傳播知識的書(shū)，更是一本求道的書(shū)。O(∩_∩)O 有追求的程序員一定不要錯過(guò)!愿神力與你同在!
它揭開(kāi)了的面紗，繞過(guò)誤解和虛幻的表象，引領(lǐng)你探索程序王國的奧妙。這是一本探尋程序設計思想本源的“魔法典籍”，也是一本W(wǎng)eb開(kāi)發(fā)工程師們需要的案頭參考書(shū)。
10、《模式》
它絕對不是一本入門(mén)級別的書(shū)，適用于希望將自身的技巧提高到一個(gè)新層次的專(zhuān)業(yè)的開(kāi)發(fā)人員和程序員。
《模式》包含了實(shí)現每個(gè)討論的模式的實(shí)踐建議，并附有數個(gè)可以立即上手的范例;同時(shí)還可以學(xué)到一些反模式。短小精悍，進(jìn)階必讀!
11、《設計模式》
進(jìn)階教程，得有一定功底才能看懂。反之，如果你輕而易舉就能拿下此書(shū)，說(shuō)明你已非等閑之輩~
本書(shū)共有兩部分。*部分給出了實(shí)現具體設計模式所需要的面向對象特性的基礎知識，第二部分則專(zhuān)注于各種具體的設計模式及其在語(yǔ)言中的應用，主要介紹了工廠(chǎng)模式、橋接模式、組合模式、門(mén)面模式等幾種常見(jiàn)的模式。
第三階段——jQUery的學(xué)習
12、《鋒利的jQuery》第二版
入門(mén)*，簡(jiǎn)單易懂，非常實(shí)在?！朵h利的jQuery(第2版)》循序漸進(jìn)地對jQuery的各種函數和方法調用進(jìn)行了介紹，對jQuery分析的邏輯非常值得學(xué)習。
第四階段—學(xué)無(wú)止境!
如果以上書(shū)籍你全都搞定了，那么，恭喜你，你真的很厲害!到這種程度，相信你也不太需要別人推薦書(shū)籍了，不過(guò)我還是厚著(zhù)臉皮推薦兩本吧。
13、《高性能網(wǎng)站建設指南》
前端開(kāi)發(fā)可以?xún)?yōu)化網(wǎng)站剩余70%~80%性能，這本書(shū)不算厚，幾個(gè)小時(shí)就能看完，推薦前端開(kāi)發(fā)工程師看看。在《高性能網(wǎng)站建設指南》中，作者給出了14條具體的優(yōu)化原則，每一條原則都配以范例佐證，并提供了在線(xiàn)支持。
14、《Web開(kāi)發(fā)敏捷之道》第二版
Web開(kāi)發(fā)敏捷之道》曾榮獲Jolt大獎“*技術(shù)圖書(shū)”獎。在第1版的內容架構基礎上，第2版增加了對Rails 1.2中新特性和*實(shí)踐的介紹。此書(shū)覆蓋了rails1.2的方方面面，其本身也很"敏捷"，翻譯也非常好。