HBuilderX quick start

HBuilderX is currently the fastest HTML development tool, a powerful code assistant to help you quickly complete development, the most complete syntax library and browser compatibility data make browser fragmentation no longer headaches, very suitable for novices, here is a summary of the most common The shortcut keys are welcome to watch the collection.

1. Shortcut keys

Here are some of the more commonly used shortcut keys, if you master the efficiency double
Ctrl+C Copy text
Ctrl+V Paste text
Ctrl+Z Retract/return to the previous step
Ctrl+Y Cancel the previous step
Ctrl+B Text bold
Ctrl+ K Format text/make the text more beautiful
Ctrl+T Create a new document
Ctrl+R Use browser to preview
Ctrl+S Save the file
Ctrl+A Select all text
Ctrl+D Delete the line where the cursor is
Ctrl+L Select this line of text
Ctrl+/ Comment Selected area

2. Form a basic html structure

First create an html file, and then enter
! + Tab

THML+enter (Enter key)

html>(head>title>{title})+body>{content} +Tab

The result is shown in the figure:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
	</body>
</html>

3. Any label + Tab key to create a normal label

img + Tab键

<img src="" alt="">

a + Tab键

<a href=""></a>

4. Special symbols

The asterisk key represents multiple
*
p*5 + Tab keys and the result is as follows:

		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>

> On behalf of the subset
tr>td + Tab, the results are as follows:

	<tr>
		<td></td>
	</tr>

+ Represents brother
a+img + Tab

<a href=""></a>
<img src="" alt="">

() represents the group
tr>(th+td) + Tab

		<tr>
			<th></th>
			<td></td>
		</tr>

{} Represents the text
p>{Hello, I am Tranquility and Zhiyuan} + Tab

<p>您好,我是宁静和致远</p>

$ Represents the sequence
p*5>{th line} + Tab

		<p>第1行</p>
		<p>第2行</p>
		<p>第3行</p>
		<p>第4行</p>
		<p>第5行</p>```

@ Represents the starting position
p*5>{line $@100} + Tab

		<p>第100行</p>
		<p>第101行</p>
		<p>第102行</p>
		<p>第103行</p>
		<p>第104行</p>

p*5>{th $@-line} + Tab key reverse order

		<p>第5行</p>
		<p>第4行</p>
		<p>第3行</p>
		<p>第2行</p>
		<p>第1行</p>

Guess you like

Origin blog.csdn.net/qq_42076902/article/details/112628004