先来介绍一下什么是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. 推荐一款让你纵横Github的读码神器

    当我们想深入了解一个开源项目的时候,通常我们有以下几种姿势: 懒汉型 通过Web的方式,逐个的点击页面寻找和查看具体的源码内容. 优点:不依赖任何工具,无须任何额外的操作 缺点:效率低下,查找文件不便 ...

  2. Find First and Last Position of Element in Sorted Array

    问题:给定一个有序数组和一个目标值,输出目标值在数组中的起始位置和终止位置,如果目标值不在数组中,则输出[-1,-1] 示例: 输入:nums = [1,2,3,5,5,7] target = 5 输 ...

  3. 洛谷P3431 [POI2005]AUT-The Bus

    P3431 [POI2005]AUT-The Bus 题目描述 The streets of Byte City form a regular, chessboardlike network - th ...

  4. IT兄弟连 Java语法教程 Java开发环境 安装JDK

    因为我们要开发Java程序,所以必须在我们的计算机中安装Sun(Oracle)公司提供给我们的JDK.目前最新版本的JDK是JDK 10,但是我们以学习JDK 8为主,所以我们要安装的版本是JDK 8 ...

  5. 道阻且长 莫失本心（我的OI之旅

    道阻且长 莫失本心      今天午睡醒来,发现自己发烧了.尽管穿的很厚,尽管今天的阳光如此明媚.身体还是由内而外地散发着冷意. 期末考已经结束了,接下来又是艰难而难忘的奥赛训练.(要到春节才能放假了 ...

  6. 查看java 版本

    执行 java -version 命令,如下图所示如果没有明确显示位数的,则说明是32位 C:\MyTools\jdk1.7.0\bin>java -version java version & ...

  7. phpstorm使用

    生成注释快捷键/**+enter 注释快捷键ctrl+/

  8. Python随笔---return与print，全局变量与局部变量

    Return是指返回一个数值,一般在函数中应用较多 Print则是指把结果打印出来,显示在屏幕上 def sum(a,b): total=a+b print('函数内:',total) return ...

  9. Angular2.0的学习（一）

    第一节课 1.Angular程序架构 2.搭建Angular开发环境 3.开发在线竞拍程序Auction的第一个版本

  10. Ubuntu18.10设置静态IP、DNS、卸载无用软件

    设置静态IP root@xueji:~# vim /etc/network/interfaces # interfaces() ) and ifdown() auto lo iface lo inet ...