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>

原文地址:https://www.cnblogs.com/miaosj/p/10911568.html

时间: 2024-10-17 10:54:44

HTML5&CSS挑战的相关文章

W3cschool编程实战学习HTML5&amp;CSS实战简介《一》

上周感兴趣想学习一下HTML基础入门.(虽然可能和自己就业没多大关系,但是多了解一点总没坏处.)我在W3cshool上学习编程实战学习中HTML5&CSS的课程,由于平时比较忙,我只能每天晚上抽半个小时做题,本周末又恰逢研究生考试现场确认,因此,目前只写了前面一部分.后续会继续更新. html简单示例分析 <!DOCTYPE html> <html> <body> <h1>我是第一个标题</h1> <p>我是第一个段落.<

HTML5 css链接添加不同的样式

可以用css的选择器来为不同链接添加不同的样式,但经过测试,不知道为什么用id选择器并未成功,经过测试发现用class选择器是可行的,相关案例如下: 本案例是为了实现链接的文本跳转(由页面底部调到首部)和为不同链接添加不同样式,其中,底端链接单独添加了样式,代码如下: HTML5代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

酷炫,用Html5/CSS实现文字阴影

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就先来看看这个文本阴影. 一.文字阴影text-shadow 文字阴影参数:参数1 : 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 参数2 :第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 参数3 :如果提供了第3个长度值则用来设置对象的阴影模糊值.

Python第五周前端学习之HTML5/ CSS / JS

<!-- html/head/body 文本 - h1-h6 p / br / hr / sub / sup / strong / b / em / del / ins / 列表 - ul(li) / ol(li) / dl(dt/dd) / 图像 - img / figure / figcaption 链接 - a(页面链接/锚链接/功能链接) 表格 - table / tr / td / th / thead / tbody / tfoot 表单 - form / input (text /

HTML5+CSS:02用户注册表单

新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于表单网页的代码,希望能够帮助到跟我一样H5的小白们,也请各位大佬多多指教!! 首先,先上我们敲的表单样式(如下): 其次,代码接上吖,Html5代码如下: <!DOCTYPE html><html>    <head>        <meta charset="UTF-8

HTML5——css基础语法

1.了解CSS CSS是一种用来表现HTML等文件样式的计算机语言,是对HTMl文件中设置的各种标签添加各种各样的样式与表达方式,让网页更生动,更美观. 2.导入CSS的三种方式 1.行内样式表:直接在<body>主体的HTML标签中,使用style""的方式引用: 比如设置一个div的大小: <div style="height:100px width:100px"></div> 优点:使用灵活,优先级权重最高 缺点:不符合w3

html5 css选择器。 井号,句号的区别

.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family.color等),规定了布局的什么方面被设置了:3.值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值. 二.CSS式样中不同符号的区别 #是ID选择器 .是class选择器 *是通配符号 比如*{margin:0:padding:0:所有的元素都会沿用

html5 css选择器 井号, 句点的区别

一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family.color等),规定了布局的什么方面被设置了:3.值(如实例中的Arial,sans-serif,#333333等),给出了式样属性的值. 二.CSS式样中不同符号的区别 #是ID选择器 .是class选择器 *是通配符号 比如*{margin:0:padding:0:所有的元素都会沿

HTML/HTML5/CSS/CSS3教程速查手册地址以及如何快速直到webkit的用法

http://www.w3school.com.cn/ http://www.runoob.com/ 不过上面这两个都是标准的CSS和CSS3教程,针对一些类似-webkit-内核的样式没有公布. 下面我来提供一个火狐的官方地址,也有少量的webkit的用法:https://developer.mozilla.org 还有一种可以快速查到有多少webkit的属性,然后再进行google查询用法和意思,用hbuilder写css样式,然后输出-webkit-会有一堆,然后可以逐个查询其意思,这样也