zoukankan      html  css  js  c++  java
  • emmet学习笔记

    Emment语法使用:按table键的结果
    1.初始化:(HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等)
    . html:或! :用于HTML5文档类型
    . html:xt :用于XHTML过度文档类型
    . html:4s :用于HTML4严格文档类型
    2.轻松添加类、id、文本和属性
    .如p.bar#foo :<p class="bar" id="foo"></p>
    .定义HTML元素的内容和属性,输入h1{foo}和a[href=#] :
    <h1>foo</h1>
    <a href="#"></a>
    3.嵌套
    . > :子元素符号,表示嵌套的元素(p>span :<p> <span></span> </p>)
    . + :同级标签符号 (p+span :<p></p> span></span>)
    . ^ :可以使该符号前的标签提升一行(p^span :<span> <p></p> </span>)
    4.分组
    .可以通过嵌套和括号来快速生成一些代码块,如:
    (.foo>h1)+(.bar>h2) :

    <div class="foo">
    <h1></h1>
    </div>
    <div class="bar">
    <h2></h2>
    </div>
    声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。
    在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。
    5.定义多个元素
    ul>li*3 :
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    6.定义多个带属性的元素
    ul>li.item$*3
    <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    </ul>


    emmet在css中的缩写:
    w100 :100px;
    h10p+m5e :height:10%;
    margin:5em;
    单位别名列表:

    1 p 表示%
    2 e 表示 em
    3 x 表示 e

  • 相关阅读:
    19.SimLogin_case07
    19.SimLogin_case06
    19.SimLogin_case05
    19.SimLogin_case04
    19.SimLogin_case03
    闲说性能测试
    iostat命令详解
    Linux vmstat命令实战详解
    RAC集群节点故障模拟测试
    Oracle RAC功能测试
  • 原文地址:https://www.cnblogs.com/fireporsche/p/6288628.html
Copyright © 2011-2022 走看看