隨著多設(shè)備、瀏覽器和Web標(biāo)準(zhǔn)的演變革命，前端正在成為兼顧邏輯、性能、交互、體驗的綜合性崗位。
?
前端開發(fā)入門又相對容易，必須掌握的HTML+CSS+JS非常容易學(xué)習(xí)，如果你能再了解一定后端知識，對業(yè)務(wù)需求和架構(gòu)設(shè)計有熟練運用，再能夠兼顧技術(shù)和設(shè)計，很快就可以成為“以前端開發(fā)為主的全棧工程師”。
?
今天推薦一本Web前端的敲門磚！《Web前端工程師修煉之道》，這是一本完整的Web 設(shè)計和制作的入門指南。詳解WEB前端基礎(chǔ)知識，如HTML、CSS、JavaScript、Web圖像制作等等。
你是否曾想過自己創(chuàng)建網(wǎng)頁，但苦于沒有經(jīng)驗？那么從這本書開始學(xué)習(xí)吧！本書由淺入深地講解了Web設(shè)計的一些重要概念、基本原理，以及HTML、CSS和JavaScript的具體使用方法與技巧。當(dāng)你讀完本書后，將會掌握創(chuàng)建適用于移動設(shè)備的多列頁面的技巧。
每章都提供了一些練習(xí)和小測驗，幫助你了解不同的技術(shù)，鞏固對重要概念的理解。
第5版進行了全面更新和修訂，涵蓋了Web前端開發(fā)所需的一切，無論對初學(xué)者還是對想提高已有技能的專業(yè)開發(fā)人員，本書都是理想的選擇。
?
●使用文本、鏈接、圖像、表格和表單來構(gòu)建HTML頁面。
●使用CSS調(diào)整顏色、背景、頁面布局以及格式化文本，甚至是實現(xiàn)簡單的動畫效果。
●學(xué)習(xí)JavaScript的工作原理及其在Web設(shè)計中的重要性。
●創(chuàng)建并優(yōu)化Web圖像，加快圖像下載速度。
?
使用CSS Flexbox和網(wǎng)格實現(xiàn)復(fù)雜靈活的頁面布局。
學(xué)習(xí)自適應(yīng)Web設(shè)計的細(xì)節(jié)，使Web頁面在所有設(shè)備上看起來都很棒。
熟悉現(xiàn)代Web開發(fā)者工具包中的命令行、Git和其他工具。
了解SVG圖像的超強能力。
?
本書分為六部分，每一部分都是Web開發(fā)的一個重要方面。
第①部分為本書后面的學(xué)習(xí)奠定了基礎(chǔ)。我從關(guān)于Web設(shè)計的一些重要信息開始講述，包括你可能會扮演的各種角色，你可能會學(xué)到的技術(shù)和工具。你會學(xué)到HTML和CSS，并學(xué)習(xí)Web和網(wǎng)頁一般如何工作。我也會介紹一些重要的概念，帶你體會現(xiàn)代Web設(shè)計師的思想。
第二部分涵蓋每個元素和屬性的本質(zhì)以及語義結(jié)構(gòu)。我們將討論如何標(biāo)記文本、鏈接、圖像、表格、表單和嵌入式媒體。
在第三部分，你會學(xué)習(xí)使用CSS來改變文本的外觀，為頁面創(chuàng)建多列布局，甚至添加基于時間的動畫、交互等。該部分還介紹了自適應(yīng)Web設(shè)計，以及作為現(xiàn)代開發(fā)人員工作流一部分的工具和技術(shù)。
在第四部分，Mat Marquis從JavaScript的語法開始講解，帶領(lǐng)你逐步學(xué)習(xí)變量、函數(shù)。你也會學(xué)到JavaScript的使用方式（包括DOM腳本），以及已有的JavaScript工具（如polyfill和庫），即便你還沒有準(zhǔn)備好從頭開始編寫代碼，這些工具也可以幫助你更快地使用JavaScript。
第五部分介紹Web適用的各種圖像文件格式，提供了將其作為自適應(yīng)工作流的一部分進行選擇的策略，而且描述了如何進行優(yōu)化才能使文件尺寸盡可能小。此外，該部分還包括一個關(guān)于SVG圖形的章節(jié)，這為自適應(yīng)設(shè)計和交互式設(shè)計提供了極大的便利。
第六部分包含參考資料，如測驗答案、HTML全局屬性列表和CSS選擇器，還介紹了HTML5及其歷史。
?
?
【第一部分 開始起步7】
●第1章?Web設(shè)計入門9
從哪里開始9
它需要一個團隊（網(wǎng)站創(chuàng)建角色）10
為Web設(shè)計做準(zhǔn)備19
你學(xué)會了什么25
自我測驗25
?
●第2章?Web是如何工作的26
互聯(lián)網(wǎng)與Web26
提供你的信息27
關(guān)于瀏覽器27
網(wǎng)頁地址（URL）29
網(wǎng)頁結(jié)構(gòu)31
小結(jié)36
自我測驗37
?
●第3章?Web設(shè)計基本概念39
各種設(shè)備40
與標(biāo)準(zhǔn)一致41
逐步提高42
自適應(yīng)Web設(shè)計43
可訪問性：所有用戶一個網(wǎng)站46
網(wǎng)站性能：連接速度的要求48
自我測驗50
?
【第二部分 HTML結(jié)構(gòu)53】
●第4章 創(chuàng)建簡單網(wǎng)頁55
創(chuàng)建網(wǎng)頁的步驟55
啟動文本編輯器56
第1步：從內(nèi)容開始58
第2步：HTML文檔結(jié)構(gòu)化61
第3步：確定文本元素64
第4步：添加圖像67
第5步：使用樣式表改變外觀70
當(dāng)網(wǎng)頁出錯時72
驗證你的文檔73
自我測驗74
元素回顧：HTML文檔結(jié)構(gòu)75
?
●第5章 標(biāo)記文本76
段落76
標(biāo)題77
主題中斷78
列表79
更多內(nèi)容元素82
組織網(wǎng)頁內(nèi)容85
內(nèi)聯(lián)元素綜述91
泛型元素div和span100
使用ARIA提高可訪問性104
字符轉(zhuǎn)義107
小結(jié)109
自我測驗112
元素回顧：文本元素112
?
●第6章 添加鏈接115
href屬性115
鏈接到Web上的網(wǎng)頁117
站內(nèi)鏈接118
以新瀏覽器窗口為目標(biāo)127
郵件鏈接129
電話鏈接129
自我測驗130
元素回顧：鏈接131
?
●第7章 添加圖像132
圖像格式簡介133
img元素134
添加SVG圖像139
自適應(yīng)圖像標(biāo)記146
小結(jié)158
自我測驗158
元素回顧：圖像159
?
●第8章 表格標(biāo)記161
如何使用表格161
最小表結(jié)構(gòu)162
表頭165
合并單元格165
表格可訪問性166
行和列組168
小結(jié)170
自我測驗172
元素回顧：表格172
?
●第9章 表單174
表單如何工作174
表單元素176
變量和內(nèi)容178
重要表單控件綜述179
表單可訪問性功能197
表單布局和設(shè)計201
自我測驗202
元素回顧：表單203
?
●第10章 嵌入式媒體207
窗口中的窗口207
多用途嵌入器209
視頻和音頻210
畫布219
自我測驗223
元素回顧：嵌入式媒體223
?
【第三部分 表現(xiàn)層的CSS227】
●第11章 介紹層疊樣式表229
CSS的優(yōu)點229
樣式表如何工作231
大概念235
CSS計量單位241
開發(fā)者工具就在瀏覽器中244
繼續(xù)使用CSS246
自我測驗247
?
●第12章 格式化文本248
基本字體屬性249
使用CSS3的高級排版功能265
改變文本顏色267
更多選擇器類型268
文本行設(shè)置274
下劃線和其他“修飾”277
改變字母大小寫278
空格279
文本陰影280
改變列表的數(shù)字編號284
自我測驗286
CSS回顧：字體和文本屬性288
?
●第13章 顏色和背景290
指定顏色值290
前景色297
背景色298
裁剪背景299
使用不透明度300
偽類選擇器301
偽元素選擇器306
屬性選擇器308
背景圖像309
快捷背景屬性323
漸變327
外部樣式表334
小結(jié)339
自我測驗339
CSS回顧：色彩和背景屬性341
?
●第14章 盒子思想342
元素盒子342
指定盒子尺寸343
填充348
邊框352
空白邊362
分配顯示類型365
盒子陰影368
自我測驗369
CSS回顧：盒子屬性369
?
●第15章 浮動與定位372
普通流372
浮動373
用CSS形狀進行精美文本環(huán)繞383
定位基礎(chǔ)390
相對定位391
絕對定位392
固定定位400
自我測驗401
CSS回顧：浮動和定位屬性402
?
●第16章 使用Flexbox和網(wǎng)格進行CSS布局403
使用CSS Flexbox的靈活盒子403
CSS網(wǎng)格布局432
自我測驗463
CSS回顧：布局屬性466
?
●第17章 自適應(yīng)Web設(shè)計469
為什么要使用RWD470
自適應(yīng)秘訣470
選擇斷點477
自適應(yīng)設(shè)計481
關(guān)于測試492
更多的RWD資源494
自我測驗495
?
●第18章 過渡、變換和動畫497
CSS過渡497
CSS變換507
關(guān)鍵幀動畫515
小結(jié)520
自我測驗521
CSS回顧：過渡、變換和動畫522
?
●第19章 更多CSS技術(shù)524
對表單設(shè)置樣式524
對表格設(shè)置樣式527
重置和Normalize.css530
圖像替換技術(shù)532
CSS Sprite533
CSS特性檢測535
小結(jié)539
自我測驗539
CSS回顧：表格屬性541
?
●第20章 現(xiàn)代Web開發(fā)工具542
熟悉命令行542
CSS的強大工具：處理器546
構(gòu)建工具：Grunt和Gulp552
使用Git和Github進行版本控制554
小結(jié)560
自我測驗561
?
【第四部分?JavaScript行為563】
●第21章?JavaScript簡介565
關(guān)于JavaScript565
給網(wǎng)頁添加JavaScript568
腳本剖析569
瀏覽器對象582
事件582
綜合應(yīng)用584
學(xué)習(xí)更多關(guān)于JavaScript的知識585
自我測驗588
?
●第22章 使用JavaScript和DOM589
DOM簡介589
polyfill597
JavaScript庫599
小結(jié)603
自我測驗603
?
【第五部分?Web圖像605】
●第23章?Web圖像基礎(chǔ)607
圖像來源607
格式簡介610
圖像尺寸和分辨率620
圖像資產(chǎn)策略623
favicon627
小結(jié)630
自我測驗630
?
●第24章 圖像資產(chǎn)制作632
將圖像保存為Web格式632
使用透明度637
自適應(yīng)圖像制作技巧640
圖像優(yōu)化650
自我測驗660
?
●第25章?SVG661
使用XML繪圖663
SVG作為XML的特性670
SVG工具675
SVG制作技巧677
自適應(yīng)SVG681
SVG的進一步探索687
自我測驗687
我們學(xué)完了688
?
【第六部分?附錄689】
附錄A 自我測驗答案691
附錄B HTML5全局屬性705
附錄C CSS選擇器的第3級和第4級707
附錄D 從HTML+到HTML5710
上下滑動查看
抽獎方式很簡單，掃碼下面二維碼關(guān)注 「前端自習(xí)課」，然后在后臺回復(fù)?“2021”。活動禮品：
《Web前端工程師修煉之道》?1?本，共?1?個名額；
? 2.88?元紅包 1 個，共 10?個名額；
開獎時間：2021 年 01 月 15 日 19:00；
此外，也可以添加我為微信好友，加入「前端自習(xí)課」交流群，與大家交流經(jīng)驗，一起學(xué)習(xí)。
最后，祝大家好運。注意上述送書活動的?中獎?wù)哒堄?2?天內(nèi)聯(lián)系去我兌獎，逾期無效。再次感謝?華章公司?對本次活動的大力支持??。
