First page
Software used: vscode
Recommended plug-ins to install in vscode:
1. Emmet plug-in: it can automatically generate HTML code fragments. It can quickly generate batches containing nested structures through tab key combined with its specific syntax. This plug-in is built-in in vscode, and I can use it directly without relevant configuration.
2. Vscode icons: used to set the file icon style.
3. Markdown Preview Enhanced: used to preview files (. md) in markdown format. The advantage is that the preview style will be fresh and concise.
4. Live Server: it is more convenient to dynamically generate web pages in html files
notes
Comments provide help for code readers, and comments do not participate in running
In HTML, comments are written in the following format:
<!-- Note Content -->
Quick entry of comments: Ctrl+/
Comments can be written in multiple lines
Element element
Other terms: label and mark
<a href="http://Lib. USTC. Edu. CN "> USTC Library</a>
Element = start tag + end tag + element content + element attribute
For example, in the code above:
1. Starting mark:
<a>
2. End mark:
</a>
3. Element content:
HKUST Library
4. Element attributes
href="http://lib.ustc.edu.cn"
The start tag and end tag determine the name of the element. For example, the name of the above element is a
Another example
<title>Document</title>
Is the element title
Attribute = attribute name + attribute value
In the example of hyperlink, href is the attribute name, and the following link is the attribute value.
Classification of attributes:
- Local attributes: attributes specific to some elements
- Global attributes: common to all elements
Some elements have no end tag. Such elements are called empty elements, such as
<meta charset="UTF-8">
There are two ways to write an empty element:
-
<meta charset="UTF-8">
-
<meta charset="UTF-8" />
Nesting of elements
Elements cannot be nested with each other. For example, the following writing is wrong
<div>
<p>
</div>
</p>
Related concepts
Parent element, child element, ancestor element, descendant element, brother element
<!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>Document</title>
</head>
<body>
<!-- Hyperlinks -->
<a href="http://Lib.ustc.edu.cn "title =" official website of University of science and technology of China Library "> University of science and Technology Library</a>
<h1 title="this is my first page!">My first page</h1>
</body>
</html>
The parent element of meta element is head, and the child element of head element is meta; The ancestor element of meta element is html, and the descendant element of html element is meta; mata and title elements are sibling elements (with the same parent element)
Standard document structure
Html is written as a page or HTML document, so there must be a document structure, and W3C has formulated a structure standard
<!DOCTYPE html>
The document declaration tells the browser that the HTML standard used by the current document is HTML5.
Not writing a document declaration will cause the browser to enter weird rendering mode. Generally, a document declaration must be written.
<html lang="en"> </html>
A page can have at most one root element, and this element is the parent element or ancestor element of all other elements.
Writing this element is not mandatory in the HTML5 version.
lang attribute: language, global attribute, indicating which natural language is used to write the text used inside the element. "En" means English. To use simplified Chinese, change "en" to "zh CN" (old writing) or "CMN Hans" (current writing).
The head and body elements must appear as child elements of html elements
<head> </head>
The content inside the document header will not be displayed on the page.
The elements to be included in the document header are:
<meta>
1. Metadata of document: additional information.
charset: Specifies the page content encoding.
......
<title>Document</title>
2. Page title (the title content is Document)
<body> </body>
Document body. All elements to be displayed in the page should be placed in the document body.
Generate a simple web page
First, you can create a new folder in one location. For convenience, I built the folder on the desktop and named it "front-end learning". We can create a new file or folder in the folder to build the storage location structure of html, css and md files. Of course, we can also open this folder in vscode to create / delete files or folders.
For example, after creating a new folder on the desktop, open the folder in vscode,
File > open folder > find folder > Open
Then get to the point and create a new file where you want to put the html file. Note that the suffix is. html
Next, you can open the. html file in vscode and write code.
First enter a "!", then press enter or Tab, and a piece of code will be generated automatically.
<!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>Document</title>
</head>
<body>
</body>
</html>
We can now add some other elements to the body element, such as a element, h1 element, etc. the declaration and head element are left out for the time being.
<!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>my_first_page</title>
</head>
<body>
<!-- Hyperlinks -->
<a href="http://Lib.ustc.edu.cn "title =" official website of University of science and technology of China Library "> University of science and Technology Library</a>
<h1 title="this is my first page!">My first page</h1>
</body>
</html>
The above code only adds two elements to the body element, a element and h1 element.
If the Live Server plug-in is installed, right-click in the blank space and click Open With Live Server to generate a web page in the browser and automatically open the web page.
The effects are as follows:
