Skip to content

Instantly share code, notes, and snippets.

@yue4u

yue4u/syntax.html

Created September 15, 2018 07:49
Show Gist options
  • Save yue4u/c15139f1d8bf92c4b10de48f6e653169 to your computer and use it in GitHub Desktop.
Save yue4u/c15139f1d8bf92c4b10de48f6e653169 to your computer and use it in GitHub Desktop.
Download ZIP
test emmet
Raw
syntax.html
<!-- ! -->
<!DOCTYPE html>
<html lang="en">
<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>
</body>
</html>
<!-- nav>ul>li -->
<nav>
<ul>
<li></li>
</ul>
</nav>
<!-- + -->
<!-- div+img+img+p -->
<div></div>
<img src="" alt=""><img src="" alt="">
<p></p>
<!-- ^ -->
<!-- div>ul>li^img -->
<div>
<ul>
<li></li>
</ul>
<img src="" alt="">
</div>
<!-- div>section>div>ul>li^img^^img -->
<div>
<section>
<div>
<ul>
<li></li>
</ul>
<img src="" alt="">
</div>
</section>
<img src="" alt="">
</div>
<!-- () -->
<!-- table>(tr>td+td)*6 -->
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!-- .class -->
<!-- ul>li.list-item$*5 -->
<ul>
<li class="list-item1"></li>
<li class="list-item2"></li>
<li class="list-item3"></li>
<li class="list-item4"></li>
<li class="list-item5"></li>
</ul>
<!-- div>img.img-$$$$*9 -->
<div>
<img src="" alt="" class="img-0001">
<img src="" alt="" class="img-0002">
<img src="" alt="" class="img-0003">
<img src="" alt="" class="img-0004">
<img src="" alt="" class="img-0005">
<img src="" alt="" class="img-0006">
<img src="" alt="" class="img-0007">
<img src="" alt="" class="img-0008">
<img src="" alt="" class="img-0009">
</div>
<!-- [] {} -->
<!-- article>p[id='p-$']{line-$}*5 -->
<article>
<p id="p-1">line-1</p>
<p id="p-2">line-2</p>
<p id="p-3">line-3</p>
<p id="p-4">line-4</p>
<p id="p-5">line-5</p>
</article>
<!-- article>p.p-$@99{line-$@-}*5 -->
<article>
<p class="p-99">line-5</p>
<p class="p-100">line-4</p>
<p class="p-101">line-3</p>
<p class="p-102">line-2</p>
<p class="p-103">line-1</p>
</article>
<!-- #header -->
<div id="header"></div>
<!-- .imgarea -->
<div class="imgarea"></div>
<!-- input:p#password.input.box.left -->
<input type="password" name="" id="password" class="input box left">
<!-- {} -->
<!-- p{emmet}>span.red{is}+strong{great}+{!} -->
<p>
emmet
<span class="red">is</span>
<strong>great</strong>
!
</p>
<!-- ul>.item$@2*6 -->
<ul>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
<!-- table>.row>.cell -->
<table>
<tr class="row">
<td class="cell"></td>
</tr>
</table>
<!-- a:link -->
<a href="http://"></a>
<!-- link -->
<link rel="stylesheet" href="">
<!-- img:sizes -->
<img src="" alt="" sizes="" srcset="">
<!-- bq -->
<blockquote></blockquote>
<!-- adr -->
<address></address>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment