1. HTML syntax specification
(1) Overview of basic grammar
1. HTML tags are keywords surrounded by angle brackets , such as <html>
2. HTML tags usually appear in pairs , such as <html></html>, where <html> is called the start tag and < / html> is called the end tag.
3. Some special labels must be single labels (rare cases), such as single label<br />, only one appears.
(2) Label relationship
Double labels can be divided into two categories: containment relationship and parallel relationship .
Containment relationship:
<head>
<title> </title>
</head>Constellation:
<head></head>
<body></body>Two, HTML basic structure tags
(1) The first HTML page
Every web page will have a basic structure tag (also called a skeleton tag), and the content of the page is also written on these basic tags. HTML pages are also called HTML documents
| Label name | definition | Description |
| <html></html> | HTML tags | The largest label on the page, we call it the root label |
| <head></head> | The head of the document | Note that the label we must set in the head label is title |
| <title></title> | Title of the document | Let the page have its own page title |
| <body></body> | The body of the document | The element contains all the content of the document is basically placed in the body |
As shown in the figure below, the whole picture is the head of the document, which is the <head> tag, and the part enclosed by the red box is the title tag:
The rest of the page is the body tag
Small experiment : create a new txt file, enter the following code, then save and change the file name suffix to .html, double-click to open it.
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
键盘敲烂，工资过万
</body>
</html>
Double-click to open, the following content will be displayed:
(2) Summary of basic structure label
Three, development tools
Web development tools
Visual Studio Code is used as a development tool in the course.
1. Create a new file (Ctrl+N)
2. Save (Ctrl+S), note that the move should be saved as a .html file
3. Ctrl+plus key, Ctrl+minus key can zoom in and out the view
4. Generate page skeleton structure. Enter! Press Tab
5. Use the plug-in to preview the page in the browser: right-click in the code, and click "Open In Default Browser" in the pop-up exit. If there is no such option, it is because no plug-in is installed. See below for installing plugins.
(1) Install the plugin in VSCode
Search for Chinese to install Chinese plug-ins, install open in browser and you will have the option of Open In Default Browser;
It is recommended to install the following plugins:
| Plug-in | effect |
|---|---|
| Chinese(Simplified) Language Pack for VS Code | Chinese (Simplified) Language Pack |
| Open in Browser | Right click and select the browser to open the html file |
| Auto Rename Tag | Automatically rename matching HTML/XML tags |
| CSS Peek | Trace to style |
Be sure to restart the software after the plug-in is installed
(2) VCCode tool generates new code for skeleton label
1、<!DOCTYPE>
The <!DOCTYPE> document type declaration is used to tell the browser which HTML version to use to display the web page.
<!DOCTYPE html>The meaning of this code is: the current page uses the HTML5 version to display the web page.
Note: 1. The <!DOCTYPE> declaration is located at the top of the document, before the <html> tag; 2. <!DOCTYPE> is not an HTML tag, it is a document type declaration tag.
2. Lang language
<html lang="en">lang is the abbreviation of English word language, en is the abbreviation of English English
Used to define the language of the current document display: 1.en defines the language as English; 2.zh-CN defines the language as Chinese
To put it simply, en is defined as English webpage, and zh-CN is defined as Chinese webpage. In fact, for document display, documents defined as en can also display Chinese, and documents defined as zh-CN can also display English
The developed Chinese website, it is recommended to change to zh-CN
3. Charset character set
<meta charset="UTF-8">Character set (Character set) is a collection of multiple characters. So that the computer can recognize and store various characters.
In the <head> tag, the charset attribute of the <meta> tag can be used to specify which character encoding the HTML document should use.
Commonly used values of charset are: GB2312, BlG5, GBK, and UTF-8. UTF-8 is also called the universal code, which basically contains the characters needed by all countries in the world.
Note: The above grammar is the code that must be written, otherwise it may cause garbled code. Under normal circumstances, use "UTF-8" encoding uniformly, and try to write uniformly as standard "UTF-8" instead of "utf8" or "UTF8".
4. Summary
1. The above three codes vscode are automatically generated, and we basically don't need to rewrite;
2. The <!DOCTYPE html> document type declaration tag tells the browser that this page uses the ntm15 version to display the page;
3. <html lang="en"> tells the browser or search engine that this is an English website and this page is displayed in English;
4. <meta charset=" UTF-8"/> must be written. Use uTF-8 to save the text. If you don't write it, it will be garbled. The specific principle will be analyzed later.