Write dozens of lines of code for a no-mouse programming tour to see who is e ——— (html5:hbuilder5.0.0)

* Note: This tutorial is for hbuilder5.0.0*
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 '
Set 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 '
Create a hyperlink and set 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 a 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
Assign value to e: E space = Space D o Enter. G 6 "Enter (hint Style list)
Use the carriage return or tab jump cursor to the green vertical line (use end to end if there is no green vertical bar): Enter; Enter
Assign value 2:e space = Space D o Enter for E. G 8 "D 8 Enter; Enter (Can prompt the label list)
Assign a value of 3 to E (this code block is very common): e space = Space $ (or DG) enter 2 enter; Enter (can prompt for ID list, note select D1)
Set the Algin property for E: E. S e 2 "A l enter→," C Enter enter; Enter
Set custom properties: E. S e 2 "D enter→," 2 Enter; Enter
Hint Font list: E. S T Enter. F o 2 = "Enter enter; Enter
Hint Picture list: E. S T Enter. b 7 = "H b enter enter; Enter
You can write css:e like that. 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
The case indicates the range of display: "-W e Enter
Jump to switch end (with green vertical bar): Enter enter
Write if code block: I f f Enter (or use I f 2)
For if add condition to judge the style in the attribute: E. G e t a T enter "C Enter enter! = "Enter↓
Set 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 changed to hyperlink: E space = Space $ enter Enter enter; Enter
Add link to A1 address: E. H R Enter = "Enter enter; Enter
Add target:e to A1. T 5 = "Enter enter; Enter
The e assignment is changed to the image object: E space = space n e w space i M 6 Enter; Enter
Add a picture for IMG: E. s R Enter = "Enter enter; Enter
E assignment 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 of executing indexdb: E. o p enter "T e s t Enter; ↓enter
------The following to remove and add an external CSS reference
Define head variable: v A r space H e a D space = Space D o Enter. G 8 "H e enter enter [0→; Enter
With inside can also hint: 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 sub-objects)
Remove the child node: r e M 6 l→; ↓enter (Head lastelementchild is the externally referenced CSS)
Dynamically generate a CSS file reference: E space = space D C enter L 5 enter; Enter
Add attribute: E. R 3 = "s t y enter enter; Enter
Set the Type:e. T y enter = "C Enter enter; Enter
Set the Href:e. H R Enter = ". c Enter enter; Enter
Add E to head: H Enter. A P enter e enter enter; Enter
------demonstrating refactoring, renaming variables
Define a variable with code block S:V a R S Enter Tab e space i s space ' ctrl+enter '
Determine the properties of E: I f E (or I f 3) Enter E. G 2 "D enter Enter = = N u 2↓
Assign value to S: s = S + E. o u Enter; ' Alt+↓ '
Assign value to S: s = s + "U n k n o w→; ↓enter
Print S: A l Enter s
Select s and go To Definition: ' shift+← ' ctrl+alt+d ' (press ALT to click the mouse)
Refactoring s named SS: ' Ctrl+f2 ' Enter S s enter enter (pop-up dialog to preview the refactoring results)
Jump to end of function: ' alt+↓ ' alt+↓ ' Enter

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

------CSS Section
Jump to CSS: ' alt+↓ '
Add style to body: b o enter {enter}
Emmet Way Add textalign:t C Tab Enter
Fuzzy match increase User-select:u s E R S 4 5
Write down a style: ↓enter
Add style to input: i n enter [t y enter = enter→{Enter
Set width with code block: 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
Enter auto-fill tail semicolon: Enter
Add background-image:b I enter h b enter
Done, save and run up and look: ' Ctrl+s ' ctrl+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

#后记:
To see all the code blocks in the future, 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.

# #快捷键语法:
Many software have hundreds of shortcut keys but no one to remember. To solve this problem, Hbuilder introduced the shortcut key syntax. The shortcut keys for the
Hbuilder 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 + brackets, quotes, go to the corresponding symbol. The
shift+ carriage return is the <br/>,shift+ space is &nbsp;. The
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 standard shortcut keys for Windows.
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 brackets after each item in the menu are & shortcut key To activate the menu item by tapping the letter.
Although you may get used to the shortcuts of the tools you used originally, you can forget about them, 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,
For example, Funn, output function code block, and Funa and func, respectively output anonymous functions and closures.

Not a perfect delimiter.

The above instructions and code, such as wrong, please communicate a lot, small part sincerely hope that H5 technology can quickly grow.

Write dozens of lines of code for a no-mouse programming tour to see who is e ——— (html5:hbuilder5.0.0)