Detailed modification of various font formats of HTML web pages

Author：Eve Cole Update Time：2025-06-07 00:48:02

This section starts with the detailed modification of the text, allowing readers to grasp the changes in various font formats of HTML and create more professional web pages.

4.2 Diversified text modification

In the previous section, I learned various settings of large paragraphs, which seemed more attractive to the text itself. This section starts with the detailed modification of the text, allowing readers to grasp the changes in various font formats of HTML and create more professional web pages.

4.2.1 Basic labels for text style settings—

The basic tag for setting font styles is , and the text contained in it is the style action area. In the writing of HTML code for beginners, is easily nested by multiple sources, such as text. Another situation is label nesting misalignment, such as text. In order to standardize the writing of code and avoid unnecessary mistakes, readers must be cautious when learning.

4.2.2 Set the color of the text

color is one of the attributes of the tag, which is used to set the text color. Create a web page file in the D:/web/ directory, named font_color.htm, and write the code as shown in code 4.7.

Code 4.7 Setting of font color: font_color.htm

<html>

<head>

<title>Font color settings</title>

</head>

<body>

Light red text: The essence of HTML learning is to use whatever it should be

Crimson text: The essence of HTML learning is to use whatever it should be

Light green text: The essence of HTML learning is to use whatever it should be

Dark green text: The essence of HTML learning is to use whatever it should be

Light blue text: The essence of HTML learning is to use whatever it should be

Dark blue text: The essence of HTML learning is to use whatever it should be

Light yellow text: The essence of HTML learning is to use whatever it should be

Dark yellow text: The essence of HTML learning is to use whatever it should be

Light cyan text: The essence of HTML learning is to use whatever it should be

Dark blue text: The essence of HTML learning is to use whatever it should be

Light purple text: The essence of HTML learning is to use whatever it should be

Deep purple text: The essence of HTML learning is to use whatever it should be

</body>

</html>

Enter http://localhost/font_color.htm in the browser address bar, and the browsing effect is shown in Figure 4.7.

Figure 4.7 Font color settings

Readers can not only learn how the color attribute is used in the font tag from code 4.7, but also be familiar with the representation methods of various colors.

4.2.3 Set the size of the text

size is also a property of the tag, which is used to set the text size. The value of size is 1-7, and the default is 3. We can add + and - characters before the size attribute value to specify the increment or decrement relative to the initial value of the font size. Create a web page file in the D:/web/ directory, named font_size.htm, and write the code as shown in Code 4.8.

Code 4.8 Setting of font size: font_size.htm

<html>

<head>

<title>Font size settings</title>

</head>

<body>

size is 1: HTML learning

size is 2: HTML learning

size is 3: HTML learning

size is 4: HTML learning

size is 5: HTML learning

size is 6: HTML learning

size is 7: HTML learning

</body>

</html>

Enter http://localhost/font_size.htm in the browser address bar, and the browsing effect is shown in Figure 4.8.

Figure 4.8 Font size settings

Readers can try to add + and - characters before the size value to set the text size more flexibly.

4.2.4 Set the font of the text

face is also a property of the tag, which is used to set text fonts (fonts). The fonts displayed in HTML web pages are called from the browsing system, so in order to keep the font consistent, it is recommended to use Song font, and HTML pages also use Song font by default. Create a web page file in the D:/web/ directory, named font_face.htm, and write the code as shown in Code 4.9.

Code 4.9 Font font settings: font_face.htm

<html>

<head>

<title>Font font settings</title>

</head>

<body>

The font is Song font: Qinyuanchun·Changsha-Mao Zedong

The font is in Kaishi: Qinyuanchun·Changsha-Mao Zedong

The font is bold: Qinyuanchun·Changsha-Mao Zedong

The font is Lishu: Qinyuanchun·Changsha-Mao Zedong

</body>

</html>

Enter http://localhost/font_face.htm in the browser address bar, and the browsing effect is shown in Figure 4.9.

Figure 4.9 Font settings

The author sets the text size of the modified font to No. 5 for readers to view.

4.2.5 Make the text tilt

Using double tags can tilt the text to be applied, achieving special effects, such as the date of the article. is called an emphasis tag, and italicized. It is currently used more frequently than tags. The writing method is as follows:

This is italic text

This is also italics

4.2.6 Make text bold

Using double tags can make the text that is applied bold, making the text more eye-catching, such as the title part of the article. is called a special emphasis on labels, and it is also bold in text. It is currently used more frequently than tags. The writing method is as follows:

This is bold text

This is also bold text

4.2.7 Underline the text

Use double tags to add underscores to the applied text. The following is a comprehensive example of text tilt, bold and underlined. Create a web page file in the D:/web/ directory, named font_style.htm, and write the code as shown in code 4.10.

Code 4.10 Text modification settings: font_style.htm

<html>

<head>

<title>Font modification settings</title>

</head>

<body>

Italics: Qinyuanchun·Changsha-Mao Zedong

Bolded: Qinyuanchun·Changsha-Mao Zedong

Underline: Qinyuanchun·Changsha-Mao Zedong

Italic bold underline: Qinyuanchun·Changsha-Mao Zedong

</body>

</html>

Enter http://localhost/font_style.htm in the browser address bar, and the browsing effect is shown in Figure 4.10.

Figure 4.10 Font modification settings

The author sets all text sizes in <body></body> to No. 5 for readers to view.

— Note: When multiple tags contain the same piece of text, their inclusion order cannot be misaligned.

4.2.8 Use of multiple title styles

