前端利器Emmet
前端利器Emmet
Emmet可以通过缩写生成代码片段,可以提升前端开发的效率。使用方法就是输入HTML或者CSS的缩写,然后按tab键自动生成。原文在这里
后代 >
<!-- nav>ul>li -->
<nav>
<ul>
<li></li>
</ul>
</nav>
兄弟 +
<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>
上级 ^
<!-- div+div>p>span+em^bq -->
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
分组 ()
<!-- div>(header>ul>li*2>a)+footer>p -->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
乘法 *
<!-- ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
自增符号 $
<!-- h$[title=item$]{Header$}*3 -->
<h1 title="item1">Header1</h1>
<h2 title="item2">Header2</h2>
<h3 title="item3">Header3</h3>
ID和类属性 # .
<!-- #header -->
<div id="header"></div>
<!-- .title -->
<div class="title"></div>
<!-- form#search.wide -->
<form action="" id="search" class="wide"></form>
自定义属性 []
<!-- td[rowspan=2 colspan=3] -->
<td roespan="2" colspan="3"></td>
文本 {}
a{Click me}
<a href="">Click me</a>
隐式(自动)标签
<!-- .class -->
<div class="class"></div>
<!-- em>.class -->
<em><span class="class"></span></em>
<!-- ul>.class -->
<ul>
<li class="class"></li>
</ul>
<!-- table>.row>.col -->
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
常用HTML
<!-- ! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<!-- a -->
<a href=""></a>
<!-- link -->
<link rel="stylesheet" href="">
<!-- form:get -->
<form action="" method="get"></form>
<!-- form:post -->
<form action="" method="post"></form>
前端利器Emmet的更多相关文章
- Web 前端利器Emmet 的HTML用法总结
在tutsplus那里看到一篇文章介绍Emmet 的用法,形象的gif图片一目了然,本来想翻译过来的(虽然翻译用法倒不是很难),但搜索发现已经有国人翻译过了,遂直接拿来转载在这里. Emmet 简介 ...
- sublime3的安装和注册,和前端利器emmet插件的安装。
1.下载sublime3,在网上搜索sublime3,在官网下载即可. 2.下载后安装,直接下一步下一步即可安装. 3.注册. 在help菜单中,enter license里面输入 —– BEGIN ...
- [转]前端利器:SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
- 前端开发利器 Emmet 介绍与基础语法教程
在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...
- 前端开发 - Emmet使用手册
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很 ...
- ATOM基础教程一使用前端插件emmet(16)
emmet简介 http://blog.csdn.net/zsl10/article/details/51956791 emmet的前身是Zen coding,从事Web前端开发的工程师对该插件并不陌 ...
- 常见开发需求之前端利器webstorm中的git和快捷键
需求 前端开发中我们最常用的一般是webstorm.hbuilder和sublime,因为以前使用过一段时间eclipse所以我对webstorm的感觉比较良好,再加上以前使用hbuilder维护 ...
- 前端利器---Bootstrap
看着那么多大神在博客上都有自己的心得和分享,我虽然工作不久,但也想做一下自己的笔记起码对自己是一次积累和锻炼的过程.所以心血来潮今天就注册了博客. 我今天想说一下Bootstrap,学前台的大概对Bo ...
- 前端利器:SASS基础与Compass入门
SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...
随机推荐
- Caused by: java.net.ConnectException: Connection refused/Caused by: java.lang.RuntimeException: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
1.使用sqoop技术将mysql的数据导入到Hive出现的错误如下所示: 第一次使用命令如下所示: [hadoop@slaver1 sqoop--cdh5.3.6]$ bin/sqoop impor ...
- BootStrap标题制作模板
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8&q ...
- golang 请求带验证信息的坑
最近用golang 和python对接接口,由于之前验证那块没有设置好,然后又为了进度,最近决定用http自带的basic 验证, php的代码很快就验证通过了 /** * @param $url * ...
- UE4 UPROPERTY UFUNCTION
http://blog.csdn.net/sinat_27456831/article/details/52800514
- [转] git rm与git rm --cached
当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用 git rm file_path 当我们需要删除暂存区或分支上的文件, 但本地又需要使用, 只是不希望这个文件被版本控制 ...
- MySQL 存储过程中分页
MySQL数据库中,自定义存储过程查询表中的数据,带有分页功能.具体实例如下代码: 1 DROP PROCEDURE IF EXISTS `sampledb`.`proc_GetPagedDataSe ...
- Flink--sink到kafka
package com.flink.DataStream import java.util.Properties import org.apache.flink.api.common.serializ ...
- yum安装的时候报错,关于python的函数库
我在执行yum -y install nc命令的时候出现如下报错 There was a problem importing one of the Python modulesrequired to ...
- websocket/dwebsocket 实现前后端的实时通信
1. 用bottle框架,自己写一个服务端实现: 转载 :http://www.linuxyw.com/813.html 功能:用websocket技术,在运维工具的浏览器上实时显示远程服务器上 ...
- HDFS-HA高可用 | Yarn-HA
HDFS-HA HA(High Available),即高可用(7*24小时不中断服务) 单点故障即有一台机器挂了导致全部都挂了:HA就是解决单点故障,就是针对NameNode: 主Active:读写 ...