很多關注了我的公眾號的粉絲可能都不知道我，趁這次機會簡單介紹下。

你好，我是若川。江西人，某不那么知名的陶瓷大學畢業生，目前在杭州從事前端開發工作。常以若川為名混跡于江湖。更詳細的可以點擊關于我
我歷時一年才寫了《學習源碼整體架構系列》八篇文章，包含jQuery、underscore、lodash、sentry、vuex、axios、koa、redux源碼，詳細的寫了我是如何看源碼的，并且繪制了大量的關系圖和原理圖，應該算是比較好的學習源碼的文章。更多可參考我的這篇知乎回答：有哪些必看的 JS 庫？

也在公眾號發布了往年的年度總結，或許對你有些啟發。2016、2017、2018、2019

以下是書籍介紹和末尾抽獎規則，歡迎大家呼朋喚友一起參與～

---

隨著多設備、瀏覽器和Web標準的演變革命，前端正在成為兼顧邏輯、性能、交互、體驗的綜合性崗位。

?

前端開發入門又相對容易，必須掌握的HTML+CSS+JS非常容易學習，如果你能再了解一定后端知識，對業務需求和架構設計有熟練運用，再能夠兼顧技術和設計，很快就可以成為“以前端開發為主的全棧工程師”。

?

今天推薦一本Web前端的敲門磚！《Web前端工程師修煉之道》，這是一本完整的Web 設計和制作的入門指南。詳解WEB前端基礎知識，如HTML、CSS、JavaScript、Web圖像制作等等。

你是否曾想過自己創建網頁，但苦于沒有經驗？那么從這本書開始學習吧！本書由淺入深地講解了Web設計的一些重要概念、基本原理，以及HTML、CSS和JavaScript的具體使用方法與技巧。當你讀完本書后，將會掌握創建適用于移動設備的多列頁面的技巧。

每章都提供了一些練習和小測驗，幫助你了解不同的技術，鞏固對重要概念的理解。

第5版進行了全面更新和修訂，涵蓋了Web前端開發所需的一切，無論對初學者還是對想提高已有技能的專業開發人員，本書都是理想的選擇。

?

本書主要內容

●使用文本、鏈接、圖像、表格和表單來構建HTML頁面。

●使用CSS調整顏色、背景、頁面布局以及格式化文本，甚至是實現簡單的動畫效果。

●學習JavaScript的工作原理及其在Web設計中的重要性。

●創建并優化Web圖像，加快圖像下載速度。

?

本版新增內容

• 使用CSS Flexbox和網格實現復雜靈活的頁面布局。

• 學習自適應Web設計的細節，使Web頁面在所有設備上看起來都很棒。

• 熟悉現代Web開發者工具包中的命令行、Git和其他工具。

• 了解SVG圖像的超強能力。

?

本書的組織結構

本書分為六部分，每一部分都是Web開發的一個重要方面。

• 第①部分：開始起步

第①部分為本書后面的學習奠定了基礎。我從關于Web設計的一些重要信息開始講述，包括你可能會扮演的各種角色，你可能會學到的技術和工具。你會學到HTML和CSS，并學習Web和網頁一般如何工作。我也會介紹一些重要的概念，帶你體會現代Web設計師的思想。

• 第②部分：HTML結構

第二部分涵蓋每個元素和屬性的本質以及語義結構。我們將討論如何標記文本、鏈接、圖像、表格、表單和嵌入式媒體。

• 第③部分：表現層的CSS

在第三部分，你會學習使用CSS來改變文本的外觀，為頁面創建多列布局，甚至添加基于時間的動畫、交互等。該部分還介紹了自適應Web設計，以及作為現代開發人員工作流一部分的工具和技術。

• 第④部分：JavaScript行為

在第四部分，Mat Marquis從JavaScript的語法開始講解，帶領你逐步學習變量、函數。你也會學到JavaScript的使用方式（包括DOM腳本），以及已有的JavaScript工具（如polyfill和庫），即便你還沒有準備好從頭開始編寫代碼，這些工具也可以幫助你更快地使用JavaScript。

