Emmet的htm快捷操作方式
阿新 • • 發佈:2018-11-03
Emmet的
所有操作按下“tab”鍵即可瞬間完成
元素
1.在編輯器中輸入元素名稱,即可自動補全生成 HTML 標籤,即使不是標準的 HTML 標籤。
2.輸入:! 或者 html:5 或者 html:4s 或者 html:4t 將自動補全html基本結構
巢狀操作
1.使用“>”生成子元素
1 // 輸入 2 div>ul>li 3 // 按下TAB鍵 4 5 <div> 6 <ul> 7 <li></li> 8 </ul> 9 </div>
2.使用“+”生成兄弟元素
1 // 輸入 2 div+p+bq 3 // 按下TAB鍵 4 5 <div></div> 6 <p></p> 7 <blockquote></blockquote>
3.使用“^”生成父元素
1 // 輸入 2 div+div>p>span+em^bq 3 // 按下TAB鍵 4 5 6 <div></div> 7 <div> 8 <p><span></span><em></em></p> 9 <blockquote></blockquote> 10 </div>
4.使用“*”生成多個相同元素
1 // 輸入 2 div>ul>li*5 3 // 按下TAB鍵 4 5 6 <div> 7 <ul> 8 <li></li> 9 <li></li> 10 <li></li> 11 <li></li> 12 <li></li> 13 </ul> 14 </div>
5.使用“()”將元素分組
1 // 輸入 2 // "+" 後面的元素與括號中的第一個元素屬於兄弟關係 3 div>(header>ul>li*2)+footer>p 4 //按下TAB鍵 5 <div> 6 <header> 7 <ul> 8 <li></li> 9 <li></li> 10 </ul> 11 </header> 12 <footer> 13 <p></p> 14 </footer> 15 </div>
屬性操作
1.id與class:元素與 id 屬性值之間用 “#” 分隔,與 class 屬性值之間用 “.” 分隔
1 // 輸入 2 div#header+div.page+div#footer.class1.class2.class3 3 // 按下TAB鍵 4 <div id="header"></div> 5 <div class="page"></div> 6 <div id="footer" class="class1 class2 class3"></div>
2.使用“[]”標記其他屬性
1 // 輸入 2 td[title='hello' colspan=3] 3 // 按下TAB鍵 4 <td title="hello" colspan="3"></td>
3.用“$”符號實現1到n的自動編號(“*”實現多個元素)
1 // 輸入 2 li.item$*3 3 // 按下TAB鍵 4 <li class="item1"></li> 5 <li class="item2"></li> 6 <li class="item3"></li>
可在 “$” 後新增 “@n” 修改編號的起始值為n。
// 輸入 [email protected]*3 // 按下TAB鍵 <li class="item3"></li> <li class="item4"></li> <li class="item5"></li>
可在 “$” 後新增 “@-” 修改編號的方向。
1 // 輸入 2 [email protected]*3 3 // 按下TAB鍵 4 <li class="item5"></li> 5 <li class="item4"></li> 6 <li class="item3"></li>
4.用“{}”新增文字內容
1 // 輸入 2 a[href=me.htm]{click me} 3 // 按下TAB鍵 4 <a href="me.htm">click me</a>
更多簡寫方法不斷更新中,關注我即可獲取最新訊息哦~