Details of various font formats in HTML web pages

This section starts with the details of text modification, so that readers can grasp the changes in various HTML font formats and create more professional web pages.
4.2 Various decorations of text In the previous section, we learned various settings for large paragraphs. The decoration of the text itself seems to be more attractive. This section starts with the details of text modification, so that readers can grasp the changes in various HTML font formats and create more professional web pages.
4.2.1 Basic tags for text style settings—
The basic tag for setting font style is , and the text contained in it is the style scope. When beginners write HTML code, is easily nested multiple times, such as text. Another situation is that the tags are nested incorrectly, such as text. In order to standardize code writing and avoid unnecessary errors, readers must be cautious when they first learn.
4.2.2 Setting the text color
Color is one of the attributes of the tag and is used to set the text color. Create a web page file in the D:\web\ directory, name it font_color.htm, and write the code as shown in Code 4.7.
Code 4.7 Font color setting: font_color.htm
<html>
<head>
<title>Font color settings</title>
</head>
<body>
Light red text: The essence of HTML learning is to use what is needed 
Dark red text: The essence of HTML learning is to use what is needed 
Light green text: The essence of HTML learning is to use what is needed 
Dark green text: The essence of HTML learning is to use what is needed 
Light blue text: The essence of HTML learning is to use what is needed 
Dark blue text: The essence of HTML learning is to use what is needed 
Light yellow text: The essence of HTML learning is to use what is needed 
Dark yellow text: The essence of HTML learning is to use what is needed 
Light cyan text: The essence of HTML learning is to use what is needed 
Dark teal text: The essence of HTML learning is to use what is needed 
Light purple text: The essence of HTML learning is to use what is needed 
Dark purple text: The essence of HTML learning is to use what is needed 
</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 Setting font color Readers can not only learn how to use the color attribute in the font tag from Code 4.7, but also become familiar with the representation of various colors.
4.2.3 Setting the text size
Size is also an attribute 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 "+" or "-" 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, name it font_size.htm, and write the code as shown in Code 4.8.
Code 4.8 Font size setting: 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 Setting the font size Readers can try adding “+” or “-” characters before the size value to set the text size more flexibly.
4.2.4 Setting the font of text
face is also an attribute of the tag, which is used to set the text font (typeface). The fonts displayed in HTML web pages are called from the browser system, so in order to keep the font consistent, it is recommended to use Songti. HTML pages also use Songti by default. Create a web page file in the D:\web\ directory, name it font_face.htm, and write the code as shown in Code 4.9.
Code 4.9 Font settings: font_face.htm
<html>
<head>
<title>Font settings</title>
</head>
<body>
The font is Songti: Qinyuanchun·Changsha-Mao Zedong 
The font is in Kaiti: Qinyuanchun·Changsha-Mao Zedong 
The font is bold: Qinyuanchun·Changsha-Mao Zedong 
The font is official script: 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 5 to facilitate readers' viewing.
4.2.5 Make text italic Use double tags to make the text italic to achieve special effects, such as the date of an article. is called an emphasis tag, and is also italic. It is currently used more frequently than the tag. Its writing method is as follows:
This is italic text
This is also italic text
4.2.6 Make text bold Use double tags to make the text bold and more eye-catching, such as the title of an article. is called a special emphasis tag, which also makes the text bold. It is currently used more frequently than the tag. Its writing method is as follows:
This is bold text
This is also bold text
4.2.7 Underline text Use double tags to add underline to the text. Below is a combination of examples of italic, bold, and underlined text. Create a web page file in the D:\web\ directory, name it font_style.htm, and write the code as shown in Code 4.10.
Code 4.10 Text decoration settings: font_style.htm
<html>
<head>
<title>Font decoration settings</title>
</head>
<body>
Italic: Qinyuanchun·Changsha-Mao Zedong 
Bold: Qinyuanchun·Changsha-Mao Zedong 
Underline: Qinyuanchun Changsha-Mao Zedong 
Italic, bold and underlined: 沁园春·长沙-毛信毛
</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 the size of all text within <body></body> to 5 to make it easier for readers to read.
— Note: When multiple tags contain the same block of text, the order of inclusion cannot be misplaced.
4.2.8 Use of multiple title styles In web page articles, in order to highlight the importance of the title, the title style is relatively special. HTML technology protects a set of style tags for titles, which are double tags <h1> to <h6>. The text size from large to small represents different levels of titles. The title tag has a characteristic that it occupies a single line, has bold text, and is centered. In this way, it is easy to set the title, and you can set multiple levels of titles. Create a web page file in the D:\web\ directory, name it 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 1</h1>
<h2>Title 2</h2>
<h3>Title 3</h3>
<h4>Title 4</h4>
<h5>Title 5</h5>
<h6>Title No. 6</h6>
<h1>Fortune Magazine: Why Google won't fail</h1>
<h3>Encountering potential problems</h3>
    Some industry insiders believe that Google, which has long monopolized the Internet search and advertising markets, may eventually decline. ...At the same time, many new plans launched by Google recently, such as the Open Handset Alliance, the universal social networking platform OpenSocial, and the possible investment of billions of dollars in bidding for wireless spectrum, have also been widely questioned.
