標籤：

知乎上有哪些在前端開發領域的高質量回答？

11-25
自問自答。自己在知乎上收集了不少前端開發領域的問答，收穫不小，但結構比較凌亂，整理了下，頭緒也清楚了些。希望對大家也有用處，同時感謝這些問答的作者。
===
非常感謝 @何沁童鞋的重新排版。
===
更新於2015年3月8日。
另外，整理了一下個人的chrome收藏夾，對前端有興趣的童鞋可以關注，SunLn的前端收藏夾
===

前端資源：

  • 關於 Javascript 學習，有哪些好的博客或者網站推薦？ - 前端開發
  • 有哪些不錯的前端開發博客？ - JavaScript
  • 前端業內有哪些交流氛圍比較好群/論壇/社區？ - 前端開發
  • 想深入了解一下 jQuery 的源碼，但是覺得學習曲線有點陡峭，有沒什麼好的方法或者學習資源推薦？ - JavaScript

前端大牛：

  • 知乎上有哪些 JavaScript 高手？ - 前端開發
  • 國內有哪些前端開發牛人？ - JavaScript
  • 中文圈，誰是最好的 JavaScript 程序員？ - 編程

前端書籍：

  • 有哪些關於前端開發技術（HTML、CSS 和 JavaScript 等）的值得推薦的書籍？ - 書籍推薦
  • 關於 CSS 設計，有什麼書比較好？ - 前端開發

技術細節：

　JavaScript 方面

  • JavaScript 中應該用 "==" 還是 "==="？ - JavaScript
  • JavaScript 中，num = num || 1 這種寫法有哪些優缺點？ - JavaScript
  • 使用 Node.js 的優勢和劣勢都有哪些？ - Web 開發
  • LABjs、RequireJS、SeaJS 哪個最好用？為什麼？ - 前端開發
  • 一個 ul 里有若干 li，點擊 li 時能方便地知道這是 ul 中的第幾個 li 嗎？ - JavaScript
  • 怎樣在各個瀏覽器下使用 JavaScript 或者 CSS 控制去除 input 和 button 的虛線？ - 前端開發
  • JavaScript 語句後應該加分號么？ - 編程
  • GitHub 為什麼討人喜歡？ - 開源社區
  • A B || C 的效率比 A ? B : C 更高嗎？ - 編程
  • 有哪些 JS 調試技巧？ - 前端開發
  • JavaScript 里的閉包是什麼？應用場景有哪些？ - 編程語言
  • JavaScript 中 undefined 與 undeclared 之間的區別是什麼？ - 編程語言
  • JavaScript中圓括弧() 和 方括弧[] 的特殊用法疑問？ - JavaScript
  • 國內有哪些靠譜的 Javascript 庫 CDN可用？ - JavaScript
  • 為什麼很多網站在 JavaScript 腳本中都用簡單的字母表示變數？ - JavaScript

　HTML 方面

  • .htm 與 .html 兩種文件格式（擴展名）的區別在哪裡？ - HTML
  • 實現單行文字兩端對齊時，使用 nbsp; 當作空格和使用 white-space: pre 的原生空格有什麼區別？哪個更好一些？ - 前端開發
  • 為什麼不能在 EDM 模版中使用 DIV ？ - 前端開發
  • 實現單行文字兩端對齊時，使用 nbsp; 當作空格和使用 white-space: pre 的原生空格有什麼區別？哪個更好一些？ - 前端開發

　CSS 方面

  • 命名 CSS 的類或 id 時單詞間如何連接？ - 前端開發
  • 如何解決外邊距疊加的問題？ - 前端開發
  • 在 CSS 中，用 float 和 position 的區別是什麼？ - 前端開發
  • 你如何理解 HTML5 的 section？會在什麼場景使用？為什麼這些場景使用 section 而不是 div？ - 前端開發
  • 大家對於塊級格式化上下文BFC都有哪些疑問?大家的理解又是怎樣的？ - 前端開發
  • 有一 li 元素其中有中文和英文，怎麼分別設置他們的字體樣式呢？ - 前端開發
  • CSS 中 block-level boxes、containing block、block formatting context 三者之間的區別和聯繫是怎樣的？ - 前端開發
  • 怎樣可以很好地保證網頁的瀏覽器兼容性？ - 前端開發

