C1任务03 Web的世界（上）

最新推荐文章于 2022-08-03 12:49:14 发布

王山之

最新推荐文章于 2022-08-03 12:49:14 发布

阅读量391

点赞数 2

分类专栏：计算机C1认证文章标签： html css web

本文链接：https://blog.csdn.net/luck_gid/article/details/117026695

版权

计算机C1认证专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、任务准备

二、任务一-在开源文本编辑器上初识HTML

HTML表格资料

三、任务2-在code.org上完成HTML和CSS系列网页开发任务

一、任务准备

开源富⽂本编辑器：https://summernote.org/

帮助⼿册软件

Dash：https://kapeli.com/dash
Zeal：https://zealdocs.org/

HTML

W3C：https://www.w3.org/TR/
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/HTML

CSS

Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/CSS

JavaScript

ECMAScript标准：https://www.ecma-international.org/technical-committees/tc39/?tab=published-standards
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

二、任务一-在开源文本编辑器上初识HTML

1、⾸先，在开源富⽂本编辑器中随便输⼊⼀段⽂本

例如我输入“玫瑰花”三个字，如下

2、然后，在源码模式下，查看内容是如何被转变为带标签的⽂本的，都带了哪些HTML标签

在源码模式下，玫瑰花带有了<p>标签，可以看到标签是以<p>开始、</p>结束的

3、最后，实现编辑器没有的功能，例如让表格隔⾏换⾊，加⼊JavaScript按钮，试着完成它吧

第一步我们首先要添加一个表格

第二步，我们转到源码形式

可以看到源码形式下的表格标签代码全在一行，这样我们很难去区分，因此我们利用<>标签开始、</>标签结束来划分标签行

到这一步不太好拆分了，那么我开始转到编辑器页面填写表格内容

之后再转到源码页面,由此我们可以重新进行划分

4、之后需要实现表格隔行换色，拿玫瑰花作为实验模板

实现效果

之后查看玫瑰花的源码

将玫瑰花背景加色的标签复制到表格标签中

实现效果，结果是猜想失败

于是查资料，得到如下

HTML表格资料

在HTML中，一个表格一般由以下3个部分组成

表格：table标签

行：tr标签

单元格：td标签

语法如下：

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

说明

tr指的是table row（表格行）

td指的是table data cell（表格单元格）

<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示表格单元格的开始和结束。

对源代码可以进行标签的重新划分，如下

<p><span style="background-color: rgb(239, 239, 239);">玫瑰花</span></p>
<p><br></p>
 <table class="table table-bordered">
  <tbody>
    <tr>
      <td>c1</td>
      <td>见习工程师认证</td>       
    </tr>
    <tr>
      <td>c4</td>
      <td>专项工程师认证</td>
    </tr>
    <tr>
      <td>c5</td>
      <td>全栈工程师认证</td>
    </tr>
  </tbody>
</table><p><br></p>

通过资料的补充学习，且按照要求，是将整行的背景颜色进行更改，我们尝试在行标签<tr>里加入style="background-color: rgb(239, 239, 239);"背景色设置

显示效果，背景色成功更改

依照此方法将第三行进行修改

到了这一步，我已经将表格隔行换色，接下来还需要实现的一个需求是

加⼊JavaScript按钮，实现点击按钮弹出消息的功能

通过查询资料发现，在编辑器上添加按钮，点击按钮并弹出消息需要的代码是

因此我们修改后加上下面代码

实现效果如下

至此，任务1的所有要求都已经完成。

三、任务2-在code.org上完成HTML和CSS系列网页开发任务

3-1 探索网页

问题：为什么人们创建网页？思考网页有什么作用以及怎样为创建者服务的

下面有五个网页案例，分别是The Cutest Dog、My Trip、Musical Instruments、Recycling Club、Haikus

举一个案例，其中The Cutest Dog

是一个接受自己的狗狗的网页，记录了自己和狗狗的一些事情，有图片和文字描述。

其他四个网页也是诸如此类，通过文字描述和图片展示，介绍一个物品、一个组织、或者一件有意义的事情。

3-2 HTML介绍

