C1见习工程师认证C1-03任务记录&教学

最新推荐文章于 2024-06-01 16:06:49 发布

深海重苹果

最新推荐文章于 2024-06-01 16:06:49 发布

阅读量625

点赞数 7

分类专栏： C1认证文章标签： html5 css html javascript

本文链接：https://blog.csdn.net/shenhaizpg/article/details/116715976

版权

C1认证专栏收录该内容

4 篇文章 0 订阅

订阅专栏

C1-03

任务一：使用富文本编辑器

:首先，在开源富文本编辑器中随便输入一段文本。
在这里插入图片描述
然后，在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些HTML标签

最后，实现编辑器没有的功能，例如让表格隔行换色，加入JavaScript按钮

<table border="">
  <colgroup>
    <col style="background-color: red">
    <col style="background-color: yellow">
    <col style="background-color: red">
  </colgroup>
  <tbody><tr>
    <td>我爱</td>
    <td>编写</td>
    <td>代码</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td>！</td>
  </tr>
</tbody></table>

用代码建立一个表格，并且设置每一行的颜色，显示如下：
在这里插入图片描述
接下来我们用下面的代码写出一个JavaScript按钮

<button onclick="alert('hello world！')">欢迎来到代码世界</button>

点击按钮后弹出设置好的消息
在这里插入图片描述

任务二：「所见即所得」式开发

打开HTML和CSS系列网页开发任务

问题1：探索网站

了解概述后点击继续进入下一个问题
在这里插入图片描述

问题2：网址表达式

这个问题也是了解型的，看完还是点击继续进入下一个问题
在这里插入图片描述

问题3：HTML介绍

3-1

在这里插入图片描述

3-2

根据刚刚学习到的代码，我们这里输入一个可以显示文字的代码

<p>Hello World!</p>

所以显示出了Hello World！
在这里插入图片描述

3-4

打开检查工具，就可以将鼠标悬停在显示页面上，对于代码区域就会被蓝色标出
在这里插入图片描述

3-6

什么是HTML？

为了显示网页，计算机需要知道的不仅仅是屏幕上的单词或图像。它需要知道在哪里放置内容，大小，使用什么字体和颜色，以及许多其他信息，把普通的文本和图像变成一个完整的网页。
为了解决这个问题，计算机科学家创造了语言来传递这些额外的信息。HTML，缩写为H毒蛇t分机M标牌L语言，是帮助解决这个问题的一种语言。使用标签系统，HTML可以让程序员指明网页不同部分的用途。这让计算机知道它应该如何显示这些不同的元素。
HTML通过将网页的不同部分包围成对的开始标记和结束标记来指示它们的用途，如下面的示例所示。

HTML标签

默认标签

所有HTML页面都包含一组常见的标记。事实上，它们是如此的普遍，以至于所有的WebLab项目都将从它们开始。

3-7

在这里插入图片描述
这边我们需要在正文部分写三个句子，根据喜好写就行啦

3-8

这边我们对刚刚的正文进行分段，在需要分成一段的文字添加p和/p即可
在这里插入图片描述

3-9

在这里插入图片描述
这边我们观察发现第二个段落的代码写错了，我们对其进行修改

问题4：标题

4-1

在这里插入图片描述

4-3

打开检查工具，将鼠标悬停在标题，就可以看到标题的代码
在这里插入图片描述
这里我们观察发现，Drawing和2 years应该为标题

将其修改为和上面一样的格式（h2、h4）

4-4

我们观察可以发现，标题大小取决于h后面的数字大小，越小标题越大
在这里插入图片描述
根据要求修改为从大到小

4-5

根据代码判断，应该选C
在这里插入图片描述

4-6

首先我们对于文章进行分析，对于不同的标题、段落进行划分
在这里插入图片描述
我们首先给My Pets一级标题，然后宠物名给二级标题，宠物种类给三级标题，其余给段落

4-7

标题和段落

您创建的几乎所有页面都有标题和段落。

标题

标题是整个网页的不同大小的节标题。标题通过拆分网页来为网页添加结构，这样用户阅读起来就更容易了。

制作标题

标题的大小

段落

段落将一组句子组合在一起，并在该组文本和下一组文本之间留出一些空间。

作段

4-9

定义

用学会的知识，使用 HTML来制作网页。页面要有至少两种不同大小的标头，还要使用段落。

准备

在开始给网页写代码前，需要有个计划。通过前面课程写下的想法，决定页面是关于什么的。后面还有机会做其它页面。
先画个页面的草稿，包括标头段落。将草稿给伙伴看看，并解释一下页面不同部分会用哪些标签。如果忘了这些标签，可以看看前几课，或者让伙伴帮助。
如果草图里有些还不知道怎么写代码，可以先存下来。

