html 快速写法记录

写在前，嵌套（父子），并列（兄弟），上级（父级/其他级别的兄弟），属性（img的src）, 内容（文本）

---

第一例：快速添加class/id 的名字

<!-- div.home -->
<div class="home"></div>

<!-- div#home -->
<div id="home"></div>

<!-- 本例中 div可以是其他标签 -->

---

第二例：嵌套多级

<!-- div>p -->
<div>
	<p></p>
</div>

<!-- div>ul>li*3>img -->
<div>
  <ul>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
  </ul>
</div>


<!-- div>ul>li>img*2 -->
<div>
  <ul>
    <li>
        <img src="" alt="">
        <img src="" alt="">
    </li>
  </ul>
</div>

---

第三例：并列

<!-- dvi+p+ul>li -->
<dvi></dvi>
<p></p>
<ul>
  <li></li>
</ul>

---

第四例：寻找上级或上上级用  ^  ,一层用一个。两层用两个

<!-- div>ul>li*3>p>^^^span -->
<div>
  <ul>
    <li>
      <p></p>
    </li>
    <li>
      <p></p>
    </li>
    <li>
      <p></p>
    </li>
  </ul>
  <span></span>
</div>

---

第五例：添加属性用 [ ] 

<!-- ul+>img[src='a$']*3 -->

<ul>
	<li>
		<img src="a1" alt="">
		<img src="a2" alt="">
		<img src="a3" alt="">
	</li>
</ul>

---

第六例：添加信息  { }

<!-- ul>li{这是第$条消息}*3 -->

<ul>
	<li>这是第1条消息</li>
	<li>这是第2条消息</li>
	<li>这是第3条消息</li>
</ul>

<!-- 其中 $ 符是编辑用1到n （多少条） -->