HTML速写之Emmet语法规则

Emmet 使用类似于 CSS 选择器的语法来描述元素的结构与属性。

可以使用 > 运算符将元素嵌套在彼此内部

较准确的含义是： 使用 **>** 运算符，您将下降生成的树，所有兄弟元素的位置将根据最深的元素解析

表现为：

使用 + 运算符将元素以相同层级放在同一父元素上

表现为：

表现为：

表现为：

这里要注意，最多返回到跟第一个元素同级的,以上面的例子，^^ 已经返回到了最外层，跟 ^^^ 的效果是一样的

使用 ***** *** 作符，您可以定义应该输出多少次该元素，跟我们加减乘除里的乘法含义相近

表现为：

() *** 作符对复杂的子元素进行分组，简而言之，每个 () 中都是一个独立的子元素

适用于某个子元素比较复杂的情况

表现为：

可以将分组当作 Document Fragments，后续元素将与分组第一个元素同级。

分组嵌套，并且使用 * *** 作法：

表现为：

使用分组后，可以用一个缩写来生成整个页面，不过不建议这么做。 [ 1]

顾名思义，就是HTML中的属性，因为我们的页面不光有单纯的HTML，还有各式各样的属性， *** 作或者创建这些属性就需要用到属性 *** 作符了

Emmet使用类似于CSS 选择器 的语法给元素添加属性

表现为：

那我们在实际开发中可能除了常用的属性外，还会用一些自定义的属性，那如果创建呢？

您可以使用类似CSS中的符号 [attr="xxx"] 向元素添加自定义属性

表现为：

需要说明的是：

*** 作符可以生成重复元素，而 放在元素名、属性名或者属性值里

表现为：

如果想实现00x的格式，该怎么办呢？

可以连写多个$就可以生成带有前导的编号了

表现为：

那如果我想实现降序呢？

使用 @ 修饰符 ，可以改变编号的方向以及起点

理论上，应该表现为[ 2] ：

如果想改变起点，不从1开始，可以使用 @N 放在 $ 后面

表现为：

当然了，你也可以将多种修饰符混合使用[ 3]

理论上的表现：

可以使用大括号 {} 为元素添加文本，就类似于模板的插入符

表现为：

需要注意的是{text}类似于 独立元素 (例如div,p)。不过当它紧跟在元素后面时就有特殊的含义了

比如 a{click} 和 a>{click} 结果一样，而 a{click}+b{here} 和 * a>{click}+b{here}* 结果不一样

在第二个例子中的b标签是在a标签内。这就是不同点：当{text}紧跟在元素后面时，它没有改变父元素的上下文

可以再用一个比较复杂的例子来说明：

表现为：

在上面的例子里，我们为了让p标签包含Click me，所以用 > 进入子结构，因为现在的上下文已经是p标签的子结构，所以a标签也在p标签内

如果我们想让 p 和 a 在同一层级，同时两者都包含文本的话，我们应该怎么做呢？

表现为：

这样p和a都在同一层级，就满足要求咯~

以上所有的语法，都 不能出现空格 ，除非是在特定的括号中。因为Emmet在遇到空格时，就认为已经结束，会停止解析。

在设置中 搜索emmet 然后在用户设置区粘贴如下

"emmet.triggerExpansionOnTab": true,

"emmet.includeLanguages": {

"vue-html": "html",

"vue": "html"

},

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html"

}

输入 Emmet 指令(例如“table>tr*3>td*5”)，再按下 Tab 键，就可以了。 但是在默认配置下， HTML, XML, HAML, CSS, SASS/SCSS, LESS, JavaScript, Python, Ruby 文件可以直接使用“Tab”键，而在其他类型文件中使用“ctrl+e”作为快捷键

---