前端工具：

  • 寫 JavaScript 時IDE 或編輯器的選擇有哪些好的推薦？ - 前端開發
  • Notepad++ 有哪些適用於前端開發的插件？ - 前端開發
  • 用 Dreamweaver 寫 CSS 代碼很有效率，但為什麼還有很多人喜歡用 Notepad++ 之類的工具？ - HTML
  • 你覺得在前端開發中值得推薦的常用工具有哪些？ - 前端開發
  • 前端工程師都有用哪些比較靠譜的小工具？ - 前端開發
  • 有哪些工具可以將 CSS 文件中的屬性按照一定的順序進行排列？ - 前端開發
  • 有哪些比較好 CSS 簡寫（壓縮）工具？ - 前端開發
  • 什麼是 Twitter Bootstrap？ - 前端開發

Angular：

  • AngularJS 有沒有缺點？MVVM 框架中有比它更好的嗎？ - 前端開發
  • 移動網站用backbone還是angular? - 前端開發
  • 如何看2015年1月Peter-Paul Koch對Angular的看法？ - 程序員
  • 關於 AngularJS 框架的使用有哪些經驗值得分享？ - 知乎
  • 如何看待Google和Microsoft在Angular JS 2 和 TypeScript上的合作？ - AngularJS
  • AngularJS 於前端開發有什麼作用，對比其它框架有何優點？ - AngularJS

前端學習：

　入門

  • 若想學 HTML，應從哪裡入手？ - 前端開發
  • 零基礎開始學 Web 前端開發，有什麼建議嗎？ - Web 開發
  • 零基礎的網站開發初學者應如何系統地學習？ - 前端開發
  • 如何幫助前端新人入門和提高？ - 前端開發
  • 如何循序漸進有效學習 JavaScript？ - 前端開發
  • 面對變化莫測的 CSS，我該怎麼辦？ - 前端開發
  • 非計算機專業，半路出家，以前做 UI ，現在想改前端，學習 JS 過程中遇到瓶頸了，如何突破？ - 前端開發
  • 一名合格的前端工程師的知識結構是怎樣的？ - 前端開發
  • 你是如何成為前端工程師的？ - 前端開發
  • 想成為前端工程師，那麼在大學期間應該如何規劃？ - 職業規劃
  • 前端工程師應該對 HTTP 了解到什麼程度？從哪些途徑去熟悉更好？ - 前端開發

　高級

  • 怎樣成長為一個優秀的 Web 前端開發工程師？ - 前端工程師
  • w3.org 結構複雜，信息量大，新人從哪裡入手比較好？ - 前端開發
  • 怎麼樣才算是精通 JavaScript？ - 前端開發
  • 前端妹子跟我抱怨她們的頁面載入很慢的時候，如何在她面前優雅地裝逼？ - 信息技術（IT）
  • 前端大牛們都學過哪些東西？ - 調查類問題

前端就業：

  • 好的 Web 前端年薪會有多少？ - 前端開發
  • Web 前端開發崗位，該選擇百度還是騰訊？ - 招聘
  • 淘寶 UED 前端、騰訊腳本開發、豆瓣前端開發，應該如何在這幾個工作之間選擇？ - 淘寶網
  • 前端實習offer選擇：百度FEX 或 阿里ICBU ？ - 職業規劃
  • 淘寶 UED 前端團隊究竟好不好？值得去嗎？ - 淘寶網
  • 天貓的前端工程師和團隊在行業內處於什麼水平？ - 淘寶網
  • 只專註於 JavaScript，好就業嗎？有發展前景嗎？ - 前端工程師
  • 月薪10-12k的前端人員應該具備怎樣一種技術水平？ - 前端開發
  • 你怎麼看我在豌豆莢公司的前端面試過程？ - 互聯網
  • 前端工程師有哪些靠譜的求職途徑？ - IT 求職
  • 國內的前端團隊分布和前景是怎樣的？ - 徐飛的回答

