HTML5&CSS挑战

Posted miaosj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5&CSS挑战相关的知识,希望对你有一定的参考价值。

地址: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>

 

以上是关于HTML5&CSS挑战的主要内容,如果未能解决你的问题,请参考以下文章

Web前端HTML5&CSS315-表格

HTML5和CSS3工具资源汇总

HTML5 & CSS3初学者指南 – 样式化第一个网页

常用HTML5代码片段

解决方案电影标题中缺少代码的片段,完成挑战更多[关闭]

十个html5代码片段,超实用,一定要收藏