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.
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
" 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.
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.
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 .