emmet html缩写预览,emmet html缩写

HTML缩写

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

元素

您可以使用元素的名字，如div或p以生成 HTML标签。

Emmet没有一组预定义的可用标签名称，您可以编写任何单词并将其转换为标签：div→

等。

嵌套运算符

嵌套运算符用于将缩写元素放置在生成的树内：是否将其放置在context元素内或附近。

父子元素 >

您可以使用 > 运算符将元素相互嵌套：

div>ul>li

兄弟元素 +

使用 + 运算符将元素彼此放置在同一水平上：

div+p+bq

爬升 ^

使用^运算符，您可以将树爬上一层并更改上下文，其中应显示以下元素： div+div>p>span+em^bq

可以根据需要使用任意多个^运算符，每个运算符将上移一个级别：

乘法 *

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

ul>li*5

分组 ()

使用括号将复杂缩写的子树分组：

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

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

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

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

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

属性运算符

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

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

div#header+div.page+div#footer.class1.class2.class3

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

td[title="Hello world!" colspan=3]

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

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

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

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

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

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

您可以连续使用多个 $ 以零填充数字： ul>li.item$$$*5

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

例如，要更改方向，请在@-之后添加$： ul>li.item$@-*5

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

ul>li.item$@3*5

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

ul>li.item$@-3*5

文本 {} 您可以使用花括号将文本添加到元素： a{Click me}

Click me

请注意，它{text}是作为单独的元素(如等)使用和解析的div，p但是紧接在元素后面时具有特殊的含义。例如，a{click}和a>{click}将产生相同的输出，但是a{click}+b{here}和a>{click}+b{here}不会：

clickhere

clickhere

在第二个示例中，元素放置在元素内部。那就是区别：当{text}在元素之后立即编写时，它不会更改父上下文。这是一个更复杂的示例，显示了为什么它很重要： p>{Click }+a{here}+{ to continue}

Click here to continue

在此示例中，要写入Click here to continue内部

元素，我们必须使用>运算符after 显式地将其移至树下p，但是对于a元素而言，则不必这样做，因为我们只需要带有here单词的元素，而无需更改父上下文。

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

p{Click }+a{here}+{ to continue}

Click

here to continue

隐式生成的标签

span>.item

ul>.item

缩写注意事项

运算符左右不要使用空格

“Lorem Ipsum” 构造器

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!

Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!

Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!

Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?

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

ul.generic-list>lorem10.item*4+

• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.
• Laboriosam quaerat sapiente minima nam minus similique illum architecto et!
• Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!
• Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!