Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > body text

Detailed explanation of the use of html pre tags

黄舟

Release： 2017-07-08 10:56:38

Original

3446 people have browsed it

How to use the pre tag in html

<html>
<head>
</head>
<body>
12344
</body>
</html>

Copy after login

The source code of the above web page, then I want to output the source code now -
What should I do if I use the pre tag?

<pre class="brush:php;toolbar:false">
     这里写你想写的代码~~~~

Copy after login

That’s how it is used

<html>
<head>
</head>
<body>
    12344
<pre class="brush:php;toolbar:false">
<html>
<head>
</head>
<body>
    12344
</body>
</html>

Copy after login

Copy after login

Why is it wrong to write it like this?

Allowed text in pre elements can include physical styles and content-based style variations, as well as links, images, and horizontal dividers. When placing other tags (such as the tag) inside the

 block, they are treated as if they were placed in other parts of the HTML/XHTML document. <br/>So you have to do this</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false"><html><br><head><br></head><br><body><br>    12344<br></body><br></html>

Copy after login

Note that Baidu has modified the code & lt; & gt; (without spaces) respectively represents < how to use?

textarea No problem

<textarea name="textarea" id="textarea" cols="45" rows="5">
<html>
<head>
</head>
<body>
<code><br>
</textarea>

Copy after login

I understand this time, just add 10 points, thank you.

This tag can display the layout and format of the enclosed text intact. What you input will be output unchanged, including the spaces you input, and there is no need to use
to represent spaces or carriage returns.
It is indeed a good solution for displaying source code

<pre class="brush:php;toolbar:false">
$(
function() {
$("#selectBox").mousemove(
function(event) {
$("span:eq(0)").html($("#selectArea").position().left);
$("span:eq(1)").html(event.offsetX);
if ($("#selectArea").css("position") == "absolute") {
$("#selectArea").css({ left: event.clientX - $("img").offset().left });
$("#selectArea").css({ top: event.clientY - $("img").offset().top });
}
if ($("#selectArea").css("position") == "relative") {
$("#selectArea").css({ left: -(300 - event.offsetX) });
$("#selectArea").css({ top: event.offsetY });
}
}
);
}
);
</per>

Copy after login

<html>
<head>
</head>
<body>
    12344
<pre class="brush:php;toolbar:false">
<html>
<head>
</head>
<body>
    12344
</body>
</html>

Copy after login

Copy after login

Why is it wrong to write like this?

Oh, if you want to write HTML code in per, then you have to remember that
<> cannot be written directly as <>, but must be written in entity form

< 小于号 < < 
> 大于号 > > 
& 和号 & & 
" 引号 " " 
&#39; 撇号  &#39; (IE不支持) &#39;

Copy after login

The above is the detailed content of Detailed explanation of the use of html pre tags. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

html Label Detailed explanation

source：php.cn

Previous article：Introduction to new features of CSS3 Next article：A brief introduction to the html

tag

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

Video material on building your own PHP framework from scratch

2023-03-15 16:54:01
Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function

2023-03-15 12:26:02
Introduction to how to receive emails in IMAP in php

2023-03-14 18:58:01
Example of how to quickly implement array deduplication in PHP

2023-03-14 11:30:01
Summary of the use of all attributes of the tag in html

1970-01-01 08:00:00
Summary of basic knowledge of PHP (necessary for beginners to get started)

2023-03-16 15:20:01
Introduction to the use of typeof in JavaScript

1970-01-01 08:00:00
Introduction to the use of confirm() method in JavaScript

1970-01-01 08:00:00
A detailed introduction to the HTML5 Placeholder attribute

1970-01-01 08:00:00
How to implement single-select, multiple-select and reverse-select in forms in ReactJS

1970-01-01 08:00:00

Latest Issues

PX automatic conversion to REM error <style>html { font-size: calc(100vw / 3.75); }...

From 2024-04-16 09:34:16

0

0

4687

The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...

From 2024-04-06 21:58:04

0

1

800

How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...

From 2024-04-06 20:22:15

0

1

454

How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...

From 2024-04-06 20:02:10

0

2

543

Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...

From 2024-04-06 17:40:41

0

2

410

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template