Hbuilder x installation tutorial (front-end html5 development)


foreword

Tip: This article can quickly understand the software Hbuilder x:
I am a novice in front-end development, but I can write the installation tutorial of this software, and give simple examples to show that the software Hbuilder x is not complicated, and it is very easy to use. It's simple, and it's domestic software, so don't worry about not being able to use it!


Tip: The following is the text of this article, and the following cases are for reference

1. What is Hbuilder x?

A: HBuilder is a web development IDE launched by DCloud (Digital Paradise) that supports HTML5. HBuilder is written using Java, C, Web and Ruby. The main body of HBuilder itself is written in Java, which is based on Eclipse, so it is naturally compatible with Eclipse plug-ins. Fast is the biggest advantage of HBuilder. Through complete syntax prompts, code input methods, code blocks, etc., the development efficiency of HTML, js, and css is greatly improved.
Tip: If you are a novice like me, then you can understand that I want to learn front-end h5, this software is very suitable, simple and fast! Note: "IDE (Integrated Development Environment)"

2. Download steps

1. Official website URL

Link: http://www.dcloud.io/

Hbuilder x is the latest version of Hbuilder, this software is free to download .

insert image description here


2. Select the version (official version, Alpha version)

Official version: relatively stable.
Alpha version: There are more updates, which is equivalent to the game experience server. It is recommended that you choose the official version.
HBuilder x currently has two versions, one is the windows version and the other is the mac version. When downloading, choose the version that suits you according to your computer.

2.1 windows version

insert image description here
Click to download: Standard Edition insert image description here
Step 1: We prepare a disk in advance, which can be dedicated to the software we usually use. You can see that the Hx compressed package is downloaded from the official website. After downloading, we can create a Hbuilder x folder, unzip the compressed package we just downloaded to the folder we want to put.

Step 2: Open the folder you just decompressed, find the Hbuilder x.exe file, right-click it, and run it as an administrator.
Note: Hbuilder x does not need to be installed, it can be run directly!
insert image description here

2.2mac version

Because my computer is a windows system, I don't know much about the mac version, but the download process is the same as that of the windows system.


2.3 Create a project

Tip: As a personal habit, coded programs should be placed in a separate folder, so that it is easy to find.

We only create a simple Html5 project today, and run the program to get the result!
insert image description here
Click on the file, select New Project, select Common Project, and fill in the project name. For example, what I wrote is HEMLCSS, try to use English as much as possible. You should notice that my project is saved in the Hbuilder x file under the F drive, and it will be this in the future. The location is convenient for you to find later!

2.3.1 Create a directory in the project

A project can contain many directories, and each directory will have a corresponding program. After we create the project, we can right-click the project to create a directory, such as the 001 blog I created in the picture, the 002 news list, and the 003 picture. use etc.
insert image description here

2.3.2 Create .html files in the directory

Right-click the 001 blog directory, choose to create a .html file to write our program! Then I will name the files in the directory
as index.html. I don’t know how to explain this to everyone.

insert image description here

2.4 Run the program

I won’t talk about the code writing process, let’s just see what the simplest program looks like on the web page!
insert image description here

Summarize

Tip: Here is a summary of the article: the above is what I will talk about today. This article briefly introduces the installation and use of Hbuilder x, and runs a simple program.
The author is also a novice. The purpose of writing this blog is to consolidate the knowledge I have learned and share with everyone. If there are any mistakes, please correct me!

Guess you like

Origin blog.csdn.net/weixin_51624736/article/details/114541166