课程说明：

在本课中, 引入 HTML 作为解决如何将网站的内容和结构与计算机进行通信问题的方法。本课从一个简短的线下活动开始, 演示了有效交流网页结构的挑战。学生然后在网络实验室中查看 HTML页面，并与他们的同学讨论 HTML 标记如何帮助解决此问题。学生然后写他们的第一个 HTML。总结讨论有助于巩固对在整个课程中开发的内容与结构的理解。

HTML - 超文本标记语言，一种用于创建网页的语言
HTML 元素- 网站的一部分，标有开始标记，通常用结束标记关闭
HTML 标签- 指示 HTML 元素的开始和结束以及该元素类型的特殊字符集
网站内容- 网站上的文本和图像
网站结构- 网站内容的组织方式

1、<p></p>标签

<p>该标记用于定义文本段落

语法：

<p></p>

案例：

①多个短段落

<p>My favorite animals are birds.</p>
<p>My favorite sport is baseball.</p>

②单长段落

<p>
Soccer is an awesome sport because you get to play on a team with all your friends. My favorite players are Megan Rapinoe from the United States, and Marta from Brazil.
</p>

2、<html></html>标签

HTML 元素是 HTML 文档的顶级元素。此 HTML 标签是所有其他 HTML 元素的容器（标签除外）。<html><!DOCTYPE>

语法：

<html></html>

案例：

使用该标签编写一个简单的HTML文档。<html>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>HTML Tag</h1>
    <p>The HTML element is the top-level element of an HTML document.</p>
  </body>
</html>

3、<head></head>标签

此标记用作元数据的容器：元数据是有关 HTML 文档的数据，例如文档标题、字符集、样式表、链接和脚本。

语法：

<head></head>

案例：

使用包含有关HTML文档的元数据。<head>

<html>
  <head>
    <meta charset="utf-8">
    <title>HTML Basics </title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  </body>
</html>

4、<!DOCTYPE>标签

所有 HTML 文档必须从声明开始。此标签告诉浏览器该页面的 HTML 版本。<!DOCTYPE>

语法：

<!DOCTYPE>

案例：

使用来声明该页面所写文本的HTML版本。<!DOCTYPE>

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

这是HTML文档中的第一行。<!DOCTYPE>
不需要关闭标记。

5、<body></body>标签

该标签定义了 HTML 文档的主要内容，这些内容将直接在您的网页上可见。此机构标签包含 HTML 文档的所有内容，如标题、段落、图像、超链接、表格、列表等。 <body> <body>

语法：

<body></body>

案例：

使用创建一个简单的网页。<body>


<html>
<head>
  <title>Title of the document</title>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

HTML 文档中只有一个元素。<body>
标签应放置在关闭标记下。<body></head>
HTML 文档的所有内容，如标题、图像、列表等，都应进入标签内。<body>
关闭标记后不应编写任何内容。</body>

3-3 标题

课程说明：

在本课中, 学生们继续使用 HTML 在网页上构建文本，这次使用标题。学生学习如何在默认情况下显示不同的标题元素, 并练习使用它们来创建页面和段落标题。然后, 学生开始决定他们将如何在自己的个人网页上组织内容。在最后一级, 学生开始他们将继续在整个单位工作的项目。

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h6>标签

此标签用于在整个网页上创建不同大小的部分标题。

语法：

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

案例：

①最大和最小的标题

使用和标记创建最大和最小的标题。<h1><h6>

<h1>This heading is the largest in terms of font size.</h1>
<h6>This heading is the smallest in terms of font size.</h6>

②标题和副标题

使用和创建标题和副标题。 <h1> <h2>

标题标签中的编号标注了不同大小的标题。他们从到.<h1><h6>
该标签是最大的字体大小。<h1>
该标签是最小的字体大小。<h6>

Debugging

调试缺失的段落
调试粉红色标签
调试子标题
调试较大的标题

3-4 迷你项目：HTML网站

课程说明：

