HBuilder中的Emmet插件快速输入法

只要坚持每天做自己喜欢的事就永远不会感觉的无聊

image01.png

前言

最近也是刚刚踏入H5的行列也是没多久的，之所以要学学H5是因为Hybrid app做点只是储备。可是话又说过来了，在使用热更新(JPatch)收到苹果粑粑的警告⚠️后，貌似有很多人对于学习JS的热情不是很高啊。当然，我也不例外。但是，要知道自己在一专多能的允许情况下多学点也没错吧

好了，让我们看看怎么样最快方便的书写那些碎碎的HTML标签！

注：HBuilder中自带Emmet这个插件，如果是其他工具可以移步点击这里 Emmet

1. 嵌套标签(HBuilder是按tab键)

当输入div>ul>li，敲击tab键

屏幕快照 2017-05-02 下午4.13.10.png

2. 标签并列

输入div+p+bq

image2.png

3. 向上一级

输入div+div>p>span+em^bq，这里是和带有 ^的标签的上一级

image3.png

4. 输入多个标签

输入ul>li*5

image4.png

输入ul>li*2>a

image5.png

5. 标签分组

输入div>(header>ul>li*2>a)+footer>p

image6.png

输入(div>dl>(dt+dd)*3)+footer>p

image7.png

6. 输入属性

输入div#header+div.page+div#footer.class1.class2

image8.png

输入td[title="hello world" colspan=3]

image9.png

7. 可以自增长的数字

输入ul>li.item$$*5

image10.png

8. 标签内的文字

输入a{click me}

image11.png