但是，我发现近几年很多开发项目已经完全抛弃了 IE 这个魔鬼了。如果你不需要兼容“石器时代”的 IE 浏览器了，那就要开始熟悉一下这几个方法来处理数组。

注意这遍文章说的的 3 个方法其实在很多其他语言都可以使用到，因为这几个方法和使用概念在很多其他语言都是存在的。

.map()

让我用一个简单的例子告诉你如何使用这个方法。假如你现在有多对象的数组数据 - 每一个对象代表着一个员工的信息。现在你想要的最终结果就是取出所有员工的唯一 ID 值。

// 员工数据var employees = [  { id: 20, name: 'Captain Piett' },  { id: 24, name: 'General Veers' },  { id: 56, name: 'Admiral Ozzel' },  { id: 88, name: 'Commander Jerjerrod' }];// 你想要的结果[20, 24, 56, 88]

其实要实现这个结果有很多数组处理方式。传统的处理方法就是先定义一个空数组，然后使用.forEach()，.for(...of)，或者是最简单的.for()来组装 ID 到你定义的数组里面。

我们来对比一下传统的处理方式和.map()的区别。

使用.forEach()：

var employeeIds = [];employees.forEach(function (employee) {  employeeIds.push(officer.id);});

注意，使用传统的方式，我们必须有一个预定义的空数组变量才行，但是如果是.map()就会更简单了。

var employeeIds = employees.map(function (employee) {  return employee.id});

甚至我们可以用更简洁的方式，使用箭头方法（但是需要 ES6 支持，Babel，或者 TypeScript）。

const employeeIds = employees.map(employee => employee.id);

所以.map()到底是怎么运作的呢？这个方法有两个参数，第一是回调方法，第二是可选内容（会在回调方法中做为this）。数组里的每个数值/对象会被循环进入到回调方法里面，然后返回新的数值/对象到结果数组里面。

注意，结果数组的长度永远都会和被循环的数组的长度一致。

.reduce()

与.map()相似，.reduce()也是循环一个回调方法，数组里面的每一个元素都会进入回调方法，区别是回调方法返回的值会被传递到下一个回调方法，如此类推（等同于一个累加器）。

.reduce()里的累加值可以是任何属性的值，包括integer，string，object等等。这个累加值会被实例化或者传递到下一个回调方法。

来，上代码，做个简单的例子！假如你有一个飞机师的数组，数组里面有每个飞机师的工龄。

var pilots = [  {    id: 10,    name: "Poe Dameron",    years: 14,  },  {    id: 2,    name: "Temmin 'Snap' Wexley",    years: 30,  },  {    id: 41,    name: "Tallissan Lintra",    years: 16,  },  {    id: 99,    name: "Ello Asty",    years: 22,  }];

现在我们需要知道所有飞机师累计的总工龄，使用.reduce()就是比吃饭还简单的事情。

var totalYears = pilots.reduce(function (accumulator, pilot) {  return accumulator + pilot.years;}, 0);

注意，这里第二个参数我传了 0。第二个参数是一个累加值的初始值。当然，如果场景需要，这个初始值也可以传入一个变量或者你需要的值。循环了数组里的每一个元素后，reduce方法会返回最终累加后的值（在我们这个例子中就是82）。

例子里面的acc和accumulator就是累加值变量。

如果是使用 ES6 箭头写法，我们可以写得更加优雅简洁，一行就可以搞掂的事情！

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);

现在，如果我们需要找到哪一位是最有经验的飞机师，这种情况我们一样可以使用.reduce()。

var mostExpPilot = pilots.reduce(function (oldest, pilot) {  return (oldest.years || 0) > pilot.years ? oldest : pilot;}, {});

这里我把accumulator变量改为oldest，代表飞机师里面的老司机。这时候reduce里面的回调方法对比每一个飞机师，每一次飞机师的值进入这个回调方法，工龄更高的就会覆盖oldest变量。最终循环后得到的oldest就是工龄最高的飞机师。

通过这几个例子，你可以看到使用.reduce()可以简单又优雅地在一个数组里面获取到单个最终值或者对象。

.filter()

如果你现在的场景是需要在一个数组里面过滤一部分的数据，这个时候.filter()就是你最好的朋友了。

我们用回飞机师的数据，并且加入了所属航空公司的值：

var pilots = [  {    id: 2,    name: "Wedge Antilles",    faction: "Rebels",  },  {    id: 8,    name: "Ciena Ree",    faction: "Empire",  },  {    id: 40,    name: "Iden Versio",    faction: "Empire",  },  {    id: 66,    name: "Thane Kyrell",    faction: "Rebels",  }];

假如现在我们想分别筛选出Rebels和Empire两个航空公司的飞机师，使用.filter()就是轻而易举的事情！

var rebels = pilots.filter(function (pilot) {  return pilot.faction === "Rebels";});var empire = pilots.filter(function (pilot) {  return pilot.faction === "Empire";});

就这么简单，如果使用箭头方法（ES6）就更加优雅了：

const rebels = pilots.filter(pilot => pilot.faction === "Rebels");const empire = pilots.filter(pilot => pilot.faction === "Empire");

其实原理很简单，只要你的回调方法返回的是true，这个值或者对象就会在新的数组里面了。如果返回的是false就会被过滤掉了。

结合使用 .map()，.reduce()，.filter()

既然我们刚刚学到的三个函数都是可以用于数组的，并且.map()和.filter()都是返回数组的，那我们可以把它们串联起来使用。不说多了，上代码试试！

我们用一个有趣一点的数据试验一下。假如现在我们有一个星球大战里面的人物的数组，每个字段的定义如下：

• Id: 人物唯一ID

• name: 人物名字

• pilotingScore: 飞行能力指数

• shootingScore: 射击能力指数

• isForceUser: 是否拥有隔空操控能力

我们的目标：获取拥有隔空操控能力的飞行员的总飞行能力指数。我们分开一步一步实现这个目标！

首先我们需要先获取到拥有隔空操控能力的飞行员。

var jediPersonnel = personnel.filter(function (person) {  return person.isForceUser;});// 结果集: [{...}, {...}, {...}] (Luke, Ezra and Caleb)

通过这段代码，我们获得了 3 个飞行员对象，分别都是拥有隔空操控能力的飞行员。使用这个对象，我们来获取每个飞行员的飞行能力指数值。

var jediScores = jediPersonnel.map(function (jedi) {  return jedi.pilotingScore + jedi.shootingScore;});// 结果: [154, 110, 156]

获取到每个飞行员的飞行能力指数值后，我们就可以用累加器（.reduce()）来获取总飞行能力指数了。

var totalJediScore = jediScores.reduce(function (acc, score) {  return acc + score;}, 0);// 结果: 420

这里使用分开实现方式可以达到我们的目标，但是其实我们可以串联起来，可以写得更加简洁又优雅！我们来玩玩更好玩的吧！

var totalJediScore = personnel  .filter(function (person) {    return person.isForceUser;  })  .map(function (jedi) {    return jedi.pilotingScore + jedi.shootingScore;  })  .reduce(function (acc, score) {    return acc + score;  }, 0);

这样写是不是很优雅！都被这段代码给美到了！❤️

如果我们使用箭头写法 ES6，就更加优雅了！

const totalJediScore = personnel  .filter(person => person.isForceUser)  .map(jedi => jedi.pilotingScore + jedi.shootingScore)  .reduce((acc, score) => acc + score, 0);

哇！代码原来可以写的那么优雅的么？！想不到吧？

其实我们只需要使用.reduce()就可以得到我们的目标结果了，以上例子做为教学例子，所以使用了 3 个我们学到的函数。

我们来看看只用.reduce()怎么实现的。

const totalJediScore = personnel.reduce((acc, person) => person.isForceUser ? acc + person.pilotingScore + person.shootingScore : acc, 0);

不敢想象吧？一行就搞定一个功能不是梦！

为什么抛弃 .forEach()?

其实我一开始写前端的时候也是一顿撸，来个数组都是撸个 for 循环，解决一切数组处理问题。但是近几年我开始步入前后端开发，API 接口对接。发现数据处理越来越多，如果还是像以前那样什么都用 for 循环来处理数据，那其实数据处理的代码就会越来越臃肿越来越复杂凌乱。所以我开始抛弃了.forEach()，开始做一个优雅的程序员！

为什么使用.map()，.filter()，.reduce()写代码更优雅、更美观呢？我们用一个实战例子来对比一下吧。

假设现在我们对接一个接口，返回的数组里面有两个字段name：人的名称和title：对应的职位。

var data = [  {    name: "Jan Dodonna",    title: "General",  },  {    name: "Gial Ackbar",    title: "Admiral",  },]

产品经理给到你的需求是只需要展示这些人的职位称呼。

当然这个时候有一些前端开发者就会说“我只是个小小的前端，让后端给我处理吧”。

但是，这个接口其实是一个通用的接口，就是获取这些员工的资料的，是在多个地方使用的。如果每一个页面因为需要展示的不一样而要写多一个接口给你，你觉得这样好吗？

作为一个优秀的前端工程师🦁️，这种小 case 你自己就可以很优雅地处理好了。而且，在一个优秀的团队里，后端确实是要考虑接口通用性的，这种为了你自己的方便而给他们带来更臃肿的接口是不可接受的。所以前端这个时候就是要重组数据了。

假设现在产品给你的需求是员工列表中要支持只展示”员工职称“和”员工信息“的两种显示项，这个时候我们就要编写一个数据组装方法来跟进展示要求，来改变数据格式。

因为这个“骚“需求，我们使用.forEach()来重组数据就相对比较麻烦了，而且代码也会变得臃肿。

我们忽略了组装数据的方法，直接就当作我们已经写好了一个组装数据的方法为formatElement。如果我们用forEach，那首先就需要定义一个空数组来接收结果。

var results = [];data.forEach(function (element) {  var formatted = formatElement(element);  results.push(formatted);});

所以我们需要两个方法才能实现这个数据结果，但是为什么要写得那么臃肿呢？因为forEach并没有返回值，单单就给你跑个循环，还需要自己push值到预定义的变量里面。其实一个方法就可以完成了，而且重点是一行代码就完事了。

来使用我们新学的技巧，用.map()来实现就非常简单优雅了。

var results = data.map(formatElement);

总结

你学会了吗？学会了就去尝试用.map()，.reduce()，.filter()来替换你传统的for循环吧！我保证你的代码会越来越简洁，可读性更高。

坚持做一个优雅的程序员，坚持每天敲代码！

我自学前端已经有 6 年多了，自问当时学前端是没有系统化学习的。一开始边看文档，连滚带爬学 HTML 和 CSS 排版，然后深入研究 JavaScript，因为当时最火的就是 JQuery，所以用了很长一段时间的 JQ。

到了后面遇到有一个项目需要我做 APP 开发，但是不可能去学 IOS 开发和安卓开发，因为项目时间也不可能给我们这么充裕的学习时间。所以当时的我深入分析了几个混合 APP 开发的框架。分析对象包括当时基于 AngularJs 的 Ionic 框架和 React Native。综合考虑最后选择了 Ionic，然后自学了 Angular2。（过程也是踩过成千上万的坑学会的）

APP 开发的这个过程让我深入感觉到那时候前端的革命性变化。庞大的前端知识扑面而来，也没有想到前端已经发展到这样一个地步。这段时间让我深刻领会到前端的博大精深，并且被前端这个技术领域深深的吸引住了。

到了后面 Vue 突然开始火了，各大技术公司都开始使用 Vue+Cli 脚手架搭建前端应用。越来越多的企业要求使用 Vue 开发前端应用和 WebAPP。热爱前端的我从来不畏惧需要学更多的知识，既然 Vue 来势汹汹，我也开始深入研究和学习 Vue 开发前端。经过一番折腾 Vue 也上手了。

至今我依然在不停的学习前端无边无际的知识和技术。

最近我发现，现在学习技术容易了很多。有各种技术文章、手摸手教学、线上培训课程和视频，甚至还有全免费的线上学习课程和练习。相比以前从看文档，连滚带爬的在项目中试错式的学习真的是容易多了。

「前言」

我们都深刻知道，如果想在前端走的更远更久，基础知识必须是要牢固的。最近发现一个免费学习编程的网站 freeCodeCamp(🔥) - 官方版（英文） ｜ 中文社区版 。我好学的性格牵动着我的灵魂，忍不住就去研究了一下。我发现里面的课程确实很全面，而且还有实时和实战编程练习。就算是对于零基础的童鞋，也是可以开始学习编程的。

在一个夜深人静的夜晚，我看着电脑思考人生的时候，我灵机一动，要不我开始写一个系列的文章和大家一起闯关进攻前端全方位知识点。没有闯过这些关卡的童鞋，无论前端能力如何，这个可以锻炼我们自己，也可以深入知道我们自己的前端水平和差距。想学习前端的童鞋可以从零开始学习，一起排除困难共同打开前端大门！

使用这个免费网站学习编程，每一个知识学习完成后会给大家发放一个证书，然后每一个关键学习点之后，还有项目实战。自从 2014 年，有超过 4 万个freeCodeCamp毕业的童鞋获得了大企业工作机会。（里面有提到谷歌，苹果，微软，亚马逊，Spotify 等公司）

还有看到一些学员的评价：

• “我在实习的时候，导师就叮嘱我在 freeCodeCamp 上做题闯关。技术的精进不仅给了我强大的自信，也让我得以进入大厂 ThoughtWorks。” --- 姜玉珍
• “对于还没有形成编程思维的新人，即使是 leetcode 上面 easy 级别的算法题目都感到非常有难度，而 freeCodeCamp 的算法题恰好是一个良好的过渡。” --- 魏朝欣

无论这些证书是否对我们在中国的企业有一定的价值。但是能获得多一个证书，没有什么不好的呀。废话不多说了，我们这里就开始勇闯第一课《基础 HTML 与 HTML5 入门》！

「规则」如何一起闯关

在开始这个闯关的系列之前，讲一下我们具体怎么一起闯关。

首先，如果我是单纯在这里给大家发布答案，我觉得这些文章就没有太大意义了。所以我希望在闯关的过程中一起学习到更多的知识，弄懂更深层的技术和用我的相关经验讲说这些知识在工作中的使用场景和小技巧。

---

个人觉得英文版本的操作和体验都更好，加上英文版本的课题会更新。所以我会在英文版中与大家一起闯关。但是喜欢用中文社区版本也是可以的哦。酸甜苦辣各有所爱，但是效果和课题基本都是一样的哈。

每一篇文章的大概内容：

1. 首先我们每一篇文章会尽量包含一个大知识点中的 N 个关卡。每一个知识点的关卡数量不一，所以有时候可能会拆分成几篇文章来讲说。
2. 每一个关卡当中的知识点在 freeCodeCamp 中有一定的知识材料。但是在一起闯关的文章当中也会做一些详细的知识补充和一些有趣的理解方式。
3. 每一个较难的关卡，都会在文章当中做详细的思路，多种实现方式等等的讲说，让我们在每一个关卡中能带走更多深层的知识点。

freeCodeCamp 使用教程

课程内容

