头歌答案HTML——基础

目录

HTML------基础

[第1关:初识HTML:简单的Hello World网页制作](#第1关:初识HTML:简单的Hello World网页制作)

任务描述

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

任务描述

HTML------基本标签

[第1关:创建第一个 HTML 标签](#第1关:创建第一个 HTML 标签)

任务描述

第2关:创建

任务描述

[第3关:创建 p 标签](#第3关:创建 p 标签)

任务描述

[第4关:创建 a 标签](#第4关:创建 a 标签)

任务描述

[第5关:创建 img 标签](#第5关:创建 img 标签)

任务描述

[第6关:创建 div 标签](#第6关:创建 div 标签)

任务描述

HTTP基础

[第1关:HTTP 标准](#第1关:HTTP 标准)

任务描述

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

任务描述


HTML------基础

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

任务描述

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

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网页的完整结构,并了解如何让搜索引擎更好的找到你的网页。

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

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

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

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平台

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

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

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

<div>我是div标签</div>

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

HTTP基础

第1关:HTTP 标准

任务描述

本关任务:掌握 HTTP 的相关知识,完成相关选择题。

1、以下哪个是爬虫爬取数据的用途?

数据分析

2、如果表单中带有图片,一般用什么请求方式?

POST

3、请求成功的响应状态码是什么?

200

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

任务描述

本关任务:了解开发者工具对于爬虫的用途。

1、Elements中的选择元素的功能是什么?

模拟不同设备的显示效果,且可以模拟带宽。

2、当要获取什么样的数据要使用Network功能?

那些通过异步请求获取到的数据

相关推荐
前端工作日常7 分钟前
H5 实时摄像头 + 麦克风:完整可运行 Demo 与深度拆解
前端·javascript
韩沛晓18 分钟前
uniapp跨域怎么解决
前端·javascript·uni-app
前端工作日常18 分钟前
以 Vue 项目为例串联eslint整个流程
前端·eslint
程序员鱼皮20 分钟前
太香了!我连夜给项目加上了这套 Java 监控系统
java·前端·程序员
该用户已不存在1 小时前
这几款Rust工具,开发体验直线上升
前端·后端·rust
前端雾辰1 小时前
Uniapp APP 端实现 TCP Socket 通信(ZPL 打印实战)
前端
集成显卡1 小时前
使用 Google 开源 AI 工具 LangExtract 进行结构化信息抽取
python·google·openai
无羡仙1 小时前
虚拟列表:怎么显示大量数据不卡
前端·react.js
云水边1 小时前
前端网络性能优化
前端
久笙&1 小时前
对象存储解决方案:MinIO 的架构与代码实战
数据库·python·架构