Educoder/头歌JAVA——HTML：基本标签

已于 2022-12-10 09:42:19 修改
阅读量4.4k 收藏 21
点赞数 7
文章标签： html 前端 css
于 2022-12-08 20:04:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhou2622/article/details/128242762
版权

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

相关知识

<h1>welcome</h1>

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

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

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

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

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

<!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元素通常用来表示一个段落。

你可以这样创建一个p标签，<p> 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平台。

相关知识

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

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

编程要求

请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个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标签通常用来表示一个图片。src属性的值就是图片的地址，alt属性的值是当图片没有展现出来时提示的文字 。

你可以这样创建一个img标签，

<imgsrc="https://www.educoder.net/attachments/download/207791" alt="风景画"/>。

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

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

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

编程要求

请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签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标签，<div>创建div标签</div>。

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

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

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

 第7关：添加注释

相关知识

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

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

注释有两个作用：

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

如何添加注释呢？

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

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

  1. <!-- 这里p标签 -->
  3. <!--<p>这是一个段落</p>-->

陆小玖
关注
HTML第一章-基本标签
12-07
HTML第一章-基本标签 欢迎大家参考 多多提意见
Educoder：HTML——基本标签
QingNiaoJun的博客
04-04 5105
目录第1关：创建第一个 HTML 标签第2关：创建 < h2> - < h6> 标签第3关：创建 p 标签第4关：创建 a 标签第5关：创建 img 标签第6关：创建 div 标签第7关：添加注释 第1关：创建第一个 HTML 标签 任务描述 本关任务：创建你的第一个标签< h1>< /h1>，文本内容为welcome to Educoder。 实现的效果如下： 相关知识 < h1>welcome< /h1> 上面这行代码它表示一个H
【EduCoder答案】HTML——基本标签
weixin_44505587的博客
09-04 814
简介 其他各类实训答案的目录见这里 答案查询的入口网页版 答案获取的方法简介见这里 并不是所有的关卡都有答案，有些只有部分关卡有 HTML——基本标签 >>>查看 第1关:创建第一个 HTML 标签 第2关:创建 - 标签 第3关:创建 p 标签 第4关:创建 a 标签 第5关:创建 img 标签 第6关:创建 div 标签 第7关:添加注释 ...
头歌答案HTML——基础
m0_62476845的博客
11-12 5198
自我简介
第1关：创建第一个 HTML 标签
weixin_45784564的博客
05-21 2281
任务描述 本关任务：创建你的第一个标签<h1></h1>，文本内容为welcome to Educoder。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成第一个标签<h1></h1>，文本内容为welcome to Educoder的创建。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。 赶快试一下吧！！！ 源码 <!DOCT
头歌-HTML基础
somewon的博客
03-06 1万+
四川师范大学 头歌 web应用开发
html基本标签
SmileCatLI的博客
11-13 106
html的基础标签
HTML头部标签
mooonk的博客
03-23 469
HTML基础（头部标签） 一、头部标签 代码如下（示例）： 中的标签以及各自作用： （1）双标签，中间是网页名称 day1 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210323175035527.png) （2）meta系列标签 -->charset属性，属性值为浏览器解析源码方法，一般我们使用UTF-8，可以解决网业打开的乱码问题 -->name属性，一般用于当前网页的简单描述，便于搜索 -->
10. HTML基本标签
歌谣的博客
10-01 192
HTML基本标签
HTML上部分--头歌（educoder）实训作业题目及答案
热门推荐
qq_35353972的博客
10-09 1万+
HTML--头歌（educoder）实训作业题目及答案
Educoder头歌实践平台 Java 数据结构之图 答案.txt
11-10
Educoder头歌实践平台 中 Java 数据结构之图 共4关 金币共2300 的那个实践项目答案 由于图论问题渗透整个计算机科学，图算法对于计算机学科至关重要。成百上千的计算问题最后都可以归约为图论问题。
java_web：基于mvc设计模式实现用户登录操作
weixin_45873215的博客
12-22 2918
基于mvc设计模式实现用户登录操作 知识点补充：mvc理论知识 应用实例：创建一个jsp页面login，将其表单数据发送到类LoginServlet中，在该类调用类LoginDao实现用户登录操作。 若登录成功则跳转到welcome.jap，否则跳回login.jsp 项目目录结构图 1.创建好需要用到的数据库与数据表 create database test; use test; drop table if exists login; create table login( l_id int not
Educoder JavaScript：HTML DOM——文档元素的操作
Junds0的博客
06-01 3009
第1关：通过id获取文档元素 获取本文档中id为a1的文档元素，要求用id获取文档元素；将获取的元素赋值给变量myElement <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get element by id</title> </head> <body> <a id="a1" src="h
HTML——基本标签 ※
Junds0的博客
12-27 1218
任务描述本关任务：完成编写创建第一个 HTML 标签的小程序。相关知识。
HTML——基本标签
Meropidae的博客
11-29 8058
第1关：创建第一个 HTML 标签 本关任务：创建你的第一个标签<h1></h1>，文本内容为welcome to Educoder。 实现的效果如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Hello</h1> <!-- *********
创建第一个 HTML 标签
qq_45823118的博客
03-17 3135
创建第一个 HTML 标签任务描述相关知识编程要求测试说明 任务描述 本关任务：创建你的第一个标签<h1></h1>，文本内容为welcome to Educoder。 实现的效果如下： 相关知识 <h1>welcome</h1> 上面这行代码它表示一个HTML元素。 大多数 HTML 元素都是由开始标签和结束标签组成的，通常成对出现 。 开始标签：用尖括号<>包裹关键词，像<h1>这样。 结束标签：用</>包裹和开始
JavaWeb之HTML标签
m0_47209867的博客
01-01 298
JavaWeb之HTML标签那些事 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、文件标签二、文本标签三、图片标签四、列表标签五、链接标签六、表格标签八、表单标签总结 一、文件标签 <!-- 1.文件标签：构成html最基本的标签(保证了html的整体框架) *<html>:根标签，格式：<html></html> *<head>:头标签，指定文本一些属性，也可用于引入外部资源文件(CSS中详细介绍
HTML--表单类的标签
qq_45823118的博客
03-18 9154
表单5.表单元素——checked属性任务描述相关知识代码文件6.表单元素——disabled 属性任务描述相关知识代码文件7.表单元素——label 标签任务描述相关知识代码文件8.表单元素——下拉列表任务描述相关知识代码文件9.表单元素——文本域任务描述相关知识代码文件10.表单元素——提交按钮任务描述相关知识代码文件11.表单元素的综合案例任务描述相关知识代码文件 5.表单元素——checked属性 任务描述 本关任务：创建一组单选框，name属性值为marry，默认选中未婚。 要求：对每一个选项使用
JavaWeb——HTML标签学习
xubuhui的博客
06-02 364
HTML介绍 1.什么是HTML？ 超文本标记语言： 超文本：比普通文本功能更加强大 标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！ 2.HTML 怎么使用？ 语法和规范： 所有的 html 文件后缀名都是以.html 或者.htm 结尾的，建议使用.html 结尾。 整个 html 文件分别由头部分和体部分组成 Html 标签都是由开始标签和结束标签组成()...
web第7关：添加注释
最新发布
09-24
Web开发中的"第七关"通常是指HTML、CSS或JavaScript编程挑战的一部分，这里提到的"添加注释"主要是指在编写代码时使用注释来提高代码的可读性和维护性。以下是关于在不同语言中添加注释的基本指南： 1. **HTML 注释**：使用 `<!-- -->` 来包含注释内容，例如： ```html <!-- 这是一个HTML注释 --> <div id="content"> <!-- 文章内容 --> </div> ``` 2. **CSS 注释**：在CSS中，可以使用 `/* */` 或 `//` 来添加单行或多行注释： ```css /* 这是CSS注释 */ .example { color: red; /* 设置文本颜色 */ } // 单行注释 h1 { font-size: 24px; } // 文本标题大小 ``` 3. **JavaScript 注释**：有三种常见的形式： - `//` 用于单行注释： ```javascript // 计算两个数的和 var sum = a + b; ``` - `/* ... */` 用于多行注释： ```javascript /* 这里是一个多行注释，解释了计算函数的功能 */ function calculate(a, b) { return a * b; } ``` - 使用 `/** ... */` 可创建文档注释（JSDoc风格），主要用于API文档： ```javascript /** * @function multiply * @param {number} a 第一个乘数 * @param {number} b 第二个乘数 * @returns {number} 返回两数的乘积 */ function multiply(a, b) { return a * b; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆小玖

您的鼓励是我的不竭动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值