Emment構文収集
Emmentはフロントエンドの開発に不可欠なツールとして、多くの入力作業を節約し、文法を整理します.
1.ドキュメントの初期化
html:5か!出力:
#id選択
. クラス選択
[]プロパティ
{}コンテンツ
div#test,出力:
3.ネスト
>子孫
+兄弟
^上司
ul>li、出力:
()グループ化
*乗算
$自増
$@-自己減算
$@nは数字で、nから順に
ul>(li>a)*2またはul>li*2>a、出力:
次に、ナビゲーション・ページを生成します.
(#header>.nav>ul>( li>a{トップページ/リンク$/リンク$/…})*5)+(#container>(#(.left_sidebar>.category>ul>( li> a[href="#"title="テストリンク"]{側辺欄$$})*5)+((#right_content>ul> li> a[href="#]>>>( img[alt="デフォルト"src="""""""")+span{ピクチャ記述}*12)))+#footerfooterfooterfefefefefer>(12))))+#footerfooterfefefefeoter>(###(######>ul>(li>a{詳細/連絡先/.....})*4
出力:
1.ドキュメントの初期化
html:5か!出力:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p> HTML5 </p>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<p> XHTML </p>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<p> HTML4 </p>
</body>
</html>#id選択
. クラス選択
[]プロパティ
{}コンテンツ
div#test,出力:
<div id="test"></div><div class="test"></div><a href="#"></a><a href="#"> </a>3.ネスト
>子孫
+兄弟
^上司
ul>li、出力:
<ul>
<li></li>
</ul><div>
<h1></h1>
<p></p>
</div><div>
<ul>
<li><b></b><span></span></li>
</ul>
</div>()グループ化
*乗算
$自増
$@-自己減算
$@nは数字で、nから順に
ul>(li>a)*2またはul>li*2>a、出力:
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul><ul>
<li><a href=""> 01</a></li>
<li><a href=""> 02</a></li>
<li><a href=""> 03</a></li>
</ul><ul>
<li> 3</li>
<li> 2</li>
<li> 1</li>
</ul><ul>
<li><a href=""> 10</a></li>
<li><a href=""> 11</a></li>
<li><a href=""> 12</a></li>
</ul>次に、ナビゲーション・ページを生成します.
(#header>.nav>ul>( li>a{トップページ/リンク$/リンク$/…})*5)+(#container>(#(.left_sidebar>.category>ul>( li> a[href="#"title="テストリンク"]{側辺欄$$})*5)+((#right_content>ul> li> a[href="#]>>>( img[alt="デフォルト"src="""""""")+span{ピクチャ記述}*12)))+#footerfooterfooterfefefefefer>(12))))+#footerfooterfefefefeoter>(###(######>ul>(li>a{詳細/連絡先/.....})*4
出力:
<div id="header">
<div class="nav">
<ul>
<li><a href=""> / 01/ 01/……</a></li>
<li><a href=""> / 02/ 02/……</a></li>
<li><a href=""> / 03/ 03/……</a></li>
<li><a href=""> / 04/ 04/……</a></li>
<li><a href=""> / 05/ 05/……</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="">
<div class="left_sidebar">
<div class="category">
<ul>
<li><a href="" herf="”#”" title="” ”"> 001</a></li>
<li><a href="" herf="”#”" title="” ”"> 002</a></li>
<li><a href="" herf="”#”" title="” ”"> 003</a></li>
<li><a href="" herf="”#”" title="” ”"> 004</a></li>
<li><a href="" herf="”#”" title="” ”"> 005</a></li>
</ul>
</div>
</div>
</div>
<div id="right_content">
<ul>
<li><a href="”#”">
<img src="”" alt="” ”">
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</a></li>
</ul>
</div>
</div>
<div id="footer">
<ul>
<li><a href=""> / /…..</a></li>
<li><a href=""> / /…..</a></li>
<li><a href=""> / /…..</a></li>
<li><a href=""> / /…..</a></li>
</ul>
</div>