尝试

使用学过的 HTML 来创建页面。如果遇到了问题，可以找伙伴们来帮忙，但是你是自己网页的责任人，这表示应该自己编写所有的代码。

反思

完成网页后，与草稿作比较，确保没有忘了什么内容。也请伙伴们看看，思考一下他们的反馈，是否应该做一些改动。

4-10

根据要求我们设计两个不同尺寸的标题和一段文字
在这里插入图片描述

问题5：数字足迹

5-1

在这里插入图片描述

问题6：列表

6-1

在这里插入图片描述

6-2

通过观察代码我们发现，无序列表使用的是ul，而有序列表使用的是ol
在这里插入图片描述

接着我们按要求将代码修复

6-3

我们根据要求将ul和li加入，生成无序列表
在这里插入图片描述

6-4

同上一题，我们加入ol和li，生成有序列表
在这里插入图片描述

6-5

这一题我们根据显示选择对应代码，但是对于答案应该是系统给错了，代码不应该如此
在这里插入图片描述

6-6

我们根据要求建立无序和有序列表
在这里插入图片描述

6-7

在这里插入图片描述

6-9

在这里插入图片描述
根据要求后添加新页面，然后修改名字，添加标题和列表

问题7：知识产权和图像

7-1

7-2

根据要求添加猫图片
在这里插入图片描述

7-3

根据要求将src指向的文件名补全即可显示图片
在这里插入图片描述

7-4

根据出现的问题对应的代码
在这里插入图片描述

7-5

这里我们先去下载一张宠物图片，再上传，之后用src引用，用alt注释
在这里插入图片描述

7-6

在这里插入图片描述

7-8

我们按要求添加知识产权注明
在这里插入图片描述

7-9

这个任务比刚刚的还要简单，只需要添加一个图片即可，再增加知识产权申明
在这里插入图片描述

问题8：规整代码和调试

8-1

在这里插入图片描述

8-2

在这里插入图片描述

8-3

在这里插入图片描述

8-4

完全debug后的代码如下

 <!DOCTYPE html>
<html>
	<head>
		<title>Commenting</title>
	</head>
	<body>
		<h1>Strange Plants</h1>

		There are lots of really weird plants in the world.
 		Let's take a look at some of the most strange ones.
		<ul>
      <li><h3>Villose Pitcher-Plant</h3></li>
			<img src="villose-pitcher-plant.jpg" alt="Villose Pitcher-Plant">
			<p>from NepGrower at commons.wikimedia.org - public domain</p>
			<li>
				<h3>Venus Flytrap</h3>
				<img src="venus-flytrap.jpg" alt="Venus flytrap">
				<p>from NoahElhardt at commons.wikimedia.org - CC BY-SA 2.5</p>
			</li>
			<li>
        Clathrus Ruber</h3></li>
				<img src="clathrus-ruber.jpg" alt="Clathrus ruber">   
			
				<p>from David Gough (Spacepleb) at Flickr - CC BY 2.0</p>
			<li>
				<h3>Bear's Head Tooth Fungus</h3>
				<img src="bear-head-tooth-fungus.jpg"  alt="Bear's Head Tooth Fungus">
				<p>from Raeky at commons.wikimedia.org - CC BY-SA 3.0</p>
			</li>

		</ul>
	</body>
</html>

8-5

完全debug后的代码如下

<!DOCTYPE html>
<html>
 	<head>
	</head>
	<body>  <h1>Odd Cars</h1>  There are many different types of cars out there.  People use cars to make a statement and catch attention. Check out the cool and creative cars some people drive.<h4>Different Types of Cars</h4>  <ul> <li> Wood Car</li> <li> Oscar Mayer Car <li> L.L.Bean Bootmobile</li> <li> Grass Car  <h4>Picture Gallery</h4> <img src="wood-car.jpg" alt="Wood Car">   <p>from Richard Smith (gocarts) on Flickr - CC BY 2.0</p> <img src="oscar-mayer-car.jpg" alt=Oscar Mayer Car>   <p>from Scottfamily5 on commons.wikimedia.org - Public Domain</p><img src="llbean-bootmobile.jpg" alt="L.L. Bean Bootmobile">  <p>from Dirk Ingo Franke (Southgeist) on commons.wikimedia.org - CC BY 3.0</p> <img src="grass-car.jpg" alt="Grass Car"> <p>from Paul Hudson (pahudson) on Flickr - CC BY 2.0</p> </ul></li>  
	</body>
</html>

8-6

