先来介绍一下什么是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. sql中的高级编程（函数，存储过程，视图）

    一.函数:用sql写一个函数,调用这个函数,返回一张数据表table CREATE FUNCTION FunName ( ) RETURNS @TempTable table ( roleid int ...

  2. 搭建 Keras

    首先安装ipython ipython安装完成以后出现如下界面 然后安装theano 中途安装因为网络不好,造成超时而停止安装或者停滞不前,则按下Ctrl+C,停止此操作,或者关掉Anaconda P ...

  3. 模板 - 动态规划 - 数位dp

    #include<bits/stdc++.h> using namespace std; #define ll long long ]; ll dp[][/*可能需要的状态2*/];//不 ...

  4. [Xcode 实际操作]七、文件与数据-(4 )遍历文件夹中的文件

    目录:[Swift]Xcode实际操作 本文将演示如何遍历文件夹下的内容. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class V ...

  5. [Xcode 实际操作]七、文件与数据-(3)创建文本文件、属性列表文件、图片文件

    目录:[Swift]Xcode实际操作 本文将演示如何创建各种类型的文件. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class V ...

  6. Djano调试工具debug-toolbar

    Djano调试工具debug-toolbar   django-debug-toolbar 调试工具使用文档 安装 pip install django-debug-toolbar 配置 在setti ...

  7. jQuery解决ajax请求的跨域问题

    这两天工作中频繁的遇到JS的跨域问题,都通过绕开ajax请求的方式.特地百度了一下,把跨域问题解决了.在这分析一下 首先贴上js的页面代码: <html> <head> < ...

  8. python 5 条件判断

    条件判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...

  9. 重置 linux系统后要配置的基本组件操作

    1.安装jdk https://www.cnblogs.com/shihaiming/p/5809553.html 2.安装mysql 3.安装tomcat

  10. 【Java】 jar解压与压缩

    jar解压与压缩 命令格式:jar {c t x u f }[ v m e 0 M i ][-C 目录]文件名 # 解压,到当前目录 jar -xvf source.jar # 打包,不进行压缩 ja ...