Create HTML structure : 8 h (h knocking activation code block list, press 8 to select the eighth item, i.e., blocks of HTML code, or knock ht Enter)
Wrap the middle: 'Ctrl + the Enter'
Setting charset: me 6 Enter
External references js: s 2 Enter 'Ctrl + Enter'
Creating js block: s Enter
Create a function: fun 3 (or funn Enter)
A function named: W hois E
Jump to the end of the function: End 'Alt + [' ↓ 'Ctrl + Enter' (Alt + [bracket is to jump to the matching means)
Create a style node: st Enter ↓ 'Ctrl + Enter'
Reference external css: l Enter Enter
Go to the next editable area: 'Alt + ↓'
Creating img tag: im Enter Enter 'Ctrl + Enter'
Line breaks are inserted: 'Shift + Enter' Enter
Create a div and set id and class: di Enter d 1 → Space c Enter Enter (list here prompted the class is defined in test.css years)
Go to the definition of the class is: 'Ctrl + Alt + D' (press Alt mouse click can)
Close tab: 'Ctrl + w' (switch tabs can be used Ctrl + e)
Add custom properties and assignment data-test 1: → Space d 7 test Tab 1
The combined downlink: 'Ctrl + Alt + j' 'Ctrl + Enter'
Create a hyperlink and set id: a Enter Enter → Space i Enter a 1
Use the Select Assistant to select # d1: 'Ctrl + Alt + ←' 'Ctrl + Alt + ←' 'Ctrl + Alt + ←' (if shortcuts conflict, you can use Alt + SU, or double-click the mouse quotes)
Re-edit a link to the newly created a1: BackSpace 'Alt + /' Enter 'Ctrl + Enter'
Creating ul: u Enter
Folding Code: 'Ctrl + Alt + -'
Up insert a blank line: 'Ctrl + Shift + Enter' Tab (usually Ctrl + letter a shortcut, Ctrl + Shift + becomes the same letter, mostly on behalf of opposite meaning)
When no code block, emmet syntax to create a label: nav Tab (if you do not know emmet technology, search for learning, the front will learn)
Using the shift code input transfer space: 'Shift + Space' (if the input shortcut key conflict, also enter & n 2)
Create button: 'Ctrl + Enter' in Enter Enter Tab Tab who Space is Space e →
Add a click event: Space onck Enter who Enter → (onck is fuzzy matching, do not enter the full word will be fuzzy matching, in addition to all of the code block syntax prompt support fuzzy matching)
Js used to define the function: 'Ctrl + Alt + D' ↓
------ The following is part js
Definition of a variable e: var Space e; Enter assignment of e: e Space = Space do Enter g 6 "Enter (may prompt list of styles) with Enter or Tab cursor jumps to the green vertical line (vertical line if no green please. use End to end of line): Enter; Enter is e assignment 2: e Space = Space do Enter g 8 "d 8 Enter; Enter (may prompt the tag list) is e assigned 3 (this block is used):. e Space = Space $ (or dg) Enter 2 Enter; Enter (may prompt id list, attention to the selection d1) to e provided algin properties:. e se 2 "al Enter →," c Enter Enter; Enter set custom properties: e. se 2 "d Enter →," 2 Enter; Enter Tip font list: e st Enter fo 2 = "Enter Enter; Enter Tip picture list:.. e st Enter b 7 =".. hb Enter Enter; Enter can do that . write css: e st Enter cs 2 = "b 7 hb Enter →; Enter switch for write judgment e:.. sw 2 e st Enter dis Enter Tab case at the display prompts the range:" - we Enter Go to end switch (green vertical line): Enter Enter if block write: iff Enter (or to If added over 2) if the condition is determined in the style attribute:. "! C Enter Enter =" e getat Enter Enter ↓ e set style: e. Enter with there may prompt: withh (or wit 2) Enter h Enter ↓ acquired last child head of: var Space l Space = Space lec Enter; Enter (with in the head may be directly identify sub-objects) to remove the subnode : rem 6 l →; ↓ Enter (head of lastElementChild is external reference css) to dynamically generate a css file reference: e Space = Space dc Enter l 5 Enter; Enter add attributes: e r 3 = "sty Enter Enter; Enter. set type: e ty Enter = "c Enter Enter; Enter provided href:. e hr Enter =".. c Enter Enter; Enter e is added to the head: h Enter ap Enter e Enter Enter; Enter -----. - Reconstruction of presentation, i.e., rename the variable block is defined by a variable s: vars Enter Tab e Space is Space 'Ctrl + Enter' e attribute determination: ife (or if 3) Enter e g 2 "d Enter Enter =. = nu 2 ↓ as s assignment: s = s + e ou Enter; 'Alt + ↓' s-assignment:. s = s + "unknow →; ↓ Enter the s-print: al Enter s choice s and to define: 'Shift + ←' 'Ctrl + Alt + D' (press Alt click of a mouse can also be) re s named ss: 'Ctrl + F2'
Add a start event: ad Enter "domlo Enter →, funa Enter (here can also be fu 6) ↓ prompt custom function jsdoc: fini Enter 1
------ css section
Jump to CSS: 'Alt + ↓' to add body style: bo Enter {Enter emmet ways to increase textalign: tc Tab Enter fuzzy matching increase user-select: users 4 5 write a pattern: ↓ Enter an increasing pattern is input: in Enter [ty Enter = Enter → {Enter blocks of code to set the width: w 9 9 0 ↓ Enter to ul plus style: ul {dn Enter 'Ctrl + Enter' ID may also suggest: # 2 {Enter Tip Font list: ff Enter Enter the Enter auto-complete end of line semicolon: Enter increasing the background-image: bi Enter hb Enter're done, save and run the look: 'Ctrl + s' 'Ctrl + r' if you screen wide enough, you can also click on the upper right corner switch the view, while improving change to look view Ctrl + P, left right saved automatically refreshed
# Postscript: For access to all blocks of code in the future, click the menu View - Show View - Other -HBuilder- code block. If you need custom code block, click the Tools menu - extend the code block. To modify or search for shortcuts, click on the menu Tools - Options - General - shortcuts. If the browser shortcuts, click Help menu - Shortcuts.
## shortcuts syntax: Many software has hundreds of shortcuts, but no one in mind to live. To solve this problem, HBuilder introduced a shortcut syntax. Shortcuts HBuilder is a regular, though different from other software. But remember a few shortcuts grammar, able to remember most of the shortcuts. 1. Alt is a jump, Shift is the escape, Ctrl is operating. For example Alt + brackets, quotes, i.e., go to the corresponding symbols. Enter Shift + is <br/>, shift + whitespace & nbsp ;. Ctrl + D to delete the line, Ctrl + F2 is named after reconstruction. 2. Ctrl + a letter of shortcut keys, Ctrl + Shift + becomes the same letter, mostly on behalf of opposite meaning, such as Ctrl + p and Ctrl + Shift + p, respectively, are turned on and off watch and change mode. 3. HBuilder inherits all the standard windows shortcuts. For example, the Tab and Shift + Tab to indent and anti-indent, Ctrl + cursor jumps around is a word 4. All menu commands have shortcut keys & Press Alt + F and other letters you can activate the menu, each menu item text parentheses after the letters are & shortcut keys, Qiaoxia letters to activate the menu item. While you may be accustomed to using shortcuts original tool, but you can forget about it, this is the shortcut syntax memorable.
## block of code to activate the first letter of the principle characters 1. Continuous word. For example the js: dg activated document.getElementById ( ""); vari activation var i = 0; and the css, dn activated display: none; 2. the whole name tag in HTML is generally used. For example script, style, generally, up to four letters to knock the block matching needs, not the fully entered. The carriage sc, st carriage to complete Script, the input style tags. 3. Tag same, outputting a plurality of code blocks, at the last suffix. For example meta output <meta name = "" content = "" />, but the output metau <meta charset = "UTF-8" />, metag empathy. 4. If the original grammar more than four characters, for common grammar, the first word of the activation character to use abbreviations. Such as input button, abbreviated inbutton, Similarly intext is input box. 5. js keyword block, is added to the last letter in a duplicate key. For example, if a direct knock will be prompted if the keyword, but iff Enter, then if the code block appears. There are similar forr, withh so on. Since funtion long letters, to accelerate the input speed, taking fun abbreviations such funn, function block output, and the funa func, anonymous function outputs and closures.