Detailed modification of HTML webpage fonts _ HTML/Xhtml _ webpage Creation

Source: Internet
Author: User
Tags html code example
This section starts with text details, allowing readers to grasp the changes in various HTML font formats and create more professional web pages. 4.2 diversified modifier of text the previous section describes the various settings of Large sections, and it seems more attractive to the modifier of the text itself. This section starts with the vertices of text, allowing readers to start with the vertices of text, so that they can grasp the changes in the HTML font formats and create more professional web pages.
4.2 diversified text Modification
In the previous section, I learned various settings for large sections, which seem more attractive for text modification. This section starts with text details, allowing readers to grasp the changes in various HTML font formats and create more professional web pages.
4.2.1 basic labels for text style settings-
The basic label for setting a font style is that the text contained in it is the style zone. In the compilation of HTML code for beginners, it is easy to embed multiple types of codes, such as text. Another case is tag nesting dislocation, such

Text

. In order to standardize code writing and avoid unnecessary errors, readers must be cautious at the beginning.
4.2.2 set the text color
Color is one of the attributes of a tag and is used to set the text color. Create a webpage file under D: \ web \ directory and name it font_color.htm. Write the code as shown in code 4.7.
Code 4.7 font_color.htm


Font color settings


Light red text: the essence of HTML learning is what we use.

Deep red text: the essence of HTML learning is what to use.

Light green text: the essence of HTML learning is what we use.

Dark green text: the essence of HTML learning is what to use.

Light blue text: the essence of HTML learning is what to use.

Dark blue text: the essence of HTML learning is what we use.

Light yellow text: the essence of HTML learning is what it is.

Deep-yellow text: the essence of HTML learning is what we use.

Light blue text: the essence of HTML learning is what it is.

Deep Blue text: the essence of HTML learning is what it is.

Light purple text: the essence of HTML learning is what it is.

Deep Purple text: the essence of HTML learning is what we use.



Enter http: // localhost/font_color.htm in the address bar of the browser. The browsing effect is 4.7.

. 7 font color settings
The reader can not only learn the usage of the color attribute in the font tag from code 4.7, but also be familiar with the representation of various colors.
4.2.3 set the text size
Size is also a label attribute used to set the text size. The value of size is 1-7. The default value is 3. We can add the "+" and "-" characters before the size attribute value to specify the increment or decrement relative to the initial value of the font size. Create a webpage file under the D: \ web \ directory and name it font_size.htm. Write the code as shown in code 4.8.
Code 4.8 font_size.htm


Font size settings


Size: 1: HTML learning

2: HTML learning

3: HTML learning

4: HTML learning

5: HTML learning

6: HTML learning

7: HTML learning



Enter http: // localhost/font_size.htm in the address bar of the browser. The browsing effect is 4.8.

. 8 font size settings
You can add the "+" and "-" characters before the size value to set the text size more flexibly.
4.2.4 set text font
Face is also a label attribute used to set text fonts (fonts ). The fonts displayed on the HTML page are called from the browser system. To ensure the consistency of the fonts, we recommend that you use ,. The default HTML page also uses. Create a webpage file under D: \ web \ directory and name it font_face.htm. Write the code as shown in code 4.9.
Code 4.9 font_face.htm


Font setting


The font is: qinyuchun · Changsha-Mao Zedong

Font: qinyuanchun Changsha-Mao Zedong

Font: qinyuanchun Changsha-Mao Zedong

Font: qinyuanchun Changsha-Mao Zedong


Enter http: // localhost/font_face.htm in the address bar of the browser. The browsing effect is 4.9.

. 9 font setting
The author sets the text size of the modified font to number 5 for readers to view.
4.2.5 text skew
Use dual tags Tilts the affected text to achieve special effects, such as the date of the article. It is called an emphasis label and is also italic. Labels are frequently written as follows:
This is italic text
This is also italic text
4.2.6 bold text
Use dual tags Can make the text to be bold, more eye-catching text, such as the title of the article. It is called a special emphasis label and also a bold text. Labels are frequently written as follows:
This is a bold text
This is also a bold text
4.2.7 underline the text
Use dual tags You can add an underline to the text to be applied. The following is a comprehensive example of text skew, bold, and underline. Create a webpage file under the D: \ web \ directory and name it font_style.htm. Write the code as shown in code 4.10.
Code 4.10 text modifier settings: font_style.htm


