登录  /  注册
博主信息
博文 48
粉丝 0
评论 0
访问量 38685
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
如何提高敲代码的速度教程
3期-Shawn的博客
原创
1681人浏览过

实例

昨晚有同学问我代码为什么写的那快,因为我使用前端开发神器: 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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学