FCC 一共有 6 大课程，一共大约 1800 个小时的内容和练习。如果是新人，推荐从第一个开始一个一个闯关学习。如果是老司机，是来这里学习你需要的知识，那可以随意选择你需要的课程开始学习。

• 响应式 Web 设计（300 个小时）
• 算法和数据结构（300 个小时）
• 前端库和框架（300 个小时）
• 数据可视化（300 个小时）
• API 和微服务（300 个小时）
• 信息安全和质量保证（300 个小时）

最后还有一个是数千个小时的面试题可以提供给我们使劲的刷哦！

进入关卡

首先我们展开第一课看一下：

1. 第 1 点这里是基础知识的文章，可以点击查看。看完基础知识之后可以点击下方的回到第一小节开始闯关！
2. 第 2 点这里下面所有的都是练习题，一个一个顺着闯关即可。

关卡教程

⚠️ 注意：
大家闯关之前，推荐大家都先使用 GitHub 登陆，到时候颁发的证书和闯关进度才能得到保存和跟踪哦！！！

我们先从左边 👈 部分的内容开始说明：

1. 简单讲说了这个关卡涉及的知识点
2. 描述关卡的挑战内容
3. 本关卡的所有目标，点击测试代码的时候，完成的会出现 ✅，没有全部 ✅ 那就是还有部分我们没有实现哦。所有 ✅ 才能通关。

接下来就是说明中间的代码区：

1. 代码区，用于编写我们这个关卡的代码。
2. 错误输出区域，当我们点击测试代码后，如果有错误就会显示在这里。

最后，最右边的部分是代码被编译后的效果，也就是我们在代码去编写的代码最终会在浏览器呈现出来的效果哦。（这里的效果会在我们编写代码的同时触发变化哦！）

提交代码/测试成功后：

「知识」闯关基础知识点

HTML 是什么？
HTML 的全称是 HyperText Markup Language（超文本标签语言），它是一种用来描述网页结构的标签语言。
它采用一种特殊的语法或符号来组织网页的内容，元素通常都有开始标签和结束标签，例如标题、段落、列表。

更好的理解 HTML

对于没有计算机基础的童鞋（就算是有）都会觉得有点抽象，不太好理解。我们换一个说法来理解一下：

HTML 就等同于我们人体里面的骨架，一块一块骨头（标签）组装起来建立起一个人的骨架和结构。比如说经常可以见到的head，body，footer等标签，就等同于一个人的头，身体和脚。那其他的标签比如h1，h2，div，section和ul，li等标签就是用来组建我们人体每一个部位的小骨头。

如果 HTML 加上了 JavaScript（人体中的大脑和肌肉）就可以操控整个人的动作，让一个人活起来了。但是只有骨头和肌肉，这个也太难看了吧？想想都觉得吓人。所以我们会有皮肤来把这些不太好看的东西藏起来，这个时候就需要在 HTML 中使用 CSS（人体的皮肤）。这样子我们有好的皮肤加上衣服和化妆品的打扮，这样才可以貌美如花嘛对吧？

如果我们上面说的骨头和骨架，在代码中又是什么样子的呢？我们一起来看看：

<h1>Top level heading: Maybe a page title</h1>

<p>
  A paragraph of text. Some information we would like to communicate to the viewer. This can be as
  long or short as we would like.
</p>

<ol>
  <li>Number one on the list</li>
  <li>Number two</li>
  <li>A third item</li>
</ol>

这段代码被编译后就会在浏览器呈现出这个样子：

HTML5 又是什么？

HTML 这种超文本源自于 Web 早期和最初的用例。当时页面都是静态文档，并且文档中也有连接和引用到其他的文档。通过浏览器中的 hypertext links（超文本链接）在文档之中跳转与导航。这样用户就可以自由的在文档之中翱翔，不用在文档直接搜索查看。

后期 web 页面和 web 应用渐渐变得越来越复杂，W3C 更新了 HTML 的规范来让所有的浏览器更加兼容彼此。为什么呢？大家应该都知道市面上有五花八门的各种浏览器，如果每一个浏览器都对 HTML 有不同的写法，不同的规范，那我们做前端开发的，有多少的浏览器规范我们就需要学会多少种写法。不用后浪推上来，已经累死在沙滩上了。

那 HTML5 其实就是第五版的 HTML 规范，也是目前最新的版本。

基础知识弄懂了，我们马上就来开始闯关吧！GO GO GO！

「第一关」用 HTML 元素与世界问好

关卡名：Say Hello to HTML Elements

身在技术领域的童鞋们都知道，入门任何语言的开头都是先与世界问个好（所谓的输出一个"Hello World"）。所以第一关当然是用 HTML 元素与世界问好啦！😂

知识点

• 这一关我们看到代码区域有<h1>hello</h1>这一段代码，这个就是所谓的 HTML 元素了！也就是人体中的一小块骨头 🦴！。
• HTML 中每一个标签都需要开始与结束标签：<h1> 为开始，</h1> 为结束。
• 开始与结束标签的区别，就是结束标签多了/（斜杠）。

过关目标

• 修改开始标签<h1>与关闭标签</h1>之间的内容。
• 把内容从Hello改为Hello World。

学会了什么？

这关卡主要教会我们：

1. HTML 中的开始与结束标签的格式与规范
2. 标签的内容是什么
3. 如何修改标签内容

答案

「第二关」使用 H2 元素加入副标题

关卡名：Headline with the h2 Element

接下来的几个关卡中，我们会慢慢的一步一步的搭建一个 HTML5 的 “猫星人图片的网页应用”。

知识点

• h2元素是常用的副标题，其实就是比h1字体要小的标题，用过WPS或者word文档的童鞋应该秒懂了。
• 这些标题标签会告诉浏览器去显示一些默认的标题样式
• h1一般用于网页大标题，而h2就是用于副标题。
• 其实在 HTML 当中还有很多自带的标题元素，例如h3，h4，h5和h6，每一个代码一个等级的副标题，这里数字越大，标题的大小就越小哦。

过关目标

• 在h1标签后面（第二行）加入一个h2标签。
• 并且在h2元素中加入CatPhotoApp的文字内容。

过关条件

• 创建一个h2元素
• h2元素必须有一个结束标签
• h2元素必须含有"CatPhotoApp"的文字内容
• h1元素必须含有"Hello World"的文字内容

学会了什么？

这关卡主要教会我们：

1. 什么是副标题
2. HTML 有哪些副标题
3. 如何加入副标题

答案

「第三关」段落元素加入信息内容

关卡名：Inform with the Paragraph Element

知识点

• p是paragragh（段落）的缩写，就是我们在写文章中的段落一样，一般都是用来放信息内容的。
• 我们可以用<p>我是一个p标签</p>，这样的方式来加入段落元素。

过关目标

• 在我们的h2元素下方加入p元素。
• 在p元素的内容中加入文字"Hello Paragraph"。
• 注意：HTML 的规范中说明，所有标签的英文字母都必须使用小写！

过关条件

• 代码中必须有一个规范的p元素。
• p元素中必须含有文字"Hello Paragraph"。
• p元素必须有一个结束标签。

学会了什么？

这关卡主要教会我们：

1. p元素是什么
2. 如何加入信息内容段落

答案

「第四关」加入“占位”文字

关卡名：Fill in the Blank with Placeholder Text

知识点

• 开发者们用一个传统，就是在没有内容的时候，排版时都会用统一的占位文字“lorem ipsum text”。很多人很好奇，为什么都用这个？

Lorem ipsum 从 15 世纪开始就被广泛地使用在西方的印刷、设计领域中，在电脑排版盛行之后，这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以“Lorem ipsum”起头，并且常被用于标题的测试中，所以一般称为 Lorem ipsum，简称为 Lipsum。

---

原先大家以为这段拉丁文只是没有意义的组合，目的是让阅读者不要被文章内容所影响，而只专注于观察字型或版型，并借此填满空间。但根据美国拉丁学者 Richard McClintock 的研究，Lorem ipsum 原来起源于西赛罗《善恶之尽》（De finibus bonorum et malorum）第一章（Liber Primus）的 32、33 两节。

• 这段占位文字用了 5 个世纪也是够长情的了，既然我们这些关卡是在搭建一个“猫星人”的应用，那么我们改为“kitty ipsum text”。😁

过关目标

• 把p元素的内容替换成这一段占位文字：“Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.”

过关条件

• p元素需要含有“kitty ipsum text”的首几个单词。

学会了什么？

这关卡主要教会我们：

1. 什么是“lorem ipsum text”
2. 为什么“lorem ipsum text”经常用于设计和排版的占位文案

答案

「第五关」清除 HTML 代码注释

关卡名：Uncomment HTML

知识点

• 代码注释是为了在代码中留下备注的一种常用写法。通常为了给自己和其他开发者留下有意义的备注，让大家可以更容易的懂得代码的作用或者含义。代码注释是不会影响代码的运行，或者是显示出来给到用户看到的。
• 代码注释还有一个非常使用的目的，就是屏蔽代码。被注释的代码就不会被编译器运行，这样被注释的代码就不会生效了。
• 不同语言有不同的注释写法，HTML 的注释写法开始是<!--，结束使用-->。例如：<!-- <p> abc </p> -->。

过关目标

• 此关卡的代码都被注释掉了，所以所有的代码都没有生效。（预览区可以看到是空白的）
• 我们需要清除掉这里的注释，让h1，h2和p元素生效。

过关条件

• 页面预览区需要可以看到h1元素内容
• 页面预览区需要可以看到h2元素内容
• 页面预览区需要可以看到p元素内容
• 页面中没有遗漏结束注释标签-->

学会了什么？

这关卡主要教会我们：

1. 什么是代码注释
2. 代码注释有什么作用
3. 如何清除代码注释

答案

「第六关」局部 HTML 代码注释

关卡名：Comment out HTML

知识点

• 上一关我们看到可以把整个代码注释掉，但是其实很多时候我们可能需要注释掉局部的代码，或者是多段代码。
• 使用方式也是一样的，在想开始注释的地方加入<!---，然后结束的地方加入-->。

⚠️ 注意：
在注释代码的时候要注意的一个点，HTML 的元素都是有开始与结束标签的，注释的过程中如果我们注释掉半个元素，那代码就会有结束没有开头了。这样是会报错的哦。同等概念，后面我们会学到，HTML 元素是可以加入属性的，属性也是无法单独注释的。

过关目标

• 注释掉整个h1元素和p元素，h2元素要生效。（也可以说页面上只能看到h2这个元素的效果）

过关条件

• h1元素应该被注释掉，页面看不到该元素效果
• p元素应该被注释掉，页面看不到该元素效果
• 页面预览区需要可以看到h2元素内容
• 每一段注释都应该有结束注释标签-->
• h1，h2和p元素在代码中的顺序不能变

学会了什么？

这关卡主要教会我们：

1. 如何局部注释代码

答案

「第七关」删除 HTML 元素

关卡名：Delete HTML Elements

知识点

• 场景：因为手机的屏幕高度可呈现的空间不多，所以我们要把h1元素删除掉。

⚠️ 注意：
删除代码和注释代码都有一个一样的原则。就是开始与结束的标签不能缺了其中之一，要不代码就会报错。所以删除元素的时候也要注意元素的开始与结束标签的完整性。

过关目标

• 删除掉代码中的h1元素，让我们的页面更加整洁和更有空间感。

过关条件

• h1元素应该被完整的被删除
• 页面预览区需要可以看到h2元素内容
• 页面预览区需要可以看到p元素内容

学会了什么？

这关卡主要教会我们：

1. 如何正确的删除元素

答案

「第八关」HTML5 元素

关卡名：Introduction to HTML5 Elements

知识点

• HTML5 给我们带来了更多具备丰富代表性的 HTML 标签。这些标签包括main（主要内容）、header（头部）、footer（脚步）、nav（导航）、video（视频）、article（文章）、section（区域/分段内容）和更多。
• 这些标签给 HTML 的结构带来了更多可描述性的意义。就好像人体也有很多代表性的结构与区域名称，比如说：肱骨、股骨、腕骨、肩胛和不规则骨等等。
• 人体的骨头要分类，也是为了让医生更好的在大量的骨头中找到或者描述到具体的那种骨头。那 HTML5 中的这些丰富的标签也是一样的。他们可以更好的帮助搜索引擎找到对应的内容，加入这些标签也让我们的网页做到更好的搜索引擎优化（SEO）。

什么是搜素引擎？
我们可以把搜索引擎看作是一本很大很大的书中的目录。我们想想在现代的互联网中，全世界有多少个网站或者网页应用？如果没有一个目录让我们可以搜索，我们怎么可以找到我们想看的内容或者网站？可以说基本是不可能的！

---

搜索引擎怎么运作？
那搜索引擎的目录是怎么生成的呢？这个世界有一种很厉害的虫，那就是"爬虫"。每天搜索引擎的公司会派出成千上万的爬虫军队出去，在互联网上到处找网站，然后进入每一个网站中阅读里面的内容。然后收集回来的内容会经过做过滤和分析，然后建立关键词等等，最后生成一个搜索目录。我们经常用的搜索引擎包括：百度搜索，谷歌搜索，搜狗搜素，360 搜素等等。

用其中一个标签来举例，一个main元素中嵌套了两个子元素：

<main>
  <h1>Hello World</h1>
  <p>Hello Paragraph</p>
</main>

小贴士：这些 HTML5 的标签的作用和适用性会在后面的“Applied Accessibility（应用无障碍）”的课程中详细讲说。

过关目标

• 在原有的p元素下方添加一个新的p元素，并且加入这段内容Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
• 然后用一个main元素两个p元素包裹起来。

过关条件

• 应该有 2 个p元素，每个都有文字内容
• 每个p元素都有结束标签
• 第二个p元素的内容含有“Purr jump eat...”这段文字
• 代码中必须含有main元素
• main元素中必须含有两个p子元素
• main元素开始必须在第一个p元素之前
• main元素结束必须在第二个p元素之后

学会了什么？

这关卡主要教会我们：

1. 学到了更多丰富的 HTML5 标签
2. 学会使用main元素
3. 学会嵌套元素

答案

「第九关」网站中插入图片

关卡名：Add Images to Your Website

知识点

• 我们可以通过使用img元素为我们的网页插入图片，然后使用元素中的src属性来指定图片地址。

⚠️ 注意：img元素是不需要结束标签的，它是属于自动关闭型元素。

• W3C 规范中，所有img必须填写alt属性（alt 是“Alternative”的缩写，就是“替代”的意思）。当一个图片无法加载或者显示时，alt属性的值就会替代这个图片显示出来。
• 另外alt对于搜索引擎优化是有一定的帮助的，因为这个属性是用来描述一个图片的。如果这个图片是一只猫，对于搜索引擎的爬虫会针对图片的 Alt 取得关于这个图片的描述。这样搜索引擎才能知道这个图片大概是什么。

⚠️ 注意：

• 如果图片是单纯为了装饰的，那alt就留空：alt=""
• 尽量不要在alt属性中加入特殊字符（或者符号），除非是必须的

一个完整的img元素例子如下：

<img
  src="https://www.your-image-source.com/your-image.jpg"
  alt="Author standing on a beach with two thumbs up."
/>

过关目标