当天的问题：如何使用HTML来表达个人价值？在这个可选的小型项目中，学生使用他们学到的东西在他们选择的话题上创建自己的个人网页。课程从学生所学到的 HTML 回顾开始。然后，他们开始他们的项目，设计一个网页，并确定他们将使用哪些标签来实现它。然后，他们在网络实验室创建网页并与班级共享。可选的，在进行正式反馈过程后，他们可以对其网站进行最终更改，然后再考虑其流程，并提交网站本身及其设计和反省。此项目可以在一天内完成或扩展数天，具体取决于类的调度需求。

1、用<p></p>划分段落

2、查找由不正确的段落标记引起的错误并修正

3、使用您的调试技能来找出段落消失的原因

4、修复标题标签不正确的错误

5、将大标题添加到网页顶部

6、使用tag将段落分开

<br>标签

它不需要一个关闭标签！<br>

7、创建无序列表

<ul><li>标签

举例：

8、创建有序列表

<ol><li>标签

举例：

最终制作，我的Web页面

3-5 数字足迹

课程说明：

**当天的问题：如何确保您的私人信息保持私密性？** 本课程从创建网站到讨论人们选择以数字方式共享的个人信息后退了一步？课程首先讨论他们在各种网站上共享了哪些类型的信息，然后他们查看了几个社交媒体页面样本，了解哪些类型的个人信息可以有意或无意地共享。最后，该课程在将信息放到网上时，会提出一套要遵循的准则

3-6 使用CSS设置文本样式

课程说明：

**当天的问题：我们如何改变网页上的文本样式？该课程学习 CSS 规则集的基本语法，然后探索影响 HTML 文本元素的属性。最后，他们讨论了制作个人网页时的内容、结构和风格之间的差异。

CSS - 级联样式表;用于描述HTML元素应如何设计的语言
CSS Selector- CSS 规则集的一部分，该规则集定义了应应用于哪些 HTML 元素

1、text-decoration:value

最常见的文本装饰是：text-decoration 该属性指定了文本上装饰线的外观

text-decoration-line- 设置文本装饰的使用类型，如，下划线，过线，直通。
text-decoration-color- 设置文本装饰的颜色。
text-decoration-style- 设置文本装饰的风格

语法：

text-decoration: value;

举例：

多个文本装饰

为元素设置不同的文本装饰

h2 {
  text-decoration: underline overline wavy blue;
}

过线文本装饰

为元素设置过线文本装饰

您可以在一个语句中结合不同类型的文本装饰。
默认值不是文本装饰。

2、text-align:value

文本对齐

语法：

text-align: value;

3、font-size

属性指定字体的大小

语法：

font-size: value;

举例：

更改字体大小

将元素的字体大小设置为 12px

4、font-family:value

字体系列

属性指定了元素的字体。

语法：

font-family: value;

举例：

设置元素的字体。

您可以指定从最高优先级到最低的字体列表。如果浏览器不支持第一种字体，则尝试下一种字体。
列出多个字体字体时，请务必用逗号将每个值分开。

5、color:value

颜色

颜色属性指定文本的颜色。HTML 和 CSS 颜色规格中预先定义了140 个颜色名称，如蓝色、红色、珊瑚色、棕色色等。颜色也可以以各种格式指定：RGB颜色和十六进制颜色是最常用的颜色格式。

语法：

color: value;

举例：

十六进制颜色格式

颜色名称格式

RGB 颜色格式

请务必选择背景颜色与文本颜色相结合，使文本可读

问题：

此 Web Lab 项目正在使用一种新语言向页面添加样式。

1、此新语言style.css对页面有何更改？

新语言更改了html页面的文本颜色和文本对齐方向

2、此语言与HTML有何不同？

此语言不像HTML的标签语言，没有<>来规定范围,且每句语法结束需要用”;“

3、如何连接style.css和文件index.html？

通过<link rel="stylesheet" href="style.css">

这是一个按钮，允许您创建新的样式表添加到您的网页。
这是样式表文件，始终以。.css
这是指向样式表的链接。该链接进入您的HTML文件的头标签，看起来像这样：<link rel="stylesheet" href="style.css">

以下是控制文本阴影的代码：

该属性设置文本元素之间的每个字母之间的空间

