快速编写html标签,前端开发快速编写HTML结构标签之Emmet表达式

原标题：前端开发快速编写HTML结构标签之Emmet表达式

来源：升学就业帮讲师——肖云锐

1. 概述

缩写是Emmet工具箱的核心：这些特殊表达式在运行时进行解析，并转换为结构化代码块，例如HTML。该缩写的语法看起来像CSS选择器，带有一些特定于代码生成的扩展名。因此，每个Web开发人员都已经知道如何使用它。

这是一个例子：这个缩写

可以转化为：

只需一个按键。在许多编辑器(例如Eclipse，Sublime Text 2，Espresso等)中，插件还会生成适当的标签结束标记，因此您可以使用Tab键快速在生成的代码的重要位置之间移动。

缩写针对(但不限于)HTML和XML生成进行了优化，并使编写繁琐的标记代码变得轻而易举。

2. 语法

2.1 缩写语法

Emmet使用类似于CSS选择器的语法来描述元素在生成的树中的位置和元素的属性。

2.2 元素

您可以使用元素的名字，如div或p以生成 HTML标签。Emmet没有一组预定义的可用标签名称，您可以编写任何单词并将其转换为标签：div→

等。

2.3 嵌套运算符

嵌套运算符用于将缩写元素放置在生成的树内：是将其放置在上下文元素内部或者附近。

子元素: >

你可以使用 > 运算符来实现在每一个元素中嵌套内置元素

输出:

兄弟紧邻： +

使用 + 运算符来将元素放置在同一个级别的其他元素的紧邻位置

输出：

父元素: ^

输出：

使用^运算符，您可以向上爬树并更改上下文，其中应显示以下元素：

输出：

您可以使用任意数量的^运算符，每个运算符将上移一个级别：

输出：

乘法： *

使用*运算符，您可以定义元素应输出多少次：

输出：

分组： ()

Emmets的高级用户使用括号将复杂缩写的子树分组：

输出：

如果使用浏览器的DOM，则可以将组视为文档片段：每个组均包含缩写子树，并且以下所有与第一个元素相同的元素都插入到该组中。

您可以将组彼此嵌套，并使用乘法*运算符将它们组合：

输出：

使用组，您可以使用一个缩写字面意义写完整的页面标记，但是请不要这样 做。

2.4 属性运算符

属性运算符用于修改输出元素的属性。例如，在HTML和XML中，您可以快速将class属性添加到生成的元素。

2.4.1 ID和CLASS

在CSS中，您可以使用elem#id和elem.class表示法来访问具有指定id或class属性的元素。在Emmet中，可以使用完全相同的语法将这些属性添加到指定的元素：

输出:

2.4.2 自定义属性

您可以使用[attr]符号(如CSS中一样)向元素添加自定义属性：

输出:

注意:

1. 您可以在方括号内放置任意数量的属性。

2. 您不必指定属性值：td[colspan title]会

在每个空属性内使用制表符产生(如果您的编辑器支持它们)。

3. 您可以使用单引号或双引号来引用属性值。

4. 如果值不包含空格，则无需引用它们：td[title=hello colspan=3]可以。

2.4.3 项目编号： $

随着乘法*运算符可以重复的元素，但是$你可以编号它们。将$运算符放在元素名称，属性名称或属性值内，以输出当前重复元素的数量：

输出:

您可以$连续使用多个以零填充数字：

输出:

2.4.4 更改编号基础和方向

使用@修饰符，您可以更改编号方向(升序或降序)和基数(例如起始值)。

例如，要更改方向，请在$之后添加@-：

输出:

要更改计数器的基本值，请在$之后添加@N修饰符：

输出:

您可以将这些修饰符一起使用：

输出:

2.4.5 文本： {}

您可以使用花括号将文本添加到元素：

输出:

请注意：{text}被当做一个独立的元素(例如div,p等等)来解析和使用，但是当写在元素的右边的时候有一个特殊的含义，举个例子：a{click}和a>{click}将产生同样的输出结果，但是a{click}+b{here}和a>{click}+b{here}将会产生不同的结果，如下所示:

在后面第二个例子中，标签放置在元素的里面，这就是两种情况的不同之处：当{text}写在元素的右边是不会更改父级上下文，这里有一个更复杂的例子来显示为什么这点很重要:

输出：

在这个例子中，要编写Click here to continue 到

元素的内部，我们必须使用>运算符将文本移动到树形结构p标签的里面，但是对于a元素来说，我们不能这么做，因为我们只需要带有here文本的元素，而不修改父级上下文。

为了进行比较，这是不带子运算符>的相同emmet缩写：

输出：

2.5 缩写格式注意事项

当您熟悉Emmet的缩写语法时，您可能希望使用某种格式来使您的缩写更具可读性。例如，在元素和运算符之间使用空格，如下所示：

但这是行不通的，因为空格是Emmet停止缩写解析的停止符号。

许多用户错误地认为，每个缩写都应该用新行写成，但是他们是错误的：您可以在文本的任何位置键入和扩展缩写：

使用心得:

1.emmet缩写不是模板语言，它们不一定需要具备“可读”性，更重要的是具备“可快速扩展和删除”的功能。

2.您实际上不需要编写复杂的缩写。不要再去想着手写一些HTML结构是Web开发中最慢的过程。您会很快发现，构造一个单独的复杂的缩写比构造和键入一些简短的缩写要慢得多并且容易出错。

3. 隐式标签名称

即使使用功能强大的缩写引擎(可以从短缩写扩展大型HTML结构)，编写标签名称也可能非常繁琐。

在许多情况下，您可以跳过键入标签名称的操作，而Emmet会根据上下文选择对应的标签来代替。例如，div.content您可以简单地将.content其编写并扩展为

执行原理：扩展缩写词时，Emmet会尝试在其内部扩展缩写词的地方获取父级上下文，例如HTML元素。如果成功捕获了上下文，Emmet将使用其名称来解析隐式名称，解析规则如下:

1. 如果父级是块级元素，则默认隐式标签是div

2. 如果父级是行内元素，则默认隐式标签是span

3. 如果父级是特殊层级元素，则默认隐式标签是对应父级的子元素，例如:

li为ul和ol

tr为table，tbody，thead和tfoot

td 对于 tr

option为select和optgroup

看一下带有隐式和显式标记名的一些缩写等效项：

4."Lorem Ipsum"生成器

许多Web开发人员都使用“ Lorem ipsum”伪文本来测试其HTML模板与真实数据的外观。开发人员通常会使用第三方服务来生成“ Lorem ipsum”文本，但是现在您可以在编辑器中直接进行操作。只需展开lorem或lipsum缩写即可获得以下代码段：

lorem不仅仅是一个正常的代码片段，它实际上是一个generator。每次扩展它时，它都会生成一个30个单词的虚拟文本，并分成几个句子。

您可以在缩写中指定应生成多少个单词。例如，lorem100将生成一个100字的伪文本。

重复"Lorem ipsum"

您可以lorem在重复元素中使用生成器来创建完全随机句子填充的标签。例如，p*4>lorem缩写将生成如下内容：

此外，当元素是自重复元素时，lorem生成器会使用隐式标签名称解析器，lorem因此您可以缩短缩写：

输出:

责任编辑：