• 在main元素中的p元素之前添加img元素。
• img元素的src属性的值指向https://bit.ly/fcc-relaxing-cat
• 给予img元素的alt属性一个合适的名字：比如“Kitty” (小猫咪的意思)

过关条件

• 页面中必须有一个img元素。
• img元素中的src属性指向一个猫咪的图片地址。
• img元素中的alt属性值不能为空。

学会了什么？

这关卡主要教会我们：

1. 如何使用img图片元素
2. 懂得使用src属性
3. 懂得使用alt属性

答案

「第十关」使用锚元素实现链接跳转

关卡名：Link to External Pages with Anchor Elements

知识点

• 在 HTML 当中，a (锚) 元素是用于跳转页面，可以是内部页面或者是外部页面。（内部指的是本网站内的页面，外部指的是本网站以外的其他网站的页面。）
• a 元素需要一个网页地址的属性叫href。也需要一个 anchor text（锚文字）：

例如：
<a href="https://freecodecamp.org">这个链接会跳转到 freecodecamp.org</a>

• 网页地址：https://freecodecamp.org
• 锚文字（其实就是跳转链接的文案）：这个链接会跳转到 freecodecamp.org

• 使用以上例子，在浏览器中就会显示一段文字链接 “这个链接会跳转到 freecodecamp.org”，点击该链接就会跳转到https://www.freecodecamp.org这个网址。

额外知识点：
以上例子讲说的是跳转外部链接，如果我想跳转当前网址的子页面呢？(所谓的内部跳转，但是其实还可以做到当前页面的位置跳转，这个下一个关卡就会学到咯！)

• 比如现在我们当前的页面是"www.freecodecamp.org"，我们的链接想跳转到“www.freecodecamp.org/learn”。
• 这个时候我们的a元素的href属性可以这么写

<a href="/learn">这个链接会跳转到 freecodecamp.org/learn</a>

过关目标

• 创建一个a元素，链接文案为“cat photos”，并且指定跳转到http://freecatphotoapp.com

过关条件

• a元素的链接文案必须含有“cat photos”
• a元素的跳转地址必须是http://freecatphotoapp.com。
• a元素必须有结束标签。

学会了什么？

这关卡主要教会我们：

1. 如何在网页中添加链接
2. 懂得使用href属性
3. 懂得如何添加链接文案

答案

「第十一关」使用锚元素跳转内部页面区域

关卡名：Link to Internal Sections of a Page with Anchor Elements

知识点

• a（锚）元素还可以用于跳转页面内部的特定区域。
• 创建一个内部跳转链接，首先我们需要在href属性的值中绑定一个哈希符号#和一个唯一id属性。
• id属性是在 HTML 中任何一个元素都可以绑定的唯一标识。id属性可以给予一个元素一个唯一的识别名，让这个元素可以在 HTML 中被选择到。

以下是一个内部跳转链接的例子，其中的...代表被省略的一段代码。

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

我们来分析一下这个例子：

• 这里的h2元素被绑定了一个id属性，名字为“contacts-header”。
• 我们的a元素链接的指定href跳转地址为#contacts-header。
• 我们可以看到#后面的名字与h2的id值一致，就是这样点击这个链接的时候，页面就会移动到绑定了同一个名字的元素的位置。
• 我们要注意的是id属性的值，在当前页面中必须是唯一的。

知识点：
在这个例子里面，我们可以看到a元素多了一个target属性。这个属性在链接中是非常常用的。我们经常用的各大电商平台，我们点击一个商品的链接都会打开一个新窗口，但是有一些链接就不会。这种就是用target属性控制的。

---

target属性的常用值有：

• _blank：在新窗口中打开被链接文档。
• _self：默认。在相同的框架中打开被链接文档。
• _parent：在父框架集中打开被链接文档。
• _top：在整个窗口中打开被链接文档。
• framename：在指定的框架中打开被链接文档。

过关目标

• 修改我们的外部跳转链接的href属性为#footer，并且把链接的文案“cat photos”改为"Jump to Bottom"。
• 移除target="_blank"属性，因为这个属性会让我们的链接在全新的窗口打开这个跳转链接。
• 最后在页面最底部的footer元素中添加id属性，属性值为"footer"。

过关条件

• 页面中必须含有一个锚元素
• 页面中只有一个 footer 标签
• a元素的href属性值必须是#footer
• a元素必须没有target属性
• a元素的链接文章应该是“Jump to Bottom”
• footer元素的id属性值必须是"footer"

学会了什么？

这关卡主要教会我们：

1. 如何在网页中添加内部链接
2. 懂得使用id属性
3. 懂得使用哈希符号链接跳转

答案

「第十二关」文章中嵌套锚元素

关卡名：Nest an Anchor Element within a Paragraph

知识点

• 我们可以在文字中添加链接：

<p>
  Here's a
  <a target="_blank" href="http://freecodecamp.org">link to freecodecamp.org</a>
  for you to follow.
</p>

分析一下这个例子的实现原理：

• 首先我们有一个文字段落<p>Here's a ... for you to follow.</p>
• 在这个文字段落中"..."的部分我们加入a (锚) 元素：<a href="http://freecodecamp.org"> ... </a>，这里我们用a元素包裹了"..."这个文字内容，这样这个文字内容就会变成一个链接，并且可点击跳转网页。（记住这里需要我们有开始<a>与结束</a>标签，这样才能指定这个链接的开始与结束区域）
• 这里a元素中加入target="_blank"可以让链接在新窗口打开，href属性指定了跳转链接。
• 最后"..."的内容在这个例子里面就是" link to freecodecamp.org"，也就是链接的文案（锚文字）。

过关目标

• 首先在main元素中加入一个新的p元素。
• p元素中的文案写入"View more cat photos"。
• 使用我们原来的a元素替换这段文案中的“cat photos”，从而把这段文案中的"cat photos"改为一个链接。

过关条件

• a元素的链接需要指定跳转"http://freecatphotoapp.com"
• a元素的链接文案应该是“cat photos”
• a元素需要被p元素包裹着，然后main元素中需要一共有 3 个p元素
• a元素需要被新的p元素包裹着，不能是其他的p元素
• p元素中必须含有“View more ” （more 后面需要含有一个空格）
• a元素中不能含有“View more”等文字
• 所有p元素必须有结束标签
• 所有a元素必须有结束标签

学会了什么？

这关卡主要教会我们：

1. 在文章段落中添加链接

答案

「第十三关」使用哈希符号创建死链接

关卡名：Make Dead Links Using the Hash Symbol

知识点

• 有时候我们需要添加一个死链接（顾名思义，就是一个点击后无效的链接，不会触发页面跳转）
• 这种链接有几个用途，第一种在排版的过程中还不知道需要链接哪里，第二种就是后面这个链接交给 JavaScript 处理。（后面的 JavaScript 关卡中会讲到哦）

代码例子：

<a href="#">死链接</a>

过关目标

• 当前的a元素中的href是指向一个链接地址"http://freecatphotoapp.com"
• 把href属性值改为#，就可以把这个锚元素变成一个死链接
• 这里还需要把target属性移除掉，要不还是会跳转页面的

过关条件

• a元素的href属性值是#，是一个死链接

学会了什么？

这关卡主要教会我们：

1. 用哈希符号创建死链接

答案

「第十四关」把图片变成链接

关卡名：Turn an Image into a Link

知识点

• 我们可以通过用a元素包裹一个元素，让这个元素变成一个链接
• 比较常用的一个例子就是使用a元素包裹一个img元素，这样就可以把一个图片变成一个链接。（也就是说，点击这个图片就可以跳转页面了）

代码例子：

<a href="#">
  <img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera." />
</a>

这个例子中，我们希望这个图片的链接是一个"死链接"，所以href属性的值需要使用#。

过关目标

• 用a元素包裹页面中的img元素
• 改变后，我们在最右边的预览区把鼠标放到图片上方，我们可以看到我们的鼠标从一个“普通鼠标志”变成一个“点击手指的标志”

过关条件

• img元素需要包裹在a元素之中
• 图片的链接必须是一个死链接
• 所有的a元素必须有结束标签

学会了什么？

这关卡主要教会我们：

1. 给图片添加链接

答案

「第十五关」创建无序列表

关卡名：Create a Bulleted Unordered List

知识点

• HTML 当中有特殊的元素用于创建无序列表。
• 无序列表需要使用ul元素包裹着多个li元素，开始标签为<ul>，结束标签为</ul>。

*代码例子：**

<ul>
  <li>牛奶</li>
  <li>芝士</li>
</ul>

这段代码就会创建一个无序列表，列表内容有“牛奶”与“芝士”。

过关目标

• 移除代码中最后两个p元素。
• 然后添加一个无序列表，列出 3 个喵咪喜爱的东西。

过关条件

• 创建一个ul元素
• ul元素应该包裹着 3 个li元素
• ul元素必须有结束标签
• 所有li元素必须有结束标签
• li元素中必须有内容，也不能是只有空格

学会了什么？

这关卡主要教会我们：

1. 使用ul元素
2. 使用li元素
3. 创建无序列表

答案

「第十六关」创建有序列表

关卡名：Create an Ordered List

知识点

• HTML 当中还有一种叫有序列表（就是前面会按照 1，2，3，4... 以此类推）
• 需要使用ol元素包裹着多个li元素，开始标签为<ol>，结束标签为</ol>

代码例子：

<ol>
  <li>肥猪</li>
  <li>肥牛</li>
</ol>

以上这段代码会创建一个有序列表，有序的列出“肥猪”和“肥牛”。

过关目标

• 在“Top 3 things cat hate:”的p元素下方加入一个有序列表
• 有序列表中列出 3 样喵咪讨厌的东西

过关条件

• 有一个有序列表列出 3 样喵咪讨厌的东西
• 有一个无序列表列出 3 样喵咪喜欢的东西
• 只有一个ul元素
• 只有一个ol元素
• ul元素中有 3 个li元素
• ol元素中有 3 个li元素
• 所有li元素必须有结束标签
• 所有li元素的内容不能为空或者只有空格

学会了什么？

这关卡主要教会我们：

1. 使用ol元素
2. 创建有序列表

答案

「第十七关」创建文本输入框

关卡名：Create a Text Field

知识点

接下来的几个关卡，我们一起来创建一个表单。

什么是表单？

表单就是一个网页端的表格，让用户在其中填写信息提交给我们保存起来。在办理事情的时候，我们经常会需要填写表格，然后提交给工作人员。在网络上填写表格也是一样的。用户在表单中填写表格，然后提交给我们保存起来，工作人员在后台管理系统就可以对这些表格进行处理了。

• 一个表单就必定会有文字填写的地方，在 HTML 中我们会使用input元素来创建一个文本输入框，给到用户填写文字。

代码例子：

<input type="text" />

知识点：

• input元素是一个自我关闭型标签，所以不需要结束标签的。
• input元素中有一个type属性，这个是用来定义这个输入框的类型，这里因为我们需要文本类型，所以就是text。那其他类型有什么呢？其他的类型在后面的关卡中会讲到哦。
• input元素中的name属性也是非常重要的，后端接受表单的输入框数据时，用的就是name属性值来获取数据的。

过关目标

• 在有序列表的ol元素下方创建一个input元素，type元素值使用“text”

过关条件

• 需要有一个input元素，type属性值为text

学会了什么？

这关卡主要教会我们：

1. 使用input元素创建文本输入框

答案

「第十八关」文本输入框中添加占位文本

关卡名：Add Placeholder Text to a Text Field

知识点

• 占位文本（Placeholder）也叫输入框提示语，这段文字会在用户为输入前在输入框中显示。

我们可以用以下方式加入占位文本：

<input type="text" placeholder="这个是占位文本/提示语" />

⚠️ 记住：

input元素是自我结束型元素，不需要结束标签哦！

过关目标

• 在input元素当中添加placeholder属性，属性值为"cat photo URL"

过关条件

• input元素中有placeholder属性
• placeholder的属性值必须为“cat photo URL”
• input元素不需要有结束标签
• input元素语法不能有误

学会了什么？

这关卡主要教会我们：

1. 在input元素中添加placeholder属性

答案

「第十九关」创建一个表单元素

关卡名：Create a Form Element

知识点

• 我们知道在现实生活中，提交一个表单/表格，只需要填写好后递交给一个人就可以了。但是在网页中的表单是怎么提交让我们保存起来的呢？
• 其实也很简单，我们首先创建一个form元素来建立一个表单，然后在form元素中添加一个action属性，并且给他一个提交的地址即可。

小知识：

我们知道现实中我们会把表格提交给工作人员，那在网页中我们提交给谁呢？我们用一个简单接地气的例子来理解一下：

• 首先表格的内容都是电子化数据不是纸质的，那肯定是要提交给一个电子化储存的地方
• 电子化储存的地方就是服务器，也就是一台电脑
• 但是总要有一个人这样的东西接收我们的表单吧？是的，操控这个服务器的就是后端
• 所以表单的action顾名思义是一个提交动作，表单需要指定给一个“人”来接收，在网络上就是“服务器地址或者后端地址”
• 我们再想想现实中，工作人员拿到我们的表格，会存放到文件仓库对吧？那在网络应用中电子表单的数据放哪里呢？
• 表单数据提交给到后端之后，后端会拿着这个数据储存到数据库中，数据库也就是文件库了

通过这个例子大家应该可以能理解表单数据提交和储存的概念了。也更能懂得这个action背后的基本逻辑是什么了。

代码例子：

<form action="/url-where-you-want-to-submit-form-data">
  ...
</form>

过关目标

• 把我们的input元素包裹在form元素之中，然后在form元素中加入action属性值“/submit-cat-photo”

过关条件

• 文本输入框应该包裹在form元素之中
• form元素需要有action属性值为“/submit-cat-photo”
• form元素需要有完整的开始与结束标签

学会了什么？

这关卡主要教会我们：

1. 如何完成使用表单
2. 使用表单form元素
3. 懂得action属性的意义和用法

答案

「第二十关」添加表单提交按钮

关卡名：Add a Submit Button to a Form

知识点

• 用户输入了表单中的信息，但是没有一个提交的按钮，这个信息是不会自动提交到服务端的
• 所以我们需要在表单中加入button元素（按钮元素），并且给它的type属性一个“submit（提交动作）”的类型
• 用户点击这个按钮就会提交表格中所有输入框内的信息

过关目标

• 在form元素中的最后添加button元素，类型为submit

过关条件

• 表单元素中必须含有一个按钮
• button元素必须有一个type属性值为submit
• button元素中的文字内容必须是"Submit"
• button元素必须有结束标签

学会了什么？

这关卡主要教会我们：

1. 使用button元素
2. 如果添加提交表单按钮

答案

「第二十一关」设置一个输入框为必填 ​

关卡名：Use HTML5 to Require a Field

知识点

• 我们可以让表单中某个特定的输入框变成必填，如果用户没有填写是无法提交表单的
• 举例，现在我们需要一个文本输入框变成必填项，我们只需要在input元素中添加一个require属性

代码例子：

<input type="text" required />

⚠️ 注意：input元素中的require属性是不需要填写属性值的，只要加入这个属性就起效了。

过关目标

• input元素加入required属性，把输入框变成一个必填项，用户如果没有填写内容将无法提交表单
• 加入后尝试在输入框中没有填写内容时点击"Submit"按钮，看看 HTML5 时如何提醒我们必填内容未完成的。

