1, HTML fixed structure
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Page title</title> </head> <body> Web content </body> </html>
HTML determines the structure of web pages. All HTML files are completed based on this structure. In addition, it can also be observed that HTML is a tag language, and its setting of web page structure is realized through tags.
2, HTML base tag
1. Add content
The content of the web page is like a person's body, so you should fill in the content in the "body" tab. A major feature of tag language is that it can be applied flexibly, that is, the content to be added can be typed directly in the body. Add content to the web page based on the basic structure of HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Here is what we want to add to the web page! </body> </html>
After opening this html file with a browser, we can observe such a page in the web page
Here is what we want to add to the web page2. Title
The "h" tag is used in HTML to represent the title. The specific usage is as follows:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Primary title</h1> <h2>Secondary title</h2> <h3>Tertiary title</h3> <h4>Four level title</h4> <h5>Five level title</h5> <h6>Six level title</h6> </body> </html>
If you open this html file with a browser, you will see such a page:
Primary title
Secondary title
Tertiary title
Four level title
Five level title
Six level title
3. Paragraph
Symbols: p
Features: Double labels, automatic line feed after use
code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>This is the first paragraph</p> <p>This is the second paragraph</p> <p>This is the third paragraph</p> </body> </html>
effect:
This is the first paragraph
This is the second paragraph
This is the third paragraph
3. Line feed
Symbol: br
Features: single label
code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>In order to make the text structure in the page more beautiful,<br>We reasonably use line breaks to adjust the structure of text</p> </body> </html>
effect:
In order to make the text structure in the page more beautiful,
We reasonably use line breaks to adjust the structure of text
4. Bold
Symbol: strong
Features: double label
Note: it can be replaced by b. most of them are strong
code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>In order to make the text structure in the page more beautiful,<br>We use it reasonably<strong>Line feed</strong>Adjust the structure of the text</p> </body> </html>
effect:
In order to make the text structure in the page more beautiful,
We reasonably use line breaks to adjust the structure of text
5. Horizontal dividing line
Symbol: hr
Features: single label
code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Title I</h1> <hr> <p>use<strong>Horizontal split line</strong>Separate the title one from the text</p> </body> </html>
effect:
Title I
Separate the title one from the text with a horizontal divider
6. Underline
Symbols: ins
Features: double label
Note: the symbol u is also used, and most of them use ins
code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Title I</h1> <hr> <p>use<strong>Horizontal split line</strong>Separate the title one from the text</p> <p>For key parts<ins>Underline</ins>Mark</p> </body> </html>
effect:
Title I
Separate the title one from the text with a horizontal divider
The key parts are underlined
7. Tilt
Symbols: em
Features: double label
Note: i is also used, and em is used in most cases
code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>tilt</h1> <hr> <p>The inclined part needs<em>Highlight</em>!!!</p> </body> </html>
effect:
tilt
The inclined part shall be highlighted!!!
8. Delete line
Symbol: del
Features: double label
Note: also use s, most use del
code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Big sale</h1> <hr> <p>Price concessions, the lowest in history!!</p> <p>Just:<del>1314</del> 520 Yuan!</p> </body> </html>
effect:
Big sale
Price concessions, the lowest in history!!
Just: 1314 520 yuan!