常用的 Emmet 语法

基本语法

• !：生成 HTML5 文档结构
• html:lang(en) > head > meta[charset=utf-8] + title{My awesome website} + script[src=js/main.js]：生成带有语言和字符集声明、标题和 JavaScript 引用的基本文档结构

标签和类名

• div：生成 <div></div> 标签
• .class：生成带有 class 属性的标签，如 <div class="class"></div>
• p#id：生成带有 id 属性的标签，如 <p id="id"></p>
• a.class：生成带有 class 属性的链接，如 <a href="" class="class"></a>

子元素和兄弟元素

• ul>li：生成 ul 下包含多个 li 的结构
• ul>li*5：生成 ul 下包含 5 个 li 的结构
• ul>li.item$*5：生成 ul 下包含 5 个带有不同序号的 li 的结构，如 <li class="item1"></li>、<li class="item2"></li>
• ul>li.item$@-*5：生成 ul 下包含 5 个倒序带有不同序号的 li 的结构，如 <li class="item5"></li>、<li class="item4"></li>
• div+p+bq：生成 div、p 和 blockquote 三个相邻的元素
• div>p>bq：生成 div 下嵌套 p 和 blockquote 的结构
• div>(p>span)+bq：生成 div 下嵌套一个带有 span 的 p 和一个 blockquote 的结构

父元素和组合选择器

• form+input：生成 form 和 input 的结构
• form>input：生成嵌套在 form 中的 input
• form>#email：生成 form 下 id 为 email 的元素
• form>.email：生成 form 下 class 为 email 的元素
• #header>h1.logo+nav>ul>li*3>a：生成类似导航栏的结构

属性和值

• a[href='#']：生成带有 href 属性的链接，如 <a href="#"></a>
• input[type='text']：生成带有 type 属性的输入框，如 <input type="text">
• img[src='images/logo.png'][alt='Logo']：生成带有 src 和 alt 属性的图片，如 <img src="images/logo.png" alt="Logo">

内容和文本

• a{Click me}：生成带有文本内容的链接，如 <a href="">Click me</a>
• a>{Click }+strong{me}：生成带有文本内容和加粗样式的链接，如 <a href="">Click <strong>me</strong></a>
• p>{Lorem ipsum dolor sit amet, consectetur adipisicing elit. }*5：生成 5 段占位文本
• p>{Lorem ipsum $}+em{dolor}+{ sit amet, consectetur adipisicing elit. }*4：生成带有变量和斜体字的占位文本