HTMLの事前タグ-htmlチュートリアル-php.cn

HTML で Pre タグはどのように機能しますか?

1. HTML で Pre タグを使用する

2. HTML で Pre タグを使用しない

3. HTML の他のタグを使用する

Preタグの使用

実装例

例 #2

結論

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLの事前タグ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:25 PM

html html5 HTML Tutorial HTML Properties HTML tags

Web ブラウザでは、テキストのスペース、改行、その他の書式設定文字は無視されます。何らかの形式が必要な場合は、タグまたは属性を毎回使用する必要があります。この欠点を取り除くために使用されます。 preタグはテキストの形式をそのまま維持するために使用されます。 CSSタグが適用されると変更されます。コンテンツのフォーマット済みテキストが表示されます。

構文:

HTML には、さまざまな目的のための多くのタグがあります。

例:

など

pre タグには、他の HTML タグと同様に、開始タグと終了タグがあります。

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

ログイン後にコピー

上記の構文は、コンテンツのフォーマット済みテキストが必要な場合に使用されます。

HTML で Pre タグはどのように機能しますか?

以下は 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の事前タグ

上記のコードの説明: 上記の例を示します。コンテンツの必要な部分にプレタグを適用すると、コンテンツはフォーマットされたままの状態で表示されます。 pre タグがテキストに適用される場合、スペースと次の行は無視されません。

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の事前タグ

上記のコードの説明: 使用しない場合の上記の例を示します。スペース、改行、改行は自動的に無視されます。 Web ページには、要件に従ってコンテンツが表示されます。スペースを与えて改行するには、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タグの使用

タグと属性を使用しない場合、Web ページはスペースと改行を無視します。ただし、各行でこれらの属性を使用する必要があります。
Pre タグは元のコンテンツ形式を保持します。
開発者は、多くのタグを使用する代わりに、ブロックに 1 つのタグを使用できます。コーディングを減らして理解しやすくします。

Pre Tag は次の Web ブラウザをサポートしています:

Google Chrome
Internet Explorer
Firefox
オペラ
サファリ

実装例

以下はその実装例です:

例 #1

CSS タグで Pre タグを使用します。

コード:

<!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 タグと CSS の pre タグを組み合わせたものです。

コード:

<!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の事前タグ