快捷导航

前端开发神器 Emmet 生成 HTML 的基础语法详解

VIEW CONTENTS

盒子云 - 喜欢给你阳光，让你充满活力 › Index ›技能GET › 查看内容

前端开发神器 Emmet 生成 HTML 的基础语法详解

2018-7-18 13:39| 发布者: 盒子云| 查看: 2626| 评论: 0

摘要: 在上篇文章前端开发神器 Emmet 介绍中，我简单的介绍了一下 Emmet ，并且用了一句指令迅速生成了一大片 HTML 代码。本文，就会介绍 Emmet 的 HTML 语法，看完之后，你就会看懂并且写出那句代码了。

EMMET 简介

你知道吗？Emmet 是一款著名的编辑器插件，以前被称作为 Zen Coding。

使用 Emmet 可以帮助程序员快速的编写 HTML 和 CSS 代码，从而提高 Web前端开发的效率。

其实早在2009年，Sergey Chikuyonok（来自俄罗斯的程序员，你懂得）写过一篇文章，说你们还在一行一行的写代码吗？弱爆了有没有！

他提出了一种编写 HTML 和 CSS 的新方法，这一革命性的插件指的就是 Zen Coding。

广大码（diao）农（si）看到以后，感觉好屌的样子，于是共同耕耘，你浇水来我浇水，一起完善ZenCoding，经过很多开发者多年来的努力与帮助，现在已达到了一个新的水平，也就是今天所说的 Emmet 插件。

Emmet主要的技术是通过缩写（Abbreviations）来实现代码片段（Snippets）的输出。

（安装方法请自行百度，如果没有找到安装方法，亲，下面的所有内容请自行忽略。。。）

例如，我们在安装好Emmet插件的编辑器中输入下面的语法

#page>div.logo+ul#navigation>li*5>a{Item $}

通过Tab（制表符）按键【按键坏了还可以使用 ctl+shift+e】，编辑器就可以自动生成下面的代码片段了

读者：如果 ctl + shift + e 也坏了呢？

大蜥蜴：买个键盘吧，强烈推荐青轴！

<div id="page">
    <div class="logo"></div>
     <ul id="navigation">
         <li><a href="">Item 1</a></li>
         <li><a href="">Item 2</a></li>
         <li><a href="">Item 3</a></li>
         <li><a href="">Item 4</a></li>
         <li><a href="">Item 5</a></li>
     </ul>
</div>

更多的信息可以通过访问官网地址：http://docs.emmet.io](http://docs.emmet.io 来获取

也可以通过文档：http://docs.emmet.io/cheat-sheet/](http://docs.emmet.io/cheat-sheet/ 来快速查询

语法

1. 元素标签

在支持 Emmet 插件的编辑器中，我们只需要键入元素名称，通过制表符（Tab）键就可以快速生成标签。

需要注意的是，如果输入的不是HTML合法标签，Emmet 也可以帮助我们生成对应的开闭标签。

EMEMT：MD老子才不管你输入的是不是对的呢！

原因是一方面 Emmet 不会帮助我们检查HTML的语法，另一方面，HTML5 本身也支持自定义标签了。

比如下面的代码中，通过div生成div的开闭标签，foo则生成了foo的开闭标签。

div → <div></div>
foo → <foo></foo>

有意思的是，如果我们输入 hr（分隔符）或 br（换行），则生成的标签就会自动识别成自关闭标签 ^_^

hr → <hr>
br → <br>

注意：所有语法必须在后缀是 .html 或者 .css 之类的文件中才有效哦

2. 元素之间的关系 - 层级操作符

层级操作符（Nesting operators）可以生成标签之间的层级结构，熟练掌握以后，可以更快的编写复杂的代码片段，其中

> 号生成某个元素的子元素，比如：header>h1，可以生成

<header>
<h1></h1>
</header>

+ 号生成某个元素后面的同级元素（hey, brother!），比如 div+p，可以生成

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

^ 号生成某个元素上一级元素（父元素），比如，div>p^div，可以生成

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

* 号生成连续多个元素（乘法，你懂得），比如，ul>li*5，可以生成

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

() 号将多个元素合并成一个独立的单元，比如，table>(tr>td*3)*3，可以生成

大蜥蜴：最爱这个功能，尤其是有软妹子在旁边的时候，啪啪啪的生成，各种涨脸，哈哈哈

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

3. 元素中属性的处理 - 属性操作符

# 号生成 id 属性，. （注意这里是一个英文的句号）号生成 class 属性，比如，div#main，可以生成

<div id="main"></div>

div.info，可以生成

<div class="info"></div>

再Nubility一点，可以混在一起使用，比如，div#main.info.page-header，可以生成

<div id="main" class="info page-header"></div>

[] 号可以生成自定义属性，比如，form[novalidate action="#" method="post"]，可以生成

<form action="#" novalidate method="post"></form>

$ 可以生成连续递增的数字，比如，div#item$*3，可以生成

<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>

如果想指定数字的长度，可以使用多个 $$，比如，ul>li.item$$$*3，可以生成

<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>

如果想调整顺序（比如降序）或者指定最小数字，可以通过 @-n 格式，比如，div.item$@-3*3，可以生成

<div class="item5"></div>
<div class="item4"></div>
<div class="item3"></div>

大蜥蜴（故作深沉）：请各位想想 @-3 在这里的作用。。。

读者：那如果我想生成 2、4、6、8、。。。可以不？

大蜥蜴：。。。呵呵哒

{} 号可以生成文本节点，比如 div{hello emmet}，可以生成

<div>hello emmet</div>

3. 隐式标签名称和随机文本生成器

在常用的上下文中，某些子元素的标签也可以不写（懒到极致是什么样子，大家感受一下）

比如， table>.row 其实等于 table>tr.row ，或者 ul>.item 等同于 ul>li.item

lorem 关键字用于生成大段的随机文本，在懒得写代码（甚至懒得复制粘贴的时候。。。）

比如，lorem，可以生成

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae accusamus voluptate debitis animi provident voluptatibus perferendis repellat, assumenda facilis voluptas autem eligendi sunt quod? Repudiandae magni natus, minus ullam adipisci.

lorem3，可以指定生成单词的个数

Lorem ipsum dolor.

lorem5*5，可以生成5段长度为5的文本

<div>Lorem ipsum dolor sit amet.</div>
<div>Iusto architecto eos necessitatibus beatae.</div>
<div>Ratione architecto, hic nostrum aut.</div>
<div>Culpa debitis minima, tempora odit.</div>
<div>Libero molestiae, magnam sed vel.</div>

大蜥蜴：小编，上面这段代码的稿费我不要了！

小编：。。。MDZZ

Fuzzy Search

最最重要的，Emmet 支持模糊查找，根据自定义的正则和算法，可以用最短的单词匹配最相似的缩略语

比如：

cc:ie6 代表

! 代表（没错你没有看错，就是一个英文的感叹号❗️）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

adr 代表

<address></address>

table+ 代表

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

等等等等，都可以在开发过程中慢慢的发现哦！

来个练习？

第一步，在空白页面中通过 ! 号生成文档结构

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

第二步，在 body 标签中编写下面的代码，然后通过 tab 键生成

(header.page-header>h1>lorem3)+(.row>.col-sm-4>(ul.list-group>li.list-group-item*16>lorem4)^.col-sm-8>.panel.panel-default>.panel-heading>lorem4^(table.table>tr*6>td*6>lorem3)+.panel-footer>lorem4)+footer.navbar-fixed-bottom.text-center>lorem6

第三步，在 </head> 前面加入样式