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>西游记</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">
6321
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
