HTML入门笔记6-pre和hr标签

最新推荐文章于 2024-06-16 20:45:59 发布

Anthony_tester

最新推荐文章于 2024-06-16 20:45:59 发布

阅读量1.7k

点赞数

分类专栏： HTML入门系列文章标签： HTML pre hr

本文链接：https://blog.csdn.net/u011541946/article/details/75268942

版权

HTML入门系列专栏收录该内容

26 篇文章 9 订阅

订阅专栏

本篇学习HTML中pre标签和hr标签。pre是预格式化文本的标签，hr是horizon rule的缩写,左右就是创建一条水平线。

1.先来看看pre，有时候我们需要带格式显示一些东西，输出效果要如下图

我们正常安装<p>来显示，看看能不能到达目的。

<!DOCTYPE html

<html>

	<head>
		<title>
			HTML中的pre和hr标签
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<p>我有一个故事要讲给你听。。。。。。。。。。。。。。
		。。。。。。。。。。。。。。。。。。。。。。。它从‘故’开始和
		。。。。。。。。。。。。。。。到’事‘结束。</p>
	</body>
</html>

运行浏览器上显示，发现效果不是我们想要的。这个时候我们就需要用到<pre>标签。

<!DOCTYPE html

<html>

	<head>
		<title>
			HTML中的pre和hr标签
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<pre>我有一个故事要讲给你听。。。。。。。。。。。。。。
		。。。。。。。。。。。。。。。。。。。。。。。它从‘故’开始和
		。。。。。。。。。。。。。。。到’事‘结束。</pre>
	</body>
</html>

从上面可以看出，pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。

2.用hr标签显示一条水平线

<!DOCTYPE html

<html>

	<head>
		<title>
			HTML中的pre和hr标签
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<p>我有一个故事要讲给你听。。。。。。。。。。。。。。
		。。。。。。。。。。。。。。。。。。。。。。。它从‘故’开始和
		。。。。。。。。。。。。。。。到’事‘结束。</p>
		
		<hr />
		
		<p>第二段内容</p>
	</body>
</html>

Anthony_tester

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门笔记6-pre和hr标签

本篇学习HTML中pre标签和hr标签。pre是预格式化文本的标签，hr是horizon rule的缩写,左右就是创建一条水平线。1.先来看看pre，有时候我们需要带格式显示一些东西，输出效果要如下图我们正常安装来显示，看看能不能到达目的。<!DOCTYPE html HTML中的pre和hr标签我有一个故事要讲给你听。。。。。。。。
复制链接

扫一扫

专栏目录