In web articles, in order to highlight the importance of the title, the style of the title is relatively special. HTML technology protects a set of style tags for titles, namely double tags <h1> to <h6>, and the text sizes represent different levels of titles from large to small. The title tag has a feature, which is exclusive to one line, bold in the text, and center in the text. In this way, it is easy to set the title and can set multi-level titles. Create a web page file in the D:/web/ directory, named font_h.htm, and write the code as shown in code 4.11.

Code 4.11 Title settings: font_h.htm

<html>

<head>

<title>Title settings</title>

</head>

<body>

<h1>Title No. 1</h1>

<h2>Title No. 2</h2>

<h3>Title No. 3</h3>

<h4>Title No. 4</h4>

<h5>Title No. 5</h5>

<h6>Title No. 6</h6>

<h1>Fortune Magazine: Why doesn't Google fall after its prosperity?</h1>

<h3> Encountering potential problems</h3>

Some industry insiders believe that Google may decline after a long-term monopoly on the Internet search and advertising market. ...At the same time, Google's recent new plans, such as the Open Mobile Alliance, the universal platform of social networking website OpenSocial, and the possible investment of billions of dollars in bidding for the wireless frequency band, have also been widely questioned.

<h3> will continue to monopolize search</h3>

Recent articles say that if better search engines appear, people will give up on Google without hesitation. But even if there are really better search engines, Google can still stand firm for a while. ...In this case, website speed often becomes the key to the outcome.

</body>

</html>

Enter http://localhost/font_h.htm in the browser address bar, and the browsing effect is shown in Figure 4.11.

Figure 4.11 Title settings

4.2.9 Learn to handle special characters in web pages

In HTML, some characters have special meanings, such as < and > are the left and close brackets of the tag, while the tag controls the display of HTML. The tag itself can only be parsed by the browser and cannot be displayed on the page. So, how to display <and> in HTML? HTML specifies the way to write some special characters to be displayed on web pages, as shown in Table 4.1.

Table 4.1 Special characters in HTML

Special symbols

HTML code

Special symbols

HTML code

™ (Trademark symbol)

™

® (Register Symbol)

(Half-width in English)

©(Copyright symbol)

Create a web page file in the D:/web/ directory, named string.htm, and write the string.htm code as shown in code 4.12.

Code 4.12 Settings of special characters: string.htm

<html>

<head>

<title>Settings of special characters</title>

</head>

<body>

How to display tags: <HTML>

How to display quotes: "English half-width double quotes"

Trademark display method: ™

How to display registration symbols: ®

Show§

Show ×

</body>

</html>

Enter http://localhost/string.htm in the browser address bar, and the browsing effect is shown in Figure 4.12.

Figure 4.12 Settings of special characters

— Description: The symbols must be displayed separately & must be used with code &.

4.2.10 How to more conveniently ignore browser parsing of some HTML

If you make an HTML code example similar to this book on a web page, you may have to convert all < and > into < and it will seem more troublesome. <plaintext> and <xmp></xmp> in HTML code can easily solve this problem.

<plaintext> is a single tag. When it is inserted into HTML code, all HTML tags after it are invalid. That is, the browser does not parse all HTML tags after <plaintext> and displays them directly on the page.

<xmp></xmp> is a double tag, which only invalidates the tags in the content it contains, and the use of <xmp></xmp> is more common. Create a web page file in the D:/web/ directory, named html.htm, and write the code as shown in code 4.13.

Code 4.13 Ignore the settings of tags: html.htm

<html>

<head>

<title>Ignore the settings of tags</title>

</head>

<body>

<h2>Qinyuanchun·Changsha</h2>

<xmp>Independent of the cold autumn, Go to the north of the Xiangjiang River, the head of Orange Island. Look at the red mountains and the forests are dyed; The river is green and clear, and hundreds of boats compete for the current. </xmp>

Eagles strike the sky, fish swim in the shallow bottom, and all kinds of species compete for freedom in the frost sky. When I am sad about the vast land, who is responsible for the ups and downs?

I brought hundreds of couples to travel, and I recalled the past glorious years. Classmates are young, in their prime; The scholar is full of enthusiasm and courage. Tell the country and inspire words, The manure of the dirt was ten thousand households back then. Have you ever remembered that when you hit the water in the middle, the waves will stop flying boats!

</body>

</html>

Enter http://localhost/string.htm in the browser address bar, and the browsing effect is shown in Figure 4.13.

Figure 4.13 Ignore the settings of tags

4.2.11 Other text modification methods

To meet the needs of different fields, HTML has other tags that modify text. The most commonly used ones are superscript format labels and subscript format labels. In some cases, you even need to use the deletion effect, and you can use the HTML mid-scribing tag.

— The superscript format tag is double tag , which is mostly used to represent mathematical exponents, such as the square or cubic meter of a certain number.

— The subscript format label is double label , which is mostly used for annotation and mathematical basic representation.

— The mid-score label is double label <strike></strike>, which is mostly used for deletion effects.

Create a web page file in the D:/web/ directory, named other.htm, and write the code as shown in Code 4.14.

Code 4.14 Other modification tag settings: other.htm

<html>

<head>

<title>Other settings for modifying tags</title>

</head>

<body>

QinyuanchunChangsha!

Representation of mathematical index: 23=8, 1002=10000 <hr />

QinyuanchunChangsha!

Representation of mathematical basic numbers: log381=4, log5125=3 <hr />

Deletion effect: <strike>I was deleted</strike>

</body>

</html>

Enter http://localhost/other.htm in the browser address bar, and the browsing effect is shown in Figure 4.14.

Figure 4.14 Settings of other modification tags