first HTML
Every web page will have a basic structure tag (also called a skeleton tag), and the page content is also written on these basic tags.
| label name | definition | illustrate |
| <html> </html> | HTML tags | The largest tag in the page, we call it the root tag |
| <head> </head> | document header | Note that the tag we must set in the head tag is title |
| <title> </title> | document title | Let the page have its own page title |
| <body> </body> | the body of the document | The element contains all the content of the document, and the content of the page is basically placed in the body |
Next, we create a notepad file and write code. The standard code writing must have a hierarchical relationship, parent-child level and sibling level. For example, the <html> tag is the parent tag of the <head> tag, the <head> tag and the <body> tag. > is a sibling tag.
In this way, we can observe the code we wrote more intuitively.
After writing, change the txt file format to html file format, and then open
It can be seen that the content of our <title> tag is displayed at the top of our website, that is, the webpage tag
The content of the <body> tag is displayed in the content section of our web page
The above tags are the basic tags of html and skeleton tags. They are the tags that every website must have and need to be kept in mind.
Let's ask our little pig page to show us what part of the web page these basic tags represent
At the beginning of the code, we can use the <!DOCTYPE html> tag to declare the html version used (this is a document type declaration tag, so it does not belong to the content of html, so write this tag on the first line)
<html> tag, the largest tag of the web page, that is, the root tag, all tags must be written in this tag.
<head> tag, the head of the document, the head of Peppa Pig (blower), used to set the properties of some web pages
The <title> tag, the title of the web page, is placed in the <head> tag, and it is also a must-have tag for the head tag.
The <body> tag, the main body of the document, and the page content are basically placed inside the <body> tag.
There are a lot of inconveniences in writing with notepad files. You have to type and write the codes one by one. I personally think that beginners can use the basic notepad files to deepen their impression. After they have the basics, they can use the above tools to write web pages. There are many tools, but writing code is similar, as long as you learn one of them, the others are easy to use.
You can download your favorite coding tools according to your hobbies
Let's use VSCode to demonstrate the editing process
Using VSCode
1. Double-click to open the software.
2. Create a new file (Ctrl+N).
3. Save (Ctrl+S), note that the move should be saved as a .html file
4. Ctrl + plus key, Ctrl + minus key can zoom in and out the view
5. Generate page skeleton structure.
Enter! Press the Tab key.
6. Use the plug-in to preview the page in the browser: click the right mouse button and click "Open In Default Browser" in the pop-up exit.
This software is in English by default, you can install a Chinese plug-in
Recommended plugins to install
<!--Comment content--> This is a comment tag that search engines will not read, just like Python's # sign and """ """, it acts as a comment code, which is convenient for maintenance and maintenance. The role of reading.
<!DOCTYPE html> <!--告诉浏览器这个页面使用html5版本来显示页面的-->
<html lang="en"> <!--lang="en"告诉浏览器或搜索引擎这是一个英文网站-->>
<head>
<meta charset="UTF-8"> <!--必须写的代码，采取UTF-8编码格式保存文字，如果不写容易导致网页乱码或显示错误。-->>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这里可以写网页标签</title>
</head>
<body>
这里可以书写页面显示内容
<h1>一级标题</h1> <!--标题共有六个的等级，h1~h6，h1标题为最大的标题-->
<p>段落标签</p> <!--可以将一个网页分为若干个段落-->
</body>
</html><h1>段落标签</h1>
<p>这是一个段落标签</p>If you want to segment the text content of the web page, you must use the <p> segment tag. You can't use a space, carriage return, and line feed like a word document. The browser will treat multiple spaces as one space, and there will be no line break without a segment tag. Squeeze everything together.
When writing web pages, you can use several <p>Content</p> tags to divide the document into several paragraphs.
<br />这是一个换行标签 (brack的缩写，意为打断、换行)
特殊标签，单身标签，只有一个In HTML, the content of web pages is usually sorted from left to right, and it will automatically wrap at the right end. If you want to force a line of text to be displayed, you can use the forced line break tag <br />, and the code is executed to the <br /> tag. , it will wrap immediately, no matter how much space there is on the right, it will wrap directly.
Note: <br /> is a single tag.
If you open an article without title tags and branch tags, it will be crowded, even if you have already divided the lines at the time of writing.
Write the code for the title tag and section tag:
