先来介绍一下什么是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. 原生js实现一个侧滑删除取消组件(item slide)

    组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...

  2. 在GitHub上上传项目(转载)

    今天准备在GitHub第一次上传自己的项目,发现过程并不是太简单,在网上找了一个博客,写的很详细,结合着他的讲解成功上传了自己的项目. 结合着他的步骤和自己遇到的问题,做一个梳理,以便以后使用.(原博 ...

  3. 洛谷P1602 Sramoc问题

    P1602 Sramoc问题 题目描述 话说员工们整理好了筷子之后,就准备将快餐送出了,但是一看订单,都傻眼了:订单上没有留电话号码,只写了一个sramoc(k,m)函数,这什么东西?什么意思?于是餐 ...

  4. scrapy爬取数据的基本流程及url地址拼接

    说明:初学者,整理后方便能及时完善,冗余之处请多提建议,感谢!   了解内容: Scrapy :抓取数据的爬虫框架     异步与非阻塞的区别   异步:指的是整个过程,中间如果是非阻塞的,那就是异步 ...

  5. mac for Idea配置Tomcat

    参考链接地址:http://blog.csdn.net/zsy3313422/article/details/52583091 IntelliJ使用 ##使用IntelliJ IDEA配置web项目时 ...

  6. Linux ssh 密钥对登陆设置

    SSH通过密钥连接 ssh -i ~/miyao.pem root@server_ip 密钥权限要设置为仅root用户读写 chmod 600 ~/miyao.pem 密钥可添加到系统里,以后连接可除 ...

  7. qBittorrent+Flex搭建在线视频播放网站

    BT下载工具qbittorrent(当然这里也有其他类似的工具可选如transmission等) 首先安装EPEL源: yum -y install epel-release 安装开发工具包: yum ...

  8. 《springcloud 五》springcloud stream

    什么是消息驱动? SpringCloud Stream消息驱动可以简化开发人员对消息中间件的使用复杂度,让系统开发人员更多尽力专注与核心业务逻辑的开发.SpringCloud Stream基于Spri ...

  9. QrenCode : linux命令行下生成二维码图片

    原文链接:http://wowubuntu.com/qrencode.html # 作者:riku/ / 本文采用CC BY-NC-SA 2.5协议授权,转载请注明本文链接. 对于二维码大家应该并不陌 ...

  10. HTML5:使用postMessage实现Ajax跨域请求

    HTML5:使用postMessage实现Ajax跨域请求 由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) do ...