Emmet是一個快捷編寫html元素、css樣式的插件，很多主流IDE都自帶得有。 沒有的話，可以自己給IDE裝上該插件。 輸入命令後，按Tab執行。 html ! 生成html文檔基本骨架 link:css 生成引入css的<link /> link:favicon 生成設置網頁圖標的<link ...
Emmet是一個快捷編寫html元素、css樣式的插件，很多主流IDE都自帶得有。
沒有的話，可以自己給IDE裝上該插件。
輸入命令後，按Tab執行。
html
! 生成html文檔基本骨架
link:css 生成引入css的<link />
link:favicon 生成設置網頁圖標的<link />。設置的是頁面在瀏覽器標簽頁顯示的圖標，圖標是.ico文件，也可以是其它圖片文件
script:src 生成引入js腳本的<script>
元素直接輸入元素名即可，示例：
script
p
div
>是嵌套子元素：ul>li，ul>li>a
+是兄弟元素：h3+p，h3+p+div
可以搭配使用：div>h3+p
未指定數量時，預設為1，可以用*指定數量：
ul>li*5
table>tr*3>td*5 每個<tr>中都有5個<td>
不確定關係時可以加()
#設置id屬性：
div#app
.設置class屬性：
p.red
p.red.show class屬性可同時設置多個值，即class="red show"
搭配使用：
div#app.red
div#app>p.red.show
[ ]設置普通屬性：
input[name placeholder]
input[name=username placeholder=請輸入用戶名] 可以設置屬性值，值引不引都行
{ }設置標簽體內容：
p{ok}
ul>li{hello}*5
$自然數遞增：
ul>li.item$*5 class="item1"，1~5依次遞增，$相當於一個占位符，會自動替換$部分
ul>li.item$$*5 class="item01"....一個$是1位數，幾個$就是幾位數
ul>li.item$@3*5 加個@可以指定起始數字，從3開始
ul>li.item$@-*5 加@-是倒序，class="item5".....
ul>li.item$@-3*5 倒序，最後一個是3
ul>li{列表項$}*5
css
margin：
m30 margin:30px，m是margin，後面是值，不帶單位預設px
m1.5em
m20%
m20-30-20-15 margin:20px 30px 20px 15px，設置多個值時短橫分隔
mt20 margin-top:20px
padding的用法類似
很多屬性名都可以簡寫，比如bg是backgroud，bgc是backgroud-color，posi是position......
值的話像margin、padding這種屬性名是字元串、屬性值以數字開頭的能區分開，如果屬性名、值都是字元串，一般都識別不了。
