1. Concept explanation
1. What does the front end contain?
Structure: HTML (Hyper Text Markup Language--Hyper Text Markup Language)
Page origin and content
Performance: CSS
Page styles such as the original appearance and position of the web page (such as color, size, etc.)
Behavior: JavaScript
Definition and interaction of web page model, referred to as JS
2. The principle of loading the written code?
The web page where the code becomes visualized is rendered and loaded by the browser. That is to say, you can run the code with the html suffix if you have a browser.
3. Tools for writing code?
It is recommended to use vscode
4. What are the two types of HTML tags?
Double label: need to wrap the label used by the code, there is a pair, the beginning label and the end label are very similar, there is an extra / before the end label
Single label: usually used by code that does not need to be wrapped, such as newlines
, the horizontal line used
5. HTML tag relationship?
1. Parent-child relationship (nested relationship)
For example:

2. Brotherly relationship (parallel relationship)


Two, HTML text explanation
1. Note ()
Description: Easy for others to read. Shortcut key: Ctrl+/

2. Title tag (h)
Explanation: 1. The most important in the label text, the font is the largest, the text is bold, and the text is decreasing step by step. Exclusive line

The weather is nice today

The weather is nice today

The weather is nice today

The weather is nice today

The weather is nice today

The weather is nice today

3. Paragraph tags (p)
Description: This is required for a paragraph of text. Exclusive line

I am a paragraph

4. Newline tag (br)
Explanation: Add this label after the text that needs to be wrapped to achieve a newline effect


5. Horizontal line label (hr)
Description: Add this label after the position where the horizontal dividing line needs to be added to achieve the effect of adding a horizontal dividing line

---

6. Text formatting tags (bold, underline, italic, strikethrough)
Explanation: The two display effects are the same, the difference is that the one below the complete word emphasizes the importance, and it is for other programmers to read the code.
bold
Bold

underline
underline

tilted
Tilt

strikethrough
Strikethrough
7. Image tag of media tag (img src=)
Description: The src content is the relative path of the image
The alt content is text, the text displayed when the picture cannot be loaded
The title content is text, put the mouse on the text displayed on the picture
The content of width and height is the width and height of the picture. Only one of them is set, and the other will be scaled. If both are set, the picture may be distorted
8. Relative path
Explanation: The relative path must be found, just understand it, the absolute path should be studied here, and choose different ways to find the picture according to the location of the picture and the html file
The current file code is the same as the directory picture.jpg" alt="">
Subordinate directory of current file code Subordinate package name/picture.jpg" alt="">
Current file code parent directory ../upper package name/picture.jpg" alt="">
9. The audio tag of the media tag (audio src=)
Description: src: Inside /folder/ you can find the audio directly. controls Display the controls for playback: autoplay: autoplay loop: loop playback
10. Media tag video tag (video src=)
Description: src: Inside /folder/ you can find the audio directly. controls display the playback controls: autoplay muted: automatic mute playback loop: loop playback
ps: This usage is similar to audio, automatic mute playback is supported by Google Chrome, and other browsers may not support it
11. Hyperlink tag (a href=)
Cover this page jump
click me
Do not cover this page jump
click me
Explanation: The href content is the target website to be redirected to, and the content between the tags is the click content, which will jump after clicking
ps: The target URL to jump to can be a URL or a local one