当前位置：首页 > news >正文

头歌答案HTML——基础

news 来源：原创 2024/5/18 12:02:36

HTML——基础

第1关：初识HTML：简单的Hello World网页制作

任务描述

第2关：HTML结构：自我简介网页

任务描述

HTML——基本标签

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

任务描述

第2关：创建

任务描述

第3关：创建 p 标签

任务描述

第4关：创建 a 标签

任务描述

第5关：创建 img 标签

任务描述

第6关：创建 div 标签

任务描述

HTTP基础

第1关：HTTP 标准

任务描述

第2关：开发者工具的基本使用

任务描述

HTML——基础

第1关：初识HTML：简单的Hello World网页制作

任务描述

本关的任务是编写一个简单的HTML页面，这个网页包含一个标题和一个段落。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello world</title></head>  <!--------- Begin--------><body bgcolor="F6F3D6"><!--用HTML语言向世界打声招呼吧！--><h1 align="center">Hello World</h1><p align="center">动手改变世界</p></body><!--------- End--------></html>

第2关：HTML结构：自我简介网页

任务描述

本关任务是编写一个自我简介网页，你将通过本任务理解一个HTML网页的完整结构，并了解如何让搜索引擎更好的找到你的网页。

<!DOCTYPE html>
<html><!--------- Begin--------><head><meta charset="utf-8"><title>自我简介</title><meta name="keywords"><meta name="keywords" content="XXX的自我简介网站"><meta name="" content="自我简介,关键词一,关键词二,关键词三"></head><body><h1 align="center">自我简介</h1><h2>简介</h2><p>在这里简单的描述一下你自己吧。</p><h2>三个与你最有关的词</h2><p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p><ul><li>第一个词</li><p>选择第一个词的原因</p><li>第二个词</li><p>选择第二个词的原因</p><li>第三个词</li><p>选择第三个词的原因</p></ul>
</body><!--------- End--------></html>

HTML——基本标签

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

任务描述

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

<!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>标签，文本内容为创建不同字体大小的标题，查看它们的区别。

<!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标签，文本内容为我是一个段落。

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

第4关：创建 a 标签

任务描述

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

<!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/207801，提示文字是小狗走路。

<!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标签。

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