emmet :_使用Emmet快速编写HTML Crazy Fast：交互式指南-白红宇

emmet :_使用Emmet快速编写HTML Crazy Fast：交互式指南

阅读量：2509 次

发布时间：2019-05-11

本文共 7274 字，大约阅读时间需要 24 分钟。

emmet :

什么是Emmet？ (What is Emmet?)

From the official , "Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow". Short and to the point. Emmet can increase your workflow when building sites Emmet also used to be called Zen Coding for those of you that see the syntax is familiar.

在官方，“ Emmet是许多流行的文本编辑器的插件，可以极大地改善HTML和CSS工作流程”。简明扼要。在构建站点时，Emmet可以增加您的工作流程。对于熟悉语法的人，Emmet过去也被称为Zen Coding。

试试看！ (Try It Out!)

Just go to the end of this line and press tab. Easy cheese!

只需转到此行的末尾并按tab 。简单的奶酪！

Bonus: Press tab multiple times to travel through the Emmet created HTML.

奖励：多次按tab键可浏览Emmet创建HTML。

ul.my-list>li*3>a.item$

ul.my-list> li * 3> a.item $

Emmet supports many different editors from Sublime Text (our favorite) all the way to the great online editor . We'll be focusing on using Emmet in Sublime but it should work the same way across the board.

Emmet支持许多不同的编辑器，从Sublime Text（我们最喜欢的）一直到出色的在线编辑器。我们将专注于在Sublime中使用Emmet，但是它应该以相同的方式全面工作。

如何使用Emmet (How To Use Emmet)