前端招聘：

  • 如何面試前端工程師？ - 前端開發
  • 為什麼前端工程師很難找？ - 前端開發
  • 如何才能招聘到好的 web 前端人才？ - 前端開發
  • 有哪些經典的 Web 前端或者 JavaScript 面試筆試題？ - 前端開發
  • JavaScript 怎樣高效拼接字元串？ - 前端開發
  • 大公司面試前端開發類的職位時，更看重的是什麼？ - 前端工程師
  • 國內大型互聯網公司（如BAT）對於web前端開發方向校招都考些什麼？ - 招聘

前端漫談：

  • 前端工程師的價值體現在哪裡？ - 前端開發
  • Web 前端工程師這一職業在未來行業需求和發展怎樣？ - 前端開發
  • 如何改善國內前端開發行業的尷尬地位？ - 前端工程師
  • 一些人瞧不起 jQuery 的理由是什麼？ - 前端開發
  • Java 和 JavaScript 是雷鋒和雷峰塔的區別，這一說法是怎麼來的？ - X 的出處
  • Web 前端和後端工程師的具體職責分別是怎樣的？ - 程序員
  • 前端工程師和網頁重構工程師二者有什麼區別和聯繫？ - 前端開發
  • 做前端開發必需要掌握切圖技能嗎？ - 前端工程師
  • HTML5 標準分裂會有什麼影響？ - 萬維網聯盟（W3C）
  • jQuery 宣布在未來的版本將不支持 IE6/7/8 是否明智？ - Internet Explorer
  • Java 和 JavaScript 是什麼關係？ - 編程語言
  • 國內有人或者公司用 LESS 寫過 CSS 嗎？ - 前端開發
  • 前端工程師，如何更順暢的和後端工程師合作？ - 程序員
  • 為什麼很多國內公司不使用 jQuery 等開源 JS 框架（庫），而選擇自己開發 JavaScript 框架？ - 移動前端開發
  • Douglas Crockford 的《JavaScript 語言精粹》中有哪些觀點是有爭議的？ - JavaScript
  • 為什麼有人說前端開發水很深，工作量有時比後台還多？ - 前端工程師
  • 如何用通俗易懂的語言解釋腳本（script）是什麼？ - 前端開發
  • Web 前後端分離的意義大嗎？ - 前端開發
  • 前端 Leader 是如何帶領團隊和建設團隊文化的？ - 前端開發
  • 為什麼前端不能一直做？難道要轉行？？ - 計算機
  • 作為一個前端工程師，是往node方面轉，還是往HTML5方面轉？ - 前端開發

PS，打個小廣告，推廣一下個人微信公眾號：sunln_404 ，扯淡前端、理財、旅遊、生活、運動的個人小角落，時常宕機並404……歡迎關注。

先定一個小目標，做他一個天貓官網

題主問的是，前端開發領域有哪些值得推薦的問答，那麼這個回答就算是毛遂自薦啦

帶了挺多屆的學生，發現了一個現象，同學們在學習HTML，CSS，Javascript這些前端基礎技術的時候，不會有太大的問題，大概也能分開掌握裡面的標籤，元素，選擇器，函數，對象等等知識點。 但是要綜合運用這些知識做一個好看的網站的時候，就犯暈了，不知道該如何布局，如何運用合適的樣式，一些稍複雜的效果也不知道怎麼下手了。

這樣我認識到，單純學習這些分開的樣式等知識點，是無法有效的運用他們的。 那麼就需要一個前端項目來進行整體的練手。

每個培訓學校呢，都會有一個WEB項目來練手，通常都會做一個電商的購物網站，雖然聽上去老套，但是確實很典型，各種知識點都會涉及到。

