[Super invincible detailed dark horse front-end notes! Instant updates~]

[Super invincible detailed dark horse front-end notes! Instant updates~]

This note is used by me on the front-end of Synchronous Learning Dark Horse and is not for commercial use.

learning path

1. Basic concepts (understanding)
   1. Get to know the web page
   2. Top 5 browsers and rendering engines
   3. Web standards
2. HTML first experience
   1. HTML perception
   2. HTML skeleton structure
   3. Use of development tools
3. Grammar specifications
   1. HTML comments
   2. The composition of HTML tags
   3. HTML tag relationship

Objective: Understand the composition of web pages and the five major browsers, clarify the composition of Web standards, and use HTML skeleton to build a web page.

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Basic understanding

1.1 Get to know web pages

1. What parts does a web page consist of?
   • Text, pictures, audio, video, hyperlinks

2. What software is used to convert the code written by our programmers into a web page?
   • Browser

1.2 Five major browsers and rendering engines

1. Browser: It is a platform for displaying and running web pages, and is an essential tool for front-end development.
2. What are the top five browsers?
   • Internet Explorer
   • Firefox
   • Chrome
   • Safari
   • Opera
3. Will the same web page appear exactly the same in different browsers?
   • Because different browsers have different rendering engines, the parsing effect will be different.
4. Which browser do front-end engineers recommend to use daily?
   • Chrome
   

1.3 Web standards

constitute	language	illustrate
structure	Performance	Page elements and content
Performance	CSS	Page styles such as the appearance and position of web page elements (such as color, size, etc.)
Behavior	JavaScript	Definition of web page model and page interaction

2.1 First experience with HTML

HTML (Hyper Text Markup Language)
Chinese translation: Hyper Text Markup Language

Web experience - steps to build a basic web page

1. Right-click in the code folder → Create a new text document → Name it: Text thickening case.txt
2. Double-click this file and enter the code and other content → Remember to save!
3. Right-click the file → Rename → Change the file suffix to .html
4. Double-click the text thickening case.html, the browser will automatically open the file and display the previously entered content.

HTML skeleton structure

What tags does the HTML skeleton structure consist of?

• html tag: the entire web page
• head tag: the head of the web page
• body tag: the body of the web page
• title tag: the title of the web page
  

Use of development tools

1. Double-click to open the VS Code software
2. Press and hold the day01 code folder with the left mouse button and drag it to the VS Code window. The folder will be displayed on the left directory.
3. Click the **+New File Button** on the directory to create a page. Note: the file suffix needs to be .html

Basic shortcut keys for VS Code

1. Quickly generate labels: English + tab
2. Save file: ctrl + s
3. Quickly view the web page effect: right-click → Open in Default Browser
   • Shortcut key: alt + b (open in browser plug-in installed)
4. Quickly generate structure tags: ! + tab/Enter

Grammar specifications

3.1HTML comments

1. Shortcut key for comments: ctrl + /
2. The role of comments:

• Explanatory and descriptive information added to the code, mainly used to help developers understand the code
• The browser ignores all comments when executing the code