To see all the ways to use Emmet, you can visit that . The main ways to activate Emmet (make sure you're in an HTML syntax file):

要查看使用Emmet的所有方式，您可以访问。激活Emmet的主要方法（确保您在HTML语法文件中）：

Tab Expand: Type out your Emmet code and press tab
Tab Expand ：输入您的Emmet代码，然后按tab

Interactive Abbreviation: ctrl + alt + enter
交互式缩写 ： ctrl + alt + enter

Once you expand the code, you can press tab and move through your HTML code to all the parts that require input. This is a very fast way to move through your HTML.

扩展代码后，可以按tab键，然后在HTML代码中移动至需要输入的所有部分。这是浏览HTML的非常快速的方法。

Now that we can use Emmet and can see how fast it makes our workflow, let's test ourselves and see how fast we can build out an entire site.

现在我们可以使用Emmet并看到它使我们的工作流程有多快，让我们测试一下自己，看看我们可以多快地构建整个站点。

我们正在建设什么 (What We're Building)

We will be creating 4 different sections and each will deal with certain features of Emmet.

我们将创建4个不同的部分 ，每个部分将处理Emmet的某些功能。

Basic HTML Foundation (HTML abbreviations and custom attributes)
基本HTML基础（HTML缩写和自定义属性）

Header and Navbar (Item numbering, text, multiplication, and children)
页眉和导航栏（项目编号，文本，乘法和子级）

Jumbotron (Siblings)
巨型（兄弟姐妹）

Two Columns (Grouping)
两列（分组）

HTML (The HTML)

Normally, to create this entire page, you'd have to go through and write all the HTML yourself. While some might say this isn't really a big deal, I like to think that every millisecond saved during the development process adds up to a lot of time. After all, we're all about trying to be efficient right?

通常，要创建整个页面，您必须亲自编写所有HTML。尽管有些人可能说这并不是什么大不了的事，但我想认为在开发过程中节省的每一毫秒总计会花费很多时间。毕竟，我们都在努力提高效率，对吗？

This demo uses on .

该演示在上使用。

    Crazy Fast HTML    
    
        
         
             
      
       Crazy Fast
      
        
                  
       Menu Item 1
            
       Menu Item 2
        
      
    
     
    
         
             
      Crazy Fast HTML
        
      Faster than a lion chasing a gazelle.
        
      Learn More    
     
    
         
             
                  
                       
                        
        Lions
                
        Super fast. Especially when hungry.
            
       
        
      
        
                  
                       
                        
        Emmet
                
        Even faster. Especially in the hands of a developer.

We will break down each different section and show how easy it is to build it using Emmet with only 1 line.

我们将分解每个不同的部分，并说明使用Emmet 仅用1行即可轻松构建它。

Each section will introduce us to something new that Emmet offers us. With Emmet, we can create things like children, siblings, text, incrementing numbers, and even custom attributes.

每个部分都会向我们介绍Emmet为我们提供的新内容。借助Emmet，我们可以创建诸如孩子， 兄弟姐妹 ，文本， 递增数字甚至自定义属性之类的东西 。

用Emmet编写HTML (Writing HTML With Emmet)

HTML Starter （缩写，自定义属性） (HTML Starter (abbreviations, custom attributes))

Emmet comes with abbreviations that are very similar to snippets. Just type html:5 and press tab to start an HTML 5 document.

Emmet带有与代码片段非常相似的缩写。只需键入html:5并按tab键即可启动HTML 5文档。

试试看！ (Try It Out!)

Type html:5 and press tab.
- After <title> let's add our Bootstrap reference using: link[rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"]
输入html:5并按tab 。
- 在<title>让我们使用以下方法添加Bootstrap参考： link [rel =“ stylesheet” href =“ // netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css”]

标头和导航栏（儿童，攀岩，自定义文字，计数项目） (The Header and Navbar (children, climbing, custom text, counting items))

The cool things in this section are the ability to climb up in our HTML (^), create custom text ({}), and count items ($).

本节中最酷的事情是能够爬进我们HTML（ ^ ），创建自定义文本（ {} ）和计数项目（ $ ）。

Here is the line we use in Emmet. Just type it and press tab.

这是我们在Emmet中使用的行。只需键入它，然后按tab 。

nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Crazy Fast}^ul.nav.navbar-nav>li.menu-$*3

nav.navbar.navbar-inverse> div.navbar-header> a.navbar-brand {Crazy Fast} ^ ul.nav.navbar-nav> li.menu-$ * 3

This might seem like a lot and be tedious, but once you get the hang of the Emmet code, development can fly by pretty fast.

这看起来可能很繁琐，但是一旦掌握了Emmet代码，开发就可以很快进行了。

巨型（兄弟姐妹） (The Jumbotron (siblings))

Our main focus here will be using the siblings (+) generator. With this we can create elements side by side.

我们的主要重点是使用同级（ + ）生成器。这样，我们可以并排创建元素。

div.jumbotron.text-center>h1+p+a#go-button.btn.btn-danger

div.jumbotron.text-center> h1 + p + a＃go-button.btn.btn-danger

两列信息（分组） (Two Column Information (grouping))

Our focus in this section will be the grouping (). This allows us to create sections of code together.

在本节中，我们的重点是分组() 。这使我们可以一起创建代码段。

div.row.text-center>(div.col-sm-4>div.info-box>span.glyphicon.glyphicon-fire+h2{Lions}+p)+(div.col-sm-8>div.info-box>span.glyphicon.glyphicon-send+h2{Emmet}+p)

div.row.text-center>（div.col-sm-4> div.info-box> span.glyphicon.glyphicon-fire + h2 {Lions} + p）+（div.col-sm-8> div。信息框> span.glyphicon.glyphicon-send + h2 {Emmet} + p）

结论 (Conclusion)

Just like that, we have an entire HTML page in just 5 lines of code. If you wanted to be really fancy about it, you could even get this down to 1 line!

像这样，我们只有5行代码就拥有了整个HTML页面。如果您想真正了解它，甚至可以将其降低到1行！

奖金！ ( Bonus! )

Let's do it in 1 line.

让我们在1行中完成。

html:5>div.container>(nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Crazy Fast}+ul.nav.navbar-nav>li*2>a.menu-${Menu Item $})+(div.jumbotron.text-center>h1{Crazy Fast HTML}+p+a#go-button.btn.btn-danger{Learn More})+(div.row.text-center>(div.col-sm-4>div.info-box>span.glyphicon.glyphicon-fire+h2{Lions}+p)+(div.col-sm-8>div.info-box>span.glyphicon.glyphicon-send+h2{Emmmet}+p))

html：5> div.container>（nav.navbar.navbar-inverse> div.navbar-header> a.navbar-brand {Crazy Fast} + ul.nav.navbar-nav> li * 2> a.menu- $ {菜单项$}）+（div.jumbotron.text-center> h1 {疯狂的快速HTML} + p + a＃go-button.btn.btn-danger {了解更多}）+（div.row.text-center >（div.col-sm-4> div.info-box> span.glyphicon.glyphicon-fire + h2 {Lions} + p）+（div.col-sm-8> div.info-box> span.glyphicon .glyphicon-send + h2 {Emmmet} + p））

向前进 (Moving Forward)

This is just a taste of what Emmet has the power to do. It even has abbreviations for CSS. I would highly encourage taking a look at the to get a feel for all the great things this tool can do.

这只是Emmet所能做的事情的味道。它甚至有CSS的缩写。我强烈建议您查看，以体会此工具可以完成的所有出色工作。