html---基本标签

最新推荐文章于 2023-11-12 11:28:31 发布

少年游四方

最新推荐文章于 2023-11-12 11:28:31 发布

阅读量1k

点赞数

分类专栏： # Web技术应用基础-HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_45823118/article/details/114937892

版权

Web技术应用基础-HTML 专栏收录该内容

18 篇文章 58 订阅

订阅专栏

基本标签

1.创建标签
2.创建p标签
- 2.1任务描述
- 2.2相关知识
3.创建a标签
- 3.1任务描述
- 3.2相关知识
4.创建img标签
- 4.1任务描述
- 4.2相关知识
5.创建div标签
- 5.1任务描述
- 5.2相关知识
6.添加注释
- 6.1任务描述
- 6.2相关知识

1.创建标签

1.1任务描述

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

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

1.2相关知识

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

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

当然， h3，h4，h5，h6也用来创建标题，它们的字体依次减小。

注意：创建标题只有 <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
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
html---基本标签

基本标签1.创建 ``-``标签1.1任务描述1.2相关知识1.3编程要求2.创建`p`标签2.1任务描述2.2相关知识3.创建`a`标签3.1任务描述3.2相关知识4.创建`img`标签4.1任务描述4.2相关知识5.创建`div`标签5.1任务描述5.2相关知识6.添加注释6.1任务描述6.2相关知识1.创建 <h2>-<h6>标签1.1任务描述本关任务：依次创建<h2>-<h6>标签，文本内容为创建不同字体大小的标题，查看它们的区别。实现的效果如
复制链接

扫一扫