h1 {
  letter-spacing: 2px;
}

3-7 迷你项目-你的风格

课程说明：

**当天的问题：你如何在网页上表达你的个人风格？课程从对CSS的审查开始。然后，他们设计网页，确定他们需要哪些CSS属性，并在Web实验室创建网页。

一、CSS属性

1、添加标题规则集

2、更改文本颜色

3、对其文本

4、更改字体类型

5、更改字体大小

二、RGB颜色

在风格表中查找 CSS 规则集，该条文为红色单词提供了风格。
更新绿色和蓝色单词的样式，使用 RGB 代码尝试不同颜色。
为您的页面添加您希望的任何其他规则。

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p class="red0">RED</p>
    <p class="red1">RED</p>
    <p class="red2">RED</p>
    <p class="red3">RED</p>
    <p class="red4">RED</p>
    

    <p class="green0">GREEN</p>
    <p class="green1">GREEN</p>
    <p class="green2">GREEN</p>
    <p class="green3">GREEN</p>
    <p class="green4">GREEN</p>
    

    <p class="blue0">BLUE</p>
    <p class="blue1">BLUE</p>
    <p class="blue2">BLUE</p>
    <p class="blue3">BLUE</p>
    <p class="blue4">BLUE</p>
    
  </body>
</html>

CSS代码：

body {
  background: white;
}
p {
  float: left;
  width: 20%;
  color: white;
  text-align: center;
  background-color: gray;
}

.nofloat {
  float: none;
}

.red0 {
  background-color: rgb( 128 , 0, 0);
}
.red1 {
  background-color: rgb( 160 , 32, 32);
}
.red2 {
  background-color: rgb( 192 , 64, 64);
}
.red3 {
  background-color: rgb( 224 , 96, 96);
}
.red4 {
  background-color: rgb( 255 , 127, 127);
}

.green0 {
  background-color: rgb(0,128,0);
}
.green1 {
  background-color: rgb( 32, 160, 32);
}
.green2 {
  background-color:rgb( 64 , 192, 64);
}
.green3 {
  background-color:rgb( 96 , 224, 96);
}
.green4 {
  background-color:rgb( 127 , 255, 127);
}

.blue0 {
  background-color: rgb(0,0,128);
}
.blue1 {
  background-color: rgb( 32, 32, 160);
}
.blue2 {
  background-color: rgb( 64 , 64, 192);
}
.blue3 {
  background-color:rgb( 96 , 96, 224);
}
.blue4 {
  background-color: rgb( 127 , 127, 255);
}

h1 {
  font-weight: bold;
}

效果：

3-7 知识产权

课程说明：

每日问题：当我们使用对方的内容时，什么样的规则可以保护每个人的权利？从讨论他们个人对如何允许他人使用其作品的意见开始，该课程探讨了创意内容的创作者和使用者的目的和作用。然后，他们继续开展一项活动，探索各种知识共享许可证，以解决处理版权问题的困难。

3-8 使用图像

课程说明：

当天的问题：我们如何在我们的网站上添加图像，同时确保我们尊重每个人的权利？然后，他们学习如何使用标签将图像添加到网页，以及如何正确引用图像源。

新标签

1、<img>

图像

此标签用于将图像嵌入网页。此图像标签具有两个必需属性：src - 指定图像的路径- 如果出于某种原因无法显示图像，则为图像指定备用文本。-height表示图像的高度。 - width表示图像的宽度。

语法：

<img >

举例：

本地图像

使用将图像嵌入网页<img>

<img src="dog.jpg" alt="My Dog" width="500" height="600">

另一个网站上的图片

当图像源为URL时使用<img>

<img src="https://pbs.twimg.com/profile_images/1267892245362913281/2rm_VB9z.png" alt="CODE" width="500" height="600">

使用带文本的图像

您可以使用图像来帮助可视化您描述的内容。在此示例中，图像用于显示格蕾丝·霍珀发现的第一个计算机错误

