HTML——基本标签

最新推荐文章于 2025-04-07 11:18:24 发布

Meropidae

最新推荐文章于 2025-04-07 11:18:24 发布

阅读量9.8k

点赞数 11

分类专栏：网络技术与爬虫头歌文章标签： python 开发语言 html 前端经验分享

本文链接：https://blog.csdn.net/m0_62287709/article/details/121615195

版权

头歌同时被 2 个专栏收录

48 篇文章

订阅专栏

网络技术与爬虫

4 篇文章

订阅专栏

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

本关任务：创建你的第一个标签<h1></h1>，文本内容为welcome to Educoder。

实现的效果如下：

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

实现的效果如下：

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

实现的效果如下：

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

第4关：创建 a 标签

本关任务：创建一个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标签，图片的地址是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标签。

效果如下：

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

第7关：添加注释

本关任务：注释掉 div 标签，同时在p标签上方添加注释说明，注释内容为一带一路。

效果如下：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>“一带一路”（审核原因）</h2>
    <!-- ********* Begin ********* -->
    <!--
    <div>
        新华电2018年“一带一路”开幕，
        议致贺信。（审核原因）
    </div>
    -->
    <!-- 一带一路 -->
    <p>
        丝路精神，提出共建“一带一路”倡议，得到有关（审核原因）
        广泛认同和热情参与，取得了丰硕成果。我们愿同各方继续共同努力，本着共商共建共
        享原则，将“一带一路”建设成为和平之路、繁荣之路、开放之路、创新之路、文明之路，
        让丝路精神发扬光大。
    </p>
    <!-- ********* End ********* -->
</body>
</html>