Home > Article > Web Front-end > Detailed modification of various font formats for HTML web pages_HTML/Xhtml_Web page production
Detailed modification of various font formats for HTML web pages_HTML/Xhtml_Web page production
- WBOYOriginal
- 2016-05-16 16:43:343800browse
This section starts with the detailed modification of text, so that readers can grasp the changes in various font formats of HTML and create more professional web pages.
4.2 Diverse modifications of text
In the previous section, we learned various settings for large paragraphs, and it seems more attractive to modify the text itself. This section starts with the detailed modification of text, so that readers can grasp the changes in various font formats of HTML and create more professional web pages.
4.2.1 Basic tags for text style setting—
The basic tag for setting font styles is , and the text included in it is the style scope. In beginners' HTML code writing, is easily nested multiple times, such as text . Another situation is misaligned label nesting, such as
text
. In order to standardize the writing of code and avoid unnecessary errors, readers must be cautious when learning.4.2.2 Set text color
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, name it font_color.htm, and write the code as shown in Code 4.7.
Code 4.7 Font color setting: font_color.htm
Light red text: The essence of HTML learning is to use whatever it is supposed to be
Dark red text: The essence of HTML learning is to use whatever it is supposed to be
Light green text: The essence of HTML learning is to use whatever it is supposed to be
Dark green text: The essence of HTML learning is to use whatever it is supposed to be
Light blue text: The essence of HTML learning is to use whatever it is supposed to be
Dark blue text: The essence of HTML learning is to use whatever it is supposed to be
Light yellow text: The essence of HTML learning is to use whatever it is supposed to be
Dark yellow text: The essence of HTML learning is to use whatever it is supposed to be
Light cyan text: The essence of HTML learning is to use whatever it is supposed to be
Dark cyan text: The essence of HTML learning is to use whatever it is supposed to be
Light purple text: The essence of HTML learning is to use whatever it is supposed to be
Dark purple text: The essence of HTML learning is to use whatever it is supposed to be
Enter http://localhost/font_color.htm in the browser address bar, and the browsing effect is as shown in Figure 4.7.
Figure 4.7 Font color setting
Readers can not only learn the usage of the color attribute in the font tag from Code 4.7, but also become familiar with the representation methods of various colors.
4.2.3 Set text size
size is also an attribute of the tag, 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
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
Enter http://localhost/font_size.htm in the browser address bar, and the browsing effect is as shown in Figure 4.8.
Figure 4.8 Font size setting
Readers can try adding "+" or "-" characters in front of the size value to set the text size more flexibly.
4.2.4 Set text font
face is also an attribute of the tag, which is used to set the text font (font style). The fonts displayed in HTML web pages are called from the browser system, so in order to keep the fonts 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, name it font_face.htm, and write the code as shown in Code 4.9.
Code 4.9 Font setting: font_face.htm
The font is Song style: Qinyuanchun·Changsha-Mao Zedong
The font is in regular script: Qinyuanchun·Changsha-Mao Zedong
The font is bold: Qinyuanchun·Changsha-Mao Zedong
The font is official script: Qinyuanchun·Changsha-Mao Zedong
Enter http://localhost/font_face.htm in the browser address bar, and the browsing effect is as shown in Figure 4.9.
Figure 4.9 Font setting
The author sets the text size of the modified font part to size 5 for the convenience of readers.
4.2.5 Make text tilt
Use double tags to tilt the text to achieve special effects, such as the date of an article. is called an emphasis tag and is also italicized. It is currently used more frequently than the tag. Its writing method is as follows:
This is italicized text
This is also italicized text
4.2.6 Make text bold
Use double tags to bold the text to make it more eye-catching, such as the title of an article. is called a special emphasis tag, and the text is also bold. It is currently used more frequently than the tag. The writing method is as follows:
This is bold text
This is also bold text
4.2.7 Underline text
Use the double tag to add an underline to the affected text. Here's a comprehensive example of italicized, bolded, 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 modification settings: font_style.htm
Italic: Qinyuanchun·Changsha-Mao Zedong
Bold: Qinyuanchun·Changsha-Mao Zedong
Underline: Qinyuanchun·Changsha-Mao Zedong
Italics Bold Underline: Qinyuanchun·Changsha-Mao Zedong
Enter http://localhost/font_style.htm in the browser address bar, and the browsing effect is as shown in Figure 4.10.
Figure 4.10 Font modification settings
The author sets the size of all text within to size 5 for the convenience of readers.
— Note: When multiple tags contain the same text, their inclusion order cannot be misplaced.
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, which are double tags
to . The text size from large to small represents different levels of titles. The title tag has a characteristic: it occupies an exclusive line, the text is bold, and the text is centered. In this way, it is very easy to set the title, and multi-level titles can be set. 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 setting: font_h.htm
Title settings
Title No. 1
Title No. 2
Title No. 3
Title No. 4
Title No. 5
Title No. 6
Fortune Magazine: Why Google won’t prosper and then decline
Encountering potential problems
Code 4.11 Title setting: font_h.htm
Title No. 1
Title No. 2
Title No. 3
Title No. 4
Title No. 5
Title No. 6
Fortune Magazine: Why Google won’t prosper and then decline
Encountering potential problems
Some people in the industry believe that Google, which has monopolized the Internet search and advertising market for a long time, may prosper and then decline. ...At the same time, many new plans launched by Google recently, such as the Open Mobile Alliance, the general platform for social networking sites OpenSocial, and the possible investment of billions of dollars in bidding for wireless spectrum bands, have also been widely questioned.
will continue to monopolize search
There are some articles recently saying that if a better search engine appears, people will abandon Google without hesitation. But even if a better search engine does come along, Google will still be around for a while. ...In this case, site speed often becomes the difference between victory and defeat.
Enter http://localhost/font_h.htm in the browser address bar, and the browsing effect is as 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, "" is the left and right brackets of the tag, and the tag controls the display of HTML. The tag itself can only be parsed by the browser and cannot be used on the page. displayed in. So, how to display "" in HTML? HTML specifies how to write 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)
®
"" (English half-width)
"
×
×
§
§
© (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
How to display the
tag:
How to display quotation marks: "English half-width double quotation marks"
How to display the trademark: ™
Display method of registration symbol: ®
How to display the copyright symbol: ©
Show§
Show ×
Enter http://localhost/string.htm in the browser address bar, and the browsing effect is as shown in Figure 4.12.
Figure 4.12 Special character settings
— Note: To display the symbol & separately, the code & must be used.
4.2.10 How to more conveniently ignore the browser’s parsing of part of HTML
If you make an HTML code example similar to the one in this book on a web page, I'm afraid you have to convert all into < and >, which seems troublesome.