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