webstorm快捷鍵的使用
<!doctype html> <html lang="en"> <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> <!--1、生成html基本結構--> <!-- 英文狀態下的感嘆號! ==> 按tab鍵 --> <!-- 2、id用#號鍵表示，class用.號表示 --> <!--div#div1--> <div id="div1"></div> <div class="class1"></div> <!-- 3、emmet中沒有內建的標籤，所有的東西寫好我們都可以按tab鍵來生成標籤--> <!--fry--> <fry></fry> <!-- 4、emmet中如何表示層級關係 emmet的語法和css選擇器的語法很像 >：子元素 +：表示同級 ^：表示上一級 --> <div> <table></table> </div> <!--ul+div--> <ul></ul> <div></div> <!--div>div.test^ul--> <div> <divclass="test"></div> </div> <ul></ul> <!--這個^符號可以用多次，每一次的話相當於往上面爬一級--> <!--div>div>div>div^^^table--> <div> <div> <div> <div></div> </div> </div> </div> <table></table> <!--div>div>div>div^^table--> <div> <div> <div> <div></div> </div> </div> <table></table> </div> <!-- 5、Emmet中的重複 和變數 *：重複 $：變數 $符號可以寫多位，如果是兩個$$，表示從01開始， 如果是$$$，表示從001開始 --> <div></div> <div></div> <div></div> <!--div.div$*3--> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <!--div.div$$*3--> <div class="div01"></div> <div class="div02"></div> <div class="div03"></div> <!-- 6、分組：英文狀態下的括號來表示的 --> <!--(div+ul)*3--> <div></div> <ul></ul> <div></div> <ul></ul> <div></div> <ul></ul> <!--(div>dl>(dt+dd)*3)+footer>p--> <div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer> <!-- 7、屬性：[] 如果有多個屬性，多個屬性也是要寫在一箇中括號裡面的，中間用空格隔開 --> a[href='https://fanrenyi.com'] <a href="https://fanrenyi.com"></a> a[href='https://fanrenyi.com' title='fry'] <a href="https://fanrenyi.com" title="fry"></a> <a href="https://fanrenyi.com" title="fry"></a> <!-- 8、標籤裡面的文字：英文狀態下的 大括號 {} {}也是可以和$符號以及乘號配合使用 --> div{123} <div>123</div> div{我是第$$個div}*3 <div>我是第01個div</div> <div>我是第02個div</div> <div>我是第03個div</div> <!-- 9、隱式標籤 a、就是如果在最外面，如果沒有寫標籤名，預設就是div 例如.test b、子標籤預設已知的情況下 ul>.test$*3 比如ul(ol)下面只能是li table，tbody，thead，tfoot下面的tr select(optgrout)下面的option標籤 tr下面的td --> <div class="test"></div> <!--ul>.test--> <ul> <li class="test"></li> </ul> ul>.test$*3 <ul> <li class="test1"></li> <li class="test2"></li> <li class="test3"></li> </ul> <table> <tr class="test"></tr> <tr> <td class="test"></td> <td class="test"></td> <td class="test"></td> </tr> </table> <select name="" id=""> <option value="" class="test"></option> </select> </body> </html>
<!doctype html><html lang="en"><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><!--1、生成html基本結構--><!--英文狀態下的感嘆號! ==> 按tab鍵-->
<!--2、id用#號鍵表示，class用.號表示--><!--div#div1--><div id="div1"></div><div class="class1"></div>
<!--3、emmet中沒有內建的標籤，所有的東西寫好我們都可以按tab鍵來生成標籤--><!--fry--><fry></fry>
<!--4、emmet中如何表示層級關係emmet的語法和css選擇器的語法很像
>：子元素+：表示同級^：表示上一級--><div> <table></table></div><!--ul+div--><ul></ul><div></div><!--div>div.test^ul--><div> <div class="test"></div></div><ul></ul><!--這個^符號可以用多次，每一次的話相當於往上面爬一級--><!--div>div>div>div^^^table--><div> <div> <div> <div></div> </div> </div></div><table></table><!--div>div>div>div^^table--><div> <div> <div> <div></div> </div> </div> <table></table></div>
<!--5、Emmet中的重複 和變數*：重複$：變數$符號可以寫多位，如果是兩個$$，表示從01開始，如果是$$$，表示從001開始--><div></div><div></div><div></div><!--div.div$*3--><div class="div1"></div><div class="div2"></div><div class="div3"></div><!--div.div$$*3--><div class="div01"></div><div class="div02"></div><div class="div03"></div>
<!--6、分組：英文狀態下的括號來表示的--><!--(div+ul)*3--><div></div><ul></ul><div></div><ul></ul><div></div><ul></ul><!--(div>dl>(dt+dd)*3)+footer>p--><div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl></div><footer> <p></p></footer>
<!--7、屬性：[]如果有多個屬性，多個屬性也是要寫在一箇中括號裡面的，中間用空格隔開-->a[href='https://fanrenyi.com']<a href="https://fanrenyi.com"></a>a[href='https://fanrenyi.com' title='fry']<a href="https://fanrenyi.com" title="fry"></a><a href="https://fanrenyi.com" title="fry"></a>
<!--8、標籤裡面的文字：英文狀態下的 大括號 {}{}也是可以和$符號以及乘號配合使用-->div{123}<div>123</div>div{我是第$$個div}*3<div>我是第01個div</div><div>我是第02個div</div><div>我是第03個div</div>
<!--9、隱式標籤a、就是如果在最外面，如果沒有寫標籤名，預設就是div例如.testb、子標籤預設已知的情況下ul>.test$*3 比如ul(ol)下面只能是litable，tbody，thead，tfoot下面的trselect(optgrout)下面的option標籤tr下面的td--><div class="test"></div><!--ul>.test--><ul> <li class="test"></li></ul>ul>.test$*3<ul> <li class="test1"></li> <li class="test2"></li> <li class="test3"></li></ul><table> <tr class="test"></tr> <tr> <td class="test"></td> <td class="test"></td> <td class="test"></td> </tr></table><select name="" id=""> <option value="" class="test"></option></select></body></html>