HTML Editor


HTML Editor Recommendation

You can use a professional HTML editor to edit HTML. The tutorial recommends several commonly used editors:

You can download the corresponding software from the official website of the above software and install it according to the steps.

Next, we will show you how to use the VS Code tool to create HTML files.


VS Code

Visual Studio Code (VS Code for short) is an open source code editor developed by Microsoft that supports operating systems such as Windows, Linux and macOS at the same time. The editor has built-in extension management functions.

VS Code installation tutorial reference: (under construction)

Step 1: Create a new HTML file

After the VS Code installation is complete, select "File (F) => New File (N)", and enter the following code in the newly created file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>The TutorialFish (tutorialfish.com)</title>
</head>
<body>
    <h1>My first Title</h1>
    <p>My first paragraph</p>
</body>
</html>


image.png

Step 2: Save As a HTML file

Then select "File (F) => Save as (A)", the file name is TutorialFish.html:

image.png

When you save HTML files, you can use either .htm or .html extension. There is no difference between the two. According to your preference, we suggest using .html uniformly .

Save this file in an easy-to-remember folder, such as tutorialfish

Step 3: Run this HTML file in the browser

Then right-click the file name on the editor and choose to open it in the default browser (other browsers can also be used):

image.png

Note: The "Open in Default Browser" plug-in needs to be installed to open html files in a browser in VSCode .

The operation display results are similar to the following:

image.png

VS Code and Sublime Text can also cooperate with Emmet plug-ins to improve encoding speed.

Emmet official website: http://emmet.io/