In the last article, we learned the head tag. All the tags we learned later are located in the "body" tag of the page
Before learning, let's learn how to use annotations in html
<!--Contents of notes-->
Adding comments to key code is a good programming habit. In actual development, comments on function module code are very important.
In HTML, we mainly learn how to make a static page. Most static pages are composed of the following four elements: text, picture, hyperlink, audio and video.
In addition, we should also note that pages that are not moving are called dynamic pages. The difference between static pages and dynamic pages is whether to interact with the server
HTML text has the following important Tags: title tag, paragraph tag, line feed tag, text tag, horizontal line tag and special symbols
1. Title label
There are 6 levels of title tags in HTML: h1, h2, h3, h4, h5 and h6
h is the abbreviation of header. h1 tag is the most important and h6 tag is the least important. Note that a page can only have one h1 tag, while h2 to h6 tags can have multiple tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Title label learning</title>
</head>
<body>
<h1>This is the first level title</h1>
<h2>This is the secondary title</h2>
<h3>This is a three-level title</h3>
<h4>This is a four level title</h4>
<h5>This is a five level title</h5>
<h6>This is a six level title</h6>
</body>
</html>It should be noted here that < meta charset = "utf-8" / > is used to prevent random code on the page. This sentence must be placed in front of the title tag and other meta tags
In an html page, you don't need to use all six tags, but decide to use them according to your needs
h1-h6 title tag looks very simple, but it plays a very important role in search engine optimization. We will introduce these in-depth contents later
2. Paragraph labels
Paragraph labels wrap automatically and there is some space between paragraphs
<p>Paragraph content</p>
3. Line feed label
In HTML, we can wrap text with br tag, < br / > is a self closing tag
Br tags are used to wrap text, while p tags are used to segment text. Using p tags will lead to a certain gap between paragraphs, while using br tags will not
Example: use two p Tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Title label learning</title>
</head>
<body>
<p>study hard</p>
<p>make progress every day</p>
</body>
</html>Use br Tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Title label learning</title>
</head>
<body>
<p>study hard<br/>make progress every day</p>
</body>
</html>4. Text label
There are 8 common text labels:
Bold labels: strong, b
Italic labels: i, em, cite
Superscript label: sup
Subscript label: sub
Middle dash label: s
Underline label: u
Large label: big
Small label: small
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Text label learning</title>
</head>
<body>
<p>This is plain text</p>
<strong>This is bold text</strong><br/>
<b>This is bold text</b><br/>
<i>This is italic text</i><br/>
<em>This is italic text</em><br/>
<cite>This is italic text</cite><br/>
(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab<br/> <!--Superscript label-->
H<sub>2</sub>SO<sub>4</sub><br/><!--Subscript label-->
<s>original price:￥199</s><br/><!--Middle dash label-->
<u>Front end learning notes</u><br/><!--Underline label-->
</body>
</html>For many tags, we can use CSS, so we only need to remember the following important tags
| strong | bold | strong |
| em | Italics | emphasized |
| sup | Superscript | superscripted |
| sub | subscript | subscripted |
5. Horizontal line label
In HTML, we can use the hr tag to achieve the effect of a horizontal line, hr is the abbreviation of horizon
<hr/>
6.div label
In HTML, we can use div tag to divide HTML structure, so as to cooperate with CSS to control the style of a piece as a whole.
Using div tags to partition areas makes the code more logical
<div>
<!--Partition content-->
</div>7. Special symbols
In HTML, if you want to display a special symbol, you need to implement it through code. For example, the special symbol of space is & nbsp;
Block elements and inline elements are very important concepts in HTML, and they are also important basic knowledge for learning CSS.
In the preview effect of the browser, some elements are exclusive, and other elements cannot be on the same line as this element, such as p, div, hr, etc; While some elements are not exclusive to one line, other elements can be on the same line as this element, such as: strong, em, etc. Note that exclusive line does not mean exclusive line in the code, but exclusive line in the browser display effect
give an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Text label learning</title>
</head>
<body>
<h3>Front end basic learning</h3>
<p>Front end basic learning</p>
<strong>Front end basic learning</strong>
<em>Front end basic learning</em>
</body>
</html>The effect is