Font modification settings


Italic: Qinyuanchun Changsha-Mao Zedong

Bold: Qinyuanchun Changsha-Mao Zedong

Underline: Qinyuanchun Changsha-Mao Zedong

Italic and bold underline: Qinyuanchun Changsha-Mao Zedong


Enter http: // localhost/font_style.htm in the address bar of the browser. The browsing effect is 4.10.

. 10 font modifier settings
The author putsSet the size of all text in the text to 5, which is convenient for readers to view.
-Note: When Multiple labels contain the same piece of text, the order of Inclusion cannot be misplaced.
4.2.8 use of multiple title styles
In a webpage article, the title style is special to highlight the importance of the title. HTML technology protects a set of style labels for titles, which are two-character sign-in. Text sizes from large to small represent different levels of titles. The title label has a unique feature: exclusive line, bold text, and centered text. In this way, you can easily set titles and set multi-level titles. Create a webpage file under the D: \ web \ directory and name it font_h.htm. Write the code as shown in code 4.11.
Code 4.11 title settings: font_h.htm


Title settings


Title 1
Title 2
Title 3
Heading 4
Title 5
Title 6
Fortune Magazine: Why does Google not flourish?
Potential problems
  

Some insiders believe that Google, which has a long-term monopoly on internet search and advertising markets, may fall into the extreme .... At the same time, a number of new plans launched by Google recently, such as the Open Mobile Alliance, open social network universal platform OpenSocial, and the possibility of investing billions of dollars to compete for Wireless frequencies, have also been widely questioned.
Will continue to monopolize search
  

Some recent articles have said that if a better search engine is available, people will not hesitate to give up Google. However, even if there is a better search engine, Google can still stand up for a while .... In this case, the website speed is often the key to determining the outcome.




Enter http: // localhost/font_h.htm in the address bar of the browser. The browser effect is 4.11.

. 11 Title settings
4.2.9 learn to process special characters on the webpage
In HTML, some characters have special meanings. For example, "<" and ">" are the left and right brackets of tags, while tags control HTML display, the tag itself can only be parsed by the browser and cannot be displayed on the page. So how do I display "<" and ">" in HTML? HTML specifies some special characters for display on the webpage, as shown in table 4.1.
Table 4.1 special characters in HTML

Special symbols
HTML code
Special symbols
HTML code
<
<
™(Trademark)

>
>
®(Register a symbol)
®
"" (English)
"
×
×
§
§
©(Copyright)
©
Create a webpage file under D: \ web \ directory and name it string.htm. compile string.htm code, as shown in code 4.12.
Set special characters in code 4.12: string.htm


Special Character settings



Label display method: <HTML>

How to display quotation marks: "Double quotation marks"

Trademark display method:™

How to display registered symbols:®

How to display the copyright symbol:©

Display §

Display x



Enter http: // localhost/string.htm in the address bar of the browser. The browser effect is 4.12.