完全debug后的代码如下

    <ol>

       <!-- baiji -->
      <li><h3>Baiji</h3>
      <p>The baiji is a type of dolphin that lives in a river in China.  Maybe it's extinct, maybe not, but right now scientists can't find any.</p>
        <img src="baiji.jpg" alt="Baiji" />
        <p>from Alessio Marrucci on commons.wikimedia.org - CC BY-SA 3.0</p></li>

      <!-- Steller's Sea Cow -->
      <li>
        <h3>Steller's Sea Cow</h3>
        <p>Its skin is an inch thick, and instead of teeth, it has white bristles.  Imagine eating with your mustache.</p>
        <img src="sea-cow.jpg" alt="Steller's Sea Cow" />
        <p>Emoke Denes on commons.wikimedia.org - CC BY-SA 2.5 </p></li>

      <!-- Golden Toad -->
      <li>
        <h3>Golden Toad</h3>
        <p>A toad made of gold.  Enough said.</p>
        <img src="golden-toad.jpg" alt="Golden Toad" />
        <p></p>Charles H. Smith on commons.wikimedia.org - Public Domain
      </li>
    </ol>
	</body>
</html>

8-7

格式化HTML

在编写网页时，您应该以一种易于阅读的方式组织代码。这叫做格式化。当您格式化代码时，您将更容易地找到和修复bug。

白空间

空格指显示为屏幕上空白的任何字符，如空格、制表符或新行。空格有助于将文档的不同部分分离开来，使其更易于阅读。例如，在HTML代码中，新元素通常放在新行上，尽管它在页面显示方式上没有任何区别。
例如，比较下面两个框中的代码

两者都会显示相同的网页，但顶部框中的代码更容易阅读。最好在新的行中开始新的元素。

压痕

HTML中一种非常常见的格式设置类型是压痕。缩进是将文本放置在右边或左边，以便将其与周围的文本分开。缩进有助于传达程序的结构。在HTML中，其他元素中的元素通常是缩进的。
以下是一个例子：

缩进可以帮助您记住是否关闭了标记，它还可以清楚地表明哪些标记在其他标记中。

评语

当你的网页变得越来越复杂，你会想要使用评论意见。注释解释了代码的不同部分及其应该创建的内容。注释可以帮助您调试，也可以帮助其他试图理解您的代码的人。

8-8

完全debug并且根据注释完善后的代码如下

<!DOCTYPE html>
<html>
 	<head>
	</head>
	<body>  
    <!-- Title and introduction-->
    <h1>Growing Cranberries</h1>
    <p>Growing cranberries is a lot harder than you might think.  There are steps for every season.</p>
    <!-- list of seasons -->
      <!-- winter -->
    <ul>    
    <li><h2>Winter</h2>
          <p>Nothing much happens, but everything is flooded and frozen, which protects the vines.</p></li>
          
          <!-- spring -->
      <li><h2>Spring</h2>
          Everything melts, and the water is drained out so the flowers grow.
          
            <!-- picture of cranberry flowers -->
        <img src="cranberry-flowers.jpg" alt="Cranberry flowers" />
        <p>from Bernd Haynold (BerndH) on commons.wikimedia.org - CC BY 2.5</p></li>
      <li><h2>Summer</h2>
          
          <!-- summer -->
          
        <p>The petals fall off the flowers and the cranberries start to grow.</p></li>
          
          <!-- fall -->
      <li><h2>Fall</h2>
          <p>The fields are flooded and machines loosen the berries so they float to the surface.</p>
    <img src="cranberry-harvest.jpg" alt="Cranberry flowers" />
            <!-- picture of cranberry harvest -->
        <p> from Keith Weller, USDA-ARS on commons.wikimedia.org - Public Domain</p></li>
    </ul>
    
  </body>
</html>

问题9：项目-多页面网站

9-1

9-2

在这里插入图片描述
根据实例的超链接代码，我们根据要求加入回到index的超链接

9-3

在这里插入图片描述

9-4

在这里插入图片描述

9-5

根据之前6-8创建一个新页面并重命名
在这里插入图片描述
问题9接下来的都是对于前面学习过的操作的应用，就不一一赘述了。

问题10：使用css设置文本样式

10-1

在这里插入图片描述

10-2

我们观察发现css语言可以将html的标题设置颜色和位置
在这里插入图片描述

10-4

我们根据要求进入css文件，将h1的颜色改为红色以外的颜色，我这里改成了蓝色
在这里插入图片描述

10-5

在这里插入图片描述

10-6

在这里插入图片描述

10-7

在这里插入图片描述

10-8

在这里插入图片描述

10-9

10-10

在这里插入图片描述

10-11

在这里插入图片描述

问题11：使用CSS设置元素的样式

11-1

在这里插入图片描述

