What is pre in CSS style? The role of pre wrapping code tags in HTML

we useWordPress websiteNeed to learn some basics of CSS and HTML:

• Due to the CSS style files of some WordPress themes, the pre and code tag styles are not added.
• Most browsers currently supportmark.

HTML  Label example

The following is the CSS style of the pre tag (which can automatically wrap the html code) ▼

pre {
border: 1px solid #d1d1d1;
line-height: 190%;
margin: 0 0 1.75em;
max-width: 100%;
overflow: auto;
padding: 15px;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}

The following is the CSS style of the code tag ▼

code {
background: #f1f1f1;
color: #555;
margin: 0 2px;
padding: 2px 4px;
border-radius: 2px;
}

How to use:

• Please copy the above CSS tags to the WordPress theme style.css in the file.

HTML pre tag function and usage instructions

• Labels define preformatted text.
• In markup elements, the contained text usually leaves spaces and line breaks.
• The text will also be displayed in monospaced font.

Markup is often标记结合使用，以获得更精确的语义，用于标记需要在页面中呈现的源代码。

If you want to place the specified text format in HTML, you need to take advantage of the leading element's attribute.

Tips and Instructions

hint:A common use of tags is to represent the source code of a computer.

Differences between HTML 4.01 and HTML5

In HTML 4.01, the "width" attribute is deprecated and cannot be used. HTML5 does not support the "width" attribute.

attribute

Property value description

• Width number HTML5 does not support this attribute.
• This attribute is deprecated in HTML 4.01.
• Defines the maximum number of characters per line (usually 40,80, 132 or XNUMX).

global properties

• <pre>Markup supports global attributes, and see the full property sheet HTML global attributes.

Event properties

• Tags support all HTML event attributes.