HTML5&CSS挑战

Posted 2021-12-02 miaosj

地址：https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp

开始学习html标签：
欢迎来到编程训练营的第一个编程挑战！
你可以在文本编辑器中编辑我们嵌入到此网页中的代码。
界面说明：左边是课程内容区、中间是代码编辑区、右边是运行显示区。
你在文本编辑器中看到代码 <h1>Hello</h1> 了吗?这是一个HTML 元素 。
大多数HTML元素都有一个 开始标签 和一个 结束标签 。
开始标签看起来像这样： <h1>
结束标签看起来像这样： </h1>
请注意，开始标签和结束标签之间的唯一区别是结束标签后面多了一个 /（斜杠）。
每个挑战都有测试，你可以随时点击“运行”按钮运行。一旦你通过所有的测试，你可以进行下一个挑战。
要通过这个挑战的测试，将你的h1元素的文本改为“Hello World”而不是“Hello”。然后点击“运行”按钮。

<h1>Hello World</h1>

HTML学习h2标签：
在接下来的几个挑战中，我们将构建一个看起来像这样的HTML5应用程序：
A screen shot of our finished Cat Photo App
你输入的 h2 元素将在网站上创建一个 h2 元素。
该元素告诉浏览器你的网站的结构。h1 元素通常用于主标题，而 h2 元素通常用于副标题。还有 h3，h4，h5 和 h6 元素来表示不同的和新的部分。
添加一个表示“CatPhotoApp”的 h2 标签，在“Hello World”h1 元素下方创建第二个HTML 元素 。

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

HTML 学习p标签：
p元素是网站上正常段落文本的首选元素。P是“paragraph”的缩写。
你可以创建一个这样的p元素： <p>我是一个p标签!</p>
任务：在你的 h2 元素下面创建一个 p 元素，段落的文本为“Hello Paragraph”。

<h1>Hello World</h1>
<h2>你好html</h2>
<p>Hello Paragraph</p>

删除HTML的注释：
注释是一种方式，你可以在代码中留下注释，而不会影响代码本身。
注释也是使代码无效而不必完全删除的便捷方式。
你可以使用 <!-- 开始添加注释，并用 --> 结束注释。
任务：删除注释 h1，h2 和 p 元素。

<h1>Hello World</h1>
<h2>你好html</h2>
<p>Hello Paragraph</p>

HTML注释语句学习：
请记住，开始注释，你需要使用 <!--，结束注释，你需要使用 -->。
在这里，你需要在 h2 元素开始之前结束注释。
任务：注释 h1 元素和p 元素，删除 h2 元素的注释。

<!--
<h1>Hello World</h1>
-->
<h2>html编程入门教程</h2>
<!--
<p>Hello Paragraph</p>
-->

HTML用占位符文本填补空白：
Web开发者通常将 lorem ipsum text 用作占位符文本。占位符就是一些文字占着位置，没有实际意义。
“lorem ipsum”的文字是由古罗马的西塞罗从一个著名的段落中随机而出的。
自公元16世纪以来，Lorem ipsum文字已被排版用作占位符文本，而这种传统在网络上继续存在。
那么，5 个世纪是足够长的。因为我们正在建立一个 CatPhotoApp， 让我们使用的东西叫 kitty ipsum text 。
任务：把 p 元素中的文本替换为：Monkey code 猴哥猴哥，你真了不得，五行大山压不住你，蹦出个孙行者。

<h1>西游记</h1>

<h2>齐天大圣</h2>

<h2>孙悟空</h2>

<p>Monkey&nbsp;code 猴哥猴哥，你真了不得，五行大山压不住你，蹦出个孙行者。</p>

删除HTML标签：
我们的手机屏幕空间是有限的。
让我们删除不必要的元素，以便开始构建我们的CatPhotoApp。
任务：删除你的h1元素，以便简化我们的视图。

<!--
<h1>Hello cat!</h1>
-->
<h2>编程入门教程</h2>

<p>在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>

HTML 更换文本的颜色：
现在我们来改变一些文字的颜色。
我们可以通过修改 h2 元素的 style (样式)来做到这一点。
样式的属性有很多，其中color用来指定颜色。
以下是将你的 h2 元素的文本颜色设置为蓝色的示例：
<h2 style="color: blue">CatPhotoApp</h2>
更改你的 h2 元素的样式，使其文本颜色变为红色。

<h2 style="color:#FF0000;">html编程入门教程</h2>

<p>在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>