<h3>Will continue to monopolize search</h3>
    There have been some recent articles stating that people would abandon Google in a heartbeat if a better search engine came along. But even if a better search engine does emerge, Google will still be able to stand out for some time. ...in these situations, site speed can often be the difference between winning and losing. 
</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. For example, “<” and ">” are the left bracket and right bracket of the tag. 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 do you display “<” and ">” in HTML? HTML specifies the writing methods of some special characters so that they can be displayed in 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)
™
>
>
® (Registration Symbol)
®
"" (half-width English)
"
×
×
§
§
© (copyright symbol)
©
Create a web page file in the D:\web\ directory, name it string.htm, and write the string.htm code as shown in Code 4.12.
Code 4.12 Special character settings: string.htm
<html>
<head>
<title>Special Character Settings</title>
</head>
<body>

How to display the tag: <HTML> 
How to display quotation marks: "English half-width double quotation marks" 
How to display the trademark: ™ 
How to display the registration symbol: ® 
How to display the copyright symbol: © 
Show § 
Display×

</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 Special character settings
— Note: To display the symbol & alone, you must use the code &.
4.2.10 How to more conveniently ignore the browser’s parsing of part of the HTML If you make an HTML code example similar to the one in this book in a web page, you may have to convert all the < and > into < and >, which is rather troublesome. The <plaintext> and <xmp></xmp> in the HTML code can easily solve this problem.
<plaintext> is a single tag. When it is inserted into HTML code, all the HTML tags following it become invalid. That is, the browser does not parse all the HTML tags following <plaintext> and displays them directly on the page.
<xmp></xmp> is a double tag, which only makes the tags in the contained content invalid. <xmp></xmp> is more commonly used. Create a web page file in the D:\web\ directory, name it html.htm, and write the code as shown in Code 4.13.
Listing 4.13 Ignore tag settings: html.htm
<html>
<head>
<title>Ignore tag settings</title>
</head>
<body>
<h2>Qinyuanchun·Changsha</h2>
<xmp>Standing alone in the cold autumn, the Xiang River flows north, at the head of Orange Island. Look at the mountains all red, and the forests all dyed red; The river is clear and blue, and hundreds of boats are competing for the current. </xmp>
Eagles soar in the sky, fish swim in the shallows, and all creatures in the frosty sky compete for freedom. Melancholy and desolate, I ask the boundless earth, who controls its rise and fall? 
<plaintext>
I brought along hundreds of friends to travel together, recalling the glorious past years. We are young students, in the prime of our youth; We are full of youthful vigor and ambition, full of ambition and determination. Pointing out the mountains and rivers, writing inspiring words, The marquis of the past was regarded as dirt. Do you remember paddling in the middle of the stream, with the waves stopping the boat from flying?
</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 tag settings
4.2.11 Other text modification methods In order to meet the needs of different fields, HTML also has other tags for modifying text. The more commonly used ones are superscript format tags and subscript format tags. In some cases, you may even need to use the deletion effect, that is, you can use the HTML strikethrough tag.
— The superscript format tag is a double tag , which is mostly used to express mathematical exponents, such as the square or cube of a number.
— The subscript format tag is a double tag , which is mostly used for annotations and mathematical base representation.
— The strikethrough tag is a double tag <strike></strike>, which is mostly used for deletion effects.
Create a web page file in the D:\web\ directory, name it other.htm, and write the code as shown in Code 4.14.
Code 4.14 Settings for other modifier tags: other.htm
<html>
<head>
<title>Other modification tag settings</title>
</head>
<body>

Qinyuanchun Changsha! 
Mathematical exponents: 23=8, 1002=10000 <hr />
Qinyuanchun Changsha! 
Representation of mathematical bases: 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.