很多关注了我的公众号的粉丝可能都不知道我，趁这次机会简单介绍下。

你好，我是若川。江西人，某不那么知名的陶瓷大学毕业生，目前在杭州从事前端开发工作。常以若川为名混迹于江湖。更详细的可以点击关于我
我历时一年才写了《学习源码整体架构系列》八篇文章，包含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。 最终解释权归我所有。

点击 阅读原文 可直接购买