既然如此，就做一個購物網站來讓他們跟著做來練手吧，那麼做一個什麼樣的好呢？ 放眼望去，難道還有比天貓官網更有說服力的嗎？

能夠從頭到尾做一個天貓官網前端，是非常有價值的。 假如，能夠獨立的做出來，那麼這就意味著，各種典型的場景，布局的思路，相關技術的運用都達到相當熟悉的程度，這個對於找工作，拿offer，更重要的是，技能的提升，是很有用的。

說干就干，我就照著天貓官網，做了一個模仿天貓官網: http://how2j.cn/tmall/ 包括裡面的取色，布局，javascript交互，尺寸，都統統盡我所能做到跟天貓官網近似。

好吧，同學們，就參考這個模仿天貓官網來練手，做一個一模一樣的吧！

然而，當我準備把這個項目一股腦打包給同學們的時候，我就懵逼了~

為什麼呢？ 因為內容實在是太多了！ 為了實現前端效果，其中光是style.css文件就2200多行。

Html頁面也相當複雜，還有各種javascript的交互。 如果就這麼一股腦打包給同學們，那麼讓他們直接去天貓官網看又有什麼分別呢？ 對於前端新手，一下子太多太大的信息量，不僅不能被有效地消化掉，還有可能產生副作用——面對大量代碼無從學起，強行閱讀複雜代碼，難以理解與消化，逐漸增加受挫感，最後失去興趣

為了能夠讓這些知識變得易於消化和吸收(也不枉我花了2個多月的時間，一點點取色，量取尺寸，翻來覆去規劃布局，反覆嘗試精心製作一樣的javascript交互效果，最後做出來的這麼20多種模仿天貓官網頁面)，我把頁面分為如下幾類頁面：

有的頁面比較複雜，就再拆分的小的頁面，比如首頁又分為導航和輪播，分類和推薦產品，產品列表以及javascript的交互部分。

光是拆分的小的頁面也不夠啊，在每個個頁面知識點的講解裡面，首先展示運行之後的效果

接著講解為了達到這個效果要進行如何的布局

結合布局，無CSS效果的HTML結構就好理解多了

然後就是樣式的講解，在這裡我就犯難了， 樣式起作用是和不同的選擇器以及元素關聯起來的。 怎麼樣才可以有效的讓同學們理解那麼多的樣式以及他們效果呢？

為了更好的把樣式的作用闡述出來，做了一個大大提高學習效率 的 樣式詳解 功能。

http://how2j.cn/frontshowFullStyle?step.id=3135amp;amp;amp;tid=2

這個功能。。。怎麼用呢~

左邊是列出了所有的樣式

右邊一開始是無樣式的HTML的效果

通過點擊左邊的"點擊套用"，就可以挨個使用每種樣式，並且可以在右邊立馬看到使用這一種樣式之後的效果。

這樣就可以達到立竿見影呈現這個樣式的效果了

當然還提供了套用全部樣式，取消全部樣式這些功能。

值得一提的，還有這個動態套用樣式這個功能，hoho，點擊之後，每隔一秒鐘逐個自動套用左側的所有樣式，通過觀察從無樣式的HTML演變為有樣式的效果這麼一個動態過程，可以更好的建立整體樣式效果觀念和理解，這是非常吼的~

好，通過這麼一個流程，同學們就可以對整個樣式的理解達到比較好的程度。
但是！ 光看是沒有用的啊，最後還是要自己寫出來才行啊，

所以我又提供了一個練習模式。

http://how2j.cn/frontpractiseModel?step.id=3135amp;amp;amp;tid=2

在練習模式中，左側是已經準備好了選擇器的樣式，右側是實時顯示效果。 根據前面對各種樣式的理解和消化，自己動手做一遍。 做的時候，就會犯各種錯誤，跳各種坑。 而恰恰就是這些各種錯誤和各種坑，才是最有價值的經驗碎片和能力源泉。

