『壹』 前端開發，有哪些好看的書籍
《CSS網站布局實錄》
《CSS權威指南》
《HTML5與CSS3權威指南》
《JavaScript非同步編程》
《圖解HTTP》
《瞬間之美：WEB界面設計如何讓用戶心動》
『貳』 希望有前端大佬指導指導，到底該如何自學前端
1. Web前端是做什麼的？
學習之前我對網頁設計、UI、網頁制所盒Web前端的概念很混淆，上網查了才明白：網頁設計是指運用一些軟體對網站進行美化，解決「好看」的問題；UI是指人與界面互動的優化，解決「舒適」的問題；網頁製作著重PC端網頁製作；而Web前端包括PC端和移動端的前端界面製作。
2. Web前端的基礎技能及工作職責是什麼？
愛它就要更深入了解它，學習Web前端就要清楚地知道Web前端工程師需要什麼基礎技能及其工作職責。其實，這「很簡單」，只要你精通HTML+css（包括現在的HTML5+CSS3）、JavaScript、JQuery，了解界面設計，了解後端編程，伺服器知識+後端語言基礎。
3. 怎麼樣才能學好拿高薪，Web前端開發職業的前途怎樣？
個人覺得三百六十行，行行都蘊藏的無限可能，干一行就愛一行，只要腳踏實地，努力學技術，技術硬了，自然會有前途和「錢」途。但是努力學習之前，必須要明確的目標，否則就是「看起來很認真」而已。
4. 如何學？
零基礎學前端的話，這些書籍資料可以參考一下：
《JavaScript高級程序設計(第3版) 紅皮書 》，適合有一定編程經驗的Web應用開發人員閱讀，也可作為高校及社會實用技術培訓相關專業課程的教材。
《JavaScript權威指南(第6版)》 犀牛書，本書不僅適合初學者系統學習，也適合有經驗的 JavaScript 開發者隨手翻閱。
《JavaScript DOM編程藝術 (第2版)》，本書在簡潔明快地講述JavaScript和DOM的基本知識之後，通過幾個實例演示了專業水準的網頁開發技術，透徹闡述了平穩退化等一批至關重要的 JavaScript編程原則和最佳實踐，並全面探討了HTML5以及jQuery等JavaScript庫。
《CSS權威指南(第三版)》，不管你是一個有經驗的Web開發人員還是一個徹底的初學者，《CSS權威指南(第3版)》都是你的CSS學習源泉。
《JavaScript設計模式》，適合JavaScript初學者、前端設計者、JavaScript程序員學習，也可以作為大專院校相關專業師生的學慣用書，以及培訓學校的教材。
《你不知道的JavaScript(上中下卷) 》，本書既適合JavaScript語言初學者了解其精髓，又適合經驗豐富的JavaScript開發人員深入學習。
《Vue.js權威指南》，該書內容全面，講解細致，實例豐富，適用於各層次的開發者。
學習路線：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：NodeJS全棧開發(1周)
內容包括：(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL資料庫)
視頻教程：
網頁鏈接
『叄』 Web前端面試指導（五十）：CSS樣式書寫有哪些
一、CSS書寫順序
1.位置屬性(position, top, right,z-index, display, float等)
2.大小(width, height, padding,margin)
3.文字系列(font, line-height,letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、CSS書寫規范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
2.去掉小數點前的「0」
3.簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！
4.16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。
5連字元CSS選擇器命名規范
1）長名稱或片語可以使用中橫線來為選擇器命名。
2）不建議使用「_」下劃線來命名CSS選擇器，為什麼呢？
輸入的時候少按一個shift鍵；瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）能良好區分JavaScript變數命名（JS變數命名是用「_」）
6.不要隨意使用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先順序優先與class，所以id應該按需使用，而不能濫用。
7.為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了「.is-」前綴。
三、CSS命名規范
常用的CSS命名規則
頭：header
內容：content/Container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：right
滾動：scroll
內容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
注冊：regsiter
狀態：status
投票：vote
合作夥伴：partner
ID的命名-頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
ID的命名-導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
ID的命名-功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner
友情鏈接：link
版權：right
四、注釋規范
/* Header */
內容區
/* End Header */
五、注意事項
1.一律小寫;
2.盡量用英文;
3.盡量不縮寫，除非一看就明白的單詞。
六、CSS樣式表文件命名
主要的 master.css
模塊 mole.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
列印 print.css
『肆』 Web網站開發自學指南
你可能是對Web開發有某種興趣，甚至你開始想去學習Web開發。本文則展示了一個成為一個Web開發者可以遵循的途徑。作為一篇初學者指南，本文從學習什麼出發到如何專攻。或許對打算進軍Web開發的您有所幫助。
你可以同時掌握前端和後端，當然從一般情況來講，Web開發者更傾向於其中的一個，對另一個只做了解。專攻於一個的也大有人在。雖然兩者之間有一個分割線，但是對於哪一方應該做些什麼是沒有限制的。有時候前端僅用於可視化表示，所有的工作都在後端完成。而有些時候後端只服務於數據，所有的計算和函數都位於前端。這是一種設計和結構的關系，以此來定義哪一方做什麼事情。
如果你是一個初學者，給自己一些時間去學習一個框架。框架是簡化Web開發者工作的代碼庫。框架賦予Web應用一個結構，這幫助開發者更容易的處理一些任務並且效率上比什麼都要自己編寫來的快。如果你想要成為一個專業的Web開發者，那麼就必須要學習至少一個框架，促進你的發展速度。
Web開發可以是巨大的，你可能想要專注於一種類型的應用。以Web網站的內容管理系統（CMS）為例，如果你選擇了PHP，那麼建議你繼續使用WorldPress。WorldPress允許你創建網站、博客，同時它也能夠通過默認插件或自定義插件和主題來擴展，以適應更加復雜的業務應用。
你將發現你選擇的任何一種語言背後都有大量的框架，所以基於你選擇的語言，你將和不同的框架打交道。
好了，望採納
『伍』 關於前端開發的20篇文檔與指南
英文原文：Another
20
Docs
and
Guides
for
Front-End
Developers
相信在
2015
年很多這個行業的人都會有這樣的兩種感受：
真的不知所措，這個行業到底有多少東西需要去學習；
渴望更多，並迫不及待的為接下來的學習尋求一些思想方向。
第一個來自於我們的個人感受，而第二個則是純粹的必要性了。所以本文整理一些有用的信息，希望可以幫助相關領域的前端開發人員。
1.
I
want
to
use
基於
Can
I
use
的數據和功能，這款應用給予你選擇一組前端開發特性的能力，並會讀取出一個全球性用戶能夠使用它的百分比。
2.
Regulex
JavaScript
正則表達式的可視化工具，在線輸入表達式後，動態生成表達式圖片。非常不錯的一個可視化
Web
在線正則表達式設計工具。
3.
Mastering
the
:nth-child
一個單頁網站，幫助你理解如何去使用各種有用但又復雜的基於選擇器組合的
nth-child。
4.
HTML
5
視頻事件和
API
這個頁面展示了新的
HTML
5
視頻元素、媒體
API
和媒體事件。播放、暫停、搜索整個視頻、改變音量、靜音、改變播放速度（包括進入負值），查看視頻和潛在事件與屬性上的效果。
5.
Excess
XSS
這可能是所有開發者都應該熟悉的一個話題，並且這可能是一個很好的著手點。它是一個跨站點腳本編制綜合教程。
6.
RSCSS
意思為Reasonable
Standard
for
CSS
Stylesheet
Structure（CSS
樣式表結構合理的標准），記錄一些針對大項目的
Sass/CSS
編寫技巧和技術。
7.
CodeFightClub
一個由
Andrew
Hathaway
建立的項目，目的是幫助其他開發者學習如何用最好、最有效以及首選的方法編寫代碼。
8.
Sass
Guidelines
Hugo
Giraudel
寫的
Sass
Guidelines
目前已經被翻譯成其他六種語言。
9.
Flexbugs
如果你的目的是使用
flexbox
構建一個網站，而事情卻並沒有像你所期望的那樣進行，你可以在這里找到解決方案。
10.
A
Front
End
Engineers
Manifesto（一個前端工程師的宣言）
沒什麼深入的東西，只是一些簡單的事情提示，所有的前端開發者應該考慮將其結合到開發過程和工作流中。
11.
ES5
中的
ECMAScript
6
等價物
ES6
特性轉換到
ES5-compatible
代碼的一個很好的參考。
12.
Flexbox
Adventures
來自開發者
Chris
Wright
對
Flexbox
深入、實際看法。
13.
BEM
一個全面推廣和培養
BEM
CSS
使用方法的網站。
14.
Sass
Compatibility
記錄不同
Sass
引擎之間的不兼容性問題。
15.
HTMLelement.info
一個整潔、邏輯、易使用的指南規范，在不同的
HTML
元素上獲得信息。
16.
JSLint
Error
Explanations
你可能跟隨過很多
JavaScript
最佳實踐，卻並不明白所有這些技術背後的原因。本站旨在揭露
JSLint、JSHint、和
ESLint
工具里錯誤和警告。
『陸』 如何成為一個前端工程師
作為一名前端工程師，必須要掌握的三樣東西HTML,CSS,Javascript。這里掌握的意思是，你不需要去藉助搜索引擎去完成你的主要任務，當然我沒有涵蓋到書本，因為在JS發展到現在的，我們已經在裡面添加里數不清的介面，你也不可能全部都瞭然於心。
三者當中你還要比較深刻了解JS中的兩大部分，COREscript 和DOM,前者也就是我們經常提到的ECMAscript。你需要知道JS中最不同於其他語言的一些基本概念，諸如原型鏈，事件冒泡，字面量等，這對於你去了解一些框架有很大的幫助。當然你是不能不懂得AJAX，幾乎我沒有見過有哪個新型web站是不用這些技術的。另外你還懂得如何去操縱DOM，這個很關鍵。也是最繁瑣的一個地方（繁瑣的地方是，當你深入理解到節點類型，map，一堆繁瑣的底層API的時候，你就會想哭的感覺，當然很多時候你都不會用到這些東西），當然一般來說它也不是什麼難題，多加訓練即可。
socket 需要重點理解），只是一些新的擴展性API，在經驗當中可以成長。
當你覺得自己概念知識都能夠基本掌握的時候，那麼請你去實踐。多麼偉大的代碼都要經過實踐出真知，它不僅可以給你帶來驗證，而且它可以讓你深刻去理解。
如果你想繼續提升自己的能力，那麼可以從以下幾個方面去提升：
1.閱讀別人的程序，理解別人的思路。你可以去使用和閱讀框架，當然有人一聽到框架就會嗤之以鼻，特別是性能黨。我想說框架是個好東西，不過前提是你最好理解底層的東西。
2.優化你的程序，把你的程序做精做簡，這是非常考驗一個前端工程師的自我修養能力。
3.構建一個後端程序，或許你可以使用node去構建一個伺服器，網上有教程手把手教你從基本做起，讓你可以很好的貫穿前後端的知識。
4.如果你還有時間，那麼可以學些腳本語言提高下自己的能力。作為一名前端個工程師，我們並不是需要你很全面的掌握一切有關計算機的知識，因為那樣很不實際。你要相信你的記憶力和精力都是有限的，特別是面對費腦子的計算機。
『柒』 零基礎如何學好Web 前端
朋友，如果你是零基礎的話，建議你先自學一下前端的基礎知識（html、css、Js）。
自學方法：
1、作為一個初學者，你必須明確系統的學習方案，我建議一定有一個指導的人，全靠自己學，放棄的幾率非常大，在你對於web前端還沒有任何概念的時候，需要一個人領進門，之後就都靠自己鑽研，第一步就是確定web前端都需要哪些內容，並且在多少時間內學完，建議時間6個月保底。
2、視頻為主，書為輔。很多初學者在學習前端的時候非常喜歡去買書，但是最後的結果是什麼？看來看去什麼都不會寫，所以在這里給大家提醒，書可以看，但是是在建立於你已經對於某個知識點有了具體操作的執行後，在用書去鞏固概念，這樣更加利於你對於知識的理解。
3、對於學習技術來講，掌握一個學習方法是非常重要的，其實對於學習web前端來講，學習方法確實很多都是相通的，一旦學習方法不對，可能就會造成「方法不對，努力白費」。其實關於這方面還是很多的，我就簡單說個例子，有的人邊聽課邊跟著敲代碼，這樣就不對，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經驗，一定要聽。根據每個人的不同，可能學習方法也會有所出路，找到適合你自己的學習法方法是學習的前提。
4、不建議自己一個人瞎學，在我了解學習編程的這些人來看，從零基礎開始學並且最後成功做這份工作的其實並沒有幾個，我覺得大部分原因就是因為他們都不了解web前端是干什麼的，學什麼的，就盲目的買書看，到處找視頻看，最後看著看著就放棄了，所以我建議初學者在沒有具體概念之前，還是找有經驗的人請教一下，聊過之後你就會知道web前端具體是干什麼的，該怎麼學，這是我個人的小建議，可以不採納。
2020前端最新學習路線圖：
前端基礎學習內容：
第1階段：前端頁面重構(4周)
內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)
第2階段：JavaScript高級程序設計(5周)
內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)
第3階段：PC端全棧項目開發(3周)
內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)
第4階段：移動端項目開發(6周)
內容包含：(Touch端項目、微信場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)
第5階段：混合(Hybrid,ReactNative)開發(1周)
內容包含：(微信小程序開發、ReactNative、各類混合應用開發)
第6階段：NodeJS全棧開發(1周)
內容包括：(WebApp後端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL資料庫)
前端基礎書籍：
《Head First HTML與CSS(第2版)》，入門真的是經典書籍，手把手教學，豐富的案例讓你從 0 開始學前端。
《CSS權威指南(第三版)》，這本書作為 CSS 的經典著作，把原理講得非常的通透，除了 w3c 標准，算最權威的一本了，畢竟權威指南。
《CSS揭秘》神書，47 個 css 技巧讓你在面對各種 css 問題的時候游刃有餘。是 css 書籍中評分最高的了，css 進階必備。
《javascript語言精粹》，這本書可以在入門之前了解一下基本語法，以及在學習之前可以了解下 JS 裡面的精粹以及糟粕，雖然這本書很薄很薄，但是值得反復去讀的一本書。
《JavaScript DOM編程藝術(第2版)》，本書在簡潔明快地講述JavaScript和DOM的基本知識之後，通過幾個實例演示了專業水準的網頁開發技術，透徹闡述了平穩退化等一批至關重要的 JavaScript編程原則和最佳實踐。
《JavaScript權威指南》：犀牛書是每個FE都繞不過的一本書，可以先大致通讀幾遍，也可以把其當作工具書，時時翻閱。
前端視頻教程：
網頁鏈接
希望對你有用，望採納~
『捌』 Web 前端怎樣入門
報班或者自學。網上有很多基礎教程
『玖』 了解一點web前端的人想提高JS選擇《JavaScript高級程序設計》還是《權威指南》
前端也很廣啊，不知道你是想從哪方面提高啊？是站在程序員的立場還是產品經理的立場啊。程序員的話除了js入門「之類的書其他都還可以，各有側重。產品經理的話就要看《js設計模式》這樣的書咯，一般」XXX權威指南「這種書很類似於字典，我個人感覺是屬於工具類的，某個地方不知道怎麼寫了打開看一看
『拾』 web前端看哪些書籍好，前端開發書籍大全
1、HTML/HTML5基礎：
《HTML5秘籍》
2、CSS
推薦書籍：
1、《圖靈程序設計叢書:HTML5與CSS3設計模式》
2、《Web開發技術叢書:深入理解Bootstrap》
3、《高流量網站CSS開發技術》
4、《CSS設計徹底研究》 這個一定要
5、《Web開發技術叢書:深入理解Bootstrap》
6、可以找一些專門講SASS的書，但是我沒找到
7、《CSS權威指南(第3版)》
3、深入學習JS
推薦書籍：
1、《單頁Web應用:JavaScript從前端到後端 》
2、《Web 2.0界面設計模式》
3、《響應式Web設計:HTML5和CSS3實戰》
5、工具
學會使用grunt進行JS、CSS、HTML 壓縮，特別是模塊化js開發時候的壓縮
會用PS進行切圖、保存icon
入手sublime、webstorm
學會使用chrome調試面板，特別是：console、network、profile、element
進階：
4、性能
推薦書籍：
1、《Web性能權威指南》
2、雅虎網站頁面性能優化的34條黃金守則
5、HTTP及TCP協議族
推薦書籍：
1、《HTTP權威指南》
2、《TCP/IP詳解》
3、《圖解TCP/IP(第5版)》
請使用手機"掃一掃"x