FCC学习笔记(二)

Nest an Anchor Element within a Paragraph

---

作为参考，再次看一看a元素的图示：

例如：

<p>Here's a <a href="https://freecodecamp.cn"> link to FreeCodeCamp中文社区</a> for you to follow.</p>

Nesting（嵌套）就是把一个元素放在另一个元素里面。

任务：把你的a元素嵌套进一个新的p元素（紧邻已有的h2元素之后），让段落的文本为View more cat photos，但是其中仅cat photos是一个链接，其余的是普通文本。

Turn an Image into a Link

---

你可以通过把某元素嵌套进a元素使其变成一个链接。

把你的图片嵌套进a元素。举例如下：

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

任务：把你的小猫图片插入到一个新的锚点元素中，并把锚点元素的href属性设置为#。

一旦完成，把你的光标悬停在你的图片上。你的光标此时应该由光标指针变成手形指针。图片现在是一个链接了。

占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。

你可以用如下方式创建占位符：

<input type="text" placeholder="this is placeholder text">

把你的input(输入)框的placeholder的值设置为"cat photo URL"。

Create a Set of Radio Buttons

---

类比是最好的学习方式，当你搞不清一个概念时，最好在生活中找到对应的案例。

单选就是你只能在多个选项中选择一个，就好比你有很多追求者，但却只能选择一个结婚。

多选一的场景就用radio button(单选按钮)

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label(标签)元素中。

注意：所有关联的单选按钮应该使用相同的name属性。

下面是一个单选按钮的例子：

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

给你的表单添加两个单选按钮，一个叫indoor，另一个叫outdoor。