过关条件

• input元素应该有一个required属性

学会了什么？

这关卡主要教会我们：

1. 使用input元素中的required属性
2. 给表单加入必填输入框

答案

「第二十二关」添加一组单选按钮

关卡名：Create a Set of Radio Buttons

知识点

• 当我们在表单中询问用户一个问题，并且希望用户只给出多选一的答案。这个时候我们就可以使用单选按钮。
• 单选按钮是input元素中其中一种类型。
• 要使用单选按钮，我们需要把每一个单选的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字，在点击的时候都可以选中这个选项。
• 所有相关的单选项需要有同一个name属性值才能把这些单选项组成一组选项。
• 单选项被列为一组后，才能选择这组其中一个单选项时，才会自动去除选中其他这组里面的选项。

单选按钮的例子：

<label>
  <input type="radio" name="indoor-outdoor" />
  内门
</label>

• 最佳实践是在label元素上设置一个for属性，其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系。例如:

<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor" />
  Indoor
</label>

过关目标

• 添加一对radio单选按钮到我们的表单中，每个需要有自己的label元素包裹着。
• 一个选项显示为indoor和另外一个选项显示outdoor。
• 两个选项的name属性值都必须是indoor-outdoor，从而把它们组成一组。

过关条件

• 需要有两个radio元素的单选按钮
• radio元素的单选按钮都需要有name属性值为indoor-outdoor
• 两个radio元素的单选按钮都需要有自己的label元素包裹着
• 每个radio元素都有结束标签
• 一个单选为indoor
• 一个单选为outdoor
• 所有radio元素都必须在form元素之内

学会了什么？

这关卡主要教会我们：

1. 使用label元素
2. 使用input元素中的radio类型
3. 如何组合一组单选项

答案

「第二十三关」添加一组复选框

关卡名：Create a Set of Checkboxes

知识点

• 表单中，通常用checkbox来建立复选框的表单问题。
• checkbox是input元素的其中一种类型。
• 要使用复选框，我们需要把每一个复选框的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字，在点击的时候都可以选中这个选项。
• 所有相关的复选框需要有同一个name属性值才能把这些选项组成一组选项。
• 与单选的原理相同：最佳实践是在label元素上设置一个for属性，其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系

复选框例子：

<label for="loving">
  <input id="loving" type="checkbox" name="personality" />
  Loving
</label>

过关目标

• 在form元素内添加一组 3 个checkbox类型的复选框。
• 每一个复选框的input都要有自己的label包裹着。
• 三个复选框都需要使用同一个name属性值为personality。

过关条件

• 需要有 3 个复选框元素。
• 每个复选框元素必须包裹着在自己的label元素内。
• 每一个label元素都需要有结束标签。
• 所有复选框都需要用同一个name属性值为personality。
• 所有复选框都需要添加在form元素之中。

学会了什么？

这关卡主要教会我们：

1. 使用input元素中的checkbox类型

答案

「第二十四关」复选框与单选框中使用 value

关卡名：Delete HTML Elements

知识点

• 当一个表单提交时，表单所有的数据会发送到服务端（后端），这里也包括我们选择的选择框数据。
• checkbox复选框和radio单选框的选中数据也是会一起提交到服务端，那后端怎么判定我们选中了那些呢？
• 无论是复选还是单选，后端接收到的都是选中的选项输入框value属性的值。
• 所有我们需要给每一个checkbox或者radio类型的输入框一个value属性。

代码例子：

<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor" />
  Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor" />
  Outdoor
</label>

以上例子中，我们有两个radio单选框类型的输入框。假设用户选中了"Outdoor"并且提交了表单，表单数据中会含有indoor-outdoor=outdoor这样的参数。indoor-outdoor这部分来源于这个输入框的name属性，然后outdoor就是用户选中的选项的value属性值。

如果我们没有填写value属性值，用户选中了任何一个选项然后提交表单。后端接收到的数据就是indoor-outdoor=on。这个数据里面只能告诉我们indoor-outdoor这个选项，用户有选中一个值，但是是什么，我们不知道。这样这个表单的数据就没有任何意义了。所以我们一定要给每一个选项input元素加入一个value属性值。

过关目标

• 给每一个radio和checkbox输入框类型的元素一个value属性值。
• 这里value属性值常规来说我们都是用英文的，在这个例子中因为我们的选项本身就是英文，所以我们直接用选项名作为value的值即可。

过关条件

• 其中一个radio的value属性值需要是”indoor“
• 其中一个radio的value属性值需要是”outdoor“
• 其中一个checkbox的value属性值需要是”loving“
• 其中一个checkbox的value属性值需要是”lazy“
• 其中一个checkbox的value属性值需要是”energetic“

学会了什么？

这关卡主要教会我们：

1. 使用value属性
2. 给radio或者checkbox加上value属性值
3. 多选项或者单选项数据提交的原理

答案

「第二十五关」默认选中单选框/复选框

关卡名：Check Radio Buttons and Checkboxes by Default

知识点

• 很多时候，表单当中都会有默认选中值。
• 如果我们想默认选中单选项中的其中一个，或者是默认选中复选项中的几个怎么实现呢？
• 想默认选中，我们只需要在radio或者checkbox的input元素中添加checked属性即可（这个也是一个不需要属性值的属性）

代码例子：

<input type="radio" name="test-name" checked />

过关目标

• 把radio单选框组合的第一个单选项设置为默认选中。
• 把checkbox复选框组合的第一个复选项设置为默认选中。

过关条件

• 单选框组合的第一个单选项默认被选中
• 复选框组合的第一个复选项默认被选中

学会了什么？

这关卡主要教会我们：

1. 给radio单选项或者checkbox复选项添加默认选中属性checked

答案

「第二十六关」将许多元素嵌套在单个 div 元素中

关卡名：Nest Many Elements within a Single div Element

知识点

• div元素，也称为分割元素，是其他元素的通用容器。
• div元素也是最常用的 HTML 元素之一。
• 与其他非自我结束元素一样，可以使用div元素来开始，然后在另一行使用</div>来结束。

过关目标

• 嵌套“Things cats love”和“Things cats hate”的两个列表到div元素之中

提示：把<div>开始标签放在"Things cats love"的p元素上方，然后</div>结束标签在</ol>的下方。最后整个div元素把所有内容包裹起来。

过关条件

• p元素内容被包裹在div元素之中
• ul元素内容被包裹在div元素之中
• ol元素内容被包裹在div元素之中
• div元素必须有结束标签

学会了什么？

这关卡主要教会我们：

1. 使用div元素分割内容
2. 使用div元素嵌套多个元素

答案

「第二十七关」声明 HTML 文档的 Doctype

关卡名：Declare the Doctype of an HTML Document

知识点

到目前为止，我们闯过的关卡当中包括了特定的 HTML 元素以及使用。但是那些都是一个完成 HTML 页面的其中一部分。其实还有一些元素是每一个 HTML 页面都需要存在的。

在文章的顶部我们需要告诉浏览器，我们需要使用哪一个版本的 HTML。HTML 这个语言一直在持续更新升级。各大浏览器基本都兼容最新的配置与版本（那就是 HTML5）。但是还有一些浏览器只兼容一些历史版本的 HTML（例如旧版本的 IE 浏览器）。

• 要告诉浏览器我们需要使用那个版本的 HTML，我们需要在 HTML 文件的头部添加<!DOCTYPE ...>，这里的...可以写入 HTML 的某个版本。如果是 HTML5 的话，那就是<!DOCTYPE html>即可。
• 在这个声明的代码中!和DOCTYPE都是非常重要的，而DOCTYPE也是必须大写的。然后html这个就无大小写限制了。
• 跟着这段文件 HTML 版本声明就是html元素。所有我们网页的代码和元素都必须在html元素内编写。

HTML 代码例子：

<!DOCTYPE html>
<html>
  <!-- Your HTML code goes here -->
</html>

过关目标

• 在代码区域第一行，加入DOCTYPE声明，并且选择使用 HTML5 版本。
• 声明后加入html元素，并且在html元素内嵌套一个h1标题元素。
• h1标题元素内必须含有一个标题文案，文案可以随意填写。

过关条件

• 代码中必须含有<!DOCTYPE html>标签。
• 代码中必须含有html元素。
• html元素必须包裹着一个h1元素。

学会了什么？

这关卡主要教会我们：

1. 如何声明 HTML 版本
2. 使用html标签

答案

「第二十八关」定义 HTML 文档的头部和主体

关卡名：Define the Head and Body of an HTML Document

知识点

• 在标准的 HTML 文档结构中，我们需要丰富这个基础结构的分区。
• 所以在html元素中我们会分出head头部元素和body主体元素。
• 所有CSS 引用，字体引用，网页标题等等这些网页定义的内容都是放在head元素之内。
• 然后所有页面的布局元素都需要放在body元素之内。

小贴士：

我们用一个一个更好的理解方式，让我们更容易记住这个规则的原理。

• 如果我们想一下，所有的知识，思想，印象等等就等同于 HTML 当中的"CSS 引用，字体引用，网页标题"，那东西是不是都应该在我们的脑袋里面呢？所以呀“CSS 引用，字体引用，网页标题”都应该放在head头部元素中！
• 我们的骨头和骨架是不是在我们身体内呢？所以剩下所有的页面布局代码就要放在body主体元素中！

HTML 结构代码例子：

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
    <!-- CSS引用，字体引用，网页标题等等元素 -->
  </head>
  <body>
    <!-- page contents -->
    <!--页面的布局元素 -->
  </body>
</html>

过关目标

• 代码区域里面有title页面标题元素，h1文章标题元素和p文章段落元素。
• 把title元素嵌套到一个head元素中。
• 剩余的h1和p的内容都嵌套到一个body元素中。

过关条件

• 只有一个head元素
• 只有一个body元素
• head元素需要被html元素包裹着
• body元素需要被html元素包裹着
• title元素需要被head元素包裹着
• h1和p元素都需要被body元素包裹着

学会了什么？

这关卡主要教会我们：

1. 建立完成的 HTML 文档结构

答案

「终」总结

恭喜大家一起闯过 28 关。我们学习到了 HTML 与 HTML5 的基础知识。虽然说这些都是很基础的知识，可以说闯过这 28 关，前端入门级别都还没有到。但是庞大与伟大的事业和建筑物都是从稳固的基础建立起来的。无论是多么简单还是无比困难的任务，我们都需要耐心和细心对待，把每一件小事都做到极致，才能逐步壮大，成功才会在远方等着我们。

下一期，我们开始第二课，深入浅出 CSS 基础。一起继续闯关打怪，打开前端技术大门。敬请期待哦！

我是三钻，一个在技术银河中和你们一起来终身漂泊学习。
想看更多技术知识文章关注个人微信公众号《技术银河》！
有问题可以在公众号留言咨询哦！下期再见 👋！

语言按语法分类

首先这里我们先讲一讲泛用的语言的分类学，在我们平时说话，我们讲的是中文，当我们去国外留学或者旅游，我们都会需要讲英文。不知道大家有没有这种经历，在国外时因为英文不是很好的时候，我们会把关键词凑起来这么一说，然后语法也不对，但是老外也听懂了。比如说 “很久不见”，我们就会说 "long time no see"，然后老外还觉得挺好用的，所有他们也就加语言里面了。

这类的语言有一个特点，就是它的语法没有一个严格的定义，所以我们叫它做 “非形式化语言”，典型的代表就是我们平时说的这些。

在计算机里面，大部分的语言都是 “形式语言” —— 形式语言它的特性是有一个形式化定义，它是非常的严谨严格。

然后在形式语言里面也是分类的，这里给大家讲一下其中一种就是 “乔姆斯基谱系”。

乔姆斯基谱系：是计算机科学中刻画形式文法表达能力的一个分类谱系，是由诺姆·乔姆斯基于 1956 年提出的。它包括四个层次.

• 非形式化语言
  • 中文，英文
• 形式化语言 （乔姆斯基谱系）
  • 0-型：无限制文法 —— 只要定义清楚了语言是什么样的
  • 1-型：上下文相关文法 —— 同样的一个词、句的组合，它的上文、下文和内容相关的
  • 2-型：上下文无关文法 —— 同样一个表达，不管放到哪里都是一样的意思
  • 3-型：正则文法 —— 能够被正则表达式去描述的一种文法

在乔姆斯基谱系里面 0123 是一种包含关系，就是说一个上下文相关文法，它一定也属于 0-型，但是反过来就不一定了。

什么是产生式？（BNF）

• 产生式： 在计算机中指 Tiger 编译器将源程序经过词法分析（Lexical Analysis）和语法分析（Syntax Analysis）后得到的一系列符合文法规则（Backus-Naur Form，BNF）的语句
• 巴科斯诺尔范式：即巴科斯范式（英语：Backus Normal Form，缩写为 BNF）是一种用于表示上下文无关文法的语言，上下文无关文法描述了一类形式语言。它是由约翰·巴科斯（John Backus）和彼得·诺尔（Peter Naur）首先引入的用来描述计算机语言语法的符号集。
• 终结符： 最终在代码中出现的字符（ zh.wikipedia.org/wiki/ 終結符與非終結符)

• 用尖括号（<, >）括起来的名称来表示语法结构名
• 语法结构分成基础结构和需要用其他语法结构定义的复合结构
  • 基础结构称终结符
  • 复合结构称非终结符
• 引号和中间的字符表示终结符
• 可以有括号
• * 表示重复多次
• | 表示 “或”
• + 表示至少一次

案例：

我们来用 BNF 来表述一下大家比较熟悉的四则运算。

• 四则远算是：1 + 2 * 3
• 这里面的总结符：
  • Number
  • +、-、*、/
• 非终结符
  • MultiplicativeExpression
  • AdditiveExpression

小时候我们学的四则运算是加减乘除，实际上它是有一个优先级的关系的。我们可以理解为一个 1+2x3的连加法当中，可以拆分成一个 1和 2x3组成的。那么 2x3 是它的子结构，然后 2 和 3，就是这个结构中的 Number，然后中间就是运算符 *。

所以用 BNF 去描述这个远算的时候，首先我们会定义一个加法表达式，格式就是：

• 乘法表达式的列表 或
• 加法表达式 + 乘法表达式 或
• 加法表达式 - 乘法表达式

因为 BNF 是可以递归的，所以在定义表达式的时候，可以使用自身的表达式。

那么乘法也是类似，只不过那加法中乘法的表达式换成了 Number 就可以了：

• Number 或
• 乘法表达式 * Number 或
• 乘法表达式 / Number

最后我们看看用代码是怎么写的：

<MultiplicativeExpression>::=<Number> |
    <MultiplicativeExpression> "*" <Number> |
    <MultiplicativeExpression> "/" <Number> |

深入了解产生式

这里我们来尝试通过产生式，来深入理解一下前面讲到的乔姆斯基谱系。

终结符： 最终在代码中出现的字符zh.wikipedia.org/wiki/ 終結符與非…

• 0-型：无限制文法
  • 产生式：?::=?
  • 在无限制文法当中是可以产生多个非终结符
  • 所以在无限制文法里面是可以随便写
