Home > Web Front-end > HTML Tutorial > Simple example of HTML text formatting

Simple example of HTML text formatting

高洛峰
Release: 2017-02-11 14:18:42
Original
1508 people have browsed it

The following editor will bring you a simple example (detailed explanation) of HTML text formatting. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

1. Text formatting: This example demonstrates how to format text in an HTML file.


##XML/HTML CodeCopy content to clipboard

  1. <html>

  2. ##<

    body>

  3. <

    b>This text is boldb>

  4. ##<
  5. br />

  6. #<
  7. strong

    >This text is strongstrong>

  8. ## <

  9. br
  10. />

  11. ##<

    big
  12. >

    This text is big##big>

    ##<
  13. br

    />
  14. <
  15. em

    >
  16. This text is emphasized
  17. < /

    em> #<

  18. br
  19. />

  20. ##<

    i
  21. >

    This text is italic

  22. i

    > <

    br
  23. />

  24. ##<small

  25. >

  26. This text is small

  27. small
  28. > ##< br

    />

  29. This text contains

    <
  30. sub

    >
  31. subscript
  32. sub
  33. >

    ##<br />

  34. ##This text contains ##<sup

  35. >

  36. superscript

  37. sup
  38. >

  39. body>

  40. ##< /

    html
  41. >

    ##The effect is as follows:

  42. 2. Preformatted text: This example demonstrates how to use the pre tag to control blank lines and spaces.


    ##XML/HTML CodeCopy content to clipboard

    1. <html>

    2. ##<

      body>

    3. <

      pre>

    4. This is
    5. Preformatted text.
    6. It preserves spaces
    7. and newlines.
    8. ##

      pre>

  43. #<
  44. p

    >pre tags are great for displaying computer code: p>

  45. ##<

  46. pre
  47. > for i

    =
  48. 1
  49. to 10

    print i

  50. next i

  51. ##

    pre
  52. >

  53. body

    > ;
  54. ##html

    >
  55. ##The effect is as follows:

3. "Computer Output" label: This example demonstrates the display effects of different "Computer Output" labels .

HTML 文本格式化的简单实例##XML/HTML Code

Copy content to clipboard


<html

>

  1. ##<body

  2. >

  3. <code

  4. >

  5. Computer code

  6. code
  7. > ##<br />

  8. <

    kbd>

Keyboard input

kbd
  • >

    <br />

  • <

    tt>

  • Teletype text

    tt
  • >

    <br />

    #<
  • samp>Sample textsamp

  • >
  • <br />

    ##<
  • var

    >

  • Computer variablevar

    >
  • <br />

  • ##<p>

  • #<

    b>

  • Note: b>These tags are often used to display computer/programming code.

    ##

    p>

  • #
  • body

    > < ;/

  • html

    >

    ##The effect is as follows:
  • 4. Address: This example demonstrates how to write an address in an HTML file.

    HTML 文本格式化的简单实例

    ##XML/HTML Code

    Copy content to clipboard

    >

    1. <

      html
    2. >

      ##<body

    3. >

    4. ##<
    5. address

      >
    6. Written by <a

      href
    7. =
    8. "mailto:webmaster@example.com"

      >Donald Ducka>.<br> Visit us at:<br

      >

    9. Example.com<br

      >

    10. ##Box 564, Disneyland<br >

    11. USA

    12. address
    13. >

    14. body
    15. >

    16. #html>

    17. The effect is as follows:

    18. 5. Abbreviations and acronyms: This example demonstrates how to implement abbreviations or initials abbreviation.

    ##XML/HTML CodeHTML 文本格式化的简单实例

    Copy content to clipboard


    <html>

    1. ##<body

      >

    2. <abbr

      title
    3. =
    4. "etcetera"

      >

    5. etc.
    6. abbr> ##<br />
    7. <acronym title="World Wide Web">WWWacronym>

    8. <p>In some browsers, title can be used to display the full version of the expression when you move the mouse over an abbreviated word . p>

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

    10. # #<

      p>Valid for both abbr and acronym elements in Netscape 6.2. p>

    11. # #

      body> ##

    12. html

      > The effect is as follows:

    ## Six, text Orientation: This example demonstrates how to change the orientation of text.

    HTML 文本格式化的简单实例

    ##XML/HTML Code

    Copy content to clipboard

    <

    html
    1. >

      ##<
    2. body

    3. >
    4. <
    5. p

    6. >
    7. If your browser supports bi-directional override (bdo), The next line will be output from right to left (rtl);

    8. p

      >
    9. ##<
    10. bdo

      dir
    11. =
    12. "rtl "

      > Here is some Hebrew text

    13. bdo

      >
    14. ##

    15. body
    16. >

    17. html>

    18. The effect is as follows:

    19. Seven, block reference: This example demonstrates how to achieve long and short inconsistency One quote.

      HTML 文本格式化的简单实例##XML/HTML Code

      Copy content to clipboard


      <html

      >

      1. ##<body

      2. >

      3. This is a long quote:

        ##<
      4. blockquote

        >
      5. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote.

      6. ##blockquote>

      7. This is the short quote:

      8. <q>

      9. This is a short quote.

      10. ##q>

    20. #<
    21. p> If you use the blockquote element, The browser will insert line breaks and margins, and the q element will not be rendered in any special way.

    22. ##
    23. p

      >

    24. #

    25. body
    26. > < ;/

    27. html
    28. > ##The effect is as follows:

    29. Eight, delete sub-effects and insert sub-effects.

      HTML 文本格式化的简单实例

      ##XML/HTML Code

      Copy content to clipboard


      <

      html

        >

      1. ##<
      2. body

        >
      3. <
      4. p

        >
      5. There are a dozen
      6. <

        del> Twentydel> <ins>十Twoins> pieces. p> # #<

      7. p
      8. >Most browsers will rewrite this to remove text and underline text.

      9. p> # #<

        p
      10. >

        Some older browsers will display deleted and underlined text as normal text.

      11. p

        > # #body

      12. >
      13. ##html >
      14. The effect is as follows: The above HTML text format This simple example (detailed explanation) is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

        For more articles related to simple examples of HTML text formatting, please pay attention to the PHP Chinese website!
    Related labels:
    source:php.cn
    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
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template