Simple example of HTML text formatting (detailed explanation)

Simple example of HTML text formatting (detailed explanation)

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

XML/HTML CodeCopy content to clipboard
  1. < html >   
  2.   
  3. < body >   
  4.   
  5. < b > This text is bold </ b >   
  6.   
  7. < br   />   
  8.   
  9. < strong > This text is strong </ strong >   
  10.   
  11. < br   />   
  12.   
  13. < big > This text is big </ big >   
  14.   
  15. < br   />   
  16.   
  17. < em > This text is emphasized </ em >   
  18.   
  19. < br   />   
  20.   
  21. < i > This text is italic </ i >   
  22.   
  23. < br   />   
  24.   
  25. < small > This text is small </ small >   
  26.   
  27. < br   />   
  28.   
  29. This text contains
  30. < sub > subscript </ sub >   
  31.   
  32. < br   />   
  33.   
  34. This text contains
  35. < sup > superscript </ sup >   
  36.   
  37. </ body >   
  38. </ html >   

The effect is as follows:

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.   
  3. < body >   
  4.   
  5. < pre >   
  6. This is
  7. Preformatted text.
  8. It preserves spaces
  9. and line breaks.
  10. </ pre >   
  11.   
  12. The < p > pre tag is great for displaying computer code: </ p >   
  13.   
  14. < pre >   
  15. for i = 1 to 10
  16. print i
  17. next i
  18. </ pre >   
  19.   
  20. </ body >   
  21. </ html >   

The effect is as follows:

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

XML/HTML CodeCopy content to clipboard
  1. < html >   
  2.   
  3. < body >   
  4.   
  5. < code > Computer code </ code >   
  6. < br   />   
  7. < kbd > Keyboard input </ kbd >   
  8. < br   />   
  9. < tt > Teletype text </ tt >   
  10. < br   />   
  11. < samp > Sample text </ samp >   
  12. < br   />   
  13. < var > Computer variable </ var >   
  14. < br   />   
  15.   
  16. < p >   
  17. < b > Comment: </ b > These tags are often used to show computer/programming code.
  18. </ p >   
  19.   
  20. </ body >   
  21. </ html >   

The effect is as follows:

4. Address: This example demonstrates how to write an address in an HTML file.

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html >   
  2. < html >   
  3. < body >   
  4.   
  5. < address >   
  6. Written by < a   href = "mailto:[email protected]" > Donald Duck </ a > . < br >     
  7. Visit us at: < br >   
  8. Example.com < br >   
  9. Box 564, Disneyland < br >   
  10. USA
  11. </ address >   
  12.   
  13. </ body >   
  14. </ html >   

The effect is as follows:

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

XML/HTML CodeCopy content to clipboard
  1. < html >   
  2.   
  3. < body >   
  4.   
  5. < abbr   title = "etcetera" > etc. </ abbr >   
  6. < br   />   
  7. < acronym   title = "World Wide Web" > WWW </ acronym >   
  8.   
  9. < p > In some browsers, title can be used to display the full version of the expression when you move your mouse over the abbreviation. </ p >   
  10.   
  11. <p> Only works with acronym elements in IE 5 . </ p >   
  12.   
  13. < p > Valid for both the abbr and acronym elements in Netscape 6.2. </ p >   
  14.   
  15. </ body >   
  16. </ html >   

The effect is as follows:

6. Text direction: This example demonstrates how to change the direction of text.

XML/HTML CodeCopy content to clipboard
  1. < html >   
  2.   
  3. < body >   
  4.   
  5. < p >   
  6. If your browser supports bi-directional override (bdo), the next line will be output right to left (rtl);
  7. </ p >   
  8.   
  9. < bdo   dir = "rtl" >   
  10. Here is some Hebrew text
  11. </ bdo >   
  12.   
  13. </ body >   
  14. </ html >   

The effect is as follows:

7. Block quotations: This example demonstrates how to implement quotations of varying lengths.

XML/HTML CodeCopy content to clipboard
  1. < html >   
  2.   
  3. < body >   
  4.   
  5. Here is the long quote:
  6. < blockquote >   
  7. 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.
  8. </ blockquote >   
  9.   
  10. Here is the short quote:
  11. < q >   
  12. This is a short quote.
  13. </ q >   
  14.   
  15. < p >   
  16. When using the blockquote element, the browser inserts line breaks and margins, while the q element does not have any special rendering.
  17. </ p >   
  18.   
  19. </ body >   
  20. </ html >   

The effect is as follows:

8. Delete sub-effects and insert sub-effects.

XML/HTML CodeCopy content to clipboard
  1. < html >   
  2.   
  3. < body >   
  4.   
  5. < p > There are < del > twenty </ del > in a dozen   < ins > twelve </ ins > pieces. </ p >   
  6.   
  7. < p > Most browsers will rewrite this to strikethrough and underline the text. </ p >   
  8.   
  9. < p > Some older browsers display struck-through and underlined text as normal text. </ p >   
  10.   
  11. </ body >   
  12. </ html >   

The effect is as follows:

The above simple example of HTML text formatting (detailed explanation) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<:  Introduction to Apache deployment of https in cryptography

>>:  Three ways to create a gray effect on website images

Recommend

How many common loops do you know about array traversal in JS?

Preface As a basic data structure, arrays and obj...

JavaScript to implement login slider verification

This article example shares the specific code of ...

How to build a private Docker repository using Harbor

Table of contents 1. Open source warehouse manage...

Analysis of the implementation process of Nginx high availability solution in production environment

Preparation: 192.168.16.128 192.168.16.129 Two vi...

Analysis of the process of building a LAN server based on http.server

I don’t know if you have ever encountered such a ...

A detailed introduction to the Linux directory structure

When you first start learning Linux, you first ne...

Share 20 excellent web form design cases

Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...

How to develop uniapp using vscode

Because I have always used vscode to develop fron...

VirtualBox CentOS7.7.1908 Python3.8 build Scrapy development environment [graphic tutorial]

Table of contents environment Install CentOS Conf...

A record of the pitfalls of the WeChat applet component life cycle

The component lifecycle is usually where our busi...

CSS achieves the effect of aligning multiple elements at both ends in a box

The arrangement layout of aligning the two ends o...

Vue.js implements music player

This article shares the specific code of Vue.js t...

CentOS 7 configuration Tomcat9+MySQL solution

Configure Tomcat First install Tomcat Installing ...

Detailed explanation of nginx optimization in high concurrency scenarios

In daily operation and maintenance work, nginx se...

MySQL Series 3 Basics

Table of contents Tutorial Series 1. Introduction...