• 1-型：上下文相关文法
  • 产生式：??::=??
  • 对产生的书写做出了一定的限制
  • 可以在左边右边的?中写多个非终结符
  • 但是可变化的只能是前面与后面，并且是有关系的
  • 而中间一定是有一个固定的不变的部分
  • 所以 <A> 前面的 ? 就是上文，后面的 ? 就是下文
• 2-型：上下文无关文法
  • 产生式：::=?
  • 左边的 <A> 一定是一个非终结符
  • 右边的 ? 就是可以随便写，可以是一大堆终结符或者混合终结符和非终结符
• 3-型：正则文法
  • 产生式：::=? ✅, ::=? ❌
  • 正则文法式有要求的
  • 假如说正则文法式递归定义的，那么它不允许你这个定义 A 出现在尾巴上
  • 如果左边的符号 ，那么右边一定要出现在产生式的最开头的
  • 根据这个规则，所有的正则文法都是可以被正则表达式来表示的

AdditiveExpression:
    MultiplicativeExpression
    AdditiveExpression +
MultiplicativeExpression
    AdditiveExpression -
MultiplicativeExpression

我有一段时间没有更新 FCC 前端教程了，这一周就继续写完 CSS 与 CSS3 基础的教程。最近工作和生活都比较繁忙所以文章更新也受到了一定的影响。不过技术文章写作再忙也不会放弃的。我会继续努力坚持着一周一篇文章的进度，继续为大家带来我学习到的知识。让我们一起继续终身学习吧！

这一篇文章是上一篇《44 关学习 CSS 与 CSS3 基础「一」》的第二部分，一共闯了 44 关。废话少说，让我们一起来闯关吧！

「第二十三关」使用属性选择器改变元素属性

关卡名：Use Attribute Selectors to Style Elements

知识点

• 之前我们使用了id和class属性选择器给特定的元素改变样式；
• 这种方式叫做ID和CLASS选择器；
• 除了这两种 CSS 选择器之外，还有其他选择让我们选择一组自定义的元素来改变样式的；
• 我们把CatPhotoApp拿出来练习其他 CSS 选择器；
• 在这个关卡中我们将使用[attr=value]（属性=值）这种属性选择来给我们的 checkboxes （复选框）添加样式；
• 这个选择器匹配特殊的属性值，然后对这个属性做出样式的改变；

比如一下例子，所有type属性值为radio的元素加入 margin（外边距）做出改变：

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

过关目标

• 使用属性选择器，选中所有type属性为复选框的元素；
• 并且给与这些元素 10px 的顶部外边距和 15px 的底部外边距；

过关条件

• type属性选择器必须用来选中所有复选框；
• 所有复选框的顶部 margin 必须是 10px；
• 所有复选框的底部 margin 必须是 15px；

学会了什么？

这关卡主要教会我们：

1. 使用属性选择器来改变元素的样式；

答案

「第二十四关」绝对与相对单位

关卡名：Understand Absolute versus Relative Units

知识点

• 之前所有的关卡中，我们都是给元素的 margin 和 padding 赋予“像素（pixels/px）”单位；
• 像素是一个浏览器使用的长度单位，这个单位会告诉浏览器给予一个元素多少大小和空间；
• 在 CSS 当中除了 px 单位之外，还可以使用其他可选的单位；
• 可用单位主要分为两种 绝对单位（absolute） 和 相对单位（relative）
  • 绝对单位有 in（英寸） 和 mm （厘米），绝对长度单位近似于屏幕上的实际测量值，但是根据屏幕的分辨率会有一些差异；
  • 相对单位有 em 或者 rem, 两者分别都是相对单位，都会根据一个相对的元素转换自己的大小；

那么 em 和 rem 有什么区别呢？

EM 是相对长度，它是相对于当前元素的字体大小，如果当前元素没有设置字体大小就会一直往父级找，然后相对于父级字体大小来转换。

EM 特性：

1. em 的值并不是固定的；
2. em 会基层父级元素的字体大小；
3. 如果父级也是使用了 em 长度单位，那当前元素的 em 换算就会使用父级 em 换算后的结果进行换算。（比如父级使用了 1.2em，换算后是 12px，那当前元素用的 1em 就是 12px，但是我们想要的是 1em = 10px，这种情况用 em 就会出现大小错误。）

REM 是 CSS3 新增的一个相对单位，它是 root em 的缩写，顾名思义就是根 em。

REM 特性：

1. 它与 EM 不一样的是，因为是"根"em，所以它永远都是相对于 HTML 根元素的字体大小；
2. 与 EM 相同的就是值并不是固定的，都是相对一个元素的字体大小；
3. 因为 REM 的特性是相对于 HTML 根元素，所以只要改变根元素的字体大小，就会对所有 REM 单位的元素发生大小变化；
4. 除了 IE8 及更早版本的浏览器内核，所有浏览器均支持 REM；
5. 对于不支持的浏览器来说，我们就需要加入一个 px 单位的 font-size 属性，如果浏览器发现无法使用 rem 即会使用 px 单位的 font-size 值；
6. 这个单位可谓集合相对和绝对单位的优点与一身，所以此单位引起了广泛的使用，特别是在做移动端网页时，用于响应不同手机屏幕大小和分辨率大小；

这些相对单位的使用会在《响应式页面开发》的关卡中详细介绍使用场景。

过关目标

• 给拥有red-box类的元素加入 padding 属性，值为 1.5em；

过关条件

• red-box类元素必须含有 padding 属性；
• red-box类元素的padding属性值必须为1.5em；

学会了什么？

这关卡主要教会我们：

1. 认识“像素（px）”以外的大小单位；
2. 认识什么是绝对与相对大小单位，并且分别拥有那些单位可以使用；
3. 如何使用em，这种相对单位；

答案

「第二十五关」HTML 主体属性样式

关卡名：Style the HTML Body Element

知识点

• 这一关开始，我们重新开始一个页面，并且一起来学习CSS 继承；
• 首先每一个 HTML 页面都会有一个body元素；
• 这一关我们用background-color属性给body元素一个背景颜色为black；
• 如果这时页面变成了黑色，证明我们页面中是有body元素的；

以下例子演示如何给body应用一个黑色背景的代码：

body {
  background-color: black;
}

过关目标

• 用 CSS 把页面中body元素的背景色变成黑色；
• 从而证明我们页面中拥有一个body元素；

过关条件

• body元素必须拥有background-color属性，并且值为black；
• CSS 的格式必须合格并且遵循规范写法；
• CSS 的规则写法必须用分号结束；

学会了什么？

这关卡主要教会我们：

1. 使用背景颜色；
2. 证明了页面中必定会有一个body元素；

答案

「第二十六关」从主体元素中继承样式

关卡名：Inherit Styles from the Body Element

知识点

• 上一关我们证明了每一个 HTML 页面中都必定会有body元素；
• 而且body元素也是可以使用 CSS 给它定制样式的；

记住：body元素与其他 HTML 中的元素一样，都是可以使用 CSS 给予样式控制的。不同的就是，body元素中的样式会被 HTML 中其他元素默认继承。意思就是说，任何在 body 中的样式都会携带到其他元素中，如果 body 中给予了背景颜色是黑色，那我们加入一个div元素，默认也是黑色背景。

过关目标

• 首先，创建一个h1元素，内容填入文字 “Hello World”；
• 接下来我们让这个页面下所有元素的文字颜色都改为绿色，要达到这样的效果只需要在body元素中加入color: green即可；
• 最后给body元素定义字体为monospace，我们只需要在body样式中加入font-family: monospace属性值即可；

过关条件

• 创建一个h1元素；
• h1元素内容是 Hello World；
• h1元素有关闭标签；
• body元素应该有color属性，并且值为green；
• body元素应该有font-family属性，并且值为monospace；
• h1元素的字体应该继承body元素的字体定义；
• h1元素的字体颜色应该继承body元素的字体颜色；

学会了什么？

这关卡主要教会我们：

1. 学会继承主体（body）元素的样式；

答案

「第二十七关」CSS 样式继承中样式优先级

关卡名：Prioritize One Style Over Another

知识点

• 有些时候 HTML 元素会同时存在多个样式，并且产生冲突的可能性；
• 举例，我们的h1元素无法同时拥有绿色和粉红色字体颜色的属性；
• 让我们来看看，如果我们给一个元素一个类名，并且赋予这个类红粉色的字体颜色；
• 这个时候会不会覆盖body元素中的color: greenCSS 属性；

过关目标

• 创建一个 CSS 类，名为pink-text；
• 然后给pink-text加入字体颜色color: pink；
• 把pink-text类赋予h1元素；

过关条件

• h1元素必须拥有pink-text类；
• <style>标签中必须含有pink-text类样式，并且含有改变字体颜色的属性；
• h1元素的字体应该是粉红色（pink）；

学会了什么？

这关卡主要教会我们：

1. 如何在 CSS 样式继承中覆盖body元素的样式；

答案

「第二十八关」覆盖后续 CSS 中的样式

关卡名：Override Styles in Subsequent CSS

知识点

• 上一关我们用pink-text类覆盖了body元素的 CSS 样式；
• 这里证明了 CSS 类会覆盖body元素的 CSS；
• 所以下一个问题就是，我们是否可以覆盖pink-text类的样式呢？
• 一个 HTML 元素是可以叠加多个 CSS 类的，给一个元素多个 CSS 类只需要在多个类名之间加入空格即可；

<div class="class1 class2"></div>

注意：元素中多个 CSS 类的摆放顺序是不会影响 CSS 样式的权重的。真正决定 CSS 样式的权重的是在 CSS 样式表中的顺序，CSS 样式表的样式规则会从上往下写，越是在后面的权重越高。因为.blue-text的样式在.pink-text的后面，所以最后.blue-text的样式会覆盖.pink-text。

过关目标

• 创建一个新的 CSS 类名为blue-text，然后赋予这个类蓝色字体样式；
• blue-text类在样式表中必须放在pink-text之后；
• 在拥有pink-text类的h1元素上叠加blue-text类；

过关条件

• h1元素中需要有pink-text类；
• h1元素中需要有blue-text类；
• blue-text和pink-text都需要赋予给h1元素；
• h1元素中的字体应该是蓝色的；

学会了什么？

这关卡主要教会我们：

1. 如何覆盖 CSS 样式，和使用 CSS 权重；

答案

「第二十九关」通过使用 ID 属性覆盖类属性样式

关卡名：Override Class Declarations by Styling ID Attributes

知识点

• 上一关我们知道了 CSS 样式表是从上到下阅读的，越是后面的权重就越高，就会覆盖前面声明的样式属性；
• 所以就算我们在h1元素中，把pink-text放在blue-text的前面，blue-text类中的 CSS 属性权重也是更大，会覆盖pink-text的 CSS 属性；
• 但是 CSS 属性权重并不止于此，还有比这个权重更高的；
• 这一关我们给h1元素添加一个ID名为orange-text，然后在 CSS 样式表中给这个 ID 橙色字体颜色的样式，从而覆盖掉blue-text类和pink-text类的样式；

给一个元素加入 ID 属性需要使用以下写法：

<h1 id="orange-text"></h1>

在 CSS 样式表中定义 ID 属性需要使用以下写法：

#brown-text {
  color: brown;
}

过关目标

• 给h1元素一个 ID 属性，值为orange-text；
• 保留blue-text类和pink-text类在h1元素中；
• 创建orange-text的 CSS 声明，并且给予color: orange的属性；

过关条件

• h1元素需要有一个pink-text类；
• h1元素需要有一个blue-text类；
• h1元素需要有一个orange-textID；
• 必须只有一个h1元素；
• orange-textID 需要声明好 CSS 的属性；
• h1元素不应该有任何style属性；
• h1元素中的字体应该是橙色的；

学会了什么？

这关卡主要教会我们：

1. 使用 ID 属性的样式来覆盖类样式；

答案

「第三十关」使用行内样式覆盖类样式

关卡名：Override Class Declarations with Inline Styles

知识点

• 上一关我们见证了 ID 属性的样式声明在权重中是高于类属性的样式声明；
• 就算在 CSS 样式表中是写在最上面的，也会比其他类属性声明的 CSS 属性要大；
• 但是还有一个大佬是被所有这些都权重更高的，还记得行内样式吗？就是在元素中定义的style属性；

不记得行内样式的写法的同学，可以看看以下例子：

<h1 style="color: green"></h1>

过关目标

• 使用行内样式，让h1元素中的字体变成白色（color: white）；
• 保留h1元素中的blue-text类，pink-text类和orange-textID 属性；

过关条件

• h1元素需要有一个pink-text类；
• h1元素需要有一个blue-text类；
• h1元素需要有一个orange-textID；
• h1元素需要有一个style属性；
• h1元素中的字体是白色的；

学会了什么？

这关卡主要教会我们：

1. 使用行内样式覆盖元素的样式；

答案

「第三十一关」用 Important 覆盖所有样式

关卡名：Override All Other Styles by using Important

知识点

• 在上一个关卡中发现，行内样式是会覆盖所有类型的样式声明；
• 但是行内样式并不是最大的，还有最后一个比行内样式权重还要高的；
• 对那就是使用!important，顾名思义就是“重要”的意识，也是表达着这个样式有最高优先级；
• 在我们使用它之前，先来了解一下为什么我们需要强制覆盖 CSS 样式；

为何要强制覆盖 CSS 样式？又有什么时候需要我们这么做呢？

在很多情况下，我们需要使用到 CSS 库，甚至是某 UI 框架。因为是使用别的开发者写好的样式，自然就有可能我们些的样式是被原有库或则框架的样式所覆盖了。所以当我们需要保证我们编写的 CSS 拥有最高优先级，并且绝对有效，这个时候我们就可以使用 !important。

• 让我们回到最初的pink-text类样式声明，一开始我们使用了写在后面的blue-text类覆盖了它的样式；
• 接下来是使用了orange-textID 属性覆盖它；
• 最后使用了行内样式覆盖；

所以样式声明的优先级顺序就是：

CSS 类声明顺序 < ID 属性样式 < 行内样式

过关目标

• 让我们在pink-text类的颜色声明后面加入!important；
• 用这个给pink-text类的样式声明得到最大优先级；

!important 的使用例子：

.brown-text {
  color: brown !important;
}

过关条件

• h1元素需要有一个pink-text类；
• h1元素需要有一个blue-text类；
• h1元素需要有一个orange-textID；
• h1元素中应该有行内属性为color: white；
• pink-text类样式声明中应该有 !important结尾；
• h1元素中的字体应该是粉红色；

学会了什么？

这关卡主要教会我们：

1. 如何使用最高优先级的!important；

答案

「第三十二关」使用 Hex 代码指定特定颜色

关卡名：Use Hex Code for Specific Colors

知识点

• 你们知道在 CSS 中还有其他方式可以用来指定颜色的吗？
• 其中一种方式就是使用 十六进制（Hexadecimal）或者叫 Hex 颜色代码；

什么是十六进制？

学过计算机的同学应该都知道，通常用小数，或者以 10 为底的数，那就是用数字 0 到 9。十六进制，顾名思义就是用 16 为底的数。也就是说需要使用 16 个不同的符号。符号 0 到 9 用来代表数字中的零到久，然后 A，B，C，D，E，F 就是第十到十五的符号。从 0 到 9，A 到 F 一共就有 16 个符号组成十六进制的代码。

