实例
昨晚有同学问我代码为什么写的那快，因为我使用前端开发神器: Emmet 插件，phpsotrm原生内置，现将基本语法分享，大家可复制到编辑器中学习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emmet插件的使用方法</title>
</head>
<body>
<!--
1.为什么要学它?几乎所有主流编辑器都支持
2.它能干什么?快速生成HTML代码结构
-->
<!-- 1.html:5:快速生成html5文档结构,简写: ! -->
<!-- 2.快速生成多个同类型的标签: * -->
<!-- p*5 -->
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<!-- 3.生成带有id和class属性的标签, -->
<!-- div.red -->
<div class="red"></div>
<!-- div#menu -->
<div id="menu"></div>
<!-- div.red#menu -->
<div class="red" id="menu"></div>
<!-- 如果省略标签默认为div -->
<!-- .red#menu -->
<div class="red" id="menu"></div>
<!-- 4.生成带属性的标签:[属性列表] -->
<!-- a[href="[图片]http://php.cn" target="_blank"] -->
<a href="[图片]http://php.cn" target="_blank"></a>
<!-- 5.生成带有文本内容的标签: {内容} -->
<!-- a[href="[图片]http://php.cn" target="_blank"]{php中文网} -->
<a href="[图片]http://php.cn" target="_blank">php中文网</a>
<!-- 6.生成父子结构的标签: > -->
<!-- ul.list>li*5>a{公司新闻} -->
<ul class="list">
<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>
<!-- 7.生成兄弟标签: + -->
<!-- .content>h3{重要通知}+p{从明天开始全体加班到月底} -->
<div class="content">
<h3>重要通知</h3>
<p>从明天开始全体加班到月底</p>
</div>
<!-- 8.自增自减: $,$$,@-n -->
<!-- 一个$:从1开始 -->
<!-- ul>li{$}*5 按Tab键即可-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!-- 二个$$从01开始,自动在前面加前导0 -->
<!-- ul>li{$$}*5 -->
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
<!-- 默认是从1/01开始编号,如果想指定起始序号,怎么办呢?使用@
例如,指定从0开始 -->
<!-- ul>li{$@0}*5 -->
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 如果想倒序排列,怎么办？@-
ul>li{$@-}*5 -->
<ul>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
<!-- 9.分组生成: () -->
<!-- table[border="1" cellspace="0"]>(caption{表格标题}+tr>th{表头}*6)+tr*5>td{$}*6 -->
<table border="1" cellspace="0">
<caption>表格标题</caption>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例