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屬性可同時設定多個值，即
搭配使用：
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 ，1~5依次遞增，$相當于一個占位符，會自動替換$部分
ul>li.item$$*5 ....一個$是1位數，幾個$就是幾位數
ul>li.item$@3*5 加個@可以指定起始數字，從3開始
ul>li.item$@-*5 加@-是倒序，.....
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這種屬性名是字串、屬性值以數字開頭的能區分開，如果屬性名、值都是字串，一般都識別不了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/43690.html
標籤：Html/Css
上一篇：清除浮動clearfix
下一篇：How to Create Responsive Tables using CSS without <table> Tag