kano个人博客:前端开发省时利器“emmet插件”之html语法教程

kano个人技术博客 web前端开发 985 次浏览 没有评论

对前端有些经验的同学对emmet应该并不陌生,对这个词不熟悉的同学也应该对它的前身——Zen Coding略有耳闻。作为一款能节省大量时间的小工具,大多数的IDE和很多的小型编辑器中都内置了它。本文kano个人技术博客将以webstrom作为开发工具,从头开始详细介绍一下emmet的用法。

emmet插件

首先是一个最基础的问题:如果要写一个div标签,你会怎样写?就wb(指代webstrom)来说,你可以这么打:

<div

然后按>”的一瞬间,一个div就自动补齐了:

<div></div>

也就是说,IDE理解了你的意思,你打了前半个标签,IDE就知道你想要做什么,并帮你把剩下的事情做好了,emmet也是基于这个思想:用最少的代码表达你要做的事情,然后按一个键(通常是Tab,有的编辑器的实现中你也可以自定义这个键),emmet就会帮你实现。

emmet的用法一言概之就是如此,在下面我会详细介绍emmet的各种使用例子,并在上方写emmet代码,下方写展开后的代码。

1. 单个标签

div
<div></div>

并没有什么特别的。

2. 带class与id的标签

div#side.a.b
<div id="side" class="a b"></div>

一次写入了id和两个类,很方便,如果标签是div的话甚至可以省略:

#side.a.b
<div id="side" class="a b"></div>

3. 写入属性

a[href=http://www.baidu.com]
<a href="http://www.baidu.com"></a>

4. 写入内容

a[href=http://www.baidu.com]{这是一个链接}
<a href="http://www.baidu.com">这是一个链接</a>

5. 嵌套的多个标签

“>”表示元素的子元素,和css类似的语法,很容易理解。

#header>h1>span
<div id="header">
  <h1><span></span></h1>
</div>

注意“>”两边是不能有空格的。

6. 建立两个同级元素

使用“+”符号。

#header+#main
<div id="header"></div>
<div id="main"></div>

7. 建立两个同级元素,其中第一个元素包含一个子元素

符号“^”用于返回上一层。

#header>h1^#main
<div id="header">
  <h1></h1>
</div>
<div id="main"></div>

8. 建立三个统计元素,其中都有子元素

(#title>h1)+(#sub-title>h2)+(#sub-sub-title>h3)
<div id="title">
  <h1></h1>
</div>
<div id="sub-title">
  <h2></h2>
</div>
<div id="sub-sub-title">
  <h3></h3>
</div>

可以使用括号来给元素分组,诚然可以用上例中的符号“^”返回上一级来完成同样的操作:

#title>h1^#sub-title>h2^#sub-sub-title>h3
<div id="title">
  <h1></h1>
</div>
<div id="sub-title">
  <h2></h2>
</div>
<div id="sub-sub-title">
  <h3></h3>
</div>

然而过多的元素显得很乱,这时用“()”来分组显得清晰的多。

9. 生成多个元素

如果要生成一个无序列表,其中有10个元素,你会怎么做?将一行复制10遍吗?

ul#nav>li*10
<ul id="nav">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

“*”操作符很智能的帮我们完成了这一点,只要在“*”后面写上想要生成的数量就会帮你自动生成。

不只是单个元素,嵌套的元素也可以,如生成一个3行4列的表格:

table>tr*3>td*4
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

是不是很方便?不过如今的前端,表格的内容通常是循环得到的,像一次性生成一个大表格的情况用的少了。

10. 带索引的元素

有时候的一些需求下,我们会希望class带一个索引按顺序排列,或者是内容中有一个索引,这时可以是用“$”操作符:

ul>li{$.}*5
<ul>
  <li>1.</li>
  <li>2.</li>
  <li>3.</li>
  <li>4.</li>
  <li>5.</li>
</ul>

默认$从1开始递增,也可以指定从某个值递增:

ul>li{$@4.}*5
<ul>
  <li>4.</li>
  <li>5.</li>
  <li>6.</li>
  <li>7.</li>
  <li>8.</li>
</ul>

甚至可以递减:

ul>li{$@-.}*5
<ul>
  <li>5.</li>
  <li>4.</li>
  <li>3.</li>
  <li>2.</li>
  <li>1.</li>
</ul>

递减到某值:

ul>li{$@-4.}*5
<ul>
  <li>8.</li>
  <li>7.</li>
  <li>6.</li>
  <li>5.</li>
  <li>4.</li>
</ul>

※ 需要注意的是,“$”从1递增的用法几乎所有支持emmet的编辑器都支持,而后面几种用法(从某值递增,递减)则并非所有的编辑器都支持。

emmet中的html操作该个人博客就介绍到这些,如果善用的话,甚至可以减少2/3的代码书写量,下一篇kano将会介绍emmet中的css用法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go