HTML标签及用法（1）

最新推荐文章于 2024-04-26 15:16:45 发布

Liuzhengyue_

最新推荐文章于 2024-04-26 15:16:45 发布

阅读量256

点赞数 8

分类专栏： HTML基础入门学习文章标签： html 前端 css html5 经验分享

本文链接：https://blog.csdn.net/Liuzhengyue_/article/details/137103099

版权

HTML基础入门学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

标题标签（一般用在新闻标题，文章标题，网页标题，产品名称等。）

标签名：h1—h6（双标签）

标签显示特点：

文字加粗
字号逐渐减小

独占一行（换行）

注意：h1标签在网页中只能用一次，用来放新闻标题或网页logo，在使用时一定要注意

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签测试</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

段落标签：<p>内容</p>

特点：

在浏览器中独占一行
段落之间有间隙

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签测试</title>
</head>
<body>
   <p>I love web</p>
   <p>I love HTML</p>
   <P>编程使我快乐</P>
   <p>大家一起来学习吧！</p>
</body>
</html>

换行与水平标签

换行标签：<br>单标签
水平标签：<hr>单标签

现在有人就会想，为什么要用标签来实现换行呢？这是因为当我们在写代码的时候，虽然你回车了要换行的内容，但是保存在浏览器时，是不会显示，你所换行的内容，因此我们需要借助<br>

<hr>标签通常是用在大标题和内容之间，使内容更分明

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签测试</title>
</head>
<body>
    <h1>我的创作</h1> <hr>
   <p>I love web</p>
   <p>I love HTML</p>
   <P>编程使我快乐</P>
   <p>大家一起来学习吧！ <br> <br> <br>
    还不快速起来学习！
   </p>
</body>
</html>

看完请去实践

Liuzhengyue_

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML标签及用法（1）

现在有人就会想，为什么要用标签来实现换行呢？这是因为当我们在写代码的时候，虽然你回车了要换行的内容，但是保存在浏览器时，是不会显示，你所换行的内容，因此我们需要借助注意：h1标签在网页中只能用一次，用来放新闻标题或网页logo，在使用时一定要注意。标签通常是用在大标题和内容之间，使内容更分明。h1—h6（双标签）
复制链接

扫一扫