★div → <div></div>, span → <span></span>
★CSS选择器
给标签指定id选择器 div#header→<div id="header"></div>
给标签指定class选择器 div.footer→<div class="footerr"></div>
★默认元素div,div可省略
1. 父子关系：>，使用>操作符在内部相互嵌套的标签
div>ul>li
将生成：
<div>
<ul>
<li></li>
</ul>
</div>
2. 兄弟关系：+，使用+操作符将标签处于同一个层级
div+p+footer
将生成：
<div></div>
<p></p>
<footer></footer>
3. 上级关系：^，使用^操作符使标签与前一标签的父级处于相同的级别
div+div>p>span+em^bq
将生成：
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
4. 乘法：使用*操作符可以输出多个标签
div>ul>li*5
将生成：
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5. 分组：()，用()操作符进行分组，使编写的代码结构更加清晰、明了，一组标签就相当一个元素
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>
6.项目编号：当使用∗可以重复的标签，用$产生有序列表
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>
也可以使用多个$操作符用0（零）来分填充数字：001 002 ...
ul>li.item$$$*5
倒序：在$后面加 @-
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>
正序且规定起始数字：$@数字
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>
7. 文本：{}，使用花括号来添加文本元素：
a{Click me}
将生成：