<html>
<body>
    <h1>
      Grace Hopper Info
    </h1>
    <p>
      Grace Hopper was a computer scientist in the United States Navy. She developed one of the first programming languages. She also discovered the first computer 'bug'. It was a literal bug in the machine.
    </p>
    <h2>
      The First Computer Bug
    </h2>
    <img src="https://archive.computerhistory.org/resources/still-image/Hopper-Grace/hopper-grace.finds_bug.102640477.lg.jpg" alt="Computer Bug" />
  </body>
</html>

此标签不得包含任何内容，也不需要关闭标签。<img>
请务必在图像文件名周围放置引号。
图像文件的常见扩展是.jpg、.jpeg和.png，图像的源也可能是 URL。
请务必给您的图像文件一个描述图像的名称。

为什么图像标记没有关闭标记？

图像标签不需要关闭标签，因为没有必须包裹在标签中的文本内容。屏幕上显示的内容通过标签属性进行指定。

常见错误：

图像错误匹配
缺失图像
使用现有图像添加替代
添加图像链接使图像出现在网页中
添加新图像

3-10 网址表达式

课程说明：

**当天的问题：我们如何利用网站来表达自己？**本课介绍网站作为个人表达的手段。学生首先讨论人们表达和分享他们的兴趣和想法的不同方式，然后他们查看一些由学生从以前的课程制作的范例网站。最后，每个人都集思广益，分享一份主题和兴趣清单，包括在个人网站，创造资源，开发个人网站在单位的其余部分。

3-11 使用CSS设置元素的样式

新标签：

1、width

宽度

该属性指定了元素内容区域的宽度。元素的宽度不包括衬垫、边框或边距。宽度可以定义为包含块、像素、厘米等的百分比。

语法：

width: value;

举例：
像素宽度

将元素的宽度设置为 300 像素。

p {
  width: 300px;
}

宽度占百分比

使用百分比值设置元素的宽度。

img {
  width: 50%;
}

2、height

高度

该属性指定内容区域的高度为元素。元素的高度不包括填充、边框或边距。高度可以按百分比（包含块的宽度）、像素、厘米等进行定义。

语法：

height: value;

举例：

像素高度

将元素的高度设置为 100 px。<p>

p{
  height: 100px;
}

高度占百分比

使用百分比值设置元素的高度。<img>

img {
  height: 50%;
}

3、margin

范围

属性指定元素所有四个边上的边距区域。它是，，，和.的简写。指定一个值时，它会将相同的边距应用于所有四个边。

语法：

margin: value;

举例：

一个范围值

使用速记属性将元素的所有四面的边距设置为 40 像素。<p>

p {
  margin: 40px;
}

多个范围值

为元素的四个方面设置多个保证金值。最高范围为 10px。右边距为 5px。底边距为 15px。左边距为 20px。<p>

p {
 margin: 10px 5px 15px 20px;
}

4、border-width

边框宽度

该属性指定元素边界所有四面的宽度。它是顶部、右侧、底部和左边框宽度的速记。指定一个值时，它适用于所有四个方面相同的宽度。宽度可以设置为特定大小（在 px、pt、cm、em 等）或使用三个预先定义的值之一：

语法：

border-width: value;

举例：

使用预定义值的宽度

将元素边框的四面宽度设置为厚。<h1>

h1 {
  border-style: solid;
  border-width: thick;
}

不同的边框宽度

将元素边框的四面宽度设置为四个值（顶部边框、右边框、底部边框和左边框）。<h1>

h1 {
  border-style: solid;
  border-width: 25px 10px 4px 35px;
}

王山之

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
C1任务03 Web的世界（上）

任务一1、⾸先，在开源富⽂本编辑器中随便输⼊⼀段⽂本例如我输入“玫瑰花”三个字，如下2、然后，在源码模式下，查看内容是如何被转变为带标签的⽂本的，都带了哪些HTML标签在源码模式下，玫瑰花带有了<p>标签，可以看到标签是以<p>开始、</p>结束的3、最后，实现编辑器没有的功能，例如让表格隔⾏换⾊，加⼊JavaScript按钮，试着完成它吧第一步我们首先要添加一个表格第二步，我们转到源码形式可以看到源码形式下的表格标签代码全在.
复制链接

扫一扫