Freecodecamp学习实录（每日更新,欢迎交流）
Say Hello to HTML Element Incomplete
1 <h1>Helloh1>
1就是一个HTML元素，h1是header1的简写，意思是一级标题。
大部分元素都有一个开始标记和一个结束标记。
开始标记像这样：< h1>
结束标记像这样：< /h1>
Headline with the h2 Element Incomplete
h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。
在主标题下面创建一个副标题，标题内容是：CatPhotoApp
<h1>Hello Worldh1>
<h2>CatPhotoApph2>Inform with the Paragraph Element Incomplete
p是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。
任务：在副标题下面新增一个段落，段落内容是：Hello Paragraph。
<h1>Hello Worldh1>
<h2>CatPhotoApph2>
<p>Hello Paragraphp>Uncomment HTML Incomplete
注释有两个功能：
1、想让某一段代码不起作用，但你又不想删除这一段代码。
2、就是给代码添加一些说明，方便团队合作或日后自己查看，但又不想影响代码本身。
我们先学习如何删除注释，再学习如何添加注释。
提示：可以通过删除< !–和–>来删除注释。
任务：试着先把一级标题、二级标题、段落的注释都删除掉。
Comment out HTML Incomplete
注释的开始标记是< !–
结束标记是–>
任务：把主标题和段落都注释掉，但把副标题留着。
<h2>我家的猫咪h2>
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>西游记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原则，常用的也就几十个，你完全可以掌握它。
当你键入CatPhotoApp
内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表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>上面的代码在 任务：创建一个名为smaller-image的类选择器，然后用它来改变图片尺寸，使图片仅有100像素宽。
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