简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

Simple example of HTML text formatting

高洛峰
高洛峰Original
2017-02-11 14:18:421469browse

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>

  3. ##<

    body>

  5. <

    b>This text is boldb>

    7. ##<

  7. br />

  8. #<
  9. strong

    >This text is strongstrong>

  10. ## <

    11. br

  11. />

  12. ##<

    big
  13. >

    This text is big##big>

    ##<
  14. br

    />

  15. <
  16. em

    >
    17. This text is emphasized
  17. < /

    em> #<

    18. br

  18. />

  19. ##<

    i
  20. >

    This text is italic

  21. i

    > <

    br
  22. />

  23. ##<small

    24. >

  24. This text is small

    25. small

  25. > ##< br

    />

  27. This text contains

    <
  28. sub

    >
    29. subscript

  29. sub
  30. >

    ##<br />

  32. ##This text contains ##<sup

    33. >

  33. superscript

    34. sup

  34. >

  35. body>

  36. ##< /

    html
  37. >

    ##The effect is as follows:

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

    3. ##<

      body>

    5. <

      pre>

      6. This is

      7. Preformatted text.

      8. It preserves spaces

      9. and newlines.

      10. ##

      pre>

  39. #<
  40. p

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

  41. ##<

    42. pre

  42. > for i

    =
    43. 1
  43. to 10

    print i

  44. next i

  45. ##

    pre
  46. >

    47. body

    > ;

  47. ##html

    >

  48. ##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. >

  4. Computer code

    5. code

  5. > ##<br />

  6. <

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

    3. ##<
    4. address

      >

    5. Written by <a

      href
      6. =
    6. "mailto:webmaster@example.com"

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

      >

    7. Example.com<br

      >

    8. ##Box 564, Disneyland<br >

    9. USA

      10. address

    10. >

      12. body

    12. >

    13. #html>

    14. The effect is as follows:

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

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

    Copy content to clipboard


    <html>

    1. ##<body

      >

    3. <abbr

      title
      4. =
    4. "etcetera"

      >

      5. etc.
    5. abbr> ##<br />

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

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

    12. # #<

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

      14. # #

      body> ##

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

    4. p

      5. >

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

      6. p

      >

    6. ##<
    7. bdo

      dir
      8. =
    8. "rtl "

      > Here is some Hebrew text

    9. bdo

      >

    10. ##

      11. body

    11. >

    12. html>

    13. The effect is as follows:

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

        >

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

      7. ##blockquote>

      9. This is the short quote:

      10. <q>

      11. This is a short quote.

      12. ##q>

      15. #<

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

    16. ##
    17. p

      >

    18. #

      19. body

    19. > < ;/

      20. html

    20. > ##The effect is as follows:

      21. 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
      5. <

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

        6. p

      6. >Most browsers will rewrite this to remove text and underline text.

        7. p> # #<

        p
      7. >

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

      8. p

        > # #body

        9. >

      10. ##html >

      11. 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!
    Statement：
    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
    Previous article：A brief discussion on html ordered lists, unordered lists and definition listsNext article：A brief discussion on html ordered lists, unordered lists and definition lists

    Related articles

    See more