html开发快捷键

1. 整体结构

HTML5初始结构：! tab键

XML初始结构：html:xt tab键

2. id属性及class属性

(div#test或者#test ) + tab键

<div id="test"></div>

(div.test或者.test) + tab键

<div class="test"></div>

3. 节点

子节点：> 如：div>ul>li + tab键

<div>
    <ul>
        <li></li>
    </ul>
</div>

兄弟节点：+ 如：div>ul+p

<div>
    <ul></ul>
    <p></p>
</div>

上级节点: ^ 如： div>ul>li^div

<div>
    <ul>
        <li></li>
    </ul>
    <div></div>
</div>

4. 重复次数

*：表示节点重复次数
如：div*5

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

如：div>ul>li*4

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

5. 分组

括号里面的内容为一个代码块，表示括号内部嵌套和外面的层级无关。

如：div>(ul>li>a)+div>p

<div>
		<ul>
			<li><a href=""></a></li>
		</ul>
		<div>
			<p></p>
		</div>
	</div>

6. 属性

属性指令：[]

如：a[href=xxx name=xxxx] 中括号内填写属性键值对的形式，并且空格隔开。

<a href="fengdi.org" name="fengdi's blog"></a>

编号指令：$

ul>li.test$\ast 3（$代表一位数，后面更上*数字就代表从1递增到填写的数字

<ul>
    <li class="test1"></li>
    <li class="test2"></li>
    <li class="test3"></li>
</ul>

一个$ 代表一位数，$$就是两位数了。

如：ul>li.test$$*03

<ul>
    <li class="test01"></li>
    <li class="test02"></li>
    <li class="test03"></li>
</ul>

7. 文本

文本指令：{}

ul>(li.testKaTeX parse error: Expected '}', got 'EOF' at end of input: *3{测试})*3 （{里面填写内容，可以和$一起组合使用}）

<ul>
	<li class="test1">测试1</li>
	<li class="test2">测试2</li>
	<li class="test3">测试3</li>
</ul>