Web front-end development tool Hbuilder shortcuts for using tips

*/* Note: This tutorial is for HBuilder5.0.0, date of production 2014-12-31*/

Create HTML structure : H 8 (tap H to activate the code block list, press 8 to select the 8th item, i.e. HTML code block, or knock H T Enter)

Line break: ' Ctrl+enter '

Setting CharSet: m e 6 Enter

Reference external JS: s 2 Enter ' Ctrl+enter '

Create JS Chunk: s Enter

Create function: f u n 3 (or f u n n Enter)

Name the function:W h o i s E

Jump to end of function: end ' alt+[' ↓ ' Ctrl+enter ' (alt+[is jump to match parenthesis meaning)

Create style node: s T enter↓ ' Ctrl+enter '

Reference external CSS: l Enter Enter

Jump to next editable area: ' alt+↓ '

Create an IMG tag: i m enter enter ' Ctrl+enter '

Insert line break: ' Shift+enter ' Enter

Create DIV and set ID and class:d I enter D 1→space C Enter enter (the class list you are prompted here is defined in TEST.CSS)

Go to the definition of class:' Ctrl+alt+d ' (press ALT to click the mouse)

Close tab:' ctrl+w ' (Toggle tab to use ctrl+e)

Add custom attribute Data-test and assign value 1:→space D 7 T e s T Tab 1

Combined downside:' ctrl+alt+j ' ctrl+enter '

To create a hyperlink and set the ID: A enter enter→space I enter a 1

Use the selection assistant to select #d1: ' ctrl+alt+← ' ctrl+alt+← ' ctrl+alt+← ' (use Alt+s U if shortcut keys conflict, or double-click the quotation marks)

Re-modify the link to point to the newly created a1:backspace ' alt+/' Enter ' ctrl+enter '

Create ul: u Enter

Folding code:' ctrl+alt+-'

Insert blank line up: ' Ctrl+shift+enter ' Tab (general Ctrl + A letter of the shortcut key, become ctrl+shift+ the same letter, most of which represents the opposite meaning)

Use Emmet syntax to create tags when there is no code block: N A v tab (if you do not know Emmet technology, search for learning, front-end must learn)

Use Shift transcoding to enter spaces: ' Shift+space ' (Input & N 2 if conflicting with IME shortcut)

Create button:' ctrl+enter ' i n Enter enter Tab tab w H o space i s space e→

Add Click event: Space o n C k Enter W h o enter → (Onck is a fuzzy match, without entering the full word will also blur the match, except for the code block all syntax hints support fuzzy matching)

Use the go To definition to JS function:' ctrl+alt+d ' ↓

------The JS section below

Define a variable e:v a r Space E; Enter is an e assignment: e Space = space  d o Enter. G 6 "Enter (hint style list) Use carriage return or tab jump cursor to the green vertical line (use end to end if no green vertical bar): Enter; Enter is e-assigned 2:e Space = space  d o Enter. G 8 "D 8 Enter; Enter (the prompt label list) is an e assignment of 3 (this code block is very common): e Space = space  $ (or DG) enter 2 enter; Enter (Prompt for the list of IDs, note select D1) to set the Algin property for E: E. S e 2 "A l enter→," C Enter enter; Enter to set custom properties: E. S e 2 "D enter→," 2 Enter; Enter prompt Font list: E. S T Enter. F o 2 = "Enter enter; Enter A list of suggested pictures: E. S T Enter. b 7 = "H b enter enter; Enter can also write Css:e. S T Enter. C s 2 = "b 7 h b enter→; Enter Write switch to E judge: s W 2 e. S T Enter. D i s Enter Tab case indicates the range of display: "-W e Enter jump to switch end (with green vertical bar): Enter enter to write if code block: I f f Enter (or use I f 2) for if add condition judgment attribute The style: E. G e t a T enter "C Enter enter! = "Enter↓" sets the style of E: E. C L 2 (can also be used here C l N Enter) = "Enter enter; ↓enter JS can prompt html:e. I n N Enter = "< f o Enter Space c o enter enter enter; Enter e assignment to hyperlink: E space = Space $ enter Enter enter; Enter to add chain to A1Answer address: E. H R Enter =  "enter enter; Enter to A1 plus target:e. T 5 =  "enter enter; The value of Enter E is changed to the image object: E space = space n e w space i M 6 Enter; Enter add image to IMG: E. s R Enter = "Enter enter; The value of Enter e is changed to INDEXEDDB object: E space = Space W i Enter. I Enter Space | | Space W i Enter .  i n d e x e d 5 Space | | Space w i Enter. i n d e x e d 3 Space | | Space w i Enter. i n d e x e D 2; Enter confirm E can be recognized by the browser: I f f Enter (can also use I f 2) T Y 4 e enter↓ method to execute Indexdb: E. o p enter "T e s t Enter; ↓enter------The following is a delete plus add external CSS reference definition head variable: v A r space H e a D space = Space D o Enter. G 8 "H e enter enter [0→; Enter with can also prompt: W i t h H (or w i t 2) Enter H enter↓ Gets the last child node of head: V A r space L space = space L e c Enter; Enter (the head of the with can directly identify the sub-object) Remove the child node: r e M 6 l→; ↓enter (Head lastelementchild is the externally referenced CSS) dynamically generates a CSS file reference: E space = space D C enter L 5 enter; Enter Add Property: E. R 3 =  "s t y enter enter; Enter to set type:e. T y enter = "C Enter enter; Enter to set href:e. H R Enter = " . c Enter enter; Enter add E to head: H enter. A P enter e enter enter; Enter------demonstrate refactoring, which is to rename variables with code blocks to define a variable s:v a R s Enter Tab e space i s space ' ctrl+enter ' to determine the properties of E: I f E (or I f 3) Enter E. G 2 "D enter Enter = = N u 2↓ for s assignment: s = S + E. o u Enter; ' alt+↓ ' assigns value to s: s = s + "U n k n o w→; ↓enter will print S: A l Enter s  select s and go To Definition: ' shift+← ' ctrl+alt+d ' (press ALT to click the mouse can also) refactor s named SS: ' Ctrl+f2 ' Enter S s enter enter Out dialog box to preview the refactoring result) jump to the end of the function: ' alt+↓ ' alt+↓ ' Enter

Add a boot event: a D Enter "D o m l o enter→, f u n a Enter (this can also be F u 6) ↓ hint for custom function jsdoc:f i n i Enter 1

------CSS Section

Jump to CSS: ' alt+↓ ' to body Add style: b o Enter {Enter Emmet way increase textalign:t C Tab Enter Blur match increase User-select:u s E R S 4 5 write next style: ↓enter Add style to input: i n enter [t y enter = enter→{Enter use code block to set width: W 9 9 0↓enter for UL plus style: U l {d n enter ' Ctrl+enter ' ID can also prompt: # 2 {Enter hint font list: F F Enter enter enter return auto wrap tail Semicolon: Enter add background-image:b I enter h b enter done, save and run up look: ' Ctrl+s ' C Trl+r ' If your screen is wide enough, you can also click on the upper right corner to switch, change to the edge to see the view ctrl+p, left to save the right to automatically refresh

#后记: If you want to check all the code blocks later, click menu View-Show view-other-hbuilder-code blocks. If you need a custom code block, click the Menu tool-extend the code block. To modify or search for shortcut keys, click menu Tools-Options-general-shortcut keys. If you browse shortcut keys, click menu Help-Shortcuts.

# #快捷键语法: A lot of software has hundreds of shortcuts but no one has to remember. To solve this problem, Hbuilder introduced the shortcut key syntax. Hbuilder's shortcut keys are regular, although different from other software. But remember a few shortcut key syntax, you can memorize most of the shortcut keys. 1. Alt is jump, shift is escaped, CTRL is action.   For example, ALT + parentheses, quotation marks, to go to the corresponding symbol.  shift+ Enter is the <br/>,shift+ space is &nbsp;.  ctrl+d is the delete row, CTRL+F2 is the refactoring name. 2. Ctrl + A letter of the shortcut keys, to become ctrl+shift+ the same letter, most of the opposite meaning   such as ctrl+p and Ctrl+shift+p, respectively, is open and close to see the side change mode. 3. Hbuilder inherits all Windows standard shortcuts.   such as tab and Shift+tab indentation and anti-indentation, CTRL + around is the cursor jumps a word 4. All menu commands have & Shortcuts   Press ALT+F to activate the menu, and the letters in parentheses after each item in the menu are & shortcut keys, and the menu item is activated when the letter is hit. While you may be used to the shortcuts of the tools you used, you can forget about them, and this set of keyboard shortcuts is worth remembering.

# #代码块激活字符原则 1.  The first letter of a continuous word.  such as JS: DG activation document.getElementById ("");  Vari activating var i=0; And in CSS, DN activates display:none;  2. The name of the tag is generally used for the entire HTML section.  For example, script, style, usually, hit up to 4 letters can match to the required code block, do not need full input. such as SC return, St Return, you can complete the script, style label input.  3. The same tag, with more than one code block output, is appended with the last suffix. For example meta output <meta name= "" content= ""/>, but Metau output <meta charset= "UTF-8"/>,metag in the same vein.  4. If the original syntax is more than 4 characters, for common syntax, the first word's activator uses an abbreviation. For example, input button, abbreviated to Inbutton, Intext is the input box.  5. JS keyword code block, is the keyword at the end of the word plus a repeating letter.  For example if a direct knock will prompt the IF keyword, but the IFF returns, then an if code block appears.  Similar to have Forr, withh and so on. Because the funtion letter is longer, in order to speed up the input speed, take the fun abbreviation, such as Funn, output function code block, and Funa and func, respectively, output anonymous functions and closures.

Reprint to Hbuilder

Web front-end development tool Hbuilder shortcuts for using tips