1, Title label
In HTML, there are 6 levels of title tags: h1~h6. Generally, a page can only have one h1 label, while other title labels can have multiple. The display effect of labels at all levels is shown in the figure below:
Note: the h1 tag is different from the title tag. The h1 tag is used to display the title of the article, and the title tag is used to display the title of the address bar
2, Paragraph label
In the page, you can use the P tag to display a paragraph of text. The text in a p tag is displayed as a paragraph, and the text between paragraphs will wrap automatically; There is a certain spacing between paragraphs.
Such as the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Paragraph label</title>
</head>
<body>
<h3>Ailian said</h3>
<p>The flowers of land and water plants are very lovely. Tao Yuanming of Jin Dynasty loved chrysanthemums alone. Since Li Tang, the world loves peonies very much. To love the lotus alone, it comes out of the mud without dyeing, clean the ripples without demons, pass through the middle and straight outside, do not spread without branches, the fragrance is far and clear, and the pavilions are net planted, which can be viewed from a distance rather than blasphemous.</p>
<p>To say chrysanthemum, the flower of seclusion also; Peony, the flower of the rich also; Lotus is a gentleman of flowers. Oh! The love of chrysanthemum is rarely heard after pottery; Who gives the love of lotus? The love of peony is suitable for many.</p>
</body>
</html>The display effect is as follows:
3, Wrap label
Line feed labels < br / > are used to wrap text
Such as the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Wrap label</title>
</head>
<body>
<h3>In the Quiet Night</h3>
<p>The bright moon in front of the bed is suspected to be frost on the ground.<br/>Raising my head, I see the moon so bright; withdrawing my eyes, my nostalgia comes around.</p>
</body>
</html>The display effect is as follows:
4, Text label
Text labels are used to decorate text. Common text labels are as follows:
1) Bold labels: strong, b
(2) i, em: italics
(3) Superscript label: sup
(4) Subscript label: sub
(5) Strikethrough label: s
(6) Underline label: u
(7) Large label: big
(8) Small label: small
Such as the following code:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text label</title>
</head><body>
<p>Plain text</p>
<strong>Bold text</strong><br/>
<b>Bold text</b>
<p>Plain text</p>
<i>Italic text</i><br/>
<em>Italic text</em><br/>
<cite>Italic text</cite>
<p>Superscript text:(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
<p>Subscript text: H<sub>2</sub>SO<sub>4</sub>Refers to sulfuric acid molecules</p>
<p>Plain text</p>
<p><s>Strikethrough text</s></p>
<p>Plain text</p>
<p><u>Underlined text</u></p>
<p>Plain text </p>
<big>Large text</big><br/>
<small>Small text</small>
</body>
</html>The display effect is as follows:
5, Horizontal line label
The horizontal line label < HR / > is used to display a horizontal line in the web page.
Such as the following code:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Horizontal line label</title> </head> <body> <h3>In the Quiet Night</h3> <p>The bright moon in front of the bed is suspected to be frost on the ground</p> <p>Raising my head, I see the moon so bright; withdrawing my eyes, my nostalgia comes around</p> <hr/> <h3>spring morning</h3> <p>Spring sleeps without dawn, and birds sing everywhere</p> <p>After one night of wind and showers, how many are the fallen flowers?</p> </body> </html>
The display effect is as follows:
6, div tag
div tags can be used to divide the HTML structure and control the style of a block as a whole with CSS
Such as the following code:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div label</title>
</head>
<body>
<div>
<h3>In the Quiet Night</h3>
<p>The bright moon in front of the bed is suspected to be frost on the ground</p>
<p>Raising my head, I see the moon so bright; withdrawing my eyes, my nostalgia comes around</p>
</div>
<div>
<hr/>
</div>
<div>
<h3>spring morning</h3>
<p>Spring sleeps without dawn, and birds sing everywhere</p>
<p>After one night of wind and showers, how many are the fallen flowers?</p>
</div>
</body>
</html>The display effect is as follows:
7, Self closing label
The self closing label has only a start symbol but no end symbol. Labels or text cannot be inserted inside. Common self closing labels are as follows:
| label | explain |
|---|---|
| <meta/> | Define the information of the web page for search engines to view |
| <link/> | Import external CSS files |
| <br/> | Wrap label |
| <hr/> | Horizontal line label |
| <img/> | Picture label |
| <input/> | Form label |
8, Block elements and inline elements
HTML can generally be divided into the following two categories according to the expression form of elements:
1. block element
Block elements will occupy a whole line in the browser display state, and exclude them from being in the same line with other elements; In addition, other block elements and inline elements can generally be accommodated inside the block element.
Common block elements are as follows:
| Block element | explain |
|---|---|
| h1~h6 | Title element |
| p | Paragraph element |
| div | div element |
| hr | level |
| ol | Ordered list |
| ul | Unordered list |
2. inline
In line elements can be on the same line as other in line elements, and in line elements can only accommodate other in line elements, but not block elements.
Common inline elements are as follows:
| Inline element | explain |
|---|---|
| strong | Bold element |
| em | Italic element |
| a | Hyperlinks |
| span | Common inline elements, combined with CSS to define styles |
9, Special symbols
Special symbols in web pages can be divided into:
1. Special symbols easy to input
| Special symbols | code |
|---|---|
| "Double quotation marks" | " |
| 'left single quotation mark | ‘ |
| ’Closing single quotation mark | ’ |
| × multiplication sign | × |
| ÷ division number | ÷ |
| >Greater than sign | > |
| < less than sign | < |
| &And symbol | & |
| - long dash | — |
| |Vertical line | | |
2. Special symbols that are difficult to input
| Special symbols | code |
|---|---|
| § section break | § |
| © Copyright symbol | © |
| ® Registered trademark | ® |
| ™ trademark | ™ |
| € Euro | € |
| ££ | £ |
| ¥ yen | ¥ |
| ° degree | ° |
10, Related exercises
1, Single choice question
1. Choose the most reasonable way to define the title you think is (C).
A. < div > Article Title < / div >
B. < p > < b > Article title</b></p>
C. < H1 > Article title</h1>
D. < strong > Article Title < / strong >
2. If you want to get the BOLD effect, we can use the (A) label to achieve it.
A. <strong></strong>
B. <em></em>
C. <sup></sup>
D. <sub></sub>
3. The following statement about self closing label is incorrect (B).
A. The self closing label has only a start symbol and no end symbol
B. Self closing labels can insert text or pictures inside
C. meta tags are self closing tags
D. Hrlabels are self closing labels
4. By default, the following statement about block elements and inline elements is incorrect (D).
A. Block elements are exclusive to one line
B. Block elements can be accommodated inside block elements
C. In line elements can be accommodated inside block elements
D. Inline elements can hold block elements
5. Which of the following tags is not a block element? ( A )
A. strong
B. p
C. div
D. hr
2, Programming problem
1. Use various text labels learned in this chapter to achieve the web page effect shown in the figure below.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>exercises</title> </head> <body> <div> <h3>General knowledge of various subjects</h3> <h4>language</h4> <p>The romance of the Three Kingdoms is one of China's four classical masterpieces. It was written by Luo Guanzhong, a novelist in the late Yuan and early Ming Dynasties. It is China's first novel of chapter historical romance. It describes the historical situation of nearly 100 years from the late Eastern Han Dynasty to the early Western Jin Dynasty.</p> <hr> </div> <div> <h4>mathematics</h4> <p>Pythagorean theorem right triangle: a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>. </p> <hr> </div> <div> <h4>English</h4> <p>No pain，No gain.</p> <hr> </div> <div> <h4>Chemistry</h4> <p>H<sub>2</sub>SO<sub>4</sub>It is an important industrial raw material, which can be used to make fertilizer, detergent and so on.</p> <hr> </div> <div> <h4>Economics</h4> <p>Copyright symbol:© <br/>Registered trademark:®</p> <hr> </div> </body> </html>