• 第⑤部分：Web圖像

第五部分介紹Web適用的各種圖像文件格式，提供了將其作為自適應工作流的一部分進行選擇的策略，而且描述了如何進行優化才能使文件尺寸盡可能小。此外，該部分還包括一個關于SVG圖形的章節，這為自適應設計和交互式設計提供了極大的便利。

• 第⑥部分：附錄

第六部分包含參考資料，如測驗答案、HTML全局屬性列表和CSS選擇器，還介紹了HTML5及其歷史。

?

?

目錄

【第一部分　開始起步7】

●第1章?Web設計入門9

從哪里開始9

它需要一個團隊（網站創建角色）10

為Web設計做準備19

你學會了什么25

自我測驗25

?

●第2章?Web是如何工作的26

互聯網與Web26

提供你的信息27

關于瀏覽器27

網頁地址（URL）29

網頁結構31

小結36

自我測驗37

?

●第3章?Web設計基本概念39

各種設備40

與標準一致41

逐步提高42

自適應Web設計43

可訪問性：所有用戶一個網站46

網站性能：連接速度的要求48

自我測驗50

?

【第二部分　HTML結構53】

●第4章 創建簡單網頁55

創建網頁的步驟55

啟動文本編輯器56

第1步：從內容開始58

第2步：HTML文檔結構化61

第3步：確定文本元素64

第4步：添加圖像67

第5步：使用樣式表改變外觀70

當網頁出錯時72

驗證你的文檔73

自我測驗74

元素回顧：HTML文檔結構75

?

●第5章 標記文本76

段落76

標題77

主題中斷78

列表79

更多內容元素82

組織網頁內容85

內聯元素綜述91

泛型元素div和span100

使用ARIA提高可訪問性104

字符轉義107

小結109

自我測驗112

元素回顧：文本元素112

?

●第6章 添加鏈接115

href屬性115

鏈接到Web上的網頁117

站內鏈接118

以新瀏覽器窗口為目標127

郵件鏈接129

電話鏈接129

自我測驗130

元素回顧：鏈接131

?

●第7章 添加圖像132

圖像格式簡介133

img元素134

添加SVG圖像139

自適應圖像標記146

小結158

自我測驗158

元素回顧：圖像159

?

●第8章 表格標記161

如何使用表格161

最小表結構162

表頭165

合并單元格165

表格可訪問性166

行和列組168

小結170

自我測驗172

元素回顧：表格172

?

●第9章 表單174

表單如何工作174

表單元素176

變量和內容178

重要表單控件綜述179

表單可訪問性功能197

表單布局和設計201

自我測驗202

元素回顧：表單203

?

●第10章 嵌入式媒體207

窗口中的窗口207

多用途嵌入器209

視頻和音頻210

畫布219

自我測驗223

元素回顧：嵌入式媒體223

?

【第三部分　表現層的CSS227】

●第11章 介紹層疊樣式表229

CSS的優點229

樣式表如何工作231

大概念235

CSS計量單位241

開發者工具就在瀏覽器中244

繼續使用CSS246

自我測驗247

?

●第12章 格式化文本248

基本字體屬性249

使用CSS3的高級排版功能265

改變文本顏色267

更多選擇器類型268

文本行設置274

下劃線和其他“修飾”277

改變字母大小寫278

空格279

文本陰影280

改變列表的數字編號284

自我測驗286

CSS回顧：字體和文本屬性288

?

●第13章 顏色和背景290

指定顏色值290

前景色297

背景色298

裁剪背景299

使用不透明度300

偽類選擇器301

偽元素選擇器306

屬性選擇器308

背景圖像309

快捷背景屬性323

漸變327

外部樣式表334

小結339

自我測驗339

CSS回顧：色彩和背景屬性341

?

●第14章 盒子思想342

元素盒子342

指定盒子尺寸343

填充348

邊框352

