HTML text formatting
HTML can define many elements for formatted output. For example: bold, italic, text direction, etc. These formatted tags can be divided from two aspects.
According to the label function, it can be divided into:
Text formatting label
'Computer output' label
Quotes and term definitions Tags
can be divided into:
First look at text formatting from the perspective of tag function implementation .
1. Content-based style tag
Content-based style tells the browser that the text it contains has a special meaning. Context or usage. Then the browser will apply a format consistent with the meaning, context or usage to the text.Content-based style tags have the following types:1) < ;abbr> represents an abbreviated form2) <acronym>defines an abbreviation that takes only the first letter3) <code> is used to represent computer source code or other machine-readable code.. 4) <dfn>Mark those definitions of special terms or phrases.5) <em>Tell the browser that the contained text is for emphasis.6) <kbd> represents the text to be input from the keyboard, and the browser uses a fixed-width font to display the text 7) The <strong> tag is the same as the <em> tag, indicating the modification of the text. Emphasis. But the tone of <strong> is stronger.8) <var> represents the variable name or the value provided by the user.Content-based style is to use different The fonts and formats used to display the text surrounded by tags have special meanings. If you just want to produce different text display effects without these special meanings, it is best not to use these tags. For example: <strong> ; indicates emphasis, and the text it contains is displayed in bold and bold. However, if you just want to produce bold and bold text, do not use the <strong> tag. You can use the <b> tag.2. Tags based on physical styles
## Content-based styles tell the browser that these tags represent special meanings, which can make the browser better Realistic text. At special times, the text may need to be displayed in a special way, which requires the use of physical styles. 9 physically based styles: bold (bold) italic <Italic) monospaced (monospaced), underline (underlined), strikethrough (strikethrough) enlarge (larger), reduce (smaller), superscript (superscripted), subscript (subscribed)
bold<b>
Large font <big>
italic<i>
<s>Delete, it is no longer commonly used, you can use <del> instead.
<small>small Font
<strike>underline
<sub>superscript
<sup>subscript
<tt>Monospace font.
That’s it for the functional division. Let’s look at the functional classification. Since there are many tags that overlap with the above tags, only the details are given below. The tags that are not included in the introduction.
Text formatting tags.
<b> Define bold font
<big> Define large font <small> Define small font
<em> Define emphasized text
<i> Define italic font
<strong> Define stronger emphasis
<sub> Define superscript
<sup> Define subscript
<ins> Define insertion word.
<del> Define deletion
<s> Deprecated ,del instead
<strike> The use of ,del instead is deprecated.
Computer output tag
Tags
Description
#<code> Defines computer code.
<kbd> Define the keyboard code.
Quotes, citations and definitions of terms
## Tags Description
<abbr> Define abbreviation.
<acronym> Definition of acronym.
<address> Define the address.
<bdo> Define the text direction.
<blockquote> Define long quotes.
<q> Define short quotes.
<cite> Definition reference, citation.
<dfn> Define a definition project.
Example:
##
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br /> <i>This text is italic</i> <br /> <small>This text is small</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>superscript</sup> </body> </html>
Example 2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> <p> <b>注释：</b>这些标签常用于显示计算机/编程代码。 </p> </body> </html>
