Hbuilder tutorial (Introduction)


What is hbuilder?

Hbuilder is a web development ide supporting HTML5 launched by dcloud (Digital Paradise). Hbuilder is written in Java, C, web and ruby. Hbuilder itself is written in Java. It is based on eclipse, so it is naturally compatible with eclipse plug-ins. Fast is the biggest advantage of hbuilder, which greatly improves the development efficiency of HTML, JS and CSS through complete syntax prompts, code input methods, code blocks, etc.

How to install hbuilder?

Hbuilder download address: on hbuilder official websitehttp://www.dcloud.io/Click free download to download the latest version of hbuilder.

Hbuilder currently has two versions, one is the Windows version and the other is the Mac version. When downloading, choose the appropriate version according to your computer.

Create a new project using hbuilder

Click file → new → select web project (press ctrl+n, w to trigger quick new (for MacOS, use command+n, and then left click web project))



As shown in the above figure, please fill in the name of the new project in place a, fill in (or select) the project saving path in place B (change this path hbuilder will record, and the changed path will be used by default next time), and select the template to use in place C (you can click the custom template, and refer to the readme.txt custom template in the open directory)

Create HTML pages with hbuilder

Select the newly created project in Project Explorer, click file → new → select HTML file (press ctrl+n, w to trigger quick new (for MacOS, use command+n, and then left click HTML file)), and select a blank file template, as shown in the following figure


Use hbuilder to try while changing to see the programming effect

The win system presses ctrl+p (command+p for MacOS) to enter the view while changing mode. In this mode, if an HTML file is currently opened, it will automatically refresh every time it is saved to display the effect of the current page (if it is a JS or CSS file, it will also refresh if it has a reference relationship with the page opened by the current browser view)

Hbuilder code block greatly reduces the workload of repeated code

Enter h in the open getstart.html, as shown in the following figure


Then press 8 to automatically generate the basic code of HTML, as shown in the following figure


What is a code block?

Code blocks are commonly used code combinations. For example, if you enter $, enter in JS, and then you can automatically enter document.getelementbyid (ID).

To view and edit code blocks, you can select the corresponding code block in tools – custom code block to view and edit. You can also click the modify icon in the lower right corner of the details in the code assistant of the active code block to modify and view.

Code block activation character principle 1:The first letter of a continuous word. For example, DG activates document getElementById(“”); Var I activation var i=0; DN activate display: none;

Code block activation character principle 2:The name of tag is usually used for the whole HTML. For example, script and style, usually, you can match the required code block by typing up to 4 letters, without complete input, such as SC enter and St enter, you can complete the input of script and style tags.

Code block activation character principle 3:If the same tag has multiple code block outputs, add a suffix at the end. For example, meta outputBut metau is output, metag is the same.

Code block activation character principle 4:If the original grammar is more than 4 characters, for common grammar, the activator of the first word uses abbreviation. For example, input button, abbreviated as input button, similarly, intext is an input box.

Code block activation character principle 5:JS keyword code block is to add a repeating letter at the end of the keyword. For example, if typing directly will prompt the if keyword, but if enter, the if code block will appear. Similar ones are forr, withh, etc. Due to the long letter of funtion, in order to speed up the input speed, take the abbreviation of fun, such as fun, and output the function code block, while Funa and func output anonymous functions and closures respectively.

Flexible shortcut keys make the programming process hands on the keyboard

The effect is shown in the figure below


After creating a new HTML basic template, the current cursor is in the title tag. At this time, we set the title:hellohbuilder for HTML, and then use Ctrl + enter to insert an empty line in the next line of the current and move the cursor to the next line

Here we use SC code block to generate a script block to write JS code (enter SC and enter), as shown in the following figure


Use the fun code block to write a JS method HelloWorld (enter fun, enter) as shown in the following figure


At this time, the method name of the generated method is selected. We just need to directly enter the new method name HelloWorld, as shown in the following figure


The green vertical line in the above figure is the next editing position specified in the code block. Tapping the enter cursor will directly jump to the vertical line position

At this time, press down, down, Ctrl + enter, enter style, and generate CSS code area

Define a CSS class classA: input C l a s s a {enter, f o n t enter enter enter enter enter

Then press alt+ to jump to the next editing area

Enter < d I V in turn, or enter <dv enter, <iv enter. The grammar assistant can know the label you want to generate through fuzzy matching) as shown in the following figure


As shown in the above figure, the left side of the code assistant contains numbers, which can be used to select the corresponding entries, and the right side contains browser compatibility data and examples

Enter I enter d 1, right arrow, space, c enter enter enter

Hover the mouse over the class attribute classA of div tag, press ALT and left button, and click to jump to the definition of classA


Div can also be generated through code blocks. For example, enter divc, enter, enter, and enter HelloWorld, as shown in the following figure

Down, enter

Use CSS selector syntax to quickly develop HTML and CSS (Emmet support)

Enter div\page>div.logo+ul\navigation>li*2>a, and press tab to generate the code as shown in the following figure


Hbuilder integrates Emmet function, and you can quickly develop HTML and CSS through CSS selector syntax. If you want to understand Emmet deeply, please move onhttp://www.emmet.io/

The powerful JS parsing engine greatly accelerates the speed of JS development. HTML and cssjs prompt the ID of HTML in JS


JS prompt HTML tagName


JS prompt CSS class name


JS can not only obtain HTML elements through ID, tagName and CSS class name, but also accurately analyze their element types and accurately prompt their attributes. As shown in the above figure, list[0].type can be prompted

Prompt JSON in JS


JS prompt custom system method


JS prompt object reference and its properties and methods


JS prompt closure object



Jump to class, ID, JS method definitions

Press alt, left click the referenced method name, ID, CSS class, file (link, image), and you can jump to the referenced place, or cross file references

Jump to the JS method definition, as shown in the following figure


Jump to the CSS class definition, as shown in the following figure


Jump to the ID definition, as shown in the following figure


Jump to file as shown below


More treasure digging

Jump assistant, selection assistant, escape assistant, shortcut assistant, so that your hands do not leave the keyboard.

Html5+ support, real phone debugging and cloud compilation make it convenient to develop apps across mobile platforms.

More wonderful functions: reconstruction | outline | task | version history | built-in webserver | real time upgrade | security engineering management | surrounding | mask conversion | intelligent error correction | folding code | go to definition | formatting code | URL encoding and decoding | hexadecimal conversion | automatic closure.

Not satisfied? Download plug-ins to enhance more functions. Experts can develop plug-ins and share plug-ins for the benefit of all developers.

Recommended Today

JS generate guid method

JS generate guid method https://blog.csdn.net/Alive_tree/article/details/87942348 Globally unique identification(GUID) is an algorithm generatedBinaryCount Reg128 bitsNumber ofidentifier , GUID is mainly used in networks or systems with multiple nodes and computers. Ideally, any computational geometry computer cluster will not generate two identical guids, and the total number of guids is2^128In theory, it is difficult to make two […]