Freecodecamp学习实录（每日更新,欢迎交流）

Say Hello to HTML Element Incomplete

1 <h1>Hello</h1>

1就是一个HTML元素，h1是header1的简写，意思是一级标题。

大部分元素都有一个开始标记和一个结束标记。

开始标记像这样：< h1>

结束标记像这样：< /h1>

Headline with the h2 Element Incomplete

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。

在主标题下面创建一个副标题，标题内容是：CatPhotoApp

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>

Inform with the Paragraph Element Incomplete

p是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。

任务：在副标题下面新增一个段落，段落内容是：Hello Paragraph。

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>

Uncomment HTML Incomplete

注释有两个功能：

1、想让某一段代码不起作用，但你又不想删除这一段代码。

2、就是给代码添加一些说明，方便团队合作或日后自己查看，但又不想影响代码本身。

我们先学习如何删除注释，再学习如何添加注释。

提示：可以通过删除< !–和–>来删除注释。

任务：试着先把一级标题、二级标题、段落的注释都删除掉。

<!--
<h1>Hello World</h1>
<h2>我家的猫咪</h2>
<p>Hello Paragraph</p>
-->

Comment out HTML Incomplete

注释的开始标记是< !–

结束标记是–>

任务：把主标题和段落都注释掉，但把副标题留着。

<!--h1>Hello World</h1-->
<h2>我家的猫咪</h2>
<!--p>Hello Paragraph</p-->

Fill in the Blank with Placeholder Text Incomplete

Web开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。

为什么叫lorem ipsum text呢?

是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。

从公元16世纪开始lorem ipsum text就被当做占位符了，这种传统延续到了互联网时代。

于此同时，孙悟空也在五指山下压了500年，然后就进化成程序猿了，是不是很巧合，哈哈。

任务：把段落中的文本替换为：Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄。

<h1&
d268
gt;西游记</h1>
<h2>齐天大圣</h2>
<h2>孙悟空</h2>
<p>Monkey code 猴哥猴哥，你真了不得，金箍棒在手，问世间谁是英雄</p>

Delete HTML Elements Incomplete

手机的屏幕空间是有限的。

让我们删除不必要的元素，开始设计我们的CatPhotoApp。

任务：删除你的h1元素以简化视图。

<h1>Hello cat!</h1>
<h2>我家的猫咪</h2>
<p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

Change the Color of Text Incomplete

现在让我们来改变某些文本的颜色。

我们可以通过修改h2元素的style(样式)来达到目的。

样式的属性有很多，其中color用来指定颜色。

以下是将你的h2元素的文本颜色设置为蓝色的示例代码：

< h2 style=”color: blue”>CatPhotoApp< /h2>

任务：修改你的h2元素的style，让文本的颜色变为红色。

<h2 style="color:red">我家的猫咪</h2>
<p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

Use CSS Selectors to Style Elements Incomplete

样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。

当你键入

<h2 style="color: red">CatPhotoApp</h2>

，你就给h2元素添加了inline style(内联样式)。

内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。

在代码的最顶端，创建一个如下的style元素：

<style>
</style>

在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如，如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样：

<style>
选择器 {属性名称: 属性值;}
h2 {color: red;}
</style>

注意：一定要在属性值的后面加上分号;。

任务：删除你的h2元素的内联样式，然后创建一个style元素。添加必要的CSS，使所有h2元素变为蓝色。

<style>
h2{color:blue}
</style>
<h2 >我家的猫咪</h2>
<p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

Use a CSS Class to Style an Element Incomplete

上节课我们学习了元素选择器，这节课我们学习类选择器。

我们先声明一个类选择器：

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

上面的代码在

<style>

标记中声明了一个叫做 blue-text 的类样式。

然后在h2元素上应用我们声明的类选择器：

<h2 class="blue-text">CatPhotoApp</h2>

注意：在CSS中，类选择器应该添加.为前缀。

而在HTML中，class属性不能添加.为前缀。

这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。

任务：在你的style元素中，修改h2选择器为.red-text选择器，并把颜色值从blue修改为red。

最后在h2元素上应用我们声明的.red-text选择器。

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

<h2 class="red-text">我家的猫咪</h2>

<p>在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

Style Multiple Elements with a CSS Class Incomplete

你可以在 HTML 元素的开始标记中通过使用class=”your-class-here”来将 class 附加到相关元素中。

CSS 类选择器必须添加.为前缀，如下：

.blue-text {
color: blue;
}

但在HTML中class属性的值不需要添加.为前缀，如下：

<h2 class="blue-text">CatPhotoApp</h2>

将red-text类应用到h2和p元素中。

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

<h2 class="red-text">我家的猫咪</h2>

<p class="red-text">在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

Change the Font Size of an Element Incomplete

字号是由样式属性font-size来控制的, 如下：

h1 {
font-size: 30px;
}

用下面的文本来创建第二个p元素：

养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

任务：让第一个段落和第二个段落的font-size都为16px。

请不要为第二个段落添加 class 属性

<style>
.red-text {
color: red;
}
P{
font-size:16px;
}
</style>

<h2 class="red-text">我家的猫咪</h2>

<p class="red-text">在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

<p>养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创</p>

Set the Font Family of an Element Incomplete

Import a Google Font Incomplete

Specify How Fonts Should Degrade Incomplete

Add Images to your Website

Size your Images

CSS包含一个控制元素宽度的width属性。像控制字体一样，我们使用px（像素）来指定图片的宽度。

例如，如果我们想要创建一个名为larger-image的类选择器，把HTML元素的宽度设定为500像素，我们使用：

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

任务：创建一个名为smaller-image的类选择器，然后用它来改变图片尺寸，使图片仅有100像素宽。

<style>
.smaller-image{
width: 100px;
</style>
<img class="smaller-image" src="/images/relaxing-cat.jpg">

Add Borders Around your Elements Incomplete

Add Rounded Corners with a Border Radius Incomplete

Make Circular Images with a Border Radius Incomplete

Link to External Pages with Anchor Elements Incomplete

Nest an Anchor Element within a Paragraph Incomplete

Make Dead Links using the Hash Symbol Incomplete

Turn an Image into a Link Incomplete

Add Alt Text to an Image for Accessibility Incomplete

Create a Bulleted Unordered List Incomplete

Create an Ordered List Incomplete

Create a Text Field Incomplete

Add Placeholder Text to a Text Field Incomplete

Create a Form Element Incomplete

Add a Submit Button to a Form Incomplete

Use HTML5 to Require a Field Incomplete

Create a Set of Radio Buttons Incomplete

Create a Set of Checkboxes Incomplete

Check Radio Buttons and Checkboxes by Default