首页 >web前端 >html教程 >HTML 中的预标记

HTML 中的预标记

WBOY
WBOY原创
2024-09-04 16:25:20813浏览

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 中的预标记

结论

开发者使用此标签来减少编码并获取格式化内容。网络不能忽略 pre 标签内内容的格式。

以上是HTML 中的预标记的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:Inline Tags in HTML下一篇:Span Tag in HTML