HTML Learning (c) Text formatting

Source: Internet
Author: User

HTML text formatting
HTML can define a number of elements for formatting output, such as bold and italic characters.
Example 1: This example shows how to format text in an HTML file

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


Example 2: This example shows how to use the Pre tag to control blank lines and spaces.

<body>

<pre>
This is
The pre-formatted text.
It retains a space
and line breaks.
</pre>

<p>pre tags are good for displaying computer code:</p>

<pre>
For i = 1 to 10
Print I
Next I
</pre>

</body>


Example 3: This example shows the effect of different computer output labels.

<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> Note:</b> These tags are often used to display computer/programming code.
</p>

</body>


Example 4: This example shows how to write an address in an HTML file.
<! DOCTYPE html>

<body>

<address>
Written by <a href= "Mailto:[email protected]" >donald duck</a>.<br>
Visit US at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>


Example 5: This example shows how to implement abbreviations or acronyms.

<body>

<abbr title= "Etcetera" >etc.</abbr>
<br/>
<acronym title= "World Wide Web" >WWW</acronym>

<p> in some browsers, when you move your mouse over an abbreviated word, title can be used to show the full version of the expression. </p>

<p> is only valid for acronym elements in IE 5. </p>

<p> is valid for ABBR and acronym elements in Netscape 6.2. </p>

</body>


Example 6: This example shows how to change the direction of text.

<body>

<p>
If your browser supports bi-directional override (BDO), the next line will output from right to left (RTL);
</p>

<bdo dir= "RTL" >
Here is some Hebrew text
</bdo>

</body>


Example 7: This example shows how to implement a different length of the quote.

<body>

This is a long reference:
<blockquote>
This is a long reference. This is a long reference. This is a long reference. This is a long reference. This is a long reference. This is a long reference. This is a long reference. This is a long reference. This is a long reference. This is a long reference. This is a long reference.
</blockquote>

This is a short quote:
<q>
This is a short reference.
</q>

<p>
With the BLOCKQUOTE element, the browser inserts line breaks and margins, and the Q element does not have any special rendering.
</p>

</body>


Example 8: This example shows how to mark the deletion of text and insert text.

<body>

<p> a dozen <del> 20 </del> <ins> 12 </ins> pieces. </p>

<p> most browsers will be rewritten to delete text and underline text. </p>

<p> some old-fashioned browsers will display deleted text and underlined text as plain text. </p>

</body>


text formatting tags
<b> define bold text    
<big>   define large characters
<em>   Define keywords
<i>   define italic
<small> defines the small word
<strong>   define aggravating tone
<sub >    define subscript
<sup> define superscript
<ins>   Define insert word
<u>   not approved for use. Use styles (style) instead of


"computer output" label
<code> define computer code
<kbd>   define keyboard code
< samp>    definition See calculation code sample
<tt>   define self code
<var> define variable
<pre> define pre-formatted text


References, citations, and terminology definitions
<abbr> Defining abbreviations
<acronym> Defining acronyms
<address> Define Addresses
<bdo> Define text orientation
<blockquote> Define long references
<q> define short references
<cite> defining citations, citations
<dfn> Define a definition project

HTML Learning (c) Text formatting

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.