emmet常用语法

开启emmet

在vscode中开启emmet，在settings.json文件中添加

//显式弹出语法展开提示
  "emmet.showSuggestionsAsSnippets": true,
  //将语法展开提示在提示列表中置顶
  "editor.snippetSuggestions": "top",
  //emmet只显示标记语言和样式表的展开提示
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  //emmet能识别缩写语法的场景
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "jade"
  }

---

emmet语法

嵌套运算符

子> eg:div>ul>li

兄弟+ eg:div>ul+span

上升^ eg:div>ul>li^^div>span 提升后接元素的层级

重复* eg:ul>li*5

分组() eg:div>(div>span)+div

属性运算符

id为# class为. eg div#top.red.yellow

自定义属性 [attr] eg: input[value="100" type="submit"]

为生成的多个元素的属性编号 $ eg:ul>li.item$5

标签内置文本{} eg:span{我好喜欢你}

我好喜欢你