使用CSS选择器定义标签：
使用CSS，您可以使用数百种CSS属性来更改元素在页面上的显示方式。
当你输入<h2 style="color: red">CatPhotoApp</h2>时，你就给h2元素添加了inline style(内联样式)。
这是添加元素的样式的一种方法，但更好的方法是使用CSS，它代表(Cascading Style Sheets)层叠样式表。
在代码的顶端，创建一个如下所示的style元素，：
<style>    
</style>
在这个style元素的内部, 你可以为所有h2元素创建一个CSS选择器。例如，如果你希望所有的h2元素都设置为红色, 则你的样式元素将如下所示：
    <style>    
      选择器 {属性名称: 属性值;}    
      h2 {color: red;}    
    </style>
请注意，围绕每个元素的样式，打开和关闭花括号 ({ 和}) 很重要。您还需要确保元素的样式位于开始和结束样式标签之间。最后，请确保将分号添加到每个元素样式的末尾。
删除你的h2元素的样式属性，而不是创建一个CSSstyle元素。添加必要的CSS，以将所有h2元素变为蓝色。

<style>
    h2{color:#0000FF;}
</style>

<h2>html编程入门教程</h2>

<p>在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>

使用一个CSS Class去给标签定义Style：
类是可重用的样式，可以添加到HTML元素。
下面是一个CSS类声明的例子：
    <style>    
      .blue-text {    
        color: blue;    
      }    
    </style>
你可以看到我们已经在 <style> 标签中创建了一个名为 blue-text 的CSS类。
你可以将类应用于HTML元素，如下所示：
<h2 class="blue-text">CatPhotoApp</h2>
请注意，在CSS样式元素中，类选择器应该添加.为前缀。而在HTML元素的类声明中，类属性不能添加.为前缀。
在你的style元素中，将h2选择器修改为.red-text选择器，并将颜色值从blue修改为red。
最后，给你的 h2 元素的 class 属性的值为.red-text。

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

<h2 class="red-text">html编程入门教程</h2>

<p>在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>

HTML 为多个元素使用CSS类定义样式：
请记住，你可以通过在相关元素的开始标签中使用 class="your-class-here" 将类附加到HTML元素。
记住，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">html编程入门教程</h2>

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>

HTML 设置标签的字体大小：
字体大小由 font-size CSS属性控制，如下所示：
    h1 {    
      font-size: 30px;    
    }
在现有 p 元素之后创建第二个 p 元素，并使用以下文本：
养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
在包含 red-text 类的同一 <style> 标签内，为 p 元素创建一个 font-size 属性，并将 font-size 设置为16像素（16px）。
任务：将第一个段落和第二个段落的 font-size 设置为 16px。
另外，请不要为第二个段落添加 class 属性。

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

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

<p class="red-text">在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
<p style="font-size:16px;">养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
</p>

HTML 设置标签的字体样式：
你可以使用 font-family 属性来设置元素的字体。
例如，如果要将 h2 元素的字体设置为 Sans-serif ，则可以使用以下CSS：
    h2 {    
      font-family: Sans-serif;    
    }
使不包含 red-text类的p元素都使用Monospace字体。

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

p {
    font-size: 16px;
}


</style>

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

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p style="font-family:Monospace;">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>

引入Google字体：
现在, 让我们引入并应用 google 字体 (请注意, 如果 google 在你的国家被阻止, 你需要跳过这一挑战)。
首先，你需要用 link 标签来引入谷歌Lobster字体。
复制以下代码段并将其粘贴到代码编辑器的顶部：
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
现在，你可以将 Lobster 作为 font-family属性 的值应用于你的 h2 元素上。
将你的 h2 元素应用 font-family 属性，值为Lobster。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text" style="font-family:Lobster">CatPhotoApp</h2>

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>

HTML 处理多个字体降级：
在所有浏览器中都有几种可用的默认字体。这些包括 Monospace 、Serif 和 Sans-Serif。
当某种字体不可用时，你可以让浏览器将其 “降级” 为另一种字体。
例如，如果你希望元素使用 Helvetica 字体，但是当 Helvetica 不可用时也会降级为Sans-Serif 字体，则可以使用此CSS样式：
    p {    
      font-family: Helvetica, Sans-Serif;    
    }
现在，你可以注释掉对Google字体的使用，注释掉link标签，以使 Lobster 字体不可用。请注意观察它是如何降级为 Monospace 字体的。

<!--
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
-->
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

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

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>