emmet å¾niceçå端æ件ï¼å®è£ å使ç¨è¯¦è§£ï¼
emmetçå®è£
emmetæ¯ä¸æ¬¾å¯ä»¥å¿«éç¼åHTMLåcssçæ件ï¼ä¸é¢å
æ¥ä»ç»å¦ä½å®è£
è¿ä¸ªæ件ãå 为æ¯ä¸ªäººä½¿ç¨çç¼è¾å¨ä¸åï¼æ以æ¹æ³ä¹ä¸ä¸æ ·ï¼æ使ç¨çwebstormï¼æå°±é对webstormæ¥è¯´ã使ç¨å
¶ä»ç¼è¾å¨çåå¦å¯ä»¥æå¼emmetå®ç½ç¹å»downloadï¼éæ©èªå·±å¨ä½¿ç¨æ¯ç¼è¾å¨æ¥è¿è¡ç¸åºçå®è£
ã
webstormä¸ï¼å¯ä»¥ç´æ¥æç´¢emmetç¶åå®è£
å³å¯ï¼setting->plugins,
æ¾ä¸å°çåå¦å¯ä»¥Search in respositories
å®è£
好ä¹åï¼éæ°å¯å¨ä¸æ¬¡webstormå°±å¯ä»¥å¼å§ä½¿ç¨äºã
htmlï¼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>emmetç使ç¨æ¹æ³</title>
</head>
<body>
<!--å
ç´ å+tab å¯ä»¥ç´æ¥ç产ä¸ä¸ªå®æ´çæ ç¾-->
<!--div+tab-->
<div></div>
<!--btn -> <button></button>-->
<!--å
ç´ å+.ç±»å å
ç´ å+#.ID å建带æç±»å|idçæ ç¾ ,ä¸å å
ç´ åä¼é»è®¤ä¸ºdiv-->
<!--div.myDiv-->
<div class="myDiv"></div>
<!--å¾æ ç¾éæ·»å å
容-->
<!--h1{è¿æ¯æ ç¾çå
容}-->
<h1>è¿æ¯æ ç¾çå
容</h1>
<!--æ ç¾çåµå¥-->
<!--div>ui>li>a{111}-->
<div>
<ui>
<li><a href="">111</a></li>
</ui>
</div>
<!--å¤ä¸ªåå
ç´ åå
容-->
<!--ul>li*3>a{item}-->
<ul>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</ul>
<!--让å
容å åºå·-->
<!--ul>li*5>{item$}-->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<!--ç¸åå±çº§-->
<!--div+div-->
<div></div>
<div></div>
<!--æç»çç»æ-->
<!--div.container>(header>ul>li*5>a)+div.content+footer>p{2019}-->
<div class="container">
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<div class="content"></div>
<footer>
<p>2019</p>
</footer>
</div>
<!--æ·»å å±æ§-->
<!--a[href="https://www.baidu.com"]-->
<a href="https://www.baidu.com"></a>
<!--form-->
<!--form:post-->
<form action="" method="post"></form>
<!--input-->
<!--inp-->
<input type="text" name="" id="">
<!--input:s-->
<input type="submit" value="">
<!--ç»åæ ç¾-->
<!--select+-->
<select name="" id="">
<option value=""></option>
</select>
<!--table+-->
<table>
<tr>
<td></td>
</tr>
</table>
<!--å
ç½®ç»æ ! -->
<!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>
</body>
</html>
<!--html:5-->
<!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>
</body>
</html>
<!--lorem åé¢å¯ä»¥å 个æ°-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At corporis excepturi,
exercitationem illum in itaque magni officiis perferendis repellendus totam?
Aut autem hic in iusto magnam natus quo saepe ut.
</body>
</html>
css:
#app{
/*c:#000*/
color: #000000;
/*position* p:é¦åæ¯/
/*p:s*/
position: static;
/*float*/
/*fl:r*/
float: right;
/*fl:n*/
float: none;
/*overflow*/
/*ov*/
overflow: hidden;
/*margin*/
/*m*/
margin: ;
/*mt*/
margin-top: ;
/*padding åmargin类似*/
/*sizing*/
/*w:100*/
width: 100px;
/*h:a*/
height: auto;
/*border*/
/*bd*/
border: ;
/*bdr:2*/
border-right: 2px;
/*list*/
list-style-type: ;
/*text align*/
/*ta*/
text-align: left;
/*text-decoration*/
text-decoration: ;
/*td:n*/
text-decoration: none;
/*td:u*/
text-decoration: underline;
/*font*/
/*ff:s*/
font-family: serif;
/*ff:ss*/
font-family: sans-serif;
/*fw*/
font-weight: ;
/*fw:b*/
font-weight: bold;
/*import*/
/*!*/
!important;
/*ç»å*/
/*p50+m20+fw:b */
padding: 50 px;
margin: 20px;
font-weight: bold;
}
æçæ»ç»å°±æ¯ä»¥ä¸è¿äºï¼å¦æé误请åä½çº æ£ã