emmet学习笔记
Emment语法使用:按table键的结果
1.初始化:(HTML文档需要包含一些固定的标签,比如<html>、<head>、<body>等)
. html:或! :用于HTML5文档类型
. html:xt :用于XHTML过度文档类型
. html:4s :用于HTML4严格文档类型
2.轻松添加类、id、文本和属性
.如p.bar#foo :<p class="bar" id="foo"></p>
.定义HTML元素的内容和属性,输入h1{foo}和a[href=#] :
<h1>foo</h1>
<a href="#"></a>
3.嵌套
. > :子元素符号,表示嵌套的元素(p>span :<p> <span></span> </p>)
. + :同级标签符号 (p+span :<p></p> span></span>)
. ^ :可以使该符号前的标签提升一行(p^span :<span> <p></p> </span>)
4.分组
.可以通过嵌套和括号来快速生成一些代码块,如:
(.foo>h1)+(.bar>h2) :
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
声明一个带类的标签,只需输入div.item,就会生成<div class="item"></div>。
在过去版本中,可以省略掉div,即输入.item即可生成<div class="item"></div>。现在如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>中输入.item,就会生成<li class="item"></li>。
5.定义多个元素
ul>li*3 :
<ul>
<li></li>
<li></li>
<li></li>
</ul>
6.定义多个带属性的元素
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
emmet在css中的缩写:
w100 :width:100px;
h10p+m5e :height:10%;
margin:5em;
单位别名列表:
1 p 表示%
2 e 表示 em
3 x 表示 e
emmet学习笔记的更多相关文章
- Sublime3学习笔记
学习笔记: 学习内容:sublime 3 学习时间:2015-10-20 预计学习时长:1 hour/3 day 学习工具&资料: 官网:http://www.sublimetext.com/ ...
- 前端html与css学习笔记总结篇(超详细)
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- Android 联网监控抓包工具的制作(tcpdump的使用)
最近做一个Android联网抓包的工具 自己在网上搜索了好久 发现还是没有头绪 于是考虑在linux层上下功夫 于是采用linux的tcpdump来实现了抓包的功能 用简单的话来定义tcpdump,就 ...
- backtrack种子
下载链接:(种子文件) BT5R3-GNOME-64.torrent (md5: 8cd98b693ce542b671edecaed48ab06d) BT5R3-GNOME-32.torrent (m ...
- 原创:LoadTest系列之Local.testtings之Web Test
在录制脚本后,需要对脚本进行回放,而在Loal.testting的Web Test设置中,可以设置脚本运行的次数,以及是否考虑think time等,如下图所示: 1. 双击Solution Item ...
- HaiHongOJ 1003 God Wang
题目连接:http://oj.haihongblog.com/problem.php?id=1003 线段树维护区间最小值,并且求解下标 #include <stdio.h> #inclu ...
- 打造最强Windows Server 2012 给你比Windows 8更好的体验
每一代微软桌面操作系统推出的时候,都会同步推出相应核心的服务器操作系统,稳定性会更强哈 所以改造一下,让它保留兼容和专业的同时又有桌面操作系统的美观和便捷,多好 咳咳,让我们来看看怎么把Server ...
- git diff 差异对比
转载原文: http://fsjoy.blog.51cto.com/318484/245465/ 1. 查看当前所有的更改情况.git status 结果有3部分,changes to be comm ...
- PAT (Advanced Level) 1081. Rational Sum (20)
简单模拟题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> # ...
- javascript高级程序设计 重读系列
1.基本概念.数据类型.函数 1.1 数据类型 ECMAScript中有5种简单数据类型:Undefind,Null,Boolean,Number,String 问题:判断变量是否是空值的代码 解析: ...
- Application_Start和Application_End事件执行时间
Application_start: 第一个访问网站的用户会触发该方法. 通常会在该方法里定义一些系统变量,如聊天室的在线总人数统计,历史访问人数统计的初始化等等均可在这里定义. Applicatio ...
- (简单) POJ 3268 Silver Cow Party,Dijkstra。
Description One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to atten ...