头歌 HTML——基本标签
|
621
|
前端,头歌

1984 字
|
13 分钟

第1关：创建第一个 HTML 标签

题目

任务描述

本关任务：创建你的第一个标签<h1></h1>，文本内容为welcome to Educoder。

实现的效果如下：

alt text

相关知识

<h1>welcome</h1>

上面这行代码它表示一个HTML元素。

大多数 HTML 元素都是由开始标签和结束标签组成的，通常成对出现 。

开始标签：用尖括号<>包裹关键词，像<h1>这样。
结束标签：用</>包裹和开始标签一样的关键词，像</h1>这样。

可以发现： 结束标签就比开始标签多了一个斜杠/。

是不是很简单，开始你的挑战吧！

编程要求

请仔细阅读右侧代码，结合相关知识，在Begin-End区域内进行代码补充，完成第一个标签<h1></h1>，文本内容为welcome to Educoder的创建。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则GameOver。

赶快试一下吧！！！

参考答案

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Hello</h1>
    <!-- ********* Begin ********* -->
    <h1>welcome to Educoder</h1>
        
    <!-- ********* End ********* -->
</body>
</html>

第2关：创建<h2>-<h6>标签

题目

任务描述

本关任务：依次创建<h2>-<h6>标签，文本内容为创建不同字体大小的标题，查看它们的区别。

实现的效果如下：

alt text

相关知识

第一关已经创建了h1标签，它是干什么的呢？ 它一般用来创建标题。

另外，<h2>也用来创建标题，它们有什么区别呢？ h1的字体比h2的字体要大。

当然，h3，h4，h5，h6也用来创建标题，它们的字体依次减小。

注意：创建标题只有<h1> - <h6>，没有h7，h8的。

是不是很简单，开始你的挑战吧！

编程要求

请仔细阅读右侧代码，结合相关知识，在Begin-End区域内进行代码补充，完成依次创建<h2>-<h6>标签的任务。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则GameOver。

赶快试一下吧！！！

参考答案

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>创建不同字体大小的标题</h1>
    <!-- ********* Begin ********* -->
    <h2>创建不同字体大小的标题</h2>
    <h3>创建不同字体大小的标题</h3>
    <h4>创建不同字体大小的标题</h4>
    <h5>创建不同字体大小的标题</h5>
    <h6>创建不同字体大小的标题</h6>
    <!-- ********* End ********* -->
</body>
</html>

第3关：创建 p 标签

题目

任务描述

本关任务:创建一个p标签，文本内容为我是一个段落。

实现的效果如下：

alt text

相关知识

p元素通常用来表示一个段落。

你可以这样创建一个p标签，<p> p标签表示一个段落。</p>

编程要求

请仔细阅读右侧代码，结合相关知识，在Begin-End区域内进行代码补充，完成第一个p标签的创建。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则GameOver。

赶快试一下吧！！！

参考答案

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <p>我是一个段落</p>

    <!-- ********* End ********* -->
</body>
</html>

第4关：创建 a 标签

题目

任务描述

本关任务：创建一个a标签， 跳转的地址是https://www.educoder.net，文本内容是Educoder平台。

相关知识

a标签通常用来定义一个链接。href属性的值就是链接的地址。

你可以这样创建一个a标签，<a href="http://www.baidu.com">百度</a>。当你点击这个链接时，它就会跳转到百度首页。

编程要求

请仔细阅读右侧代码，结合相关知识，在Begin-End区域内进行代码补充，完成第一个a标签， 跳转的地址是https://www.educoder.net，文本内容是Educoder平台的创建任务。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则GameOver。

赶快试一下吧！！！

参考答案

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <a href="https://www.educoder.net">Educoder平台</a>

    <!-- ********* End ********* -->
</body>
</html>

第5关：创建 img 标签

题目

任务描述

本关任务：创建一个img标签， 图片的地址是https://www.educoder.net/attachments/download/ZTZaUEp2Y0ltSElvcnBxelNJTXYyUT09，提示文字是小狗走路。

效果如下：

alt text

相关知识

img标签通常用来表示一个图片。src属性的值就是图片的地址，alt属性的值是当图片没有展现出来时提示的文字 。

你可以这样创建一个img标签，
<img src="https://www.educoder.net/attachments/download/c0ZNRzRLSTVDYmREZVVJOXFoNjZLdz09" alt="风景画"/>。

这样图片就显示出来了。效果如下所示：

alt text

当图片没有展示出来时，或者图片地址是错的，就会显示提示文字。效果如下所示：

alt text

注意：img标签是以/>结尾的， 不是</img>结尾的。

编程要求

请仔细阅读右侧代码，结合相关知识，在Begin-End区域内进行代码补充，完成第一个标签img标签， 图片的地址是https://data.educoder.net/api/attachments/WlY3UDlRd3RQdXlvZ0JXNG1XZzduZz09，提示文字是小狗走路的创建任务。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则GameOver。

赶快试一下吧！！！

参考答案

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
 <img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路">

    <!-- ********* End ********* -->

</body>
</html>

第6关：创建 div 标签

题目

任务描述

本关任务：创建一个div标签， 文本内容是我是div标签。

效果如下：

alt text

相关知识

div标签可以把文档分割为独立的、不同的部分。它没有实际的意义，仅仅表示创建了一个块级元素。

你可以这样创建一个div标签，<div>创建div标签</div>。

可以发现：它和 <h1>-<h6>，<p>标签的创建是一样的，只不过它没有实际的意义。

编程要求

请仔细阅读右侧代码，结合相关知识，在Begin-End区域内进行代码补充，完成第一个标签div标签， 文本内容是我是div标签的创建任务。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。

赶快试一下吧！！！

参考答案

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>我是h2标签</h2>
    <p>我是p标签</p>
    <!-- ********* Begin ********* -->
<div>我是div标签</div>


    <!-- ********* End ********* -->
</body>
</html>

第7关：添加注释

题目

任务描述

本关任务：注释掉div标签，同时在p标签上方添加注释说明，注释内容为一带一路。

效果如下：

alt text

注意：注释div标签时，请不要修改div标签中的内容。

相关知识

什么是注释？ 为什么要添加注释呢？

注释是解释性文本，在运行程序时，会被程序跳过，不做处理。

注释有两个作用：

  • 可以给代码添加文字说明，便于代码阅读和日后维护；
  • 对于暂时不用但又不能删除的代码，可以添加注释保存下来；

如何添加注释呢？

<!--表示注释的开始，-->表示注释的结束，这样就可以添加提示说明和注释元素了。

你可以这样注释p标签和添加文字说明。

<!-- 这里p标签 -->

<!--<p>这是一个段落</p>-->

编程要求

请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成本关任务。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。

赶快试一下吧！！！

参考答案

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>习近平向2018年“一带一路”知识产权高级别会议致贺信</h2>
    <!-- ********* Begin ********* -->


    <!-- <div>
        新华社北京8月28日电　2018年“一带一路”知识产权高级别会议28日在北京开幕，
        国家主席习近平向会议致贺信。
    </div> -->

<!-- 一带一路 -->
    <p>
        习近平指出，中国发扬丝路精神，提出共建“一带一路”倡议，得到有关国家和国际社会
        广泛认同和热情参与，取得了丰硕成果。我们愿同各方继续共同努力，本着共商共建共
        享原则，将“一带一路”建设成为和平之路、繁荣之路、开放之路、创新之路、文明之路，
        让丝路精神发扬光大。
    </p>
    <!-- ********* End ********* -->
</body>
</html>
上一篇
下一篇