• 在 CSS 中，我们可以使用 6 个十六进制的数值来代表颜色；
• 每两个都是代表着红（R），绿（G），蓝（B）三种色系。
• 拿#000000的黑色作为例子，如果红，绿，蓝都调到最低，自然就是没有颜色，那就是黑色了；
• 可以把这三种颜色当成三个颜色的灯泡，然后十六进制是用来控制他们的亮度，数值越高就越亮，0 为最低，也就是灯会关掉，所以所有#000000就等同于三盏灯都关掉，自然是黑色了。如果三盏灯都调到最亮，那就会是白色了，也就是我们用的#FFFFFF；

颜色码使用例子如下：

body {
  color: #000000;
}

过关目标

• 替换body元素中的black属性值为#000000；

过关条件

• body元素的背景颜色应该是黑色；
• 需要替换black，并且使用 Hex 颜色码；

学会了什么？

这关卡主要教会我们：

1. 什么是 Hex 颜色码；
2. 什么是十六进制；
3. 如何使用 Hex 颜色码；

答案

「第三十三关」使用十六进制代码来混合颜色

关卡名：Use Hex Code to Mix Colors

知识点

• 我们来回顾一下上一关的知识，Hex 颜色代码中有 6 位十六进制的数值，每两位都是分别代表着红（R），绿（G），蓝（B）三种色系；
• 我们可以随意调配这三种纯颜色的亮度来混合出超过 1600 万种颜色；
• 比如说橙色，就是纯红色，加一点绿色，然后没有蓝色，对应 Hex 颜色码就是#FFA500；
• 数值0在 Hex 码中是最低的数值，等同于把这个颜色调到没有为止；
• 数值F就是 Hex 码中最大值，等同于把这个颜色调到最亮值；

过关目标

• 转换一下颜色成 Hex 颜色码：

过关条件

• h1元素的字体I am red!需要是红色；
• 红色（Red）字体颜色属性应该使用hex 码替换颜色值red;
• h1元素的字体I am green!需要是绿色；
• 绿色（Green）字体颜色属性应该使用hex 码替换颜色值green;
• h1元素的字体I am dodger blue!需要是宝蓝色；
• 宝蓝色（Dodger Blue）字体颜色属性应该使用hex 码替换颜色值dodgerblue;
• h1元素的字体I am orange!需要是橙色；
• 橙色（Orange）字体颜色属性应该使用hex 码替换颜色值orange;

学会了什么？

这关卡主要教会我们：

1. 使用 Hex 颜色码替换颜色名词的属性值；

答案

「第三十四关」使用 Hex 颜色码缩写

关卡名：Use Abbreviated Hex Code

知识点

• 超过 1600 万种颜色码的可能性，让许多人感到不知所措；
• 而且很难记住十六进制代码，幸运的是你可以用他们的缩写版；
• 比如红色的 Hex 颜色码为 #FF0000 可以被缩写为 #F00，这个缩写版只给红色一个数值，绿色一个数值和蓝色一个数值；
• 但是这样的缩写版，就会让我们的颜色总可能数讲到 4000 种；
• 就算使用这种缩写版，浏览器会设别 #F00 和 #FF0000 为同一个颜色；

过关目标

• 用以下缩写版的 Hex 颜色码来更换对应的 CSS 类中的颜色值：

过关条件

• h1元素的字体I am red!需要是红色；
• 红色（Red）字体颜色属性应该使用缩写hex 码替换颜色值#FF0000;
• h1元素的字体I am green!需要是绿色；
• 绿色（Green）字体颜色属性应该使用缩写hex 码替换颜色值#00FF00;
• h1元素的字体I am cyan!需要是宝青色；
• 青色（Cyan）字体颜色属性应该使用缩写hex 码替换颜色值#00FFFF;
• h1元素的字体I am fuchsia!需要是樱红色；
• 樱红色（Fuchsia）字体颜色属性应该使用缩写hex 码替换颜色值#FF00FF;

学会了什么？

这关卡主要教会我们：

1. 使用缩写版的 Hex 颜色码；

答案

「第三十五关」使用 RGB 值改变元素颜色

关卡名：Use RGB values to Color Elements

知识点

• 除了 Hex 颜色码，还有其他方法可以用来给元素赋予颜色，那就是使用RGB值；
• 黑色的 RGB 值是：rgb(0, 0, 0)；
• 白色的 RGB 值是：rgb(255, 255, 255)；
• 与十六进制一样的原理，都是使用调整红（R），绿（G），蓝（B）三种色系的亮度来混合出 1600 万种颜色；
• 十六进制使用的是 0-9 和 A-F，而RGB使用的是 0 到 255，如果我们计算一下，其实 16 x 16 就是 256，而计算机都是从 0 开始，所以 $256-1=255$ ；
• 所以RGB和十六进制都是拥有一样的颜色种数，并且都是调整三种色系来变换颜色的；

以下是把背景颜色换成橙色的 CSS 代码：

body {
  background-color: rgb(255, 165, 0);
}

过关目标

• 把body元素的背景颜色换成RGB中的黑色值：rgb(0, 0, 0)；

过关条件

• h1元素的字体I am red!需要是红色；
• 红色（Red）字体颜色属性应该使用RGB值替换 Hex 颜色值;
• h1元素的字体I am orchid!需要是淡紫色；
• 淡紫色（Orchid）字体颜色属性应该使用RGB值替换 Hex 颜色值;
• h1元素的字体I am blue!需要是蓝色；
• 蓝色（Blue）字体颜色属性应该使用RGB替换 Hex 颜色值;
• h1元素的字体I am sienna!需要是赭色；
• 赭色（Sienna）字体颜色属性应该使用RGB替换 Hex 颜色值;

学会了什么？

这关卡主要教会我们：

1. 使用 RGB 值改变元素颜色；

答案

「第三十六关」用 RGB 来混合颜色

关卡名：Change the Color of Text

知识点

• 与 Hex 颜色代码一样，我们可以用不同的RGB值来混合出各种颜色；

过关目标

• 使用以下RGB值来替换 CSS 中的 Hex 颜色代码：

过关条件

• h2元素中需要有style属性；
• h2元素的color样式属性应该赋予red这个值；
• style属性值里的样式属性应该以;符号结束；

学会了什么？

这关卡主要教会我们：

1. 如何使用RGB混合颜色;

答案

「第三十七关」使用 CSS 变量同时改变多个元素样式

关卡名：Use CSS Variables to change several elements at once

知识点

• CSS 变量是一种通过只改变一个值来一次性改变多个 CSS 样式属性的强大方法；
• 遵循下面的目标，看看仅改变三个值来改变多个元素的样式；

过关目标

• 在penguin类中，改变一下内容：
  1. 改变--penguin-skin的black为gray；
  2. 改变--penguin-belly的gray为white；
  3. 改变--penguin-beak的yellow为orange；
• 必须在/* Only change code below this line */ 和 /* Only change code above this line */ 这两个备注之间修改代码；

过关条件

• penguin类中的--penguin-skinCSS 变量的值改为gray；
• penguin类中的--penguin-bellyCSS 变量的值改为white；
• penguin类中的--penguin-beakCSS 变量的值改为orange；

学会了什么？

这关卡主要教会我们：

1. 如何使用 CSS 变量批量改变多个元素样式；

答案

「第三十八关」创建自定义 CSS 变量

关卡名：Create a custom CSS Variable

知识点

• 创建一个 CSS 变量，我们只需要在变量名前面加上两个“横杠（-）”即可；
• 编写语法如下：

--penguin-skin： gray;

• 以上代码会创建一个变量，名为--penguin-skin，并且赋予了这个变量的值为gray；
• 现在我们就可以在 CSS 样式表中任何的地方使用这个变量；

过关目标

• 在penguin类中，创建一个变量名--penguin-skin；
• 并且给予这个变量一个值为gray；
• 必须在/* Only change code below this line */ 和 /* Only change code above this line */ 这两个备注之间编写代码；

过关条件

• penguin类中需要含有一个--penguin-skin变量，并且变量值为gray；

学会了什么？

这关卡主要教会我们：

1. 如何编写 CSS 变量；

答案

「第三十九关」使用自定义 CSS 变量

关卡名：Use a custom CSS Variable

知识点

• 上一关我们创建了一个自定义的 CSS 变量，这一关我们来看看是怎么使用的；
• 创建了一个 CSS 变量后，这个变量的名字可以在 CSS 样式属性中使用，只要我们关联这个变量名即可；
• 在代码中的关联写法如下：

background： var(--penguin-skin);

• 以上代码改变了background属性的值，这个值我们用了 CSS 变量；
• CSS 的变量的值，就是我们上一关定义的gray，这个值会被关联过来；

注意：使用的变量名字必须是和定义的变量名完全一致，要不就不会生效！

过关目标

• 把一下几个 CSS 类中的background属性的值都替换成--penguin-skinCSS 变量：
  1. penguin-top;
  2. penguin-bottom;
  3. right-hand;
  4. left-hand;

过关条件

• penguin-topCSS 类中的background属性值需要改为使用--penguin-skinCSS 变量；
• penguin-bottomCSS 类中的background属性值需要改为使用--penguin-skinCSS 变量；
• right-handCSS 类中的background属性值需要改为使用--penguin-skinCSS 变量；
• left-handCSS 类中的background属性值需要改为使用--penguin-skinCSS 变量；

学会了什么？

这关卡主要教会我们：

1. 如何使用自定义 CSS 变量；

答案

「第四十关」给 CSS 变量加上回退值

关卡名：Attach a Fallback value to a CSS Variable

知识点

• 当我们使用 CSS 变量做为属性的值，我们可以赋予这个变量一个回退值；
• 所谓的回退值，就是当这个变量无效或者无法取得值是，就会使用回退的值；

注意：这个回退值并不是用来提高浏览器兼容的，在 IE 浏览器下回退值也不会生效的。所以这个回退值只是用于当变量无法获取到值时，浏览器有一个可回退的值可用，并且可以保证有效显示。

如下是如何设置回退值的例子：

background: var(--penguin-skin, black);

• 上面的例子中，如果--penguin-skin变量无法获取到值，就会自动回退使用black做为背景颜色属性的值；

过关目标

• 同学们应该都注意到，右边的企鹅的身体部分的颜色不见了；
• 这个是因为.penguin-top类和.penguin-bottom类中的背景颜色属性的值中的变量名拼写错误了，所以导致变量无法取到变量所定义的值；
• 在不修正这个变量名拼写错误的情况下，我们给.penguin-top类和.penguin-bottom类中的background属性的变量值加上回退颜色：black；

过关条件

• 在penguin-top类中的background属性的变量值加入回退值black；
• 在penguin-bottom类中的background属性的变量值加入回退值black；

学会了什么？

这关卡主要教会我们：

1. 如何给 CSS 变量加上可回退的值；

答案

「第四十一关」CSS 变量的浏览器兼容

关卡名：Improve Compatibility with Browser Fallbacks

知识点

• 当我们使用 CSS 时，很有可能我们会遇到浏览器兼容问题；
• 如果遇到需要兼容不支持 CSS 变量的浏览器时，我们要提供一个回退的属性给浏览器读取；
• 当浏览器解析页面上的 CSS 时，它会忽略无法识别的 CSS 属性；
• 比如此时我们有一个背景颜色属性值使用了 CSS 变量，Internet Explore（简称 IE）会忽略这个 IE 不支持的背景颜色，因为 IE 不支持使用 CSS 变量。这种情况下 IE 浏览器只会寻找其他它认识的背景属性，如果它找不到就会回退到浏览器默认的背景颜色，当然这样不是我们想要的，并且可能默认的颜色和我们理想的效果有很大的出入；
• 按照以上的逻辑，如果我们需要给某一个属性一个兼容的回退值，我们只需要在不兼容的属性上面添加一个可兼容的属性即可；
• 这样当浏览器遇到一个属性它无法识别，就会往上找可用的属性，这样就可以做到浏览器兼容了；

过关目标

• 在代码中我们可以看到，在.red-box类样式中的background属性值使用了--red-colorCSS 变量；
• 我们在这个属性的上方加入background: red，从而兼容其他不支持 CSS 变量的浏览器；

过关条件

• .red-box类中的background属性上面添加一个background: red的兼容属性；

学会了什么？

这关卡主要教会我们：

1. 如果做到浏览器兼容；

答案

「第四十二关」继承 CSS 变量

关卡名：Inherit CSS Variables

知识点

• 当我们创建一个 CSS 变量，我们是可以在创建的 CSS 选择器中使用；
• 如果我现在把--penguin-skin变量下载.penguin类选择器中，那就能.penguin中可以调用这个 CSS 变量；
• 同时也可以在.penguin的所有子节点中使用，除外都是无法调用的；

那些才是子节点呢？

比如现在我们有一段这样的 HTML：
<div class="foo"><span class="bar"/></div>

这段 HTML 中bar就是foo的子节点，他们彼此有继承关系。

• 为了可以良好利用继承关系，CSS 变量一般都会放入:root元素；
• :root是一个伪类（pseudo-class）选择器，它会直接匹配 HTML 文档（document）中的根元素，那就是html元素；
• 在:root伪类中添加我们的 CSS 变量，遵循继承关系这些变量全局都可以使用了；

过关目标

• 在:root伪类选择器中声明一个--penguin-belly变量，并且给予pink属性值；
• 然后我们就可以看到所有使用到这个变量的地方，都会可以继承并且生效；

过关条件

• --penguin-belly变量需要在:root伪类选择器中声明，并且属性值是pink；

学会了什么？

这关卡主要教会我们：

1. 如何使用 CSS 继承关系来使用 CSS 变量；

答案

「第四十三关」在特定地方改变 CSS 变量

关卡名：Change a variable for a specific area

知识点

• 当我们在:root伪类选择器中定义 CSS 变量，整个页面使用到这个变量的地方都会被影响；
• 但是如果我们想再某一元素中重新定义这个变量，我们只需要在这个选择器中重新定义即可；

过关目标

• 在penguin类中改变--penguin-belly属性值为white；

过关条件

• penguin类中加入--penguin-belly属性，并且值赋予white；

学会了什么？

这关卡主要教会我们：

1. 如何在特定地方改变 CSS 变量值；

答案

「第四十四关」使用媒体查询来修改变量值

关卡名：Use a media query to change a variable

知识点

• CSS 变量可以简化媒体查询的使用方式；
• 比如当我们屏幕小于或大于媒体查询的范围时，我们可以改变 CSS 变量的值；
• 这时候所有使用了这个变量的属性就会跟着改变；

过关目标

• 在:root选择器中的media query内，重新定义--penguin-size的值为200px；
• 同时也重新定义--penguin-skin变量的值为black;
• 最后改变预览区域的宽度，看看又什么变化；

过关条件

• :root中需要重新定义--penguin-size的值为200px；
• :root中需要重新定义--penguin-skin的值为black；

学会了什么？

这关卡主要教会我们：

1. 在媒体查询中使用 CSS 变量重定义，从而达到在特定屏幕大小时，变量值发生变化；

答案

