Pra Tag dalam HTML-html tutorial-php.cn

Pra Tag dalam HTML

WBOY

Lepaskan： 2024-09-04 16:25:20

asal

823 orang telah melayarinya

Pelayar web diabaikan ruang, pemisah baris dan aksara pemformatan teks yang lain. Jika anda mahukan beberapa format, maka teg atau atribut mesti telah digunakan setiap kali. Ia digunakan untuk menghapuskan kelemahan ini. Pre tag digunakan untuk mengekalkan format teks seperti sedia ada. Ia ditukar apabila teg CSS digunakan. Ia menunjukkan teks kandungan yang dipraformat.

Sintaks:

HTML mempunyai banyak teg untuk tujuan yang berbeza.

Contoh:

, dsb.

Teg pra mempunyai teg pembukaan serta teg penutup seperti teg HTML yang lain.

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

Salin selepas log masuk

Sintaks di atas digunakan apabila kita memerlukan teks kandungan yang dipraformat.

Bagaimana Pra Teg Berfungsi Dalam HTML?

Di bawah ialah penjelasan tentang cara Pra tag berfungsi:

1. Menggunakan Pre Tag Dalam Html

Kod:

<!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.

Salin selepas log masuk

Output:

Pra Tag dalam HTML

Penjelasan kepada kod di atas: Tunjukkan contoh di atas. Apabila pra-teg digunakan dalam bahagian kandungan yang diperlukan, kandungan tersebut kelihatan dalam format seperti sedia ada. Ruang dan baris seterusnya tidak diabaikan apabila teg pra digunakan pada teks.

2. Tanpa Menggunakan Pre Tag Dalam Html

Kod:

<!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>

Salin selepas log masuk

Output:

Pra Tag dalam HTML

Penjelasan kepada kod di atas: Tunjukkan contoh di atas, iaitu tanpa menggunakannya. Ruang, pemisah baris dan baris baharu diabaikan secara automatik. Halaman web menunjukkan kandungan mengikut keperluan mereka. Untuk memberi ruang dan memutuskan baris, kita perlu menggunakan tag HTML.

3. Gunakan HTML tag lain

Kod:

<!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>

Salin selepas log masuk

Output:

Pra Tag dalam HTML

Penjelasan kepada kod di atas: Tunjukkan contoh di atas, iaitu tanpa menggunakan teg pra. Tetapi daripada menggunakan teg pra, kami menggunakan teg HTML lain.
tag digunakan untuk memutuskan garisan dan aksara yang digunakan untuk ruang.

Penggunaan Pra Tag

Halaman web mengabaikan ruang dan pemisah baris jika kami tidak menggunakan teg dan atribut. Tetapi setiap baris, kita perlu menggunakan atribut ini.
Pra tag mengekalkan format kandungan asal.
Pembangun boleh menggunakan satu teg untuk blok dan bukannya menggunakan banyak teg. Kurangkan pengekodan dan mudah difahami.

Pra Tag menyokong pelayar web berikut:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Contoh untuk Dilaksanakan

Di bawah adalah contoh pelaksanaan di dalamnya:

Contoh #1

Menggunakan Teg Pra dengan teg CSS.

Kod:

<!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.

Salin selepas log masuk

Output:

Pra Tag dalam HTML

Penjelasan kepada kod di atas: Tunjukkan contoh di atas sedang menggunakannya dengan teg gaya CSS. Jika anda menggunakan teg pra maka teg gaya CSS juga boleh menukar format kandungan. Teg gaya menggunakan gaya fon, jidar dan warna teks dalam CSS.

Contoh #2

Contoh Di Bawah. Ini ialah gabungan teg HTML lain dan teg pra dengan CSS.

Kod:

<!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.

Salin selepas log masuk

Output:

Pra Tag dalam HTML

Kesimpulan

Pembangun menggunakan teg ini untuk mengurangkan pengekodan dan mendapatkan kandungan berformat. Web tidak boleh mengabaikan format kandungan dalam teg pra.

Atas ialah kandungan terperinci Pra Tag dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!