空白邊362

分配顯示類型365

盒子陰影368

自我測驗369

CSS回顧：盒子屬性369

?

●第15章 浮動與定位372

普通流372

浮動373

用CSS形狀進行精美文本環繞383

定位基礎390

相對定位391

絕對定位392

固定定位400

自我測驗401

CSS回顧：浮動和定位屬性402

?

●第16章 使用Flexbox和網格進行CSS布局403

使用CSS Flexbox的靈活盒子403

CSS網格布局432

自我測驗463

CSS回顧：布局屬性466

?

●第17章 自適應Web設計469

為什么要使用RWD470

自適應秘訣470

選擇斷點477

自適應設計481

關于測試492

更多的RWD資源494

自我測驗495

?

●第18章 過渡、變換和動畫497

CSS過渡497

CSS變換507

關鍵幀動畫515

小結520

自我測驗521

CSS回顧：過渡、變換和動畫522

?

●第19章 更多CSS技術524

對表單設置樣式524

對表格設置樣式527

重置和Normalize.css530

圖像替換技術532

CSS Sprite533

CSS特性檢測535

小結539

自我測驗539

CSS回顧：表格屬性541

?

●第20章 現代Web開發工具542

熟悉命令行542

CSS的強大工具：處理器546

構建工具：Grunt和Gulp552

使用Git和Github進行版本控制554

小結560

自我測驗561

?

【第四部分?JavaScript行為563】

●第21章?JavaScript簡介565

關于JavaScript565

給網頁添加JavaScript568

腳本剖析569

瀏覽器對象582

事件582

綜合應用584

學習更多關于JavaScript的知識585

自我測驗588

?

●第22章 使用JavaScript和DOM589

DOM簡介589

polyfill597

JavaScript庫599

小結603

自我測驗603

?

【第五部分?Web圖像605】

●第23章?Web圖像基礎607

圖像來源607

格式簡介610

圖像尺寸和分辨率620

圖像資產策略623

favicon627

小結630

自我測驗630

?

●第24章 圖像資產制作632

將圖像保存為Web格式632

使用透明度637

自適應圖像制作技巧640

圖像優化650

自我測驗660

?

●第25章?SVG661

使用XML繪圖663

SVG作為XML的特性670

SVG工具675

SVG制作技巧677

自適應SVG681

SVG的進一步探索687

自我測驗687

我們學完了688

?

【第六部分?附錄689】

附錄A 自我測驗答案691

附錄B HTML5全局屬性705

附錄C CSS選擇器的第3級和第4級707

附錄D 從HTML+到HTML5710

上下滑動查看

---

福利時間

最后，我又來給大家送福利了，這么好的書不送幾本給大家怎么行呢？

福利依然送給我「閱讀、點贊、在看、評論」我的文章的讀者們，你們的支持也是我持續輸出和運營公眾號的最大動力，感謝大家。

本次抽獎還是三個參與方式「留言、在看、現金紅包抽獎」，當然都參與中獎概率更高。

為了避免中獎后失聯，提前加我微信ruochuan12。

長按識別二維碼加我微信

若川原創文章精選!可點擊

留言抽獎

• 大獎：留言點贊數「前2名」每人可獲得一本 價值137元的《web前端工程師修煉之道》（實體書）

• 參與獎：隨機抽取「5位」評論送出「10元」紅包。

在看抽獎

• 大獎：隨機抽取「1位」在看同學送出一本?價值137元的《web前端工程師修煉之道》（實體書）

  參與獎：隨機抽取「5位」在看送出「10元」紅包。

現金紅包抽獎

• 現金紅包：同時設置了現金紅包 現金紅包分為「9.9」元一位??「8.8」元2位?「6.6」元3位。公眾號后臺回復「抽獎」即可獲得抽獎碼。

• 以上幾個獎項都參與中獎率更高哦，活動截止日期1月14日（周四）21:00。?最終解釋權歸我所有。

點擊 閱讀原文 可直接購買