「总结」

这一期我们终于完成了 CSS 与 CSS3 基础的所有关卡，个人觉得这个 FCC 集训营的关卡中的 CSS 知识还是比较全面的。在编写这些关卡的过程中确实重温了不少前端基础，也是收益匪浅。在跟着我的教程一起闯关的同学们，也希望你们也有所收获。

我是三钻，一个在技术银河中和你们一起来终身漂泊学习。
想看更多技术知识文章关注个人微信公众号《技术银河》！
有问题可以在公众号留言咨询哦！下期再见 👋！

欢迎回来三钻的FCC前端教程，上一篇文章我们通过 28 关学会了 HTML 与 HTML5 网页开发基础。这一期我们一起攻破前端第二大知识点《CSS 基础入门》。因为这一课一共有 44 关，我把文章分成两期更新。敬请期待！

「CSS 基础知识」

Cascading Style Sheet缩写为 CSS，顾名思义就是层叠样式表的意思。CSS 是 HTML 中的一个样式表，告诉浏览器网页上的文字和其他内容是如何展示的。

理解 CSS

以上是一个官方的定义。我们用一个更简单的方式理解 CSS 到底是一个什么东东：

如果 HTML 是骨架，那 CSS 就是装饰这个骨架的一层皮和身上的装饰品。我们可以通过 CSS 控制皮肤的颜色，毛孔的粗细。甚至还可以控制我们装饰品上的特效，动效等等（有 LED 灯的口罩也是一种特效）。

回归 HTML 中的 CSS，我们可以使用 CSS 控制哪些东西呢？

• color：颜色
• fonts：字体
• positioning：定位
• spacing：间隙
• sizing：大小
• decoration：装饰
• transition：过渡/特效/动效

应用方式

我们一共有 3 种应用 CSS 样式的方法。

1. 我们可以在 HTML 元素行内的style中编写样式；
2. 在 HTML 文档中添加<style>标签，然后在标签内编写 CSS 代码；
3. 把 CSS 样式单独写入一个CSS样式文件，然后在需要使用的 HTML 文档中使用<link>引入。

一般项目中都会选择使用第三种方式，因为比较大型的前端页面，很多样式都是有重复性的，应用引入型的 CSS 样式，我们就可以把通用的写在一起然后在所有 HTML 中引入即可，不需要重复编写。并且可以把 CSS分类存放，提高可读性和可维护性。

CSS 原理

CSS 背后的原理是，使用 CSS 选择器选中 DOM（文档对象模型）里面的某个 HTML 元素。然后将各种 CSS 样式和属性应用到该元素中，从而改变元素在页面中的展现方式或者样式。

在本节中，我们将学会如何应用 CSS 样式到 CatPhotoApp 的元素中，从而将它从简单的文本装修成一个页面。让我们立即开始吧！

「第一关」改变文字颜色

关卡名：Change the Color of Text

知识点

• 我们这一关来尝试改变文本中一些文字的颜色；
• 我们可以给h2元素添加style属性，然后使用样式属性改变文字颜色；
• color就是用来定义文字颜色的样式属性；

以下例子演示如何给h2应用一个蓝色字体颜色的代码：

<h2 style="color: blue;">CatPhotoApp</h2>

注意： 在行内样式中，所有样式属性结束后需要加上一个;符号，代表这一个样式属性定义结束。然后后面还可以加入更多的样式属性。

过关目标

• 改变h2的文字颜色为红色(red)；

过关条件

• h2元素中需要有style属性；
• h2元素的color样式属性应该赋予red这个值；
• style属性值里的样式属性应该以;符号结束；

学会了什么？

这关卡主要教会我们：

1. 行内添加style样式属性;
2. 字体颜色样式属性color;

答案

「第二关」使用 CSS 选择器改变元素样式

关卡名：Change the Color of Text

知识点

• CSS 有几百种样式属性可应用到一个 HTML 元素中，来改变它在页面中的显示方式。
• 上一关编写的<h2 style="color: red;">CatPhotoApp</h2>，这里我们使用行内样式，使用了文字颜色样式来单独改变h2元素中的文字。
• 这种应用方式只能单独针对 HTML 中某一个元素进行样式影响，但是更好的方式是使用 CSS 样式表。

在代码的最顶端加入style标签：

<style></style>

在style中，使用CSS 选择器选中所有h2标签，并且给所有h2标签加入字体颜色样式属性color: red：

<style>
  h2 {
    color: red;
  }
</style>

注意： 选择器名中的样式元素必须用两个大括号包裹着 (开始{与结束})。在样式属性的最后必须加入一个分号;来结束。

过关目标

• 删除h2行内样式;
• 在代码顶部加入style样式表代码区;
• 在样式代码区使用 CSS 选择器把所有h2元素内的字体改变为蓝色blue;

过关条件

• h2元素中的style属性需要被移除；
• 需要创建一个style元素；
• h2元素中的文字应该是蓝色blue的；
• 样式表中的样式属性都应该遵循规范，有大括号和结束时的分号；
• style元素有接受标签；

学会了什么？

这关卡主要教会我们：

1. 使用style元素
2. CSS 样式元素规范

答案

「第三关」使用 CSS 类

关卡名：Use a CSS Class to Style an Element

知识点

• CSS 中的类是为了解决服用样式的问题；

类声明例子：

<style>
  .blue-text {
    color: blue;
  }
</style>

• 在style元素中我们编写了一个.blue-textCSS 类（CSS 类需要在我们的名字前加入.符号, 然后 CSS 类的命名规范必须使用-分割）；
• 接着我们可以把这个类加入 HTML 元素中，比如：<h2 class="blue-text">CatPhotoApp</h2>；
• 只要给我们需要应用字体颜色为蓝色的 HTML 元素上加入class="blue-text"，即可获得该 CSS 类的样式属性。
• 记住在 HTML 中加入类，是不需要.这个符号在最前面的。

过关目标

• 在style元素中，把h2CSS 选择器改为.red-text；
• 并且把颜色值从blue改为red;

过关条件

• h2元素的问题应该是红色的；
• h2元素应该拥有一个red-text的类；
• style样式表中有定义一个.red-text，并且样式属性color的值为red;
• 不允许在h2中使用行内style属性来改变元素的字体颜色；

学会了什么？

这关卡主要教会我们：

1. 在 CSS 样式表中定义类；
2. 在 HTML 元素中加入类；
3. 用类改变 HTML 元素的样式；

答案

「第四关」使用 CSS 类改变多个元素样式

关卡名：Change the Color of Text

知识点

• 一个类可以赋予给多个元素，让所有被赋予同一个类的元素拥有同一套样式；

几年前twitter公司很火的前端框架bootstrap，就是结合很多这种分类好的的类，让我们在 HTML 元素中组合使用就可以快速布局网页。所以合理的分类好不同种类的类，然后给他们一种特定用途，有利于 CSS 开发时提高代码复用性，提高可读性和可维护性。

过关目标

• 给代码中第一个p元素也加入red-text类;

过关条件

• h2元素的文字应该是红色；
• h2元素应该拥有一个red-text类属性；
• 第一个p元素的内容应该是红色；
• 第二和第三个p元素的内容颜色应该不是红色；
• 第一个p元素应该拥有一个red-text类属性；

学会了什么？

这关卡主要教会我们：

1. 用类名对多个 HTML 元素赋予同一个样式；

答案

「第五关」改变文字大小

关卡名：Change the Color of Text

知识点

• 字体大小是font-size样式属性控制的；

h1 {
  font-size: 30px;
}

过关目标

• 在style元素中，.red-text下方加入p元素选择器；
• 在p选择器中加入font-size样式属性，并且把值设置为16px（16 像素）；

过关条件

• 在style元素中为p元素的内容的字体改为16px的大小；

学会了什么？

这关卡主要教会我们：

1. 改变元素字体大小；

答案

「第六关」改变元素字体

关卡名：Set the Font Family of an Element

知识点

• 使用font-family样式属性，我们可以定义一个元素所使用的字体；
• 举例，如果我们想h2元素使用sans-serif字体，在 CSS 中需要这么些：

h2 {
  font-family: sans-serif;
}

过关目标

• 让所有p元素使用monospace字体；

过关条件

• 所有p元素都使用monospace字体；

学会了什么？

这关卡主要教会我们：

1. 使用 CSS 样式属性制定元素使用的字体；

答案

「第七关」引入 Google 字体

关卡名：Import a Google Font

知识点

• 在我们的操作系统中，会有很多通用的字体可以使用。但是除了这些字体之外我们还可以引入自定义字体，也叫web fonts网页字体。
• 在项目中，有一些设计师会使用一些特殊的字体，主要是为了提高整体页面的美观和协调，这种也是非常常见的。
• 这个时候我们就需要在 HTML 中引入字体了。
• 这个关卡我们使用了Google Fonts库（顾名思义，就是使用谷歌公司提供的公开字体库 - 也就是免费使用的）

注意： 如果我们无法访问谷歌字体的话，这一关是无法过的，只能跳过。但是作为开发人员，我们是有办法的。（你们懂的 😂）

• 要引入谷歌字体，我们只需要在 HTML 中加入谷歌字体的 URL；
• 这个关卡中我们需要引入谷歌字体库中的Lobster字体；
• 我们只需要复制黏贴以下代码，加入到我们代码的顶端即可（如果是在正常的 HTML 文件格式中，就是加入到<meta></meta>标签之中）；

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />

• 现在我们可以在 CSS 中使用font-family: Lobster;, font-family字体属性值的格式是: font-family: FAMILY_NAME, GENERIC_NAME;;
• 里面的FAMILY_NAME就是指定的字体名，如果这个字体找不到，或者语言不适应的话，就会往后面定义的字体进行应用；
• 换言之GENERIC_NAME就是后备字体，可以用,分割输入多个，这个也会在下一关详细解说；
• 如果我们的字体名中含有空格，那我们就需要用双引号包裹着，例如："Open Sans"。因为Lobster这个字体不存在这种情况，所以不需要使用双引号；

过关目标

• 创建一个font-familyCSS 规则，并且使用Lobster字体。必须保证我们的h2元素应用了这个字体定义。

过关条件

• 引入了谷歌字体库中的Lobster字体；
• h2元素中的字体使用了Lobster字体；
• 使用h2CSS 选择器的来改变字体；
• 其他p元素应该保持原来的monospace字体；

学会了什么？

这关卡主要教会我们：

1. 引入谷歌字体;
2. 使用谷歌字体;

答案

「第八关」定义字体如何往后取用

关卡名：Specify How Fonts Should Degrade

知识点

• 浏览器中有好几个可用的默认的字体，最普通的字体有：monospace, serif 和 sans-serif；
• 当一个字体不存在或者无法使用时，我们可以告诉浏览器**“往后取用”**下一个指定的字体；
• 举例：如果Helvetic作为我们的默认字体，当这个字体无法使用的时候自动往后选择使用sans-serif字体，这种场景我们就需要用以下方式：

p {
  font-family: Helvetica, sans-serif;
}

Generic font family的字体名是没有大小写限制的，只要名字正确就可以了。并且不需要双引号，因为它们是 CSS 关键词而已。

过关目标

• 首先给h2追加monospace字体，让h2元素拥有默认字体为Lobster，备用自己为monospace；
• 上一关卡，我们使用link标签引入了谷歌字体库中的Lobster字体。这里我们注释掉这个引用，从而Lobster这个字体就变成无法使用了，所以h2元素中就会往后取用monospcae字体；

注意： 如果我们的电脑中安装了Lobster字体，那这个例子中的Lobster字体是可用的，自然就无法看到浏览器往后取用的效果了。

过关条件

• h2元素使用Lobster字体；
• 当Lobster字体无法使用时，h2元素应该往后取用monospace字体；
• 注释掉谷歌字体库的引用，在link标签的签名加入<!--和在结尾加入-->；
• 注释的结尾必须有-->；

学会了什么？

这关卡主要教会我们：

1. 给 HTML 元素追加后备字体；

答案

「第九关」控制图片大小

关卡名：Size Your Images

知识点

• CSS 中有一个样式属性叫width（宽度），顾名思义这个元素是用来控制元素的宽度的；
• 与字体大小一样，我们使用px（像素）为单位来定义图片的宽度
• 举例：如果我们创建一个 CSS 类larger-image，并且使用这个类来把 HTML 元素的宽度定义为 500 像素，我们就用以下写法：

<style>
  .larger-image {
    width: 500px;
  }
</style>

过关目标

• 创建一个smaller-image的 CSS 类，并且用这个类来缩小一个图片的大小为 100 像素宽；

注意：因为浏览器的设置，有一些用户会默认把网页放大缩小了，不是默认的 100%。如果是的话，请还原 100%伸缩值后才能正常通过此关哦！

过关条件

• img元素需要有smaller-imge类；
• img元素应该是100px宽，并且浏览器缩放是在 100%；

学会了什么？

这关卡主要教会我们：

1. 控制元素宽度

答案

「第十关」添加元素边框

关卡名：Add Borders Around Your Elements

知识点

• CSS 边框有这些属性：style, color 和 width；
• 举例：如果我们想给一个 HTML 元素创建一个红色的，5 像素边框，我们就需要用这样一个 CSS 类来实现；

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

还有一种更简单快捷的写法：

<style>
.thin-red-border {
  border: 5px red solid;
}
</style>

过关目标

• 创建一个类叫thick-green-border；
• 这个 CSS 类给 HTML 元素加入一个 10px，实线（solid）和绿色（green）的边框；
• 给我们的猫咪图片加入这个类；

记住：我们是可以给 HTML 元素中的class属性添加多个类，只要使用空格分隔即可。如：
<img class="class1 class2">

过关条件

• img元素需要有smaller-imge类；
• img元素需要有thick-green-border类；
• 图片应有一个 10px 宽的边框；
• 图片应有一个实线的边框样式；
• 图片应有一个绿色的边框样式；

学会了什么？

这关卡主要教会我们：

1. 给元素添加边框；
2. 给边框加入宽度，线的样式和颜色；

答案

「第十一关」使用 border-radius 实现圆边

关卡名：Add Rounded Corners with border-radius

知识点

• 我们的喵咪图片现在是直角边的；
• 我们可以使用border-radius把图片的四个角改圆边；

过关目标

• 我们可以给border-radius一个弧度像素值；
• 现在给我们的猫咪图片一个10px的border-radius；

注意：这一关中，是有多个接单方案的：

1. 在.thick-green-border中添加border-radius；
2. 在.smaller-image中添加border-radius；

过关条件

• img元素需要有thick-green-border类；
• 图片应有一个 10px 的边框弧度；

学会了什么？

这关卡主要教会我们：

1. 给属性边框弧度；

答案

「第十二关」实现圆形图片

关卡名：Make Circular Images with a border-radius

知识点

• CSS 的border-radius属性不止可以使用像素为单位，我们还可以使用百分比；

过关目标

• 给我们的猫咪图片一个50%的border-radius；

过关条件

• 图片应有一个50%的边框弧度；
• 图片的边框弧度必须是一个百分比值50%；

学会了什么？

这关卡主要教会我们：

1. 给元素添加百分比弧度值；

答案

「第十三关」给元素一个背景颜色

