HTML 中的预标记-html教程-PHP中文网

HTML 中的预标记

WBOY

发布： 2024-09-04 16:25:20

原创

804 人浏览过

Web 浏览器会忽略空格、换行符和其他文本格式字符。如果您想要某种格式，那么每次都必须使用标签或属性。它就是用来消除这个缺点的。 Pre 标签用于保持文本格式不变。当应用 CSS 标签时它会发生变化。它显示内容的预格式化文本。

语法：

HTML 有许多用于不同目的的标签。

示例：

```
等
```
登录后复制

前置标签与其他 HTML 标签一样有一个开始标签和一个结束标签。

<pre class="brush:php;toolbar:false"> content of web

登录后复制

上面的语法用于我们需要内容的预格式化文本的地方。

预标记在 HTML 中如何工作？

以下是 Pre 标签如何工作的说明：

1.在 Html 中使用 Pre 标签

代码：

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space,   line breaks, and other formatting characters of text.
If you wanted some   format then tag or attribute must have used every time.
Pre tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is   changed when CSS tags are applied.
Pre tag in HTML shows the  preformatted text of the content.

登录后复制

输出：

HTML 中的预标记

上面代码的解释：展示上面的例子。当预标记应用于内容的所需部分时，内容看起来按原样格式化。当前置标签应用于文本时，空格和下一行不会被忽略。

2.在 Html 中不使用 Pre 标记

代码：

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
The Web browser is ignored space, line breaks, and other
formatting characters of text.
If you wanted some format then tag or attribute must have
used every time.
This tag is used to remove this drawback. Pre tag used to
keep text format as it is. It is changed when CSS tags are applied.
This pre tag shows the preformatted text of the content.
</body>
</html>

登录后复制

输出：

HTML 中的预标记

上面代码的解释：展示上面的例子，这是没有使用它的。自动忽略空格、换行符和换行符。网页根据他们的要求显示内容。为了留出空间并打破界限，我们必须使用 HTML 标签。

3.使用 HTML 其他标签

代码：

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
The Web browser is ignored space,         line breaks, and other formatting characters of text.<br>
If you wanted some      format then tag or attribute must have used every time.<br>
This is used to remove its drawback. Pre tag used to keep text format as it is.<br> It is changed when CSS tags are applied. <br>
It shows preformatted text of the content.<br>
</body>
</html>

登录后复制

输出：

HTML 中的预标记

上述代码说明：显示上面的示例，该示例没有使用 pre 标签。但我们没有使用 pre 标签，而是使用其他 HTML 标签。
标签用于换行，用于空格的字符。

预标签的使用

如果我们不使用标签和属性，网页会忽略空格和换行符。但每一行，我们都必须使用这些属性。
Pre 标签保留原始内容格式。
开发者可以为该块使用一个标签，而不是使用多个标签。减少编码，易于理解。

Pre Tag 支持以下网络浏览器：

谷歌浏览器
Internet Explorer
火狐
歌剧
野生动物园

实施示例

下面是其中的实现示例：

示例#1

将 Pre Tag 与 CSS 标签一起使用。

代码：

<!DOCTYPE>
<html>
<head>
<title> using pre tag with CSS </title>
<style>
pre {
font-family: Arial;
color: yellow;
border: solid black;
background-color: black;
}
</style>
</head>
<body>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
This tag in HTML shows the preformatted text of the content.

登录后复制

输出：

HTML 中的预标记

上面代码的解释：显示上面的例子是与CSS样式标签一起使用的。如果您使用 pre 标签，那么 CSS 样式标签也可以更改内容的格式。样式标签使用CSS中的字体样式、边框和文本颜色。

示例#2

下面的例子。这是其他 HTML 标签和 pre 标签与 CSS 的组合。

代码：

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html  with CSS </title>
<style>
pre {
font-family: Arial;
color: yellow;
border: solid black;
background-color:black;
}
</style>
</head>
<body>
<p>
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
It shows the preformatted text of the content.
</p>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
This tag in HTML shows the preformatted text of the content.

登录后复制

输出：

HTML 中的预标记