html:5
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
link:css
<link rel="stylesheet" href="style.css">
script:src
<script src=""></script>
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> meta:compat <meta http-equiv="X-UA-Compatible" content="IE=7">
类样式
div.info
<div class="info"></div>
div#info
<div id="info"></div>
.info
<div class="info"></div>
#info
<div id="info"></div>
a:link
<a href="https://"></a>
a:mail
<a href="mailto:"></a>
根据标签之间的位置关系来生成标签
h1.info+p.info
<h1 class="info"></h1><p class="info"></p>
后代标签,下级标签
ul>li+li
<ul> <li></li> <li></li> </ul>
生成当前标签的父级标签
h2>span^p.info
<h2><span></span></h2><p class="info"></p>
在生成标签的时候生成里边的内容
a:link{腾讯网}
<a href="https://">腾讯网</a>
p[title='腾讯网']
<p title="腾讯网"></p> a[href='www.qq.com' ]{腾讯网} <a href="www.qq.com">腾讯网</a>
重复生成
ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
生成一个导航
ul.list>li.item*8>a:link{导航}
<ul class="list"> <li class="item"><a href="https://">导航</a></li> <li class="item"><a href="https://">导航</a></li> <li class="item"><a href="https://">导航</a></li> <li class="item"><a href="https://">导航</a></li> <li class="item"><a href="https://">导航</a></li> <li class="item"><a href="https://">导航</a></li> <li class="item"><a href="https://">导航</a></li> <li class="item"><a href="https://">导航</a></li> </ul>
带序号的导航
ul.list>li.item*8>a{导航$$}
<ul class="list"> <li class="item"><a href="">导航01</a></li> <li class="item"><a href="">导航02</a></li> <li class="item"><a href="">导航03</a></li> <li class="item"><a href="">导航04</a></li> <li class="item"><a href="">导航05</a></li> <li class="item"><a href="">导航06</a></li> <li class="item"><a href="">导航07</a></li> <li class="item"><a href="">导航08</a></li> </ul>
倒序
ul.list>li.item*8>a{导航$$@-}
<ul class="list"> <li class="item"><a href="">导航01</a></li> <li class="item"><a href="">导航00</a></li> <li class="item"><a href="">导航-1</a></li> <li class="item"><a href="">导航-2</a></li> <li class="item"><a href="">导航-3</a></li> <li class="item"><a href="">导航-4</a></li> <li class="item"><a href="">导航-5</a></li> <li class="item"><a href="">导航-6</a></li> </ul>