. 12 special character settings
-Note: The symbols are displayed separately. The codes are required &.
4.2.10 how to easily ignore the browser's HTML Parsing
If you make an HTML code example similar to this book on the webpage <和> Converting to <and> is troublesome. In HTML code And &lt;xmp&gt; &lt;/xmp&gt; can easily solve this problem. &lt;Br/&gt; &lt;plaintext&gt; is a single tag. When it is inserted into HTML code, all HTML tags following it are invalid, that is, the browser does not parse all the HTML tags after &lt;plaintext&gt; and displays them directly on the page. &lt;Br/&gt; &lt;xmp&gt; &lt;/xmp&gt; is a dual tag that only invalidates the tags contained in the content. &lt;xmp&gt; &lt;/xmp&gt; is more common. Create a web page file under the D: \ web \ directory and name it html.htm. Write the code as shown in code 4.13. &lt;Br/&gt; code 4.13 ignores tag settings: html.htm &lt;br/&gt; <ptml&gt; &lt;br/&gt; <pead&gt; &lt;br/&gt; &lt;title&gt; ignore tag Settings &lt;/title&gt; &lt;br/&gt; </pead&gt; &lt;br /&gt; &lt;body&gt; &lt;br/&gt; qinyuchun &amp; middot; changsha &lt;br/&gt; &lt;xmp&gt; independent cold autumn, &lt;strong&gt; Xiangjiang North &lt;/strong&gt;, orange Island head. &lt;Br/&gt; let's see the mountains and rivers, and see the mountains and rivers. &lt;br/&gt; the rivers and rivers are clear, and &lt;u&gt; A hundred miles are competing. &lt;/U&gt; &lt;br/&gt; &lt;/xmp&gt; &lt;br/&gt; the eagleeye is an empty, &lt;strong&gt; Yu Xiangqian, &lt;/strong&gt; &lt;br/&gt; all types of frost are supported. &lt;Br/&gt; Hey, &lt;u&gt; ask the vast land. &lt;/u&gt; who is the master? &lt;Br/&gt; &lt;plaintext&gt; &lt;br/&gt; traveling with friends, &lt;br/&gt; recall that the past has been so busy. &lt;Br/&gt; he is a teenager and is arrogant. &lt;br/&gt;. &lt;Br/&gt; give advice to Jiangshan and boost the text. &lt;br/&gt; ten accounts of the same year. &lt;Br/&gt; I remember No. &lt;strong&gt; hit the water in the middle &lt;/strong&gt;, and the waves throw the boat! &lt;Br/&gt; &lt;/body&gt; &lt;br/&gt; </ptml&gt; &lt;br/&gt; in the browser address bar, enter http://localhost/string.htm , The browsing effect is 4.13. &lt;Br/&gt;. 13. Ignore tag Settings &lt;br/&gt; &lt;strong&gt; 4.2.11 other text modifiers &lt;/strong&gt; &lt;br/&gt; to meet the needs of different fields, HTML also has other modifiers. Tags are commonly used in the superscript format and subscript format. In some cases, you even need to use the delete effect. You can use the HTML strip tag. &lt;Br/&gt; &amp; mdash; the label in the upper label format is a double label, which is mostly used for the representation of mathematical indexes, such as a certain number of square or cube. &lt;Br/&gt; &amp; mdash; the subscript format label is a dual tag, which is mostly used for comments and mathematical representation. &lt;Br/&gt; &amp; mdash; The underlined label is a dual-label &lt;strike&gt; &lt;/strike&gt;, which is mostly used to delete the effect. &lt;Br/&gt; create a web page file named other.htm under D: \ web \ directory and write the code, as shown in code 4.14. &lt;Br/&gt; code 4.14 other tag modification settings: other.htm &lt;br/&gt; <ptml&gt; &lt;br/&gt; <pead&gt; &lt;br/&gt; &lt;title&gt; Settings of other modifiers &lt;/title&gt; &lt;br/&gt; </pead&gt; &lt;br/&gt; &lt;body&gt; &lt;br/&gt; qinyuanchun Changsha! &lt;Br/&gt; mathematical indexes: 23 = 8, 1002 = 10000 &lt;br/&gt; <pr/&gt; &lt;br/&gt; qinyuanchun Changsha! &lt;Br/&gt; mathematical representation: log381 = 4, log5125 = 3 &lt;br/&gt; <pr/&gt; &lt;br/&gt; deletion result: &lt;strike&gt; I have deleted &lt;/strike&gt; &lt;br/&gt; &lt;/body&gt; &lt;br/&gt; </ptml&gt; &lt;br/&gt; in the browser address bar, enter http://localhost/other.htm , The browsing effect is 4.14. &lt;Br/&gt;. 14 other tag settings </plaintext> </和>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.