Emmet(ZenCoding)略語構文

28749 ワード
css スクリプト
略語構文
Emmetでは、CSSセレクタと同様の構文を使用して、生成されたドキュメントツリー内の要素の位置とその属性を記述します.
要素
要素名(divやpなど)を使用して生成できます. HTMLタグ.Emmetには事前に定義された有効な要素名の集合がなく、任意の単語をラベルとして生成および使用できます:div → 

, foo →  など.
 
ネスト演算子
ネストされた演算子は、生成ドキュメントツリー内の要素の位置を省略形で配置します.内部に配置するか、隣接する要素になります.
サブ: >
使用可能> 演算子は、ネストされた要素を別の要素の内部に指定します.
div>ul>li

結果は次のとおりです.
<div>
  <ul>
   <li></li>
  </ul> 
</div>

兄弟: +
使用 + 演算子は、隣接する他の要素を兄弟として処理します.
div+p+bq

結果は次のとおりです.
<div></div> 
<p></p> 
<blockquote></blockquote>

上昇: ^
使用 > 演算子は、生成ツリー内の後続のすべての要素のレベルを下げ、各レベルの兄弟要素も同じ深さの要素に解析されます.
div+div>p>span+em

生成されます.
<div></div> 
<div>
  <p><span></span><em></em></p> 
</div>

使用 ^ 演算子:生成ツリー内の要素のレベルを上げ、その後の要素に影響を与えることができます.
div+div>p>span+em^bq

生成されます.
<div></div> 
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote> 
</div>

複数連続使用可能 ^ 演算子、レベルを1つずつ上げます.
div+div>p>span+em^^^bq

生成されます.
<div></div> 
<div>
  <p><span></span><em></em></p> 
</div> 
<blockquote></blockquote>

繰り返し: *
使用 * 演算子は、要素のセットを定義します.
ul>li*5

生成されます.
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li> 
</ul>

グループ化: ()
括弧は、複雑なEmmetの略語でサブツリーのセットを処理するために使用されます.
div>(header>ul>li*2>a)+footer>p

生成されます.
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer> 
</div>

ブラウザDOMと連携して作業する場合は、ドキュメントフラグメントをグループ化します.各グループにはサブツリーが含まれており、後続のすべての要素がグループの最初の要素と同じレベルに挿入されます.
グループにグループをネストして使用できます. * 演算子は次のようにバインドされます.
(div>dl>(dt+dd)*3)+footer>p

生成されます.
<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl> 
</div> 
<footer>
   <p></p> 
</footer>

グループ化を使用すると、単一の略語でページ全体のラベルを1つずつ書くことができますが、できるだけそうしないでください.
属性演算子
属性演算子は、生成された要素の属性を編集するために使用され、HTMLとXMLで生成要素をすばやく追加できます. class で行ないます.
IDとCLASS
CSSでは、 elem#id および elem.class 要素に割り当てられた注記 id または classプロパティの目的.Emmetでは、ほとんど同じ構文を使用して、指定した要素にこれらの属性を追加できます:element:
div#header+div.page+div#footer.class1.class2.class3

生成:
<div id="header"></div> 
<div class="page"></div> 
<div id="footer" class="class1 class2 class3"></div>

カスタムプロパティー
使用可能 [attr] 注記(CSSと同様)を使用して、要素にカスタム属性を追加します.
td[title="Hello world!" colspan=3]

生成されます.
<td title="Hello world!" colspan="3"></td>

四角カッコに多くのプロパティを配置できます.属性に値を指定しないことができます. td[colspan title] 生成されます  ,エディタがサポートされている場合は、tabを使用して各空のプロパティにジャンプして記入できます.
アトリビュートは、境界記号として単一引用符または二重引用符を使用できます.
属性にスペースが含まれていない場合は、td[title=hello colspan=3]で囲む必要はありません. 正しいです.
番号: $
使用 * 演算子は、 $ 番号を付けることができます.つかむ $ 要素名、属性名または属性値に配置すると、各要素に正しい番号が生成されます.
ul>li.item$*5

生成されます.
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li> 
</ul>

使用量が多い $ 先頭のゼロを入力できます.
ul>li.item$$$*5

生成されます.
<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li> 
</ul>

番号の基数と方向を変更
使用 @ ,数値の進行(昇順または降順)と基数(開始値など)を変更できます.
にある $ 後に追加 @- 数字の方向を変えます.
ul>li.item$@-*5

生成されます.
<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li> 
</ul>

にある $ 後に追加 @N番号の基数を変更する:
ul>li.item$@3*5

生成されます.
<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li> 
</ul>

これらの追加の演算子は、次のように同時に使用できます.
ul>li.item$@-3*5

生成されます.
<ul>
  <li class="item7"></li>
  <li class="item6"></li>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li> 
</ul>

テキスト: {}
カッコで要素にテキストを追加できます.
a{Click me}

生成されます.
<a href="">Click me</a>

注意、これ {text} 独立した要素として解析されます( div, p ),しかし、他の要素の後に続く場合は異なります.たとえば、 a{click} および a>{click} 同じ出力を生成しますが、 a{click}+b{here} および a>{click}+b{here} の出力が異なります.
<!-- a{click}+b{here} --> 
<a href="">click</a><b>here</b> 
<!-- a>{click}+b{here} --> 
<a href="">click<b>here</b></a>

第2の例では、  要素は  要素中.错误如下. {text} 親要素のコントローラーに影響を与えない要素の後ろに書きます。この違いの重要性を示す複雑な例を次に示します。p>{Click}+a{here}+{to continue}生成:<p>Click<a href=">>here</a>to continue</p>この例では > 演算子の明示的な Click here to continue 把水平移动到1个下, 

 虽然是要素内, a 不需要要素的内容。  のみ here 在这个评估中,父母要素的基础设施没有改变.与其相比,以下是不想拥有演算子的同样的省略语.

p{Click }+a{here}+{ to continue}
生成:<p>Click</p><a href="">>here</a>to continue省略形的注意Emmet的略语构文精通的情况下,有时想生成几个手机可以阅读的略语.如果要素和演算子之间使用空间的空间隔。(header>ul.nav>li*5)+footer,西班斯是Emmet停止简语解析的识别子,所以这个写法是错误的。多个用户认为应该把各简语写成新的行为,但在网站的任意场所,可以扩大简语.(在这里,原文用屏幕制作了一例,因为限制了博客的体例,所以不能把原文的样本放在本稿上,所以在屏幕上录画了画面。在这里,有兴趣的朋友去原文的住所进行原文。可以看例子)也就是说,如果停止解析和扩张的话,Emmet需要几个框架.复杂的略语的话,需要更容易阅读的手机.略語不是网络用语."迅速扩张可以移动"有必要.必须写复杂的略语.在web程序中"入力"是最晚的计算.构筑单词复杂的略语,比起能够进入结构和简单的略语更晚.
歯肉腫痛について
テクニック:Vimの縦編集モード