头歌答案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功能?

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

相关推荐
晚星star10 小时前
在 Web 前端实现流式 TTS 播放
前端·vue.js
huabuyu10 小时前
基于 Taro 的 Markdown AST 渲染器实现
前端
薄雾晚晴10 小时前
Rspack 性能优化实战:JS/CSS 压缩 + 代码分割,让产物体积直降 40%
前端·javascript
本末倒置18310 小时前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
狗头大军之江苏分军10 小时前
Meta万人裁员亲历者自述:小扎尝到了降本的甜头
前端·后端·github
TimberWill10 小时前
idea、服务器、数据库环境时区不一致问题
服务器·数据库·intellij-idea
秃顶老男孩.10 小时前
web中的循环遍历
开发语言·前端·javascript
CesareCheung10 小时前
JMeter压测过程中监控服务器CPU及内存的方法
运维·服务器·jmeter
蒋星熠10 小时前
WebSocket网络编程深度实践:从协议原理到生产级应用
网络·数据库·redis·python·websocket·网络协议·微服务
带娃的IT创业者10 小时前
实战:用 Python 搭建 MCP 服务 —— 模型上下文协议(Model Context Protocol)应用指南
开发语言·python·mcp