HTML 中的預標記-html教學-PHP中文網

HTML 中的預標記

WBOY

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

原創

844 人瀏覽過

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 支援以下網頁瀏覽器：

Google瀏覽器
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 中的預標記