Visual Studio Code development HTML installation tutorial and simple examples

VSCode development HTML installation tutorial and simple example

Installation environment: Win10

1 Download and install Visual Studio Code

download

Click the link below and click the Download button to download the installation package.

Visual Studio Code free download address

Install

The installation of VSCode is very simple, just follow the software installation prompts, click "Next" and finish.

2 VSCode Chinese version

VSCode is a software that is very friendly to Chinese users. We can localize the software by installing Chinese plug-ins. Enter " Chinese (Simplified) Language
Insert image description here
" in the input box ; press Enter to search for the Chinese plug-in; after finding it, click the " install " button to install it. It has already been installed on my machine, so there is no install button.

3 Install and open the default browser plug-in

1. Open the VScode plug-in mall

2. Install the plug-in

Enter " Open in Browser " in the input box ; press Enter to search to open the default browser plug-in; after finding it, click the " install " button to install it. It has already been installed on my machine, so there is no install button.
Insert image description here

3. The default browser is modified to Chrome.

The default browser on most computers is IE or other browsers. However, when developing web pages or other front-end programs, it is usually recommended to use the Google Chrome browser .

Modify the default browser: Select File - Preferences - Settings , enter open-in-browser.default in the search bar , edit in the edit box as shown below, enter " Chrome " in the edit box . Just restart VSCode.
Insert image description here

4. How to quickly start writing html under VSCode

1. Create a new file (Ctrl + N)

2. Change the file suffix to .html

The newly created file Untitled-1 is in plain text format. After creation, it needs to be changed to HTML format, and the suffix is changed to .html.
After the change, you can see that the language mode and file header have changed.

3. Quickly generate standard html code

(1) Enter !the number in the first line
(2) Press the Tab key or select Enter in the code prompt !.

You can also copy the code directly to see the effect.

<!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>17-无序列表练习3</title>
</head>
<body>
    <h1>物品清单</h1>
    <ul>
        <li>
            <h2>水果</h2>
            <ul>
                <li>葡萄</li>
                <li>橙子</li>
                <li>苹果</li>
            </ul>
        </li>
        <li>
            <h2>蔬菜</h2>
            <ul>
                <li>萝卜</li>
                <li>青菜</li>
                <li>香菜</li>
            </ul>
        </li>
        <li>
            <h2>零食</h2>
            <ul>
                <li>辣条</li>
                <li>腰果</li>
                <li>瓜子</li>
            </ul>
        </li>
    </ul>
</body>
</html>

<!-- ul标签可以有li标签，li中还可以添加ul丰富界面 
alt+B 直接在默认浏览器上运行
ul>li含义：生成一对ul标签，然后在这对ul标签中再生成一对li标签
ul>li*3含义：生成一对ul标签，然后在这对ul标签中再生成3对li标签
ul>li*3>h2+ul>li*3-->

4. View the HTML page in the browser

Because the plug-in has been installed in step 3, you can open the page you wrote in the default browser by pressing the shortcut key Alt + B.

Use the shortcut keys Shift + Alt + B to choose another browser to open .

5. Actual effect

Insert image description here