11-3

这边我们将主题背景色改为淡黄色
在这里插入图片描述
再将段落中加入同样的代码将背景改为淡蓝色

11-4

在这里插入图片描述

11-5

我们在此验证一下在body中加入文本位置为居中
在这里插入图片描述

11-6

这里我们根据要求随意修改一个边框样式
在这里插入图片描述

11-7

修改边界半径值，我这里修改到60，比较美观
在这里插入图片描述

11-8

根据要求修改float以后，图片从文字左边到了文字右边
在这里插入图片描述

11-9

首先我们修改图像宽度为200px（之前是250px）
在这里插入图片描述
再增加高度height，调整为150px

11-10

我们根据要求修改img的margin，并且给文本增加margin，可以发现控制的是距离边框的距离
在这里插入图片描述

11-12

在这里插入图片描述

问题12：来源和搜索引擎

在这里插入图片描述

问题13：RGB（红绿蓝）颜色和分类

13-1

在这里插入图片描述

13-2

A) 红: 216, 绿: 191, 蓝: 216 - rgb(216,191,216)
在这里插入图片描述
B) 红: 255, 绿: 239, 蓝: 213 - rgb(255,239,213)

C) 红: 250, 绿:128, 蓝: 114 - rgb(250,128,114)

D) 红: 70, 绿: 130, 蓝: 180 - rgb(70, 130, 180)

E) 红: 107, 绿: 142, 蓝: 35 - rgb(107,142,35)

13-3

冬天
在这里插入图片描述

13-4

夏天
在这里插入图片描述

13-5

春天
在这里插入图片描述
秋天

13-6

我们观察后发现，只要将class="winter"加入即可
在这里插入图片描述

13-7

类

13-8

根据要求我们给winter类设置字体
在这里插入图片描述

13-9

首先按之前找到的春天的颜色填写spring类
在这里插入图片描述
然后给春天的文本加入spring类

显示如下

13-10

同理可以添加夏秋类，就不一一赘述了

拓展：CSS盒子模型

问题1：深入理解CSS盒子模型多层次含义

边框边距

盒子模型包括：边框、内边距、外边距和内容。

边框由三部分组成，分别是：边框宽度，边框样式以及边框颜色：

属性	定义
border-width	定义边框粗细，单位是px
border-style	定义边框的样式：solid（实线）、dashed（虚线）、dotted（点线）
border-color	定义边框的颜色

内边距

属性	定义
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

外边距

属性	定义
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

标准文档流（浮动与定位）

标准文档流：指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则。
1.盒子浮动 float
Float 属性：默认是 none ，按照标准流来定位；
Left：左悬浮；
Right：右悬浮；
2.使用 clear 清除浮动的影响
Clear 属性：默认是 none，允许两边都可以有浮动对象；
Left：不允许左边有浮动对象
Right：不允许右边有浮动对象
Both：不允许有浮动对象
3.盒子定位 position
Position 属性：默认是 static，按照标准流来定位；
Relative：相对定位，相对于原本的标准位置偏移指定的距离；
Absolute：绝对定位，以它的包含框为基准进行偏移；（包含框是指含有posistion属性的盒子）
Fixed：固定定位，以浏览器窗口为基准进行定位
————————————————
版权声明：本文为CSDN博主「尘小新」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39941298/article/details/81184797

布局模式

绝对定位、相对定位、固定定位

问题2：完成下图的CSS盒子模型布局

在这里插入图片描述
这个问题待补充，一个下午码到凌晨出来的一整篇，暂时不写这个了。

自测

问题1：HTML5为了使img元素可拖放，需要增加什么属性?

在img标签内加入draggable=”true”

问题2：HTML5哪一个input类型可以选择一个无时区的日期选择器?

type=”date”

问题3：CSS盒子模型中的Margin、Border、Padding都是什么意思？

外边距:、边框、内边距

问题4：说出至少五种常见的HTML事件

鼠标事件、键盘事件、windows事件、表单事件、媒介事件

问题5：HTML的onblur和onfocus是哪种类型的属性？

事件属性

问题6：怎么设置display属性的值使容器成为弹性容器？

display: flex;

问题7：JavaScript中有多少种不同类型的循环？

3种 while、dowhile、for循环

问题8：用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？

mark

深海重苹果

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
8
评论
C1见习工程师认证C1-03任务记录&教学

C1-03任务一：使用富文本编辑器:首先，在开源富文本编辑器中随便输入一段文本。然后，在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些HTML标签最后，实现编辑器没有的功能，例如让表格隔行换色，加入JavaScript按钮<table border=""> <colgroup> <col style="background-color: red"> <col style="background-color: yello
复制链接

扫一扫