html常用标签之标题、段落和换行标签之间的异同

最新推荐文章于 2024-10-04 22:04:56 发布

小白成长札记

最新推荐文章于 2024-10-04 22:04:56 发布

阅读量356

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_45734905/article/details/130090822

版权

一、标题标签

html一共提供了6个从大到小等级的网页标题，即<h1> - <h6> 。

<h1 style="color: red;width:200px;height: 100px;background-color:pink;">我是h1标签</h1>
<h6>我是h6标签</h6>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello World你好，世界</title>
</head>
<body>
<h1>一级重要标题</h1>
<h2>二级重要标题</h2>
<h3>三级重要标题</h3>
<h4>四级重要标题</h4>
<h5>五级重要标题</h5>
<h6>六级重要标题</h6>
</body>
</html>

单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。

特点∶
1.加了标题的文字会变的加粗，字号也会依次变大。
2.一个标题独占一行。

运行效果如下：

二、段落标签

段落标签的作用是在网页中把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。

特点∶
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<p>	豫章故郡，洪都新府。星分翼轸，地接衡庐。</p>
<p>	襟三江而带五湖，控蛮荆而引瓯越。</p>

</body>
</html>

效果图：

三、换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br />。

单词break的缩写，意为打断、换行。
标签语义：强制换行。

特点:
1.<br />是个单标签。
2.<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<p>	豫章故郡，洪都新府。<br />星分翼轸，地接衡庐。</p>
<p>	襟三江而带五湖，控蛮荆而引瓯越。</p>

</body>
</html>

效果图：