关卡名：Give a Background Color to a div Element

知识点

• 我们可以使用background-color属性来设置一个元素的背景颜色；
• 举例：如果我们想给一个元素绿色（green）的背景，我们就要给予这个元素一个background-color属性；

.green-background {
  background-color: green;
}

过关目标

Create a class called silver-background with the background-color of silver. Assign this class to your div element.

• 创建一个 CSS 类silver-background，其中加入background-color属性和属性值为silver；
• 然后把这个类加入到div元素的class属性中；

过关条件

• div元素应有一个silver-background类；
• div元素应有银色（silver）背景颜色；
• style标签中应该有一个.silver-background类选择器，并且有background-color属性和属性值为silver；

学会了什么？

这关卡主要教会我们：

1. 给元素添加背景颜色；

答案

「第十四关」给元素 ID 值

关卡名：Set the id of an Element

知识点

• 除了classCSS 类属性，我们还可以给每一个 HTML 元素一个id属性；
• id属性是有好几个实用的用途的：我们可以用id选择器来给一个元素 CSS 样式属性，同时也可以让 JavaScript 找到指定id的元素，并且对此进行修改等；
• 记住，id属性的属性值应该是唯一的；
• 浏览器不会强制要求id的唯一性，但是在实践中被广大认可id是需要唯一的，所以不要在多个一个元素中赋予同一个id属性；

举例：在我们的h2元素中添加一个id属性cat-photo-app：

<h2 id="cat-photo-app"></h2>

过关目标

• 给form元素添加一个id属性值cat-photo-form；

过关条件

• 表格元素中需要有个id属性值为cat-photo-form；

学会了什么？

这关卡主要教会我们：

1. 给元素添加id属性；

答案

「第十五关」使用 ID 更改元素样式

关卡名：Use an id Attribute to Style an Element

知识点

• id属性与 CSS 类一样可以为他们绑上 CSS 样式；
• 但是区别是id是无法复用，只能给予一个元素（源自于我们上一关所说的原因）；
• 在权重之中id在样式表中相对比 CSS 类，它有更好的权重，如果class和id的样式同时给予一个元素，那id的样式会覆盖类的样式；

举例：我们现在给一个id属性为cat-photo-element，然后给这个id属性在样式表中绑定一个背景颜色background-color为绿色green。

#cat-photo-element {
  background-color: green;
}

注意：在我们的样式表<style>中，我们用. + 类名来声明类的样式，但是如果是id的话我们会用# + id名来声明id的样式。

过关目标

• 现在尝试给我们的form元素一个id属性，属性值为cat-photo-form；
• 并且在样式表中给予这个id一个绿色（green）的背景颜色；

过关条件

• form元素中应有一个id属性为cat-photo-form；
• form元素的背景颜色应该是绿色的；
• form元素应有id属性；
• form元素中不能有class或者style；

学会了什么？

这关卡主要教会我们：

1. 使用id属性；
2. 在样式表中声明id属性的样式；

答案

「第十六关」给元素添加内边距

关卡名：Adjust the Padding of an Element

知识点

• 我们把 Cat Photo App 放一边，先来学习更多的 HTML 样式；
• 可能大家都注意到了，HTML 的元素基本上都是一个个像积木一样的正方形盒子组成的；
• 在排版中最常用的三大属性，它们是用来控制 HTML 元素之间的空隙的：padding（内边距），margin（外边距）和border（ 边框）；
• 一个元素的padding，控制一个元素内容四边的空间，还有内容与border边框的距离；
• 在预览区中的蓝色与红色盒子被包裹在一个黄色盒子之中，我们应该注意到，红色盒子的padding比蓝色盒子的边距要宽；

如果想更深入的理解内容与margin，padding和border之间距离，我们需要一个更好的图解方式，请看下图：

上图中有 3 组颜色，从内到外：蓝色是content(内容部分)，绿色部分是padding(内边距)，黄色部分是border(边框)，最外面的橙色部分是margin(外边距)。通过这个图，我们就能清晰理解这些边距的实际产生的距离的效果。

• 这里我们可以看到，当我们加大蓝色盒子的padding，盒子内容里面的字体与边框的距离就越远；

过关目标

Change the padding of your blue box to match that of your red box.

• 改变蓝色盒子的padding，从而让蓝色盒子与红色盒子的padding一致；

过关条件

• 蓝色盒子的padding应改为20px；

学会了什么？

这关卡主要教会我们：

1. 使用padding（内边距），margin（外边距）和border(边框)；

答案

「第十七关」调整元素外边距

关卡名：Adjust the Margin of an Element

知识点

• 一个元素的margin(外边距)，控制这个元素与周围元素之间的空间；
• 所以我们可以看到黄色盒子内的蓝色盒子与红色盒子，红色盒子拥有一个更大的margin，同时让红色盒子看起来更小了；
• 当我们加大蓝色盒子的margin的时候，也会看到同等的变化。因为蓝色盒子与周边元素的间距会加大，同时蓝色盒子的content内容可以用的空间就需要伸缩适应。最后蓝色盒子就会变小了；

为了更好的理解为什么内容区域宽高会变动，我们先来看看红色盒子的空间信息：

首先这个例子中，红色盒子的content内容区域是没有给宽高的，所以会根据浏览器窗口大小适应。也就是说，内容区域是一个弹性宽高盒子。这个时候我们给了20px的padding，5px的border，20px的margin。那盒子的总宽高是多少？

这个时候盒子的总宽高 = content宽高 + padding + border + margin 对吧？

假设现在浏览器窗口的宽度是1000px，这里我们先假设外层没有一个黄色盒子，这个红色盒子可以填满这个浏览器宽度。这个时候红色盒子的content宽度就是:

1000 - 20*2 (左右的margin外边距) - 5*2(左右的border边框) - 20*2(左右的padding内边距) = 910px。

如果现在我把浏览器窗口变成 800px 呢？安装刚刚的公式我们会得出 710px，对内容部分少了 200px。

好了按照我们刚刚的公式，现在浏览器窗口宽度不变，只把margin外边距加大，这个时候内容是不是也会变？因为最终内容区域的大小都是受到margin，border和padding的总额所影响的？所以在上面的例子里面我们发现加大了蓝色盒子的margin后，蓝色盒子显然是变小了。因为我们加大了margin。

同时也是因为我们看到的盒子大小是基于盒子的边框，不是真的在看盒子的content内容部分。

如果我们给盒子一个宽高后，我们加大padding时盒子就会变大。甚至有时候在排版的过程中，使用padding就会发现盒子会超出了父级的元素盒子。这里我们可以深入解说一下CSS 中的两种盒模型：

盒模型：标准盒模型

• 盒子宽度 = 内容的宽度
• 盒子高度 = 内容的高度

其他间距都是额外加入的，会影响盒子总体呈现的宽高

如果不希望使用盒子的padding的时候影响盒子总体大小，我们就要把盒子变成IE盒模型

在盒子的 CSS 中添加box-sizing: border-box

盒模型：IE盒模型

• 盒子宽度 = border + padding + 内容的宽度
• 盒子高度 = border + padding + 内容的高度

盒子的框高包含了边框和内边距，所以整体的盒子高度不受padding和border影响。

过关目标

• 改变蓝色盒子的margin，从而让蓝色盒子和红色盒子又一样的展示效果；

过关条件

• blue-box类应有20px的margin；

学会了什么？

这关卡主要教会我们：

1. margin的使用；
2. padding对盒子的宽高的影响；
3. 标准盒模型和IE盒模型；

答案

「第十八关」给元素负外边框

关卡名：Add a Negative Margin to an Element

知识点

• 一个元素的margin控制它的周边与它的边框之间的空隙；
• 如果我们给一个元素一个负数的margin，这个元素会变大；

所以给一个元素负margin就会变大？是，也不是！但是为什么呢？margin是外边框，不应该会对元素的内容产生大小变动呀？

要回答这个疑问，我们首先来看看改为负margin之前和之后是怎么样的：

• 首先第一最外层的黄色盒子没有定义宽高，所以它是自适应浏览器窗口宽高；
• 第二我们没有给蓝色盒子定义宽高，所以它的内容宽高也是跟随着父级宽高；
• 蓝色盒子原本的margin是20px，那盒子的宽度就是149 (内容) + 20+20 (左右内边距) + 5+5 (左右边框) = 199px，最后还有左右的20px的margin；
• 蓝色黑子换成了margin为-15px后，这时宽度就是 219 (内容) + 20+20 (左右内边距) + 5+5 (左右边框) = 269px，最后左右的-15px的margin；
• 以上就是最后在浏览器的盒子属性的区别，这两个之中哪个的数值变了呢？对内容的宽度变了！为什么呢？
• 219 - 149 = 70px，那这 70 像素的增加是从哪里来的呢？
• 对的！就是-15px和20px的区别。因为蓝色盒子没有定义宽度，所以宽度是自适应的。从左右负 15 来算一共给这个盒子左右各增加了 15 像素的空间。然后原本是 20 像素的边框现在没有了，所以另外再加了左右 20 像素的距离。一共就是15+15+20+20 = 70。就是这样我们的内容就多了70px的宽度，所以蓝色盒子总体来说是不是宽度扩大了70px呢？懂了！

问题来了，为什么刚刚说给一个元素的margin变化时，会，也不会导致元素放大呢？主要原因是因为我们这个例子中的蓝色盒子没有给宽度。如果给了宽度，盒子正数的margin和负数margin都不会影响这个盒子的宽的。所以只有当这个盒子的宽度是自适应的时候才会导致盒子变大变小哦。

过关目标

• 给蓝色盒子一个负margin，让它与红色盒子的呈现样式一样；
• 把蓝色盒子的margin改为-15px，从而让蓝色盒子与红色盒子一样占了黄色盒子的总宽度；

过关条件

• blue-gox的类应有一个-15px的margin；

学会了什么？

这关卡主要教会我们：

1. 给元素负margin；

答案

「第十九关」给元素每个边缘不同的内边距

关卡名：Add Different Padding to Each Side of an Element

知识点

• 有时候我们需要自定义一个元素，并且要给一个元素每个边缘一个不同的padding；
• CSS 让我们可以控制一个元素 4 个边的内边距，控制的属性分别是：padding-top (上)、padding-right (右)、padding-bottom (下)和padding-left (左)；

过关目标

• 给予我们蓝色盒子的顶部与左边40px的padding, 然后底部和右边20px；

过关条件

• blue-box类中应有40px的padding-top；
• blue-box类中应有20px的padding-right；
• blue-box类中应有20px的padding-bottom；
• blue-box类中应有40px的padding-left；

学会了什么？

这关卡主要教会我们：

1. 单独给每一个边缘不同的内边距；

答案

「第二十关」给元素每个边缘不同的外边距

关卡名：Add Different Margins to Each Side of an Element

知识点

• 有时候我们需要自定义一个元素，并且要给一个元素每个边缘一个不同的margin；
• CSS 让我们可以控制一个元素 4 个边的外边距，控制的属性分别是：margin-top (上)、margin-right (右)、margin-bottom (下)和margin-left (左)；

过关目标

• 给予我们蓝色盒子的顶部与左边40px的margin, 然后底部和右边20px；

过关条件

• blue-box类中应有40px的margin-top；
• blue-box类中应有20px的margin-right；
• blue-box类中应有20px的margin-bottom；
• blue-box类中应有40px的margin-left；

学会了什么？

这关卡主要教会我们：

1. 单独给每一个边缘不同的外边距；

答案

「第二十一关」使用顺时针语法指定元素内边距

关卡名：Use Clockwise Notation to Specify the Padding of an Element

知识点

• 除了使用padding-top (上)、padding-right (右)、padding-bottom (下)和padding-left (左)来给一个元素特定的内边距；
• 我们还可以在一行内写完一个元素的出内边距：padding: 10px 20px 10px 20px;；
• 这里面的四个数值顺时针的从上到左旋转来分配的：上，右，下，左；

其他语法：

/* 应用于四个边 */
padding: 1em;

/* 垂直方向| 水平方向*/
padding: 5% 10%;

/* 顶部| 水平方向| 底部*/
padding: 1em 2em 2em;

/* 顶部| 右边| 底部| 左边*/
padding: 2px 1em 0 1em;

过关目标

• 顺时针语法指定.blue-box类的顶部和左边padding为40px，然后底部和右边padding为20px；

过关条件

• blue-box类中应有40px的顶部padding；
• blue-box类中应有20px的右边padding；
• blue-box类中应有20px的底部padding；
• blue-box类中应有40px的左边padding；
• 使用顺时针语法来分配padding；

学会了什么？

这关卡主要教会我们：

1. 使用顺时针语法给元素分配内边距；

答案

「第二十二关」使用顺时针语法指定元素外边距

关卡名：Use Clockwise Notation to Specify the Margin of an Element

知识点

• 除了padding可以使用顺时针语法，margin也一样可以；
• 除了使用margin-top (上)、margin-right (右)、margin-bottom (下)和margin-left (左)来给一个元素特定的外边距；
• 我们还可以在一行内写完一个元素的出外边距：margin: 10px 20px 10px 20px;；
• 这里面的四个数值顺时针的从上到左旋转来分配的：上，右，下，左；

其他语法：

margin: 5%; /* 所有的边都是 5% 的边距 */

margin: 10px; /* 所有的边都是 10像素 的边距 */

margin: 1.6em 20px; /* 上和下边是 1.6字距, 左和右是 20像素 边距 */

margin: 10px 3% 1em; /* 上边 10像素, 左和右 3%, 下边 1字距 边距 */

margin: 10px 3px 30px 5px; /* 上边 10像素, 右边 3像素, bottom 30px, left 5px margin */

margin: 1em auto; /* 上和下边 1字距 边距, 该盒子是水平居中的 */

margin: auto; /* 该盒子是水平居中的, 上下边距为0 */

在现代浏览器中，如果要把一些东西水平居中，使用 display:flex; justify-content: center; .

然而, 在一些老的浏览器，如 IE8-9, 这些是不可用的. 想要把一个元素在其父元素中居中, 使用 margin: 0 auto;

过关目标

• 顺时针语法指定.blue-box类的顶部和左边margin为40px，然后底部和右边margin为20px；

过关条件

• blue-box类中应有40px的顶部margin；
• blue-box类中应有20px的右边margin；
• blue-box类中应有20px的底部margin；
• blue-box类中应有40px的左边margin；
• 使用顺时针语法来分配margin；

学会了什么？

这关卡主要教会我们：

1. 使用顺时针语法给元素分配外边距；

答案

「待续」总结

这周我们一起闯过了 22 关，下一期我们会一起把剩余的 22 关完成。学习是一种像爬山一样的过程，要经历过漫长的上坡路，一步一个脚印。“路漫漫其修远兮，吾将上下而求索。”， 在追寻知识的道路上，前方的道路还很漫长，但我们将百折不挠，不遗余力地，上天下地的去追求和探索。让我们继续坚持学习，终身学习成长。在大前端的时代爬到技术的巅峰，做一个有深度的技术人员。

我是三钻，一个在技术银河中和你们一起来终身漂泊学习。
想看更多技术知识文章关注个人微信公众号《技术银河》！
有问题可以在公众号留言咨询哦！下期再见 👋！