最後，還提供了一個空白頁供以練習，在這個空白頁里準備好了jquery和bootstrap的導入(因為要用到bootstrap的圖標)，還準備了&& 標籤 &&標籤，以及一個空白的&&。

倘若！ 倘若！ 能夠基於空白頁，獨立地把前面演示的天貓效果做出來，那麼我可以說，這個頁面所運用到的前端的知識點，你就拿到手了！

倘若！ 倘若！ 能夠把所有的天貓前端頁面都學習並且掌握，而且能夠獨立的做出來。 那麼閣下所掌握的前端技能，不敢說就達到王者，但起碼也是白銀！

試問，如果你正在找前端工作，又有多少公司對前端頁面的要求會超過天貓呢？

因為這套學習天貓官網前端的學習系統有一定的複雜性，為了保證學習的高效率性，錄製了如何使用這套系統的視頻。

教程地址： http://how2j.cn/k/tmall-front/tmall-front-790/790.html?tid=2
由於個人能力和視野有限，教程還有諸多不足之處，請大家多多指點，謝謝。

收藏的同學，請記得點個贊~

閱讀大型 JavaScript 源碼時有什麼好用的工具？ - 豪情的回答
你收集的IT圈的博客都有哪些？ - 豪情的回答
Sublime Text 有哪些使用技巧？ - 豪情的回答
完全理解jQuery源代碼，在前端方面算什麼水平？ - 豪情的回答
http://www.zhihu.com/question/20936155
http://www.zhihu.com/question/22487701/answer/21567246

過去的2013年，你最喜歡的JavaScript書是哪些？

看你們都在談技術，不得說一句「對於前端來說，技術之外的東西也是很重要的」。

順便安利自己的專欄：前端工程師的形而上學

我是來安利我的專欄的：『我的職業是前端工程師 - 知乎專欄』~~

  1. 我的職業是前端工程師【一】: 我要成為一個前端設計師
  2. 我的職業是前端工程師【二】: 入門不是應該很簡單嗎？
  3. 我的職業是前端工程師【三】：學習前端只需要三個月【語言篇】
  4. 我的職業是前端工程師【四】：如何選擇合適的前端框架，告別選擇恐懼症
  5. 我的職業是前端工程師【五】: 前端工程師必會的六個調試技能
  6. 我的職業是前端工程師【六】：前端程序員如何有效地提高自己
  7. 我的職業是前端工程師【七】：你真的懂前後端分離嗎？
  8. 我的職業是前端工程師【八】：SEO 技巧，如何設計一個高質量的 URL 和標題
  9. 我的職業是前端工程師【九】：你應該知道的單頁面應用的五要素
  10. 我的職業是前端工程師【十】客戶端存儲藝術：數據存儲與模型
  11. 我的職業是前端工程師【十一】：這幾點技巧幫你優化前端應用性能
  12. 我的職業是前端工程師【十二】寫給前端工程師看的，移動應用選型指南
  13. 我的職業是前端工程師【十三】：如何處理好前後端分離的 API 問題
  14. 我的職業是前端工程師【十四】：如何從頭開發一個前端應用
react 可以去看一下，facebook 官方提供的一個開源前端框架！真的很強大，無論是性能還是代碼的優雅度，都是沒的說！

你見過最美的網頁是哪個？ - 知乎
你見過最美的網頁是哪個？

現在H5比較流行吧。可以研究下啊。

zhan

阮一峰的博客，剩下的自己根據需要拓展吧。很多時候我們不是為了學習而學習，學習是為了解決實際問題。

收藏

前端模塊組裝的時代就要到來了

為什麼沒有人提SegmentFault？為什麼沒人提掘金 - juejin.im - 高質量的技術社區？

推薦閱讀：

※為什麼維基百科的用戶界面設計不夠友好？
※為什麼很難聘到前端工程師？

TAG:前端開發 | HTML | CSS | JavaScript |