先来介绍一下什么是Emmet语法——就是使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。

缩写语法:

快速生成html模板：

在HBuilder空白的HTML页面 使用html:5 或者直接使用 ！在按Tab键

  1. html:5

　　将生成：

<!DOCTYPE html>
<html lang="zh">
<head>
　　<meta charset="UTF-8" />
　　<meta name="viewport" content="width=device-width, initial-scale=1.0" />
　　<meta http-equiv="X-UA-Compatible" content="ie=edge" />
　　<title>Document</title>
</head>
<body>
　　<!--code-->
</body>
</html>

使用元素名称生成html标签：

输入元素标签：例如 div 标签然后按下Tab键

  1. div

　　将生成：

  1. <div></div>

常见的CSS样式：

输入常用的css样式：例如：w120然后按下Tab键

  1. w120

　　将生成：

  1. width: 120px;

定义class 和 ID：

输入 标签名 .class名：例如：我要生成一个div class名为header的标签 div.header按下Tab

  1. div.header

　　将生成：

  1. <div class="header"></div>

嵌套：嵌套运算符用于在生成的树中定位缩写元素：是否应将其放置在context元素的内部或附近(摘自Emmet文档)。

子：> 使用运算符将元素嵌套在彼此内 例如：div>ul>li>a 按下Tab

  1. div>ul>li>a

　　将生成：

  1. <div>
  2. 　　<ul>
  3. 　　　　<li><a href=""></a></li>
  4. 　　</ul>
  5. </div>

兄弟：+   生成同级关系的元素 例如:div+p+span按下Tab标签

  1. div+p+span

　　将生成：

  1. <div></div>
  2. <p></p>
  3. <span></span>

生成重复的元素：* 使用 * 可以生成重复的元素 例如：li*10按下Tab标签

  1. li*10

　　将生成：

  1. <li></li>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. <li></li>
  9. <li></li>
  10. <li></li>

文本： 使用 { } 把想要写的文本放入里面 例如：a{ 山不在高有仙则名 }按下Tab

  1. a{山不在高有仙则名}

　　将生成：

  1. <a href="">山不在高有仙则名</a>

组合：使用括号()内容对复杂缩写中的子树进行分组 例如：

  1. div>(header>ul>li*2)+footer

　　将生成：

<div>
　　<header>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　</ul>
　　</header>
<footer></footer>

</div>

常用的ement语法的更多相关文章

  1. linux下常用语言的语法检查插件整理

    linux下常用语言的语法检查插件 可以结合vim语法检查插件syntastic使用,具体请参考syntastic使用说明 如php,sql,json,css,js,html,shell,c等语法插件 ...

  2. Freemaker FTL指令常用标签及语法

    https://blog.csdn.net/pengpengpeng85/article/details/52070602 FTL指令常用标签及语法 注意:使用freemaker,要求所有标签必须闭合 ...

  3. re 模块 常用正则表达式符号 最常用的匹配语法

      常用正则表达式符号1 '.'     默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^'     匹配字符开头,若指定flags MULTILINE, ...

  4. update中加入select最常用的update语法

    update中加入select最常用的update语法 (转) (2010-08-20 11:40:16) 转载▼ 标签: it 分类: SQL 最常用的update语法是:UPDATE <ta ...

  5. 【知识库】-数据库_MySQL常用SQL语句语法大全示例

    简书作者:seay 文章出处: 关系数据库常用SQL语句语法大全 Learn [已经过测试校验] 一.创建数据库 二.创建表 三.删除表 四.清空表 五.修改表 六.SQL查询语句 七.SQL插入语句 ...

  6. FTL指令常用标签及语法

    FTL指令常用标签及语法注意:使用freemaker,要求所有标签必须闭合,否则会导致freemaker无法解析. freemaker注释:<#-- 注释内容 -->格式部分,不会输出 - ...

  7. grep,awk和sed的常用命令和语法

    Grep的常用命令语法 1. 双引号引用和单引号引用在g r e p命令中输入字符串参数时,最好将其用双引号括起来.例如:“m y s t r i n g”.这样做有两个原因,一是以防被误解为 s h ...

  8. Wireshark常用快捷键&&过滤器语法

    目录 一.快捷键 二.过滤器语法 1.捕获过滤器的BPF(Berkeley Packet Filter)语法 2.显示过滤器 一.快捷键 Ctrl+M 标记/取消标记 shift+ctrl+N/B 下 ...

  9. 常用CSS缩写语法总结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩 ...

随机推荐

  1. Cinder服务使用

    Cinder环境 Cinder配置 重新创建卷组cinder-volumes [root@openstack centos]# vgremove cinder-volumes Configuratio ...

  2. cogs 421. HH的项链

    421. HH的项链 http://218.28.19.228/cogs/problem/problem.php?pid=421 ★★★   输入文件:diff.in   输出文件:diff.out  ...

  3. 剑指Offer的学习笔记（C#篇）-- 二进制中1的个数

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 一 . 解题思路 新颖的解法,使得该题目运用到了二进制的位运算符.先了解一下位运算符! 此题便很好的发挥了位运算符& ...

  4. java之代理 静态代理和动态代理

    一.静态代理     1. 代理有很多种,有虚拟代理,保护代理,智能引用代理,和远程代理; 开发中最常用的是只能引用代理       2. 代理的模式有两种,分别是: 静态代理 代理对象,被代理对象在 ...

  5. C.One Piece

    链接:https://ac.nowcoder.com/acm/contest/908/C 题意: Luffy once saw a particularly delicious food, but h ...

  6. php：比较两个txt文件，格式如下，分别取出a.txt有的b.txt没有的，b.txt有的a.txt没有的及两个都有的

    <?php /*比较两个txt文件,格式如下,分别取出a.txt有的b.txt没有的,b.txt有的a.txt没有的及两个都有的 * a.txt: * A * B * C * D * b.txt ...

  7. 前端js编码

    1.首先是encodeURI和encodeURIComponent: 从名字可以清晰的看出他两都是主要用于url编码的,那之间有什么区别呢?唯一区别就是编码的字符范围,其中 encodeURI方法不会 ...

  8. 事务的隔离级别和mysql事务隔离级别修改

    A事务做了操作 没有提交 对B事务来说 就等于没做 获取的都是之前的数据 但是 在A事务中查询的话 查到的都是操作之后的数据 没有提交的数据只有自己看得到,并没有update到数据库. 查看InnoD ...

  9. nodejs 实践：express 最佳实践(五) connect解析

    nodejs 实践:express 最佳实践(五) connect解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需 ...

  10. It is not the destination so much as the journey, they say.

    It is not the destination so much as the journey, they say. 人家说目的地不重要,重要的是旅行的过程.<加勒比海盗>