html---基本标签

1.创建标签

1.1任务描述

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

实现的效果如下:
在这里插入图片描述

1.2相关知识

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

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

当然, h3h4h5h6也用来创建标题,它们的字体依次减小。

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

1.3编程要求

请仔细阅读右侧代码,结合相关知识,在 Begin-End 区域内进行代码补充,完成依次创建<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>

2.创建p标签

2.1任务描述

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

实现的效果如下:
在这里插入图片描述

2.2相关知识

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

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

代码文件:

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

3.创建a标签

3.1任务描述

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

3.2相关知识

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

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

代码文件:

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

4.创建img标签

4.1任务描述

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

效果如下:
在这里插入图片描述

【其实这是个动图,不过我只截图了】

4.2相关知识

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

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

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

这样图片就显示出来了。效果如下所示:
在这里插入图片描述
当图片没有展示出来时,或者图片地址是错的,就会显示提示文字。效果如下所示:

在这里插入图片描述
注意:img标签是以/>结尾的, 不是 </img>结尾的。

代码文件:

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


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

</body>
</html>

5.创建div标签

5.1任务描述

本关任务:创建一个div标签, 文本内容是我是div标签

效果如下:
在这里插入图片描述

5.2相关知识

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>

6.添加注释

6.1任务描述

本关任务:注释掉 div 标签,同时在p标签上方添加注释说明,注释内容为*******。【因内容问题我已删除图片了QAQ~】

效果如下:

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

6.2相关知识

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

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

注释有两个作用:

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

如何添加注释呢?

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

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

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

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

代码文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>新的一天</h2>
    <!-- ********* Begin ********* -->

<!--
    <div>
        今天是晴天
    </div>
-->
<!--一带一路-->
    <p>
        大家好好学习
    </p>
    <!-- ********* End ********* -->
</body>
</html>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
SVG-icon标签是一种用于在网页中显示可缩放矢量图形(Scalable Vector Graphics)的HTML标签。它允许开发者使用SVG格式的图像作为图标,并具有以下特点: 1. 可缩放性:SVG图像是基于矢量的,因此可以在不失真的情况下缩放到任意大小。 2. 矢量性:SVG图像使用数学描述来定义形状和路径,而不是像素网格,因此图像可以无损地缩放。 3. 可编辑性:SVG图像可以使用文本编辑器进行编辑,可以修改形状、颜色、大小等属性。 4. 支持透明度和滤镜效果:SVG图像可以应用透明度和各种滤镜效果,使得图标具有更多的样式和效果。 使用SVG-icon标签,你可以将SVG图像嵌入到HTML文件中,并通过CSS样式来控制其显示和行为。通常,你需要在HTML文件中使用`<svg>`标签来定义SVG图像,然后使用`<use>`标签来引用并显示特定的图标。 例如,假设你有一个名为"icon.svg"的SVG图像文件,其中包含一个id为"icon-heart"的图标。你可以在HTML文件中使用以下代码来显示该图标: ```html <svg class="icon"> <use xlink:href="icon.svg#icon-heart"></use> </svg> ``` 上述代码中,`<svg>`标签定义了一个具有"class"属性的SVG容器,用于包含图标。`<use>`标签通过"xlink:href"属性引用了SVG图像文件中的"id"为"icon-heart"的图标。 使用CSS样式,你可以进一步调整图标的大小、颜色等属性。例如: ```css .icon { width: 24px; height: 24px; fill: red; } ``` 上述代码将图标的宽度和高度设置为24像素,并将填充颜色设置为红色。 这就是使用SVG-icon标签在网页中显示可缩放矢量图形的基本方法。希望能对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

少年游四方

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值