码迷,mamicode.com
首页 > Web开发 > 详细

emmmet之HTML语法

时间:2019-01-07 17:47:36      阅读:657      评论:0      收藏:0      [点我收藏+]

标签:foo   img   class   oss   .com   term   使用   table   复杂   

嵌套操作

  1. 使用 “>” 生成子元素
    div>ul>li 按table键:
    技术分享图片

2.使用符号 “+” 生成兄弟元素
div+p+bq 按table键:
技术分享图片
3.使用 “^” 生成父元素,与 “>” 相反
div+div>p>span+em^bq 按table键:
技术分享图片
多个^:
div+div>p>span+em^^^bq 按table键:
技术分享图片
4.使用 “” 操作符生成多个元素
div>ul>li
5 按table键:
技术分享图片
5.使用 “()” 操作符将元素分组,实现更复杂的简写任务
div>(header>ul>li*2)+footer>p 按table键:
技术分享图片

属性操作:
1) id 与 class
元素与 id 属性值之间用 “#” 分隔,与 class 属性值之间用 “.” 分隔。
技术分享图片
2) 其他属性
使用 [attr] 标记添加其他属性。
技术分享图片
注意:

  1. 方括号中可添加任意数量的属性
  2. 不给定属性值,则属性值为""。td[colspan title]将得到
    <td colspan="" title=""></td>
  3. 属性值可用单引号或双引号,输出统一为双引号
  4. 如果属性值中没有空格,则引号可省略

    3) 为条目编号
    使用 “” 符号生成的多个元素,可用 “$” 操作符实现从1到 N 自动编号。
    li.item$
    3 按table键:
    技术分享图片

可在 “$” 后添加 “@n” 修改编号的起始值为n。
技术分享图片
可在 “$” 后添加 “@-” 修改编号的方向
技术分享图片

  1. 添加文本

使用花括号 “{}” 操作符为元素添加文本节点。
技术分享图片

emmmet之HTML语法

标签:foo   img   class   oss   .com   term   使用   table   复杂   

原文地址:http://blog.51cto.com/13577938/2339693

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!