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

缩写语法:

快速生成html模板：

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

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键

div

　　将生成：

<div></div>

常见的CSS样式：

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

w120

　　将生成：

width: 120px;

定义class 和 ID：

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

div.header

　　将生成：

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

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

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

div>ul>li>a

　　将生成：

<div>

　　<ul>

　　　　<li><a href=""></a></li>

　　</ul>

</div>

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

div+p+span

　　将生成：

<div></div>

<p></p>

<span></span>

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

li*10

　　将生成：

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

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

a{山不在高有仙则名}

　　将生成：

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

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

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. Git 时光穿梭鸡 管理修改

    Git跟踪并管理的是修改,而非文件. 什么是修改? 比如你新增了一行,这就是一个修改, 删除了一行,也是一个修改, 更改了某些字符,也是一个修改, 删了一些又加了一些,也是一个修改, 甚至创建一个新文 ...

  2. CentOS 安装Perl环境

    参考博文:https://blog.csdn.net/weixin_40192129/article/details/78610974 vmware tools需要perl环境的支持 安装perl支持 ...

  3. 洛谷P3455 [POI2007]ZAP-Queries（莫比乌斯反演）

    传送门 设$$f(k)=\sum_{i=1}^{a}\sum_{j=1}^{b}[gcd(i,j)=k]$$ $$g(n)=\sum_{n|k}f(k)=\lfloor\frac{a}{n}\rflo ...

  4. 社交系统ThinkSNS+在研发过程中，如何做到 Laravel 配置可以网站后台配置

    什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案. 本文分享下利用 Laravel 的 Bootstrapp ...

  5. oracle merge 目标表以及源表存在重复列的问题（转）

    SQL> select * from t_source;                                                                      ...

  6. yii2.0下，JqPaginator与load实现无刷新翻页

    JqPaginator下载地址http://jqpaginator.keenwon.com/ 控制器部分: <?php namespace backend\controllers; use co ...

  7. 关于AQS——独占锁的相关方法（一）

    一.序言 Lock接口是juc包下一个非常好用的锁,其方便和强大的功能让他成为synchronized的一个很好的替代品. 我们常用的一个Lock的实现类(好像也是唯一一个只实现了Lock接口的类) ...

  8. HDU 1087 E - Super Jumping! Jumping! Jumping! DP

    http://acm.hdu.edu.cn/showproblem.php?pid=1087 设dp[i]表示去到这个位置时的最大和值.(就是以第i个为结尾的时候的最大值) 那么只要扫描一遍dp数组, ...

  9. (转)通过MySQL复制线程SQL_Thread加快增量恢复binlog

    数据回档常常是使用全量备份+binlog增量实现的.而数据量很大的情况下,增量恢复binlog一直是一个苦恼的问题,因为恢复binlog速度十分慢,并且容易出错. 恢复binlog文件一般有两种方法: ...

  10. sql server replace函数巧妙完成字符串联结

    示例一: 需求:将'1,2,3,4,5,6,7,8,9,10'转成:'1','2','3','4','5','6','7','8','9','10' ),) set @s='1,2,3,4,5,6,7 ...