A. Web page fixed format

1. Steps for compiling web pages:

  • Create a new text document
  • Open it with notepad
  • Write THML code
  • Save and modify the.html extension of the plain text document
  • Use a browser to open the written file

1.1 WebStorm Common Shortcut Keys

  • How to create a new.html file in WebStorm using shortcut keys

    • Press Ctrl + Alt + Insert on your keyboard

  • How do I move the cursor to the end of the current line in WebStorm

    • Press the End key on the keyboard

  • How do I move the cursor to the front of the current line in WebStorm

    • Press the Home button on your keyboard

  • How to make the cursor blink in multiple lines in WebStorm

    • Hold down the Alt key on the keyboard, hold down the left mouse button, and then drag the mouse

  • How to quickly copy the line where the cursor is in WebStorm

    • Press Ctrl + D on your keyboard

  • How to quickly delete the line where the cursor is in WebStorm

    • Press Ctrl + X on your keyboard

  • How to wrap tags around a piece of content in WebStorm, i.e. automatically put tags around a piece of content

    • Press Ctrl + Alt + T on the keyboard, then press Enter, and then enter the corresponding label

2. Basic structure of web page

< HTML lang="en"> <head> <meta charset="UTF-8"> <title> </head> <body> </body> </ HTML >Copy the code
  • In the basic structure of HTML, all tags come in pairs. One tag comes in pairs with/and one tag doesn’t. The tags without/are called start tags, and the tags with/are called end tags

2. Web page tags

1. The HTML tags

  • What it does: Tell the browser that this is a web page, that is, tell the browser that I am an HTML document

Note: All other tags must be inside the HTML tag, between the HTML opening tag and the HTML closing tag

2. The head tag

  • Purpose: Add configuration information to a web site
  • Such as:
    • Specifies the title of the site/specifies the small picture of the site
    • Add SEO related information about the site (specified site keywords/specified site description)
    • External CSS/JS files
    • Add some browser adaptation content

Note: Normally, the content written inside the head tag is not shown to the user. This means that the content written inside the head tag is not seen

3. The title tag

  • What it does: Specifies the title of a web site, and this title will be saved as the default title for the site

Note: the title tag must be inside the head tag

4. The body tag

  • Purpose: To define the content (text/image/audio/video) in an HTML document that needs to be displayed to the user.

Note: Although it is possible to write content elsewhere on a web page, don’t do this. Always put the content you want to display inside the body tag (an HTML opening tag and an HTML closing tag)

5. Meta tags

  • Purpose: specify character set when writing web pages to avoid garbled characters
<meta charset="UTF-8">

Copy the code

GBK(GB2312) is different from UTF-8

  • GBK(GB2312) in the storage of fewer characters, only stored Chinese characters and some commonly used foreign language volume is relatively small
  • Utf-8 stores all the text in the world, the submission is relatively large

Personal recommendation: all write utF-8

3.HTML tag classification

1. The single label

  • Only the start tag does not have the end tag, which consists of a <>
<meta charset="UTF-8" />

Copy the code

2. Double label

  • There are start tags and end tags, which consist of a <> and a 
<html>
</html>

Copy the code

4.HTML tag relational classification

1. Parallel relationship (brothers/equals)

<head>
</head>
<body>
</body>

Copy the code

2. Nested relationships (parent/subordinate)

<head> <meta charset=" utF-8 "/> <title> </head>Copy the code