先来介绍一下什么是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. Jmeter获取登录的token

    这是之前在公司一个实际的接口性能测试项目中,遇到的问题.现在有空总结一下.我们所做的项目一般都需要先登录,这个时候就需要把登录和所要测试的接口分为两个事务,Jmeter中即为事务控制器. 1.首先,我 ...

  2. C++ STL vector使用总结

    vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被认为是一个容器,是因为它能够像容器一样存放各种类型的对象,简单地说vect ...

  3. SPOJ IAPCR2F 【并查集】

    思路: 利用并查集/DFS都可以处理连通问题. PS:注意Find()查找值和pre[]值的区别. #include<bits/stdc++.h> using namespace std; ...

  4. 湖南集训day7

    难度:☆☆☆☆☆☆ /* 由观察可知 同种颜色的减去他的父亲值相同 我们考虑把询问的两个数分别减去小于它的最大斐波那契数. */ #include<iostream> #include&l ...

  5. angular实现表格的全选、单选、部分删除以及全部删除

    昨天自己写了一小段js,在全选的时候有点儿小坑,然后,整理了一下.今天把它贴出来,希望以后还记得. 大家也可以去github上查看或下载:https://github.com/dreamITGirl/ ...

  6. MCP|BFY|Proteome Analysis of Human Neutrophil Granulocytes From Patients With Monogenic Disease Using Data-independent Acquisition（单基因疾病患者中性粒细胞的DIA蛋白质组分析）

    文献名:Proteome Analysis of Human Neutrophil Granulocytes From Patients With Monogenic Disease Using Da ...

  7. pytest框架（四）

    测试用例setup和teardown 代码示例一 # coding=utf-8 import pytest def setup_module(): print("setup_module:整 ...

  8. C 语言实例 - 输出九九乘法口诀表

    C 语言实例 - 输出九九乘法口诀表 使用嵌套 for 循环输出九九乘法口诀表. 实例 #include<stdio.h> int main(){ //外层循环变量,控制行 ; //内层循 ...

  9. 查看java版本

    我们可以使用 -version 参数来查看当前 Java 的运行版本,命令如下:java -version 以上代码实例输出结果为: java version “1.6.0_13”Java(TM) S ...

  10. vue教程6-图表

    引入 cnpm install echarts --save #在vue项目目录下安装echarts 静态折